Skip to content

Commit

Permalink
[New] shallow/mount: Add .slice() method
Browse files Browse the repository at this point in the history
  • Loading branch information
nhardy authored and ljharb committed Nov 6, 2016
1 parent c97512d commit 52cfb83
Show file tree
Hide file tree
Showing 9 changed files with 220 additions and 0 deletions.
2 changes: 2 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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)
Expand Down
44 changes: 44 additions & 0 deletions docs/api/ReactWrapper/slice.md
Original file line number Diff line number Diff line change
@@ -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(
<div>
<div className="foo bax" />
<div className="foo bar" />
<div className="foo baz" />
</div>
);
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(
<div>
<div className="foo bax" />
<div className="foo bar" />
<div className="foo baz" />
</div>
);
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);
```
44 changes: 44 additions & 0 deletions docs/api/ShallowWrapper/slice.md
Original file line number Diff line number Diff line change
@@ -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(
<div>
<div className="foo bax" />
<div className="foo bar" />
<div className="foo baz" />
</div>
);
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(
<div>
<div className="foo bax" />
<div className="foo bar" />
<div className="foo baz" />
</div>
);
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);
```
3 changes: 3 additions & 0 deletions docs/api/mount.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
3 changes: 3 additions & 0 deletions docs/api/shallow.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
12 changes: 12 additions & 0 deletions src/ReactWrapper.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down
12 changes: 12 additions & 0 deletions src/ShallowWrapper.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down
50 changes: 50 additions & 0 deletions test/ReactWrapper-spec.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2242,6 +2242,56 @@ describeWithDOM('mount', () => {
});
});

describe('.slice([begin[, end]])', () => {
it('should return an identical wrapper if no params are set', () => {
const wrapper = mount(
<div>
<div className="foo bax" />
<div className="foo bar" />
<div className="foo baz" />
</div>
);
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(
<div>
<div className="foo bax" />
<div className="foo bar" />
<div className="foo baz" />
</div>
);
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(
<div>
<div className="foo bax" />
<div className="foo bar" />
<div className="foo baz" />
</div>
);
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(
<div>
<div className="foo bax" />
<div className="foo bar" />
<div className="foo baz" />
</div>
);
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(
Expand Down
50 changes: 50 additions & 0 deletions test/ShallowWrapper-spec.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2100,6 +2100,56 @@ describe('shallow', () => {
});
});

describe('.slice([begin[, end]])', () => {
it('should return an identical wrapper if no params are set', () => {
const wrapper = shallow(
<div>
<div className="foo bax" />
<div className="foo bar" />
<div className="foo baz" />
</div>
);
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(
<div>
<div className="foo bax" />
<div className="foo bar" />
<div className="foo baz" />
</div>
);
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(
<div>
<div className="foo bax" />
<div className="foo bar" />
<div className="foo baz" />
</div>
);
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(
<div>
<div className="foo bax" />
<div className="foo bar" />
<div className="foo baz" />
</div>
);
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(
Expand Down

0 comments on commit 52cfb83

Please sign in to comment.