From 52cfb834756b4e61755d9835dac6534c4f18f6cb Mon Sep 17 00:00:00 2001 From: Nathan Hardy Date: Sun, 6 Nov 2016 12:38:48 +1100 Subject: [PATCH] [New] shallow/mount: Add `.slice()` method --- docs/README.md | 2 ++ docs/api/ReactWrapper/slice.md | 44 ++++++++++++++++++++++++++++ docs/api/ShallowWrapper/slice.md | 44 ++++++++++++++++++++++++++++ docs/api/mount.md | 3 ++ docs/api/shallow.md | 3 ++ src/ReactWrapper.jsx | 12 ++++++++ src/ShallowWrapper.js | 12 ++++++++ test/ReactWrapper-spec.jsx | 50 ++++++++++++++++++++++++++++++++ test/ShallowWrapper-spec.jsx | 50 ++++++++++++++++++++++++++++++++ 9 files changed, 220 insertions(+) create mode 100644 docs/api/ReactWrapper/slice.md create mode 100644 docs/api/ShallowWrapper/slice.md diff --git a/docs/README.md b/docs/README.md index 42a111882..f1f98981b 100644 --- a/docs/README.md +++ b/docs/README.md @@ -60,6 +60,7 @@ * [setState(nextState[, callback])](/docs/api/ShallowWrapper/setState.md) * [shallow([options])](/docs/api/ShallowWrapper/shallow.md) * [simulate(event[, data])](/docs/api/ShallowWrapper/simulate.md) + * [slice([begin[, end]])](/docs/api/ShallowWrapper/slice.md) * [some(selector)](/docs/api/ShallowWrapper/some.md) * [someWhere(predicate)](/docs/api/ShallowWrapper/someWhere.md) * [state([key])](/docs/api/ShallowWrapper/state.md) @@ -113,6 +114,7 @@ * [setProps(nextProps[, callback])](/docs/api/ReactWrapper/setProps.md) * [setState(nextState[, callback])](/docs/api/ReactWrapper/setState.md) * [simulate(event[, data])](/docs/api/ReactWrapper/simulate.md) + * [slice([begin[, end]])](/docs/api/ReactWrapper/slice.md) * [some(selector)](/docs/api/ReactWrapper/some.md) * [someWhere(predicate)](/docs/api/ReactWrapper/someWhere.md) * [state([key])](/docs/api/ReactWrapper/state.md) diff --git a/docs/api/ReactWrapper/slice.md b/docs/api/ReactWrapper/slice.md new file mode 100644 index 000000000..0abad4210 --- /dev/null +++ b/docs/api/ReactWrapper/slice.md @@ -0,0 +1,44 @@ +# `.slice([begin[, end]]) => ReactWrapper` + +Returns a new wrapper with a subset of the nodes of the original wrapper, according to the rules of `Array#slice`. + + +#### Arguments + +1. `begin` (`Number` [optional]): Index from which to slice (defaults to `0`). If negative, this is treated as `length+begin`. +1. `end` (`Number` [optional]): Index at which to end slicing (defaults to `length`). If negative, this is treated as `length+end`. + + + +#### Returns + +`ReactWrapper`: A new wrapper with the subset of nodes specified. + + + +#### Examples + +```jsx +const wrapper = mount( +
+
+
+
+
+); +expect(wrapper.find('.foo').slice(1)).to.have.length(2); +expect(wrapper.find('.foo').slice(1).at(0).hasClass('bar')).to.equal(true); +expect(wrapper.find('.foo').slice(1).at(1).hasClass('baz')).to.equal(true); +``` + +```jsx +const wrapper = mount( +
+
+
+
+
+); +expect(wrapper.find('.foo').slice(1, 2)).to.have.length(1); +expect(wrapper.find('.foo').slice(1, 2).at(0).hasClass('bar')).to.equal(true); +``` diff --git a/docs/api/ShallowWrapper/slice.md b/docs/api/ShallowWrapper/slice.md new file mode 100644 index 000000000..e53121966 --- /dev/null +++ b/docs/api/ShallowWrapper/slice.md @@ -0,0 +1,44 @@ +# `.slice([begin[, end]]) => ShallowWrapper` + +Returns a new wrapper with a subset of the nodes of the original wrapper, according to the rules of `Array#slice`. + + +#### Arguments + +1. `begin` (`Number` [optional]): Index from which to slice (defaults to `0`). If negative, this is treated as `length+begin`. +1. `end` (`Number` [optional]): Index at which to end slicing (defaults to `length`). If negative, this is treated as `length+end`. + + + +#### Returns + +`ShallowWrapper`: A new wrapper with the subset of nodes specified. + + + +#### Examples + +```jsx +const wrapper = shallow( +
+
+
+
+
+); +expect(wrapper.find('.foo').slice(1)).to.have.length(2); +expect(wrapper.find('.foo').slice(1).at(0).hasClass('bar')).to.equal(true); +expect(wrapper.find('.foo').slice(1).at(1).hasClass('baz')).to.equal(true); +``` + +```jsx +const wrapper = shallow( +
+
+
+
+
+); +expect(wrapper.find('.foo').slice(1, 2)).to.have.length(1); +expect(wrapper.find('.foo').slice(1, 2).at(0).hasClass('bar')).to.equal(true); +``` diff --git a/docs/api/mount.md b/docs/api/mount.md index 503a5afb9..afcc8c9b6 100644 --- a/docs/api/mount.md +++ b/docs/api/mount.md @@ -194,6 +194,9 @@ Reduces the current array of nodes to a value #### [`.reduceRight(fn[, initialValue]) => Any`](ReactWrapper/reduceRight.md) Reduces the current array of nodes to a value, from right to left. +#### [`.slice([begin[, end]]) => ReactWrapper`](ReactWrapper/slice.md) +Returns a new wrapper with a subset of the nodes of the original wrapper, according to the rules of `Array#slice`. + #### [`.tap(intercepter) => Self`](ReactWrapper/tap.md) Taps into the wrapper method chain. Helpful for debugging. diff --git a/docs/api/shallow.md b/docs/api/shallow.md index 2e31a3b31..666ecaacb 100644 --- a/docs/api/shallow.md +++ b/docs/api/shallow.md @@ -193,6 +193,9 @@ Reduces the current array of nodes to a value #### [`.reduceRight(fn[, initialValue]) => Any`](ShallowWrapper/reduceRight.md) Reduces the current array of nodes to a value, from right to left. +#### [`.slice([begin[, end]]) => ShallowWrapper`](ShallowWrapper/slice.md) +Returns a new wrapper with a subset of the nodes of the original wrapper, according to the rules of `Array#slice`. + #### [`.tap(intercepter) => Self`](ShallowWrapper/tap.md) Taps into the wrapper method chain. Helpful for debugging. diff --git a/src/ReactWrapper.jsx b/src/ReactWrapper.jsx index b5d85e18e..f47323d29 100644 --- a/src/ReactWrapper.jsx +++ b/src/ReactWrapper.jsx @@ -744,6 +744,18 @@ class ReactWrapper { ); } + /** + * Returns a new wrapper with a subset of the nodes of the original wrapper, according to the + * rules of `Array#slice`. + * + * @param {Number} begin + * @param {Number} end + * @returns {ShallowWrapper} + */ + slice(begin, end) { + return this.wrap(this.getNodes().slice(begin, end)); + } + /** * Returns whether or not any of the nodes in the wrapper match the provided selector. * diff --git a/src/ShallowWrapper.js b/src/ShallowWrapper.js index 17a214488..45adbc3f1 100644 --- a/src/ShallowWrapper.js +++ b/src/ShallowWrapper.js @@ -818,6 +818,18 @@ class ShallowWrapper { ); } + /** + * Returns a new wrapper with a subset of the nodes of the original wrapper, according to the + * rules of `Array#slice`. + * + * @param {Number} begin + * @param {Number} end + * @returns {ShallowWrapper} + */ + slice(begin, end) { + return this.wrap(this.getNodes().slice(begin, end)); + } + /** * Returns whether or not any of the nodes in the wrapper match the provided selector. * diff --git a/test/ReactWrapper-spec.jsx b/test/ReactWrapper-spec.jsx index ac15318fe..4dcca8479 100644 --- a/test/ReactWrapper-spec.jsx +++ b/test/ReactWrapper-spec.jsx @@ -2242,6 +2242,56 @@ describeWithDOM('mount', () => { }); }); + describe('.slice([begin[, end]])', () => { + it('should return an identical wrapper if no params are set', () => { + const wrapper = mount( +
+
+
+
+
+ ); + expect(wrapper.find('.foo').slice()).to.have.length(3); + expect(wrapper.find('.foo').slice().at(0).hasClass('bax')).to.equal(true); + expect(wrapper.find('.foo').slice().at(1).hasClass('bar')).to.equal(true); + expect(wrapper.find('.foo').slice().at(2).hasClass('baz')).to.equal(true); + }); + it('should return a new wrapper if begin is set', () => { + const wrapper = mount( +
+
+
+
+
+ ); + expect(wrapper.find('.foo').slice(1)).to.have.length(2); + expect(wrapper.find('.foo').slice(1).at(0).hasClass('bar')).to.equal(true); + expect(wrapper.find('.foo').slice(1).at(1).hasClass('baz')).to.equal(true); + }); + it('should return a new wrapper if begin and end are set', () => { + const wrapper = mount( +
+
+
+
+
+ ); + expect(wrapper.find('.foo').slice(1, 2)).to.have.length(1); + expect(wrapper.find('.foo').slice(1, 2).at(0).hasClass('bar')).to.equal(true); + }); + it('should return a new wrapper if begin and end are set (negative)', () => { + const wrapper = mount( +
+
+
+
+
+ ); + expect(wrapper.find('.foo').slice(-2, -1)).to.have.length(1); + expect(wrapper.find('.foo').slice(-2, -1).at(0).hasClass('bar')).to.equal(true); + }); + }); + describe('.some(selector)', () => { it('should return if a node matches a selector', () => { const wrapper = mount( diff --git a/test/ShallowWrapper-spec.jsx b/test/ShallowWrapper-spec.jsx index 2daba8cb0..06cd52a46 100644 --- a/test/ShallowWrapper-spec.jsx +++ b/test/ShallowWrapper-spec.jsx @@ -2100,6 +2100,56 @@ describe('shallow', () => { }); }); + describe('.slice([begin[, end]])', () => { + it('should return an identical wrapper if no params are set', () => { + const wrapper = shallow( +
+
+
+
+
+ ); + expect(wrapper.find('.foo').slice()).to.have.length(3); + expect(wrapper.find('.foo').slice().at(0).hasClass('bax')).to.equal(true); + expect(wrapper.find('.foo').slice().at(1).hasClass('bar')).to.equal(true); + expect(wrapper.find('.foo').slice().at(2).hasClass('baz')).to.equal(true); + }); + it('should return a new wrapper if begin is set', () => { + const wrapper = shallow( +
+
+
+
+
+ ); + expect(wrapper.find('.foo').slice(1)).to.have.length(2); + expect(wrapper.find('.foo').slice(1).at(0).hasClass('bar')).to.equal(true); + expect(wrapper.find('.foo').slice(1).at(1).hasClass('baz')).to.equal(true); + }); + it('should return a new wrapper if begin and end are set', () => { + const wrapper = shallow( +
+
+
+
+
+ ); + expect(wrapper.find('.foo').slice(1, 2)).to.have.length(1); + expect(wrapper.find('.foo').slice(1, 2).at(0).hasClass('bar')).to.equal(true); + }); + it('should return a new wrapper if begin and end are set (negative)', () => { + const wrapper = shallow( +
+
+
+
+
+ ); + expect(wrapper.find('.foo').slice(-2, -1)).to.have.length(1); + expect(wrapper.find('.foo').slice(-2, -1).at(0).hasClass('bar')).to.equal(true); + }); + }); + describe('.some(selector)', () => { it('should return if a node matches a selector', () => { const wrapper = shallow(