Skip to content

Commit

Permalink
Merge pull request chromaui#102 from ryan-stephen/master
Browse files Browse the repository at this point in the history
Update composite-component / grammar edit
  • Loading branch information
domyen committed Jun 13, 2019
2 parents 9a45f34 + 9663df6 commit 6a75700
Showing 1 changed file with 4 additions and 4 deletions.
8 changes: 4 additions & 4 deletions content/react/en/composite-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -216,11 +216,11 @@ Storybook stories paired with manual visual tests and snapshot tests (see above)

However, sometimes the devil is in the details. A test framework that is explicit about those details is needed. Which brings us to unit tests.

In our case, we want our `TaskList` to render any pinned tasks **before** unpinned tasks that it is passed in the `tasks` prop. Although we have a story (`withPinnedTasks`) to test this exact scenario; it can be ambiguous to a human reviewer that if the component **stops** ordering the tasks like this, it is a bug. It certainly won’t scream **“Wrong!”** to the casual eye.
In our case, we want our `TaskList` to render any pinned tasks **before** unpinned tasks that it has passed in the `tasks` prop. Although we have a story (`withPinnedTasks`) to test this exact scenario, it can be ambiguous to a human reviewer that if the component **stops** ordering the tasks like this, it is a bug. It certainly won’t scream **“Wrong!”** to the casual eye.

So, to avoid this problem, we can use Jest to render the story to the DOM and run some DOM querying code to verify salient features of the output.

Create a test file called `src/components/TaskList.test.js`. Here we’ll build out our tests that make assertions about the output.
Create a test file called `src/components/TaskList.test.js`. Here, we’ll build out our tests that make assertions about the output.

```javascript
import React from 'react';
Expand All @@ -243,6 +243,6 @@ it('renders pinned tasks at the start of the list', () => {

![TaskList test runner](/tasklist-testrunner.png)

Note that we’ve been able to reuse the `withPinnedTasks` list of tasks in both story and unit test; in this way we can continue to leverage an existing resource (the examples that represent interesting configurations of a component) in more and more ways.
Note that we’ve been able to reuse the `withPinnedTasks` list of tasks in both story and unit test; in this way we can continue to leverage an existing resource (the examples that represent interesting configurations of a component) in many ways.

Notice as well that this test is quite brittle. It's possible that as the project matures, and the exact implementation of the `Task` changes --perhaps using a different classname or a `textarea` rather than an `input`--the test will fail, and need to be updated. This is not necessarily a problem, but rather an indication to be careful liberally using unit tests for UI. They're not easy to maintain. Instead rely on visual, snapshot, and visual regression (see [testing chapter](/test/)) tests where possible.
Notice as well that this test is quite brittle. It's possible that as the project matures, and the exact implementation of the `Task` changes --perhaps using a different classname or a `textarea` rather than an `input`--the test will fail, and need to be updated. This is not necessarily a problem, but rather an indication to be careful about liberally using unit tests for UI. They're not easy to maintain. Instead rely on visual, snapshot, and visual regression (see [testing chapter](/test/)) tests where possible.

0 comments on commit 6a75700

Please sign in to comment.