-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(unmount): add
unmount
to render object
- Loading branch information
Kent C. Dodds
committed
Mar 19, 2018
1 parent
03b17c3
commit 9d0a07f
Showing
3 changed files
with
78 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
import React from 'react' | ||
import {render, Simulate} from '../' | ||
|
||
class StopWatch extends React.Component { | ||
state = {lapse: 0, running: false} | ||
handleRunClick = () => { | ||
this.setState(state => { | ||
if (state.running) { | ||
clearInterval(this.timer) | ||
} else { | ||
const startTime = Date.now() - this.state.lapse | ||
this.timer = setInterval(() => { | ||
this.setState({lapse: Date.now() - startTime}) | ||
}) | ||
} | ||
return {running: !state.running} | ||
}) | ||
} | ||
handleClearClick = () => { | ||
clearInterval(this.timer) | ||
this.setState({lapse: 0, running: false}) | ||
} | ||
componentWillUnmount() { | ||
clearInterval(this.timer) | ||
} | ||
render() { | ||
const {lapse, running} = this.state | ||
return ( | ||
<div> | ||
<span>{lapse}ms</span> | ||
<button onClick={this.handleRunClick} data-testid="start-stop-button"> | ||
{running ? 'Stop' : 'Start'} | ||
</button> | ||
<button onClick={this.handleClearClick} data-testid="clear-button"> | ||
Clear | ||
</button> | ||
</div> | ||
) | ||
} | ||
} | ||
|
||
const wait = time => new Promise(resolve => setTimeout(resolve, time)) | ||
|
||
test('unmounts a component', async () => { | ||
jest.spyOn(console, 'error').mockImplementation(() => {}) | ||
const {unmount, queryByTestId, container} = render(<StopWatch />) | ||
Simulate.click(queryByTestId('start-stop-button')) | ||
unmount() | ||
// hey there reader! You don't need to have an assertion like this one | ||
// this is just me making sure that the unmount function works. | ||
// You don't need to do this in your apps. Just rely on the fact that this works. | ||
expect(container.innerHTML).toBe('') | ||
// just wait to see if the interval is cleared or not | ||
// if it's not, then we'll call setState on an unmounted component | ||
// and get an error. | ||
await wait() | ||
// eslint-disable-next-line no-console | ||
expect(console.error).not.toHaveBeenCalled() | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters