Skip to content

Commit

Permalink
deps: upgrade to react@16
Browse files Browse the repository at this point in the history
  • Loading branch information
@benjycui
benjycui committed Oct 10, 2017
1 parent e783b62 commit b321edd
Show file tree
Hide file tree
Showing 8 changed files with 170 additions and 116 deletions.
14 changes: 9 additions & 5 deletions package.json
View file
Expand Up @@ -49,6 +49,9 @@
"coverage": "jest --coverage && cat ./coverage/lcov.info | coveralls"
},
"jest": {
"setupFiles": [
"./tests/setup.js"
],
"collectCoverageFrom": [
"src/*"
],
Expand All @@ -59,14 +62,15 @@
},
"devDependencies": {
"coveralls": "^2.11.15",
"enzyme": "^2.8.0",
"enzyme-to-json": "^1.5.1",
"enzyme": "^3.0.0",
"enzyme-adapter-react-16": "^1.0.1",
"enzyme-to-json": "^3.0.0",
"jest": "^20.0.0",
"pre-commit": "1.x",
"rc-tools": "6.x",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"react-test-renderer": "^15.5.4"
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-test-renderer": "^16.0.0"
},
"pre-commit": [
"lint"
Expand Down
56 changes: 28 additions & 28 deletions tests/Range.test.js
View file
Expand Up @@ -22,13 +22,13 @@ describe('Range', () => {
const wrapper = mount(<Range value={[0, 50]} />);
expect(wrapper.state('bounds')[0]).toBe(0);
expect(wrapper.state('bounds')[1]).toBe(50);
expect(wrapper.find('.rc-slider-handle').get(0).style.cssText).toMatch(/left: 0%;/);
expect(wrapper.find('.rc-slider-handle').get(1).style.cssText).toMatch(/left: 50%;/);
expect(wrapper.find('.rc-slider-handle > .rc-slider-handle').at(0).props().style.left).toMatch('0%');
expect(wrapper.find('.rc-slider-handle > .rc-slider-handle').at(1).props().style.left).toMatch('50%');

const trackStyle = wrapper.find('.rc-slider-track').get(0).style.cssText;
expect(trackStyle).toMatch(/left: 0%;/);
expect(trackStyle).toMatch(/width: 50%;/);
expect(trackStyle).toMatch(/visibility: visible;/);
const trackStyle = wrapper.find('.rc-slider-track > .rc-slider-track').at(0).props().style;
expect(trackStyle.left).toMatch('0%');
expect(trackStyle.width).toMatch('50%');
expect(trackStyle.visibility).toMatch('visible');
});

it('should render Multi-Range with value correctly', () => {
Expand All @@ -37,25 +37,25 @@ describe('Range', () => {
expect(wrapper.state('bounds')[1]).toBe(25);
expect(wrapper.state('bounds')[2]).toBe(50);
expect(wrapper.state('bounds')[3]).toBe(75);
expect(wrapper.find('.rc-slider-handle').get(0).style.cssText).toMatch(/left: 0%;/);
expect(wrapper.find('.rc-slider-handle').get(1).style.cssText).toMatch(/left: 25%;/);
expect(wrapper.find('.rc-slider-handle').get(2).style.cssText).toMatch(/left: 50%;/);
expect(wrapper.find('.rc-slider-handle').get(3).style.cssText).toMatch(/left: 75%;/);
expect(wrapper.find('.rc-slider-handle > .rc-slider-handle').at(0).props().style.left).toMatch('0%');
expect(wrapper.find('.rc-slider-handle > .rc-slider-handle').at(1).props().style.left).toMatch('25%');
expect(wrapper.find('.rc-slider-handle > .rc-slider-handle').at(2).props().style.left).toMatch('50%');
expect(wrapper.find('.rc-slider-handle > .rc-slider-handle').at(3).props().style.left).toMatch('75%');

const track1Style = wrapper.find('.rc-slider-track').get(0).style.cssText;
expect(track1Style).toMatch(/left: 0%;/);
expect(track1Style).toMatch(/width: 25%;/);
expect(track1Style).toMatch(/visibility: visible;/);
const track1Style = wrapper.find('.rc-slider-track > .rc-slider-track').at(0).props().style;
expect(track1Style.left).toMatch('0%');
expect(track1Style.width).toMatch('25%');
expect(track1Style.visibility).toMatch('visible');

const track2Style = wrapper.find('.rc-slider-track').get(1).style.cssText;
expect(track2Style).toMatch(/left: 25%;/);
expect(track2Style).toMatch(/width: 25%;/);
expect(track2Style).toMatch(/visibility: visible;/);
const track2Style = wrapper.find('.rc-slider-track > .rc-slider-track').at(1).props().style;
expect(track2Style.left).toMatch('25%');
expect(track2Style.width).toMatch('25%');
expect(track2Style.visibility).toMatch('visible');

const track3Style = wrapper.find('.rc-slider-track').get(2).style.cssText;
expect(track3Style).toMatch(/left: 50%;/);
expect(track3Style).toMatch(/width: 25%;/);
expect(track3Style).toMatch(/visibility: visible;/);
const track3Style = wrapper.find('.rc-slider-track > .rc-slider-track').at(2).props().style;
expect(track3Style.left).toMatch('50%');
expect(track3Style.width).toMatch('25%');
expect(track3Style.visibility).toMatch('visible');
});

it('should update Range correctly in controllered model', () => {
Expand All @@ -73,22 +73,22 @@ describe('Range', () => {
const wrapper = mount(<TestParent/>);

expect(wrapper.instance().getSlider().state.bounds.length).toBe(3);
expect(wrapper.find('.rc-slider-handle').length).toBe(3);
expect(wrapper.find('.rc-slider-handle > .rc-slider-handle').length).toBe(3);
wrapper.setState({ value: [2, 4] });
expect(wrapper.instance().getSlider().state.bounds.length).toBe(2);
expect(wrapper.find('.rc-slider-handle').length).toBe(2);
expect(wrapper.find('.rc-slider-handle > .rc-slider-handle').length).toBe(2);
});

// https://github.com/react-component/slider/pull/256
it('should handle mutli handle mouseEnter correctly', () => {
const wrapper = mount(<RangeWithTooltip min={0} max={1000} defaultValue={[50, 55]} />);
wrapper.find('.rc-slider-handle').at(0).simulate('mouseEnter');
expect(wrapper.state().visibles[0]).toBe(true);
wrapper.find('.rc-slider-handle').at(1).simulate('mouseEnter');
expect(wrapper.state().visibles[0]).toBe(true);
wrapper.find('.rc-slider-handle').at(3).simulate('mouseEnter');
expect(wrapper.state().visibles[1]).toBe(true);
wrapper.find('.rc-slider-handle').at(0).simulate('mouseLeave');
expect(wrapper.state().visibles[0]).toBe(false);
wrapper.find('.rc-slider-handle').at(1).simulate('mouseLeave');
expect(wrapper.state().visibles[0]).toBe(false);
wrapper.find('.rc-slider-handle').at(3).simulate('mouseLeave');
expect(wrapper.state().visibles[1]).toBe(false);
});
});
26 changes: 13 additions & 13 deletions tests/Slider.test.js
View file
Expand Up @@ -14,17 +14,17 @@ describe('Slider', () => {
it('should render Slider with value correctly', () => {
const wrapper = mount(<Slider value={50} />);
expect(wrapper.state('value')).toBe(50);
expect(wrapper.find('.rc-slider-handle').get(0).style.cssText).toMatch(/left: 50%;/);
expect(wrapper.find('.rc-slider-handle').at(1).props().style.left).toMatch('50%');

const trackStyle = wrapper.find('.rc-slider-track').get(0).style.cssText;
expect(trackStyle).toMatch(/left: 0%;/);
expect(trackStyle).toMatch(/width: 50%;/);
expect(trackStyle).toMatch(/visibility: visible;/);
const trackStyle = wrapper.find('.rc-slider-track').at(1).props().style;
expect(trackStyle.left).toMatch('0%');
expect(trackStyle.width).toMatch('50%');
expect(trackStyle.visibility).toMatch('visible');
});

it('increments the value when key "up" was pressed', () => {
const wrapper = mount(<Slider defaultValue={50} />);
const handler = wrapper.find('.rc-slider-handle');
const handler = wrapper.find('.rc-slider-handle').at(1);

wrapper.simulate('focus');
handler.simulate('keyDown', { keyCode: keyCode.UP });
Expand All @@ -34,7 +34,7 @@ describe('Slider', () => {

it('increments the value when key "right" was pressed', () => {
const wrapper = mount(<Slider defaultValue={50} />);
const handler = wrapper.find('.rc-slider-handle');
const handler = wrapper.find('.rc-slider-handle').at(1);

wrapper.simulate('focus');
handler.simulate('keyDown', { keyCode: keyCode.RIGHT });
Expand All @@ -44,7 +44,7 @@ describe('Slider', () => {

it('increases the value when key "page up" was pressed, by a factor 2', () => {
const wrapper = mount(<Slider defaultValue={50} />);
const handler = wrapper.find('.rc-slider-handle');
const handler = wrapper.find('.rc-slider-handle').at(1);

wrapper.simulate('focus');
handler.simulate('keyDown', { keyCode: keyCode.PAGE_UP });
Expand All @@ -54,7 +54,7 @@ describe('Slider', () => {

it('decreases the value when key "down" was pressed', () => {
const wrapper = mount(<Slider defaultValue={50} />);
const handler = wrapper.find('.rc-slider-handle');
const handler = wrapper.find('.rc-slider-handle').at(1);

wrapper.simulate('focus');
handler.simulate('keyDown', { keyCode: keyCode.DOWN });
Expand All @@ -64,7 +64,7 @@ describe('Slider', () => {

it('decreases the value when key "left" was pressed', () => {
const wrapper = mount(<Slider defaultValue={50} />);
const handler = wrapper.find('.rc-slider-handle');
const handler = wrapper.find('.rc-slider-handle').at(1);

wrapper.simulate('focus');
handler.simulate('keyDown', { keyCode: keyCode.LEFT });
Expand All @@ -74,7 +74,7 @@ describe('Slider', () => {

it('decreases the value when key "page down" was pressed, by a factor 2', () => {
const wrapper = mount(<Slider defaultValue={50} />);
const handler = wrapper.find('.rc-slider-handle');
const handler = wrapper.find('.rc-slider-handle').at(1);

wrapper.simulate('focus');
handler.simulate('keyDown', { keyCode: keyCode.PAGE_DOWN });
Expand All @@ -84,7 +84,7 @@ describe('Slider', () => {

it('sets the value to minimum when key "home" was pressed', () => {
const wrapper = mount(<Slider defaultValue={50} />);
const handler = wrapper.find('.rc-slider-handle');
const handler = wrapper.find('.rc-slider-handle').at(1);

wrapper.simulate('focus');
handler.simulate('keyDown', { keyCode: keyCode.HOME });
Expand All @@ -94,7 +94,7 @@ describe('Slider', () => {

it('sets the value to maximum when the key "end" was pressed', () => {
const wrapper = mount(<Slider defaultValue={50} />);
const handler = wrapper.find('.rc-slider-handle');
const handler = wrapper.find('.rc-slider-handle').at(1);

wrapper.simulate('focus');
handler.simulate('keyDown', { keyCode: keyCode.END });
Expand Down
84 changes: 58 additions & 26 deletions tests/__snapshots__/Range.test.js.snap
View file
Expand Up @@ -6,65 +6,85 @@ exports[`Range should render Multi-Range with correct DOM structure 1`] = `
>
<div
class="rc-slider-rail"
/>
>
</div>
<div
class="rc-slider-track rc-slider-track-1"
style="visibility:visible;left:0%;width:0%;"
/>
style="visibility:visible;left:0%;width:0%"
>
</div>
<div
class="rc-slider-track rc-slider-track-2"
style="visibility:visible;left:0%;width:0%;"
/>
style="visibility:visible;left:0%;width:0%"
>
</div>
<div
class="rc-slider-track rc-slider-track-3"
style="visibility:visible;left:0%;width:0%;"
/>
style="visibility:visible;left:0%;width:0%"
>
</div>
<div
class="rc-slider-step"
/>
>
</div>
<div
aria-disabled="false"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="0"
class="rc-slider-handle rc-slider-handle-1"
role="slider"
style="left:0%;"
style="left:0%"
tabindex="0"
/>
>
</div>
<div
aria-disabled="false"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="0"
class="rc-slider-handle rc-slider-handle-2"
role="slider"
style="left:0%;"
style="left:0%"
tabindex="0"
/>
>
</div>
<div
aria-disabled="false"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="0"
class="rc-slider-handle rc-slider-handle-3"
role="slider"
style="left:0%;"
style="left:0%"
tabindex="0"
/>
>
</div>
<div
aria-disabled="false"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="0"
class="rc-slider-handle rc-slider-handle-4"
role="slider"
style="left:0%;"
style="left:0%"
tabindex="0"
/>
>
</div>
<div
class="rc-slider-mark"
/>
>
</div>
</div>
`;

Expand All @@ -74,36 +94,48 @@ exports[`Range should render Range with correct DOM structure 1`] = `
>
<div
class="rc-slider-rail"
/>
>
</div>
<div
class="rc-slider-track rc-slider-track-1"
style="visibility:visible;left:0%;width:0%;"
/>
style="visibility:visible;left:0%;width:0%"
>
</div>
<div
class="rc-slider-step"
/>
>
</div>
<div
aria-disabled="false"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="0"
class="rc-slider-handle rc-slider-handle-1"
role="slider"
style="left:0%;"
style="left:0%"
tabindex="0"
/>
>
</div>
<div
aria-disabled="false"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="0"
class="rc-slider-handle rc-slider-handle-2"
role="slider"
style="left:0%;"
style="left:0%"
tabindex="0"
/>
>
</div>
<div
class="rc-slider-mark"
/>
>
</div>
</div>
`;

0 comments on commit b321edd

Please sign in to comment.