Merge pull request #31936 from backstage/freben/techdocs-addons-test-utils
techdocs-addons-test-utils: major bump to remove explicit screen
This commit is contained in:
Fredrik Adelöw
@@ -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');
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user