From 5932b5aacb34d4fed56298c92555d200b194ad21 Mon Sep 17 00:00:00 2001 From: Scott Cooper Date: Wed, 22 May 2024 11:07:16 -0700 Subject: [PATCH] test(ui): Add examples of overriding default contexts (#1288) --- src/docs/frontend/using-rtl.mdx | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/src/docs/frontend/using-rtl.mdx b/src/docs/frontend/using-rtl.mdx index e31278396c..aee11ef02c 100644 --- a/src/docs/frontend/using-rtl.mdx +++ b/src/docs/frontend/using-rtl.mdx @@ -18,6 +18,38 @@ As a part of this goal, we avoid testing implementation details so refactors (ch We are generally in favor of Use Case Coverage over Code Coverage. +## Use our built-in contexts +By default, `render()` has some default contexts setup for you. The organization context is set to `OrganizationFixture()` and the router context has some default params like orgId and projectId. These can be overriden by passing a proptery to the 2nd argument of the `render()` function. + +Example of overriding the default organization features and access: +```tsx +import {OrganizationFixture} from 'sentry-fixture/organization'; +import {render, screen} from "sentry-test/reactTestingLibrary"; + +const organization = OrganizationFixture({access: ['org:admin'], features: ['my-feature-flag']}); +// useOrganization will now get the above organization +render(, {organization}); +``` + +Router context can be overriden in the same way. + +```tsx +const {organization, router, routerContext} = initializeOrg({ + organization: {features: ['global-views', 'open-membership']}, + router: { + location: { + pathname: '/organizations/org-slug/issues/', + query: {environment: 'prod'}, + }, + params: {}, + }, +}); + +render(, {context: routerContext, organization}); +await userEvent.click(something); +expect(router.push).toHaveBeenCalledTimes(1); +``` + ## Querying - use `getBy...` as much as possible