You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: dotcom-rendering/README.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Dotcom Rendering
2
2
3
-
The rendering framework for theguardian.com.
3
+
This repository contains the rendering logic for theguardian.com and for a subset of articles in the live apps.
4
4
5
5
It primarily uses [TypeScript](https://www.typescriptlang.org/), [Node.js](https://nodejs.org/en), [Express](https://expressjs.com/), [React](https://reactjs.org/) and [Emotion](https://emotion.sh).
Copy file name to clipboardExpand all lines: dotcom-rendering/docs/testing.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -38,7 +38,7 @@ For example:
38
38
39
39
## Component tests
40
40
41
-
To test components we use [react-testing-library](https://github.com/kentcdodds/react-testing-library). It allows you to tests agains the rendered DOM output of your component. The library makes you write tests from a "user-perspective", asserting against user-facing properties.
41
+
To test components we use [react-testing-library](https://github.com/testing-library/react-testing-library). It allows you to tests agains the rendered DOM output of your component. The library makes you write tests from a "user-perspective", asserting against user-facing properties.
When we write tests for Components, we should test the render logic and not the internal implementation details.
112
112
113
-
Test the expected behavior of a component: what it renders, how the props it receives alter what's rendered and how user interactions and events that trigger changes of state alter what's rendred.
113
+
Test the expected behaviour of a component: what it renders, how the props it receives alter what's rendered and how user interactions and events that trigger changes of state alter what's rendered.
114
114
115
115
Look for conditional statements (ternaries, if statements, and switch statements) in the render method for clues about what to test. You should always test your public interface (the props your component takes). For example, if the Component under test takes a prop which is a function that is executed onClick we can test it’s executed by simulating a click on the Component under test.
116
116
117
117
### Don't test
118
118
119
-
Tests that require you to duplicate the application code exactly. These tests will be brittle. For example if a component renders with a height 10px, if you test that the component has a height 10px and you then update the Component so it’s height is 11px then you’ll have to update your test, even though the component’s behavior has not changed. Don’t test inline styles, unless the value can change based on props/state.
119
+
Tests that require you to duplicate the application code exactly. These tests will be brittle. For example if a component renders with a height 10px, if you test that the component has a height 10px and you then update the Component so its height is 11px then you’ll have to update your test, even though the component’s behaviour has not changed. Don’t test inline styles, unless the value can change based on props/state.
120
120
121
121
Don't assert against behaviours covered by the library code. EG. Testing types of properties passed to the component, this is unnecessary.
122
122
123
123
### Snapshots
124
124
125
125
Jest [Snapshot](https://jestjs.io/docs/en/snapshot-testing) tests make sure the rendered output of a UI Component does not change unexpectedly.
126
126
127
-
We will **not** be writing snaphot test Components for the following reasons:
127
+
We will **not** be writing snapshot test Components for the following reasons:
128
128
129
-
- Snapshots immortalize a Component’s current markup as the true markup, regardless of whether or not the component is correct.
130
-
- Too easy to fix tests without fixing underlying bugs simplu by running `jest --u` override command.
129
+
- Snapshots immortalise a Component’s current markup as the true markup, regardless of whether or not the component is correct.
130
+
- Too easy to fix tests without fixing underlying bugs simply by running `jest --u` override command.
131
131
- Increased risk of false negatives and false positives - If the tests fail when there are no bugs, that is a false negative. If the tests pass when there are bugs present, that is a false positive.
132
132
- Developer time required to check snapshot test failures when simple non-breaking changes introduced, plus developer time required to review snapshot output in Pull Requests.
0 commit comments