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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Testing utility docs #11805

Merged
merged 12 commits into from
Apr 24, 2024
Merged

Testing utility docs #11805

merged 12 commits into from
Apr 24, 2024

Conversation

alessbell
Copy link
Member

Closes #11775.

To do:

  • Still writing the MSW section

Copy link

changeset-bot bot commented Apr 23, 2024

⚠️ No Changeset found

Latest commit: cdef3da

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link
Contributor

github-actions bot commented Apr 23, 2024

size-limit report 📦

Path Size
dist/apollo-client.min.cjs 38.61 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs" 46.49 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs" (production) 44.04 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js" 34.16 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js" (production) 32.04 KB (0%)
import { ApolloProvider } from "dist/react/index.js" 1.24 KB (0%)
import { ApolloProvider } from "dist/react/index.js" (production) 1.22 KB (0%)
import { useQuery } from "dist/react/index.js" 5.27 KB (0%)
import { useQuery } from "dist/react/index.js" (production) 4.35 KB (0%)
import { useLazyQuery } from "dist/react/index.js" 5.51 KB (0%)
import { useLazyQuery } from "dist/react/index.js" (production) 4.58 KB (0%)
import { useMutation } from "dist/react/index.js" 3.51 KB (0%)
import { useMutation } from "dist/react/index.js" (production) 2.73 KB (0%)
import { useSubscription } from "dist/react/index.js" 3.19 KB (0%)
import { useSubscription } from "dist/react/index.js" (production) 2.38 KB (0%)
import { useSuspenseQuery } from "dist/react/index.js" 5.44 KB (0%)
import { useSuspenseQuery } from "dist/react/index.js" (production) 4.11 KB (0%)
import { useBackgroundQuery } from "dist/react/index.js" 4.92 KB (0%)
import { useBackgroundQuery } from "dist/react/index.js" (production) 3.58 KB (0%)
import { useLoadableQuery } from "dist/react/index.js" 5.03 KB (0%)
import { useLoadableQuery } from "dist/react/index.js" (production) 3.69 KB (0%)
import { useReadQuery } from "dist/react/index.js" 3.32 KB (0%)
import { useReadQuery } from "dist/react/index.js" (production) 3.26 KB (0%)
import { useFragment } from "dist/react/index.js" 2.29 KB (0%)
import { useFragment } from "dist/react/index.js" (production) 2.24 KB (0%)

Copy link

netlify bot commented Apr 23, 2024

Deploy Preview for apollo-client-docs ready!

Name Link
🔨 Latest commit cdef3da
🔍 Latest deploy log https://app.netlify.com/sites/apollo-client-docs/deploys/66292544ef04d9000726188e
😎 Deploy Preview https://deploy-preview-11805--apollo-client-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Member

@jerelmiller jerelmiller left a comment

Choose a reason for hiding this comment

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

I'll leave most of the wording and such to Maria. Had some suggestions on structure and content, but otherwise this is a really great start to the doc! Feel free to ignore anything you disagree with as I trust your judgement on the intent. Thanks for writing this doc up!

docs/source/development-testing/schema-driven-testing.mdx Outdated Show resolved Hide resolved
docs/source/development-testing/schema-driven-testing.mdx Outdated Show resolved Hide resolved
docs/source/development-testing/schema-driven-testing.mdx Outdated Show resolved Hide resolved

Now let's write some tests!

The first thing we'll do is mock the global fetch function using the `createSchemaFetch` utility. This will allow us to intercept and respond to network requests made by our Apollo Client instance using responses generated against our test schema 🎉
Copy link
Member

Choose a reason for hiding this comment

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

Would it make sense to also include a section about "When to use createSchemaFetch vs MSW"? Since these utilities are mutually exclusive, it might be best to state that somewhere explicitly in this doc to ensure those that aren't as familiar with those tools don't get confused and try and use both together.

Copy link
Member Author

Choose a reason for hiding this comment

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

Really, really love this idea :) Will work on adding that shortly.

Copy link
Member Author

Choose a reason for hiding this comment

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

Added in aebc3a5 let me know what you think!

docs/source/development-testing/schema-driven-testing.mdx Outdated Show resolved Hide resolved
docs/source/development-testing/schema-driven-testing.mdx Outdated Show resolved Hide resolved
docs/source/development-testing/schema-driven-testing.mdx Outdated Show resolved Hide resolved

For a working example that demonstrates how to use both Testing Library and Mock Service Worker to write integration tests with `createTestSchema`, check out this project on CodeSandbox:

[![Edit Testing React Components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/apollographql/docs-examples/tree/main/apollo-client/v3/testing-react-components?file=/src/dog.test.js)
Copy link
Member

Choose a reason for hiding this comment

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

Screenshot 2024-04-23 at 11 01 27 AM

This seemed to render sorta weird, I think because of the way the docs add the external link icon. Do you know by chance if there is any way to avoid this?

Copy link
Member Author

Choose a reason for hiding this comment

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

Hah yeah I just noticed this on another page. Will look into whether we can remove the link icon here 👍

@alessbell alessbell marked this pull request as ready for review April 24, 2024 12:03
@alessbell alessbell requested a review from a team as a code owner April 24, 2024 12:03
alessbell and others added 2 commits April 24, 2024 09:00
Co-authored-by: Lenz Weber-Tronic <lorenz.weber-tronic@apollographql.com>

> This page is heavily inspired by the excellent [Redux documentation](https://redux.js.org/usage/writing-tests#guiding-principles); the same principles apply to Apollo Client.

## `createTestSchema` and `createSchemaFetch`
Copy link
Member

Choose a reason for hiding this comment

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

I would probably keep createSchemaFetch out of this heading as it is not required for msw, which is also under this heading.

@phryneas phryneas merged commit 0843bf4 into release-3.10 Apr 24, 2024
33 checks passed
@phryneas phryneas deleted the issue-11775-testing-utility-docs branch April 24, 2024 15:46
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 25, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants