Consistently use GraphQL builders in unit tests #2015
Description
React components that consume GraphQL responses, either directly from a Relay fragment container or indirectly from props, are tedious and noisy to test. GraphQL responses tend to be large, deep object structures.
We currently have three different ways to create mock GraphQL responses:
- "Factories" in
test/fixtures/factories
; - "Prop fixtures" in
test/fixtures/props
along with other props for components that need many of them; - "Builders" in
test/builder
.
All three of these suffer from the same basic problem: they give us no way to keep the mock data we build in test fixtures consistent with the real data that Relay will give us at runtime.
- If we delete a field from a GraphQL fragment, but populate that field in our mock object within the test, behavior that depends on the presence of that field may erroneously pass.
- If we use a field in a GraphQL type in one fragment, but not in another, the field has to be present in the mock object, but won't actually be available at runtime.
- If we add a field to any GraphQL fragment, we need to make sure all of our builders to add a default value for that field.
- Factories and prop fixtures are both fairly unreadable and hard to maintain.
To correct this, in #1995, I'm introducing GraphQL-backed Builders. These are follow the fluent-interface design of the Builders we introduced for git output, but are initialized with a GraphQL query or fragment node to ensure that the selected fields in the real fragment are all present with valid values and no others.
I started to migrate existing tests over to use the new builders, but, uh, there are a lot of them. Rather than dig myself deeper into that particular rabbit-hole on that PR, I'm opening this to track the remaining work.
Left to Migrate
"Factory" uses
git grep -c fixtures/factories test/
-
test/containers/issueish-detail-container.test.js
-
test/containers/issueish-search-container.test.js
-
test/controllers/issueish-list-controller.test.js
-
test/controllers/issueish-searches-controller.test.js
-
test/integration/checkout-pr.test.js
-
test/views/issueish-list-view.test.js
-
test/views/pr-status-context-view.test.js
-
test/views/pr-statuses-view.test.js
-
test/views/timeline-items/commit-comment-thread-view.test.js
-
test/views/timeline-items/commit-comment-view.test.js
-
test/views/timeline-items/cross-referenced-event-view.test.js
-
test/views/timeline-items/cross-referenced-events-view.test.js
"Prop fixture" uses
git grep -c fixtures/props test/
-
test/containers/git-tab-container.test.js
-
test/containers/github-tab-container.test.js
-
test/containers/issueish-detail-container.test.js
-
test/controllers/git-tab-controller.test.js
-
test/controllers/github-tab-controller.test.js
-
test/controllers/issueish-detail-controller.test.js
-
test/items/git-tab-item.test.js
-
test/items/github-tab-item.test.js
-
test/items/issueish-detail-item.test.js
-
test/views/git-tab-view.test.js
-
test/views/github-tab-view.test.js
-
test/views/issue-detail-view.test.js
-
test/views/pr-detail-view.test.js