techdocs-addons-test-utils: major bump to remove explicit screen
Signed-off-by: Fredrik Adelöw <freben@gmail.com>
This commit is contained in:
Fredrik Adelöw
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@backstage/plugin-techdocs-module-addons-contrib': patch
|
||||
---
|
||||
|
||||
Updated tests to match test-utils change
|
||||
@@ -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([<AnAddon />])
|
||||
.withDom(<body>TEST_CONTENT</body>)
|
||||
.renderWithEffects();
|
||||
|
||||
expect(screen.getByShadowText('TEST_CONTENT')).toBeInTheDocument();
|
||||
```
|
||||
@@ -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:^",
|
||||
|
||||
@@ -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<any, string | JSXElementConstructor<any>>;
|
||||
static buildAddonsInTechDocs(addons: ReactElement[]): TechDocsAddonTester;
|
||||
renderWithEffects(): Promise<
|
||||
typeof screen_2 & {
|
||||
shadowRoot: ShadowRoot | null;
|
||||
}
|
||||
>;
|
||||
renderWithEffects(): Promise<{
|
||||
shadowRoot: ShadowRoot | null;
|
||||
}>;
|
||||
withApis<T extends any[]>(apis: TechdocsAddonTesterApis<T>): this;
|
||||
withDom(dom: ReactElement): this;
|
||||
withEntity(entity: Partial<TechDocsEntityMetadata>): this;
|
||||
|
||||
@@ -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([<AnAddon />])
|
||||
* .withDom(<body>TEST_CONTENT</body>)
|
||||
* .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,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
|
||||
+24
-20
@@ -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([<ExpandableNavigation />])
|
||||
.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([
|
||||
<ExpandableNavigation />,
|
||||
])
|
||||
.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([
|
||||
<ExpandableNavigation />,
|
||||
])
|
||||
.withDom(mockNavWithSublevels)
|
||||
.withApis([[entityPresentationApiRef, entityPresentationApiMock]])
|
||||
.renderWithEffects();
|
||||
|
||||
const toggles =
|
||||
shadowRoot!.querySelectorAll<HTMLInputElement>('.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([
|
||||
<ExpandableNavigation />,
|
||||
])
|
||||
await TechDocsAddonTester.buildAddonsInTechDocs([<ExpandableNavigation />])
|
||||
.withDom(mockNavWithoutSublevels)
|
||||
.withApis([[entityPresentationApiRef, entityPresentationApiMock]])
|
||||
.renderWithEffects();
|
||||
|
||||
expect(
|
||||
queryByRole('button', { name: 'expand-nav' }),
|
||||
screen.queryByShadowRole('button', { name: 'expand-nav' }),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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([
|
||||
<LightBox />,
|
||||
])
|
||||
await TechDocsAddonTester.buildAddonsInTechDocs([<LightBox />])
|
||||
.withDom(<body>TEST_CONTENT</body>)
|
||||
.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([
|
||||
<LightBox />,
|
||||
])
|
||||
await TechDocsAddonTester.buildAddonsInTechDocs([<LightBox />])
|
||||
.withDom(
|
||||
<img
|
||||
data-testid="fixture"
|
||||
@@ -54,7 +51,9 @@ describe('LightBox', () => {
|
||||
.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),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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([
|
||||
<ReportIssue debounceTime={0} />,
|
||||
])
|
||||
.withDom(
|
||||
<html lang="en">
|
||||
<head />
|
||||
<body>
|
||||
<div data-md-component="content">
|
||||
<div data-md-component="navigation" />
|
||||
<div data-md-component="toc" />
|
||||
<div data-md-component="sidebar" />
|
||||
const { shadowRoot } = await TechDocsAddonTester.buildAddonsInTechDocs([
|
||||
<ReportIssue debounceTime={0} />,
|
||||
])
|
||||
.withDom(
|
||||
<html lang="en">
|
||||
<head />
|
||||
<body>
|
||||
<div data-md-component="content">
|
||||
<div data-md-component="navigation" />
|
||||
<div data-md-component="toc" />
|
||||
<div data-md-component="sidebar" />
|
||||
|
||||
<div data-md-component="main">
|
||||
<div className="md-content">
|
||||
<article>
|
||||
<a
|
||||
title="Leave feedback for this page"
|
||||
href="https://github.com/backstage/backstage/issues/new"
|
||||
>
|
||||
Leave feedback
|
||||
</a>
|
||||
<a
|
||||
title="Edit this page"
|
||||
href="https://github.com/backstage/backstage/edit/master/docs/README.md"
|
||||
>
|
||||
Edit page
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
<div data-md-component="main">
|
||||
<div className="md-content">
|
||||
<article>
|
||||
<a
|
||||
title="Leave feedback for this page"
|
||||
href="https://github.com/backstage/backstage/issues/new"
|
||||
>
|
||||
Leave feedback
|
||||
</a>
|
||||
<a
|
||||
title="Edit this page"
|
||||
href="https://github.com/backstage/backstage/edit/master/docs/README.md"
|
||||
>
|
||||
Edit page
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>,
|
||||
)
|
||||
.withApis([
|
||||
[scmIntegrationsApiRef, { byUrl }],
|
||||
[entityPresentationApiRef, entityPresentationApiMock],
|
||||
])
|
||||
.renderWithEffects();
|
||||
</div>
|
||||
</body>
|
||||
</html>,
|
||||
)
|
||||
.withApis([
|
||||
[scmIntegrationsApiRef, { byUrl }],
|
||||
[entityPresentationApiRef, entityPresentationApiMock],
|
||||
])
|
||||
.renderWithEffects();
|
||||
|
||||
(shadowRoot as ShadowRoot & Pick<Document, 'getSelection'>).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([
|
||||
<ReportIssue debounceTime={0} />,
|
||||
])
|
||||
.withDom(
|
||||
<html lang="en">
|
||||
<head />
|
||||
<body>
|
||||
<div data-md-component="content">
|
||||
<div data-md-component="navigation" />
|
||||
<div data-md-component="toc" />
|
||||
<div data-md-component="sidebar" />
|
||||
const { shadowRoot } = await TechDocsAddonTester.buildAddonsInTechDocs([
|
||||
<ReportIssue debounceTime={0} />,
|
||||
])
|
||||
.withDom(
|
||||
<html lang="en">
|
||||
<head />
|
||||
<body>
|
||||
<div data-md-component="content">
|
||||
<div data-md-component="navigation" />
|
||||
<div data-md-component="toc" />
|
||||
<div data-md-component="sidebar" />
|
||||
|
||||
<div data-md-component="main">
|
||||
<div className="md-content">
|
||||
<article>
|
||||
<a
|
||||
title="Leave feedback for this page"
|
||||
href="https://gitlab.com/backstage/backstage/issues/new"
|
||||
>
|
||||
Leave feedback
|
||||
</a>
|
||||
<a
|
||||
title="Edit this page"
|
||||
href="https://gitlab.com/backstage/backstage/-/edit/master/docs/README.md"
|
||||
>
|
||||
Edit page
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
<div data-md-component="main">
|
||||
<div className="md-content">
|
||||
<article>
|
||||
<a
|
||||
title="Leave feedback for this page"
|
||||
href="https://gitlab.com/backstage/backstage/issues/new"
|
||||
>
|
||||
Leave feedback
|
||||
</a>
|
||||
<a
|
||||
title="Edit this page"
|
||||
href="https://gitlab.com/backstage/backstage/-/edit/master/docs/README.md"
|
||||
>
|
||||
Edit page
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>,
|
||||
)
|
||||
.withApis([
|
||||
[scmIntegrationsApiRef, { byUrl }],
|
||||
[entityPresentationApiRef, entityPresentationApiMock],
|
||||
])
|
||||
.renderWithEffects();
|
||||
</div>
|
||||
</body>
|
||||
</html>,
|
||||
)
|
||||
.withApis([
|
||||
[scmIntegrationsApiRef, { byUrl }],
|
||||
[entityPresentationApiRef, entityPresentationApiMock],
|
||||
])
|
||||
.renderWithEffects();
|
||||
|
||||
(shadowRoot as ShadowRoot & Pick<Document, 'getSelection'>).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([
|
||||
<ReportIssue debounceTime={0} templateBuilder={templateBuilder} />,
|
||||
])
|
||||
.withDom(
|
||||
<html lang="en">
|
||||
<head />
|
||||
<body>
|
||||
<div data-md-component="content">
|
||||
<div data-md-component="navigation" />
|
||||
<div data-md-component="toc" />
|
||||
<div data-md-component="sidebar" />
|
||||
const { shadowRoot } = await TechDocsAddonTester.buildAddonsInTechDocs([
|
||||
<ReportIssue debounceTime={0} templateBuilder={templateBuilder} />,
|
||||
])
|
||||
.withDom(
|
||||
<html lang="en">
|
||||
<head />
|
||||
<body>
|
||||
<div data-md-component="content">
|
||||
<div data-md-component="navigation" />
|
||||
<div data-md-component="toc" />
|
||||
<div data-md-component="sidebar" />
|
||||
|
||||
<div data-md-component="main">
|
||||
<div className="md-content">
|
||||
<article>
|
||||
<a
|
||||
title="Leave feedback for this page"
|
||||
href="https://gitlab.com/backstage/backstage/issues/new"
|
||||
>
|
||||
Leave feedback
|
||||
</a>
|
||||
<a
|
||||
title="Edit this page"
|
||||
href="https://gitlab.com/backstage/backstage/-/edit/master/docs/README.md"
|
||||
>
|
||||
Edit page
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
<div data-md-component="main">
|
||||
<div className="md-content">
|
||||
<article>
|
||||
<a
|
||||
title="Leave feedback for this page"
|
||||
href="https://gitlab.com/backstage/backstage/issues/new"
|
||||
>
|
||||
Leave feedback
|
||||
</a>
|
||||
<a
|
||||
title="Edit this page"
|
||||
href="https://gitlab.com/backstage/backstage/-/edit/master/docs/README.md"
|
||||
>
|
||||
Edit page
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>,
|
||||
)
|
||||
.withApis([
|
||||
[scmIntegrationsApiRef, { byUrl }],
|
||||
[entityPresentationApiRef, entityPresentationApiMock],
|
||||
])
|
||||
.renderWithEffects();
|
||||
</div>
|
||||
</body>
|
||||
</html>,
|
||||
)
|
||||
.withApis([
|
||||
[scmIntegrationsApiRef, { byUrl }],
|
||||
[entityPresentationApiRef, entityPresentationApiMock],
|
||||
])
|
||||
.renderWithEffects();
|
||||
|
||||
(shadowRoot as ShadowRoot & Pick<Document, 'getSelection'>).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([
|
||||
<ReportIssue debounceTime={0} />,
|
||||
])
|
||||
.withDom(
|
||||
<html lang="en">
|
||||
<head />
|
||||
<body>
|
||||
<div data-md-component="content">
|
||||
<div data-md-component="main">
|
||||
<div className="md-content">
|
||||
<article>
|
||||
<a
|
||||
title="Edit this page"
|
||||
href="https://gerrit.example.com/admin/repos/edit/repo/my/repo/branch/refs/heads/master/file/docs/README.md"
|
||||
>
|
||||
Edit page
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
const { shadowRoot } = await TechDocsAddonTester.buildAddonsInTechDocs([
|
||||
<ReportIssue debounceTime={0} />,
|
||||
])
|
||||
.withDom(
|
||||
<html lang="en">
|
||||
<head />
|
||||
<body>
|
||||
<div data-md-component="content">
|
||||
<div data-md-component="main">
|
||||
<div className="md-content">
|
||||
<article>
|
||||
<a
|
||||
title="Edit this page"
|
||||
href="https://gerrit.example.com/admin/repos/edit/repo/my/repo/branch/refs/heads/master/file/docs/README.md"
|
||||
>
|
||||
Edit page
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>,
|
||||
)
|
||||
.withApis([[scmIntegrationsApiRef, { byUrl }]])
|
||||
.renderWithEffects();
|
||||
</div>
|
||||
</body>
|
||||
</html>,
|
||||
)
|
||||
.withApis([[scmIntegrationsApiRef, { byUrl }]])
|
||||
.renderWithEffects();
|
||||
|
||||
(shadowRoot as ShadowRoot & Pick<Document, 'getSelection'>).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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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([
|
||||
<TextSize />,
|
||||
])
|
||||
await TechDocsAddonTester.buildAddonsInTechDocs([<TextSize />])
|
||||
.withDom(<body>TEST_CONTENT</body>)
|
||||
.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([<TextSize />])
|
||||
.withDom(<body>TEST_CONTENT</body>)
|
||||
.withApis([[entityPresentationApiRef, entityPresentationApiMock]])
|
||||
.renderWithEffects();
|
||||
await TechDocsAddonTester.buildAddonsInTechDocs([<TextSize />])
|
||||
.withDom(<body>TEST_CONTENT</body>)
|
||||
.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([<TextSize />])
|
||||
await TechDocsAddonTester.buildAddonsInTechDocs([<TextSize />])
|
||||
.withDom(<body>TEST_CONTENT</body>)
|
||||
.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');
|
||||
});
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user