Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Add testing section #7101

Merged
merged 1 commit into from
Jun 11, 2017
Merged

[docs] Add testing section #7101

merged 1 commit into from
Jun 11, 2017

Conversation

oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Jun 10, 2017

capture d ecran 2017-06-10 a 21 57 49

@oliviertassinari oliviertassinari added docs Improvements or additions to the documentation next test labels Jun 10, 2017
## Internal

We take tests seriously, we have written and we maintain **a wide range** of tests so we can
iterate with confidence on the components. For instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/callemall/material-ui) have proven to be really helpful.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

馃槃 Well I guess you deserve the link juice!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the review 馃


## Userspace

But what about writing tests in userspace? Material-UI styling infrastructure relies on the context feature of React to work correcly. You are going to need that context when testing your react components with ours.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'correctly"

### Shallow rendering

Shallow rendering is useful to constrain yourself to testing a component as a unit, and to ensure that your tests aren't indirectly asserting on behavior of child components.
We expose a `createShallow()` function for that situation. However, you will most likely not need it for most of the simple situations.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'this situation'
'not need it most of the time.'

### Full DOM rendering

Full DOM rendering is ideal for use cases where you have components that may interact with DOM APIs, or may require the full lifecycle in order to fully test the component (i.e., `componentDidMount` etc.).
We expose a `createMount()` function for that situation.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'this situation.'


Rendering to string is useful to test the behavior of the components that are used on the server.
You can take advantage of it to assert the generated HTML string.
We expose a `createRender()` function for that sitation.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'this situation'

### `createShallow([options]) => shallow`

Generate an enhanced shallow function with the needed context.
You can find the API of the `shallow` function following [that link](http://airbnb.io/enzyme/docs/api/shallow.html).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'this link' (although good practice is that the anchor text is somewhat descriptive of the target: 'Please refer to the API documentation for further details of the shallow function.'

### `createMount([options]) => mount`

Generate an enhanced mount function with the needed context.
You can find the API of the `mount` function following [that link](http://airbnb.io/enzyme/docs/api/mount.html).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As before.

### `createRender([options]) => render`

Generate a render to string function with the needed context.
You can find the API of the `render` function following [that link](http://airbnb.io/enzyme/docs/api/render.html).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same.

@oliviertassinari oliviertassinari merged commit 7cda6bf into mui:next Jun 11, 2017
@oliviertassinari oliviertassinari deleted the docs-tests branch June 11, 2017 09:24
@FDiskas
Copy link

FDiskas commented Sep 20, 2017

AND... it's gone :(

@oliviertassinari
Copy link
Member Author

@FDiskas What do you mean?

@FDiskas
Copy link

FDiskas commented Sep 20, 2017

Can't find this in v0.19.2

@oliviertassinari
Copy link
Member Author

@FDiskas You will find it on the documentation of the v1-beta branch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation test
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants