Skip to content

Commit

Permalink
Add method, tests, and docs for html method in ReactWrapper
Browse files Browse the repository at this point in the history
  • Loading branch information
Nate Piche committed Jan 10, 2016
1 parent ba911a0 commit 91f9e5f
Show file tree
Hide file tree
Showing 5 changed files with 107 additions and 0 deletions.
1 change: 1 addition & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@
* [parent()](/docs/api/ReactWrapper/parent.md)
* [closest(selector)](/docs/api/ReactWrapper/closest.md)
* [text()](/docs/api/ReactWrapper/text.md)
* [html()](/docs/api/ReactWrapper/html.md)
* [get(index)](/docs/api/ReactWrapper/get.md)
* [at(index)](/docs/api/ReactWrapper/at.md)
* [first()](/docs/api/ReactWrapper/first.md)
Expand Down
54 changes: 54 additions & 0 deletions docs/api/ReactWrapper/html.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
# `.html() => String`

Returns a string of the rendered HTML markup of the current render tree.

Note: can only be called on a wrapper of a single node.


#### Returns

`String`: The resulting HTML string



#### Examples

```jsx
class Foo extends React.Component {
render() {
return (<div className="in-foo" />);
}
}
```

```jsx
class Bar extends React.Component {
render() {
return (
<div className="in-bar">
<Foo />
</div>
);
}
}
```

```jsx
const wrapper = mount(<Bar />);
expect(wrapper.html()).to.equal(
`<div class="in-bar"><div class="in-foo"></div></div>`
);
expect(wrapper.find(Foo).html()).to.equal(
`<div class="in-foo"></div>`
);
```

```jsx
const wrapper = mount(<div><b>important</b></div>);
expect(wrapper.html()).to.equal('<div><b>important</b></div>');
```


#### Related Methods

[`.text() => String`](text.md)
3 changes: 3 additions & 0 deletions docs/api/mount.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,9 @@ Get a wrapper with the first ancestor of the current node to match the provided
#### [`.text() => String`](ReactWrapper/text.md)
Returns a string representation of the text nodes in the current render tree.

#### [`.html() => String`](ReactWrapper/html.md)
Returns a static HTML rendering of the current node.

#### [`.get(index) => ReactWrapper`](ReactWrapper/get.md)
Returns the node at the provided index of the current wrapper.

Expand Down
11 changes: 11 additions & 0 deletions src/ReactWrapper.js
Original file line number Diff line number Diff line change
Expand Up @@ -285,6 +285,17 @@ export default class ReactWrapper {
return this.single(n => findDOMNode(n).textContent);
}

/**
* Returns the HTML of the node.
*
* NOTE: can only be called on a wrapper of a single node.
*
* @returns {String}
*/
html() {
return this.single(n => findDOMNode(n).outerHTML.replace(/\sdata-reactid[^>]+/g, ''));
}

/**
* Used to simulate events. Pass an eventname and (optionally) event arguments. This method of
* testing events should be met with some skepticism.
Expand Down
38 changes: 38 additions & 0 deletions src/__tests__/ReactWrapper-spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -1202,4 +1202,42 @@ describeWithDOM('mount', () => {
expect(wrapper.ref('secondRef').text()).to.equal('Second');
});
});

describe('.html()', () => {
it('should return html of straight DOM elements', () => {
const wrapper = mount(
<div className="test">
<span>Hello World!</span>
</div>
);
expect(wrapper.html()).to.equal(
`<div class="test"><span>Hello World!</span></div>`
);
});

it('should render out nested composite components', () => {
class Foo extends React.Component {
render() {
return (<div className="in-foo" />);
}
}
class Bar extends React.Component {
render() {
return (
<div className="in-bar">
<Foo />
</div>
);
}
}
const wrapper = mount(<Bar />);
expect(wrapper.html()).to.equal(
`<div class="in-bar"><div class="in-foo"></div></div>`
);
expect(wrapper.find(Foo).html()).to.equal(
`<div class="in-foo"></div>`
);
});
});

});

0 comments on commit 91f9e5f

Please sign in to comment.