Skip to content
This repository was archived by the owner on Dec 15, 2022. It is now read-only.
This repository was archived by the owner on Dec 15, 2022. It is now read-only.

Consistently use GraphQL builders in unit tests #2015

Open
@smashwilson

Description

@smashwilson

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:

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions