diff --git a/.changeset/fruity-words-melt.md b/.changeset/fruity-words-melt.md new file mode 100644 index 0000000000..0f02acee2b --- /dev/null +++ b/.changeset/fruity-words-melt.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs-module-addons-contrib': patch +--- + +Updated tests to match test-utils change diff --git a/.changeset/old-parks-smell.md b/.changeset/old-parks-smell.md new file mode 100644 index 0000000000..f089c7da21 --- /dev/null +++ b/.changeset/old-parks-smell.md @@ -0,0 +1,20 @@ +--- +'@backstage/plugin-techdocs-addons-test-utils': major +--- + +**BREAKING**: `TechDocsAddonTester.renderWithEffects()` no longer returns a screen; this means that you can no longer grab assertions such as `getByText` from its return value. + +Newer versions of `@testing-library` recommends using the `screen` export for assertions - and removing this from the addon tester contract allows us to more freely iterate on which underlying version of the testing library is being used. + +One notable effect of this, however, is that the `@testing-library` `screen` does NOT support assertions on the shadow DOM, which techdocs relies on. You will therefore want to add a dependency on [the `shadow-dom-testing-library` package](https://github.com/konnorrogers/shadow-dom-testing-library/) in your tests, and using its `screen` and its dedicated `*Shadow*` methods. As an example, if you keep doing `getByText` you will not get matches inside the shadow DOM - switch to `getByShadowText` instead. + +```ts +import { screen } from 'shadow-dom-testing-library'; + +// ... render the addon ... +await TechDocsAddonTester.buildAddonsInTechDocs([]) + .withDom(TEST_CONTENT) + .renderWithEffects(); + +expect(screen.getByShadowText('TEST_CONTENT')).toBeInTheDocument(); +``` diff --git a/plugins/techdocs-addons-test-utils/package.json b/plugins/techdocs-addons-test-utils/package.json index 4cf74ec69f..5a4929aabb 100644 --- a/plugins/techdocs-addons-test-utils/package.json +++ b/plugins/techdocs-addons-test-utils/package.json @@ -49,7 +49,7 @@ "@backstage/plugin-techdocs": "workspace:^", "@backstage/plugin-techdocs-react": "workspace:^", "@backstage/test-utils": "workspace:^", - "testing-library__dom": "^7.29.4-beta.1" + "shadow-dom-testing-library": "^1.13.1" }, "devDependencies": { "@backstage/cli": "workspace:^", diff --git a/plugins/techdocs-addons-test-utils/report.api.md b/plugins/techdocs-addons-test-utils/report.api.md index a963c239e2..a3326779d7 100644 --- a/plugins/techdocs-addons-test-utils/report.api.md +++ b/plugins/techdocs-addons-test-utils/report.api.md @@ -6,7 +6,6 @@ import { ApiRef } from '@backstage/core-plugin-api'; import { JSXElementConstructor } from 'react'; import { ReactElement } from 'react'; -import { screen as screen_2 } from 'testing-library__dom'; import { TechDocsEntityMetadata } from '@backstage/plugin-techdocs-react'; import { TechDocsMetadata } from '@backstage/plugin-techdocs-react'; @@ -16,11 +15,9 @@ export class TechDocsAddonTester { atPath(path: string): this; build(): ReactElement>; static buildAddonsInTechDocs(addons: ReactElement[]): TechDocsAddonTester; - renderWithEffects(): Promise< - typeof screen_2 & { - shadowRoot: ShadowRoot | null; - } - >; + renderWithEffects(): Promise<{ + shadowRoot: ShadowRoot | null; + }>; withApis(apis: TechdocsAddonTesterApis): this; withDom(dom: ReactElement): this; withEntity(entity: Partial): this; diff --git a/plugins/techdocs-addons-test-utils/src/test-utils.tsx b/plugins/techdocs-addons-test-utils/src/test-utils.tsx index a7cb74cb93..886a03007f 100644 --- a/plugins/techdocs-addons-test-utils/src/test-utils.tsx +++ b/plugins/techdocs-addons-test-utils/src/test-utils.tsx @@ -18,7 +18,7 @@ import { cloneElement, ReactElement } from 'react'; // Shadow DOM support for the simple and complete DOM testing utilities // https://github.com/testing-library/dom-testing-library/issues/742#issuecomment-674987855 -import { screen } from 'testing-library__dom'; +import { screen } from 'shadow-dom-testing-library'; import { Route } from 'react-router-dom'; import { act, render } from '@testing-library/react'; @@ -320,6 +320,25 @@ export class TechDocsAddonTester { * Render the Addon within a fully configured and mocked TechDocs reader. * * @remarks + * + * Note that to make assertions on the shadow dom, add a dependency on + * [the `shadow-dom-testing-library` package](https://github.com/konnorrogers/shadow-dom-testing-library/) + * and use its screen as follows: + * + * ```ts + * import { screen } from 'shadow-dom-testing-library'; + * + * // ... render the addon ... + * await TechDocsAddonTester.buildAddonsInTechDocs([]) + * .withDom(TEST_CONTENT) + * .renderWithEffects(); + * + * expect(screen.getByShadowText('TEST_CONTENT')).toBeInTheDocument(); + * ``` + * + * For items outside of the shadow dom, you can still use the regular screen + * from `@testing-library/react`. + * * Components using useEffect to perform an asynchronous action (such as * fetch) must be rendered within an async act call to properly get the final * state, even with mocked responses. This utility method makes the signature @@ -329,17 +348,16 @@ export class TechDocsAddonTester { * @see https://github.com/testing-library/react-testing-library/issues/281 * @see https://github.com/facebook/react/pull/14853 */ - async renderWithEffects(): Promise< - typeof screen & { shadowRoot: ShadowRoot | null } - > { + async renderWithEffects(): Promise<{ shadowRoot: ShadowRoot | null }> { await act(async () => { render(this.build()); }); - const shadowHost = await screen.findByTestId('techdocs-native-shadowroot'); + const shadowHost = await screen.findByShadowTestId( + 'techdocs-native-shadowroot', + ); return { - ...screen, shadowRoot: shadowHost?.shadowRoot || null, }; } diff --git a/plugins/techdocs-module-addons-contrib/package.json b/plugins/techdocs-module-addons-contrib/package.json index 339ee31bf8..5e08d511ee 100644 --- a/plugins/techdocs-module-addons-contrib/package.json +++ b/plugins/techdocs-module-addons-contrib/package.json @@ -75,7 +75,8 @@ "@types/react": "^18.0.0", "react": "^18.0.2", "react-dom": "^18.0.2", - "react-router-dom": "^6.3.0" + "react-router-dom": "^6.3.0", + "shadow-dom-testing-library": "^1.13.1" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0", diff --git a/plugins/techdocs-module-addons-contrib/src/ExpandableNavigation/ExpandableNavigation.test.tsx b/plugins/techdocs-module-addons-contrib/src/ExpandableNavigation/ExpandableNavigation.test.tsx index 90a3fa7378..c4d07df7ee 100644 --- a/plugins/techdocs-module-addons-contrib/src/ExpandableNavigation/ExpandableNavigation.test.tsx +++ b/plugins/techdocs-module-addons-contrib/src/ExpandableNavigation/ExpandableNavigation.test.tsx @@ -17,6 +17,7 @@ import { TechDocsAddonTester } from '@backstage/plugin-techdocs-addons-test-utils'; import { fireEvent, waitFor } from '@testing-library/react'; +import { screen } from 'shadow-dom-testing-library'; import { ExpandableNavigation } from '../plugin'; import { entityPresentationApiRef } from '@backstage/plugin-catalog-react'; @@ -94,25 +95,24 @@ describe('ExpandableNavigation', () => { }); it('renders without exploding', async () => { - const { getByRole } = await TechDocsAddonTester.buildAddonsInTechDocs([ + await TechDocsAddonTester.buildAddonsInTechDocs([]) + .withDom(mockNavWithSublevels) + .withApis([[entityPresentationApiRef, entityPresentationApiMock]]) + .renderWithEffects(); + + expect( + screen.getByShadowRole('button', { name: 'expand-nav' }), + ).toBeInTheDocument(); + }); + + it('expands and collapses navigation', async () => { + const { shadowRoot } = await TechDocsAddonTester.buildAddonsInTechDocs([ , ]) .withDom(mockNavWithSublevels) .withApis([[entityPresentationApiRef, entityPresentationApiMock]]) .renderWithEffects(); - expect(getByRole('button', { name: 'expand-nav' })).toBeInTheDocument(); - }); - - it('expands and collapses navigation', async () => { - const { getByRole, shadowRoot } = - await TechDocsAddonTester.buildAddonsInTechDocs([ - , - ]) - .withDom(mockNavWithSublevels) - .withApis([[entityPresentationApiRef, entityPresentationApiMock]]) - .renderWithEffects(); - const toggles = shadowRoot!.querySelectorAll('.md-toggle'); @@ -121,18 +121,24 @@ describe('ExpandableNavigation', () => { expect(item).not.toBeChecked(); }); - const expandButton = getByRole('button', { name: 'expand-nav' }); + const expandButton = screen.getByShadowRole('button', { + name: 'expand-nav', + }); fireEvent.click(expandButton); await waitFor(() => { - expect(getByRole('button', { name: 'collapse-nav' })).toBeInTheDocument(); + expect( + screen.getByShadowRole('button', { name: 'collapse-nav' }), + ).toBeInTheDocument(); toggles.forEach(item => { expect(item).toBeChecked(); }); }); - const collapseButton = getByRole('button', { name: 'collapse-nav' }); + const collapseButton = screen.getByShadowRole('button', { + name: 'collapse-nav', + }); fireEvent.click(collapseButton); @@ -144,15 +150,13 @@ describe('ExpandableNavigation', () => { }); it('does not render when navigation has no sublevels', async () => { - const { queryByRole } = await TechDocsAddonTester.buildAddonsInTechDocs([ - , - ]) + await TechDocsAddonTester.buildAddonsInTechDocs([]) .withDom(mockNavWithoutSublevels) .withApis([[entityPresentationApiRef, entityPresentationApiMock]]) .renderWithEffects(); expect( - queryByRole('button', { name: 'expand-nav' }), + screen.queryByShadowRole('button', { name: 'expand-nav' }), ).not.toBeInTheDocument(); }); }); diff --git a/plugins/techdocs-module-addons-contrib/src/LightBox/LightBox.test.tsx b/plugins/techdocs-module-addons-contrib/src/LightBox/LightBox.test.tsx index 7171629d89..0f618013f1 100644 --- a/plugins/techdocs-module-addons-contrib/src/LightBox/LightBox.test.tsx +++ b/plugins/techdocs-module-addons-contrib/src/LightBox/LightBox.test.tsx @@ -15,6 +15,7 @@ */ import { TechDocsAddonTester } from '@backstage/plugin-techdocs-addons-test-utils'; +import { screen } from 'shadow-dom-testing-library'; import { LightBox } from '../plugin'; import { entityPresentationApiRef } from '@backstage/plugin-catalog-react'; @@ -30,20 +31,16 @@ describe('LightBox', () => { }); it('renders without exploding', async () => { - const { getByText } = await TechDocsAddonTester.buildAddonsInTechDocs([ - , - ]) + await TechDocsAddonTester.buildAddonsInTechDocs([]) .withDom(TEST_CONTENT) .withApis([[entityPresentationApiRef, entityPresentationApiMock]]) .renderWithEffects(); - expect(getByText('TEST_CONTENT')).toBeInTheDocument(); + expect(screen.getByShadowText('TEST_CONTENT')).toBeInTheDocument(); }); it('Add onclick event to images', async () => { - const { getByTestId } = await TechDocsAddonTester.buildAddonsInTechDocs([ - , - ]) + await TechDocsAddonTester.buildAddonsInTechDocs([]) .withDom( { .withApis([[entityPresentationApiRef, entityPresentationApiMock]]) .renderWithEffects(); - expect(getByTestId('fixture').onclick).not.toBeUndefined(); - expect(getByTestId('fixture').onclick).toEqual(expect.any(Function)); + expect(screen.getByShadowTestId('fixture').onclick).not.toBeUndefined(); + expect(screen.getByShadowTestId('fixture').onclick).toEqual( + expect.any(Function), + ); }); }); diff --git a/plugins/techdocs-module-addons-contrib/src/ReportIssue/ReportIssue.test.tsx b/plugins/techdocs-module-addons-contrib/src/ReportIssue/ReportIssue.test.tsx index 1ee9e87e05..153c1c603f 100644 --- a/plugins/techdocs-module-addons-contrib/src/ReportIssue/ReportIssue.test.tsx +++ b/plugins/techdocs-module-addons-contrib/src/ReportIssue/ReportIssue.test.tsx @@ -17,6 +17,7 @@ import { TechDocsAddonTester } from '@backstage/plugin-techdocs-addons-test-utils'; import { fireEvent, waitFor } from '@testing-library/react'; +import { screen } from 'shadow-dom-testing-library'; import { scmIntegrationsApiRef } from '@backstage/integration-react'; import { ReportIssue } from '../plugin'; @@ -67,58 +68,57 @@ describe('ReportIssue', () => { it('renders github link without exploding', async () => { byUrl.mockReturnValue({ type: 'github' }); - const { shadowRoot, getByText } = - await TechDocsAddonTester.buildAddonsInTechDocs([ - , - ]) - .withDom( - - - -
-
-
-
+ const { shadowRoot } = await TechDocsAddonTester.buildAddonsInTechDocs([ + , + ]) + .withDom( + + + +
+
+
+
-
- + - - , - ) - .withApis([ - [scmIntegrationsApiRef, { byUrl }], - [entityPresentationApiRef, entityPresentationApiMock], - ]) - .renderWithEffects(); +
+ + , + ) + .withApis([ + [scmIntegrationsApiRef, { byUrl }], + [entityPresentationApiRef, entityPresentationApiMock], + ]) + .renderWithEffects(); (shadowRoot as ShadowRoot & Pick).getSelection = () => selection; await waitFor(() => { - expect(getByText('Edit page')).toBeInTheDocument(); + expect(screen.getByShadowText('Edit page')).toBeInTheDocument(); }); fireSelectionChangeEvent(window); await waitFor(() => { - const link = getByText('Open new Github issue'); + const link = screen.getByShadowText('Open new Github issue'); expect(link).toHaveAttribute( 'href', 'https://github.com/backstage/backstage/issues/new?title=Documentation%20feedback%3A%20his%20&body=%23%23%20Documentation%20Feedback%20%F0%9F%93%9D%0A%0A%20%23%23%23%23%20The%20highlighted%20text%3A%20%0A%0A%20%3E%20his%0A%0A%20%23%23%23%23%20The%20comment%20on%20the%20text%3A%20%0A%20_%3Ereplace%20this%20line%20with%20your%20comment%3C_%0A%0A%20___%0ABackstage%20URL%3A%20%3Chttp%3A%2F%2Flocalhost%2F%3E%20%0AMarkdown%20URL%3A%20%3Chttps%3A%2F%2Fgithub.com%2Fbackstage%2Fbackstage%2Fblob%2Fmaster%2Fdocs%2FREADME.md%3E', @@ -128,60 +128,61 @@ describe('ReportIssue', () => { it('renders gitlab link without exploding', async () => { byUrl.mockReturnValue({ type: 'gitlab' }); - const { shadowRoot, getByText, queryByTestId } = - await TechDocsAddonTester.buildAddonsInTechDocs([ - , - ]) - .withDom( - - - -
-
-
-
+ const { shadowRoot } = await TechDocsAddonTester.buildAddonsInTechDocs([ + , + ]) + .withDom( + + + +
+
+
+
-
- + - - , - ) - .withApis([ - [scmIntegrationsApiRef, { byUrl }], - [entityPresentationApiRef, entityPresentationApiMock], - ]) - .renderWithEffects(); +
+ + , + ) + .withApis([ + [scmIntegrationsApiRef, { byUrl }], + [entityPresentationApiRef, entityPresentationApiMock], + ]) + .renderWithEffects(); (shadowRoot as ShadowRoot & Pick).getSelection = () => selection; await waitFor(() => { - expect(getByText('Edit page')).toBeInTheDocument(); + expect(screen.getByShadowText('Edit page')).toBeInTheDocument(); }); fireSelectionChangeEvent(window); await waitFor(() => { - expect(queryByTestId('report-issue-addon')).toBeInTheDocument(); + expect( + screen.getByShadowTestId('report-issue-addon'), + ).toBeInTheDocument(); - const link = getByText('Open new Gitlab issue'); + const link = screen.getByShadowText('Open new Gitlab issue'); expect(link).toHaveAttribute( 'href', 'https://gitlab.com/backstage/backstage/issues/new?issue[title]=Documentation%20feedback%3A%20his%20&issue[description]=%23%23%20Documentation%20Feedback%20%F0%9F%93%9D%0A%0A%20%23%23%23%23%20The%20highlighted%20text%3A%20%0A%0A%20%3E%20his%0A%0A%20%23%23%23%23%20The%20comment%20on%20the%20text%3A%20%0A%20_%3Ereplace%20this%20line%20with%20your%20comment%3C_%0A%0A%20___%0ABackstage%20URL%3A%20%3Chttp%3A%2F%2Flocalhost%2F%3E%20%0AMarkdown%20URL%3A%20%3Chttps%3A%2F%2Fgitlab.com%2Fbackstage%2Fbackstage%2F-%2Fblob%2Fmaster%2Fdocs%2FREADME.md%3E', @@ -197,60 +198,61 @@ describe('ReportIssue', () => { body: options.selection.toString().trim(), }); - const { shadowRoot, getByText, queryByTestId } = - await TechDocsAddonTester.buildAddonsInTechDocs([ - , - ]) - .withDom( - - - -
-
-
-
+ const { shadowRoot } = await TechDocsAddonTester.buildAddonsInTechDocs([ + , + ]) + .withDom( + + + +
+
+
+
-
- + - - , - ) - .withApis([ - [scmIntegrationsApiRef, { byUrl }], - [entityPresentationApiRef, entityPresentationApiMock], - ]) - .renderWithEffects(); +
+ + , + ) + .withApis([ + [scmIntegrationsApiRef, { byUrl }], + [entityPresentationApiRef, entityPresentationApiMock], + ]) + .renderWithEffects(); (shadowRoot as ShadowRoot & Pick).getSelection = () => selection; await waitFor(() => { - expect(getByText('Edit page')).toBeInTheDocument(); + expect(screen.getByShadowText('Edit page')).toBeInTheDocument(); }); fireSelectionChangeEvent(window); await waitFor(() => { - expect(queryByTestId('report-issue-addon')).toBeInTheDocument(); + expect( + screen.getByShadowTestId('report-issue-addon'), + ).toBeInTheDocument(); - const link = getByText('Open new Gitlab issue'); + const link = screen.getByShadowText('Open new Gitlab issue'); expect(link).toHaveAttribute( 'href', 'https://gitlab.com/backstage/backstage/issues/new?issue[title]=Custom&issue[description]=his', @@ -261,45 +263,46 @@ describe('ReportIssue', () => { it('does not render report issue link for unsupported repository type', async () => { byUrl.mockReturnValue({ type: 'gerrit', resource: 'gerrit.example.com' }); - const { shadowRoot, getByText, queryByTestId } = - await TechDocsAddonTester.buildAddonsInTechDocs([ - , - ]) - .withDom( - - - -
-
- + const { shadowRoot } = await TechDocsAddonTester.buildAddonsInTechDocs([ + , + ]) + .withDom( + + + +
+ - - , - ) - .withApis([[scmIntegrationsApiRef, { byUrl }]]) - .renderWithEffects(); +
+ + , + ) + .withApis([[scmIntegrationsApiRef, { byUrl }]]) + .renderWithEffects(); (shadowRoot as ShadowRoot & Pick).getSelection = () => selection; await waitFor(() => { - expect(getByText('Edit page')).toBeInTheDocument(); + expect(screen.getByShadowText('Edit page')).toBeInTheDocument(); }); fireSelectionChangeEvent(window); await waitFor(() => { - expect(queryByTestId('report-issue-addon')).not.toBeInTheDocument(); + expect( + screen.queryByShadowTestId('report-issue-addon'), + ).not.toBeInTheDocument(); }); }); }); diff --git a/plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.test.tsx b/plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.test.tsx index 92cab255a7..03571c1cd1 100644 --- a/plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.test.tsx +++ b/plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.test.tsx @@ -16,6 +16,7 @@ import { TechDocsAddonTester } from '@backstage/plugin-techdocs-addons-test-utils'; import { act, fireEvent, waitFor } from '@testing-library/react'; +import { screen } from 'shadow-dom-testing-library'; import { TextSize } from '../plugin'; import { useShadowRootElements } from '@backstage/plugin-techdocs-react'; import { entityPresentationApiRef } from '@backstage/plugin-catalog-react'; @@ -42,33 +43,30 @@ describe('TextSize', () => { }); it('renders without exploding', async () => { - const { getByText } = await TechDocsAddonTester.buildAddonsInTechDocs([ - , - ]) + await TechDocsAddonTester.buildAddonsInTechDocs([]) .withDom(TEST_CONTENT) .withApis([[entityPresentationApiRef, entityPresentationApiMock]]) .renderWithEffects(); - expect(getByText('TEST_CONTENT')).toBeInTheDocument(); + expect(screen.getByShadowText('TEST_CONTENT')).toBeInTheDocument(); }); it('changes content text size using slider', async () => { - const { getByTitle, getByText, getByRole, getByDisplayValue } = - await TechDocsAddonTester.buildAddonsInTechDocs([]) - .withDom(TEST_CONTENT) - .withApis([[entityPresentationApiRef, entityPresentationApiMock]]) - .renderWithEffects(); + await TechDocsAddonTester.buildAddonsInTechDocs([]) + .withDom(TEST_CONTENT) + .withApis([[entityPresentationApiRef, entityPresentationApiMock]]) + .renderWithEffects(); - const content = getByText('TEST_CONTENT'); + const content = screen.getByShadowText('TEST_CONTENT'); useShadowRootElementsMock.mockReturnValue([content]); - fireEvent.click(getByTitle('Settings')); + fireEvent.click(screen.getByShadowTitle('Settings')); await waitFor(() => { - expect(getByText('Text size')).toBeInTheDocument(); + expect(screen.getByShadowText('Text size')).toBeInTheDocument(); }); - const slider = getByRole('slider'); + const slider = screen.getByShadowRole('slider'); act(() => { slider.focus(); @@ -79,12 +77,12 @@ describe('TextSize', () => { }); await waitFor(() => { - expect(getByDisplayValue('115')).toBeInTheDocument(); + expect(screen.getByShadowDisplayValue('115')).toBeInTheDocument(); }); expect(slider).toHaveTextContent('115%'); - let style = window.getComputedStyle(getByText('TEST_CONTENT')); + let style = window.getComputedStyle(screen.getByShadowText('TEST_CONTENT')); await waitFor(() => { expect(style.getPropertyValue('--md-typeset-font-size')).toBe('18.4px'); @@ -95,60 +93,54 @@ describe('TextSize', () => { }); await waitFor(() => { - expect(getByDisplayValue('100')).toBeInTheDocument(); + expect(screen.getByShadowDisplayValue('100')).toBeInTheDocument(); }); expect(slider).toHaveTextContent('100%'); - style = window.getComputedStyle(getByText('TEST_CONTENT')); + style = window.getComputedStyle(screen.getByShadowText('TEST_CONTENT')); expect(style.getPropertyValue('--md-typeset-font-size')).toBe('16px'); }); it('changes content text size using buttons', async () => { - const { - getByTitle, - getByText, - getByRole, - getByLabelText, - getByDisplayValue, - } = await TechDocsAddonTester.buildAddonsInTechDocs([]) + await TechDocsAddonTester.buildAddonsInTechDocs([]) .withDom(TEST_CONTENT) .withApis([[entityPresentationApiRef, entityPresentationApiMock]]) .renderWithEffects(); - const content = getByText('TEST_CONTENT'); + const content = screen.getByShadowText('TEST_CONTENT'); useShadowRootElementsMock.mockReturnValue([content]); - fireEvent.click(getByTitle('Settings')); + fireEvent.click(screen.getByShadowTitle('Settings')); await waitFor(() => { - expect(getByText('Text size')).toBeInTheDocument(); + expect(screen.getByShadowText('Text size')).toBeInTheDocument(); }); - fireEvent.click(getByLabelText('Increase text size')); + fireEvent.click(screen.getByShadowLabelText('Increase text size')); await waitFor(() => { - expect(getByDisplayValue('115')).toBeInTheDocument(); + expect(screen.getByShadowDisplayValue('115')).toBeInTheDocument(); }); - const slider = getByRole('slider'); + const slider = screen.getByShadowRole('slider'); expect(slider).toHaveTextContent('115%'); - let style = window.getComputedStyle(getByText('TEST_CONTENT')); + let style = window.getComputedStyle(screen.getByShadowText('TEST_CONTENT')); expect(style.getPropertyValue('--md-typeset-font-size')).toBe('18.4px'); - fireEvent.click(getByLabelText('Decrease text size')); + fireEvent.click(screen.getByShadowLabelText('Decrease text size')); await waitFor(() => { - expect(getByDisplayValue('100')).toBeInTheDocument(); + expect(screen.getByShadowDisplayValue('100')).toBeInTheDocument(); }); expect(slider).toHaveTextContent('100%'); - style = window.getComputedStyle(getByText('TEST_CONTENT')); + style = window.getComputedStyle(screen.getByShadowText('TEST_CONTENT')); expect(style.getPropertyValue('--md-typeset-font-size')).toBe('16px'); }); diff --git a/yarn.lock b/yarn.lock index 3502df3388..604f87054a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7362,7 +7362,7 @@ __metadata: react: "npm:^18.0.2" react-dom: "npm:^18.0.2" react-router-dom: "npm:^6.3.0" - testing-library__dom: "npm:^7.29.4-beta.1" + shadow-dom-testing-library: "npm:^1.13.1" peerDependencies: "@testing-library/react": ^16.0.0 "@types/react": ^17.0.0 || ^18.0.0 @@ -7437,6 +7437,7 @@ __metadata: react: "npm:^18.0.2" react-dom: "npm:^18.0.2" react-router-dom: "npm:^6.3.0" + shadow-dom-testing-library: "npm:^1.13.1" peerDependencies: "@types/react": ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 @@ -45240,6 +45241,15 @@ __metadata: languageName: node linkType: hard +"shadow-dom-testing-library@npm:^1.13.1": + version: 1.13.1 + resolution: "shadow-dom-testing-library@npm:1.13.1" + peerDependencies: + "@testing-library/dom": ">= 8" + checksum: 10/a10f3466592691368f260c15230d9e830cc5122d20002ad9b6c2918fa245089219d1f45c026153fa6ccf8848b546da6f985c0e461458c8c1e09786a1de626287 + languageName: node + linkType: hard + "shallow-clone@npm:^3.0.0": version: 3.0.1 resolution: "shallow-clone@npm:3.0.1" @@ -47166,13 +47176,6 @@ __metadata: languageName: node linkType: hard -"testing-library__dom@npm:^7.29.4-beta.1": - version: 7.29.4-beta.1 - resolution: "testing-library__dom@npm:7.29.4-beta.1" - checksum: 10/d912418803b77df672c0894d053327a4b366cf7e5312dfb73bd2089d36272e2b38bccc1bd7284d9ed2f9f6530797778d0f72e94b8a44fe5d0327d11e7f757f2b - languageName: node - linkType: hard - "text-decoder@npm:^1.1.0": version: 1.2.3 resolution: "text-decoder@npm:1.2.3"