From 52c82714bc8b6569dd12f2e92a9470bc8aa545c2 Mon Sep 17 00:00:00 2001 From: Yingbai He Date: Mon, 18 Nov 2024 00:02:47 -0800 Subject: [PATCH] feat(TechDocs): add test for paginated docs tables Signed-off-by: Yingbai He --- .../Tables/CursorPaginatedDocsTable.test.tsx | 168 ++++++++++++++++++ .../Tables/OffsetPaginatedDocsTable.test.tsx | 111 ++++++++++++ 2 files changed, 279 insertions(+) create mode 100644 plugins/techdocs/src/home/components/Tables/CursorPaginatedDocsTable.test.tsx create mode 100644 plugins/techdocs/src/home/components/Tables/OffsetPaginatedDocsTable.test.tsx diff --git a/plugins/techdocs/src/home/components/Tables/CursorPaginatedDocsTable.test.tsx b/plugins/techdocs/src/home/components/Tables/CursorPaginatedDocsTable.test.tsx new file mode 100644 index 0000000000..d7ab3827e1 --- /dev/null +++ b/plugins/techdocs/src/home/components/Tables/CursorPaginatedDocsTable.test.tsx @@ -0,0 +1,168 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { ReactNode } from 'react'; +import { fireEvent, screen, waitFor } from '@testing-library/react'; +import { CursorPaginatedDocsTable } from './CursorPaginatedDocsTable'; +import { DocsTableRow } from './types'; +import { renderInTestApp } from '@backstage/test-utils'; +import { + DefaultEntityFilters, + EntityKindFilter, + EntityListContextProps, +} from '@backstage/plugin-catalog-react'; +import { MockEntityListContextProvider } from '@backstage/plugin-catalog-react/testUtils'; + +describe('CursorPaginatedDocsTable', () => { + const data = new Array(100).fill(0).map((_, index) => { + const name = `techdocs-${index}`; + return { + entity: { + apiVersion: '1', + kind: 'TestKind', + metadata: { + name, + }, + }, + resolved: { + docsUrl: 'https://example.com', + ownedByRelationsTitle: 'owned', + ownedByRelations: [], + }, + } as DocsTableRow; + }); + + const columns = [ + { + title: 'Title', + field: 'entity.metadata.name', + searchable: true, + }, + ]; + + const wrapInContext = ( + node: ReactNode, + value?: Partial>, + ) => { + return ( + + {node} + + ); + }; + + it('should display all the items', async () => { + await renderInTestApp( + wrapInContext(), + ); + + for (const item of data) { + expect(screen.queryByText(item.entity.metadata.name)).toBeInTheDocument(); + } + }); + + it('should display and invoke the next button', async () => { + const { rerender } = await renderInTestApp( + wrapInContext( + , + ), + ); + + expect( + screen.queryAllByRole('button', { name: 'Next Page' })[0], + ).toBeDisabled(); + + const fn = jest.fn(); + + rerender( + wrapInContext( + , + ), + ); + + const nextButton = screen.queryAllByRole('button', { + name: 'Next Page', + })[0]; + expect(nextButton).toBeEnabled(); + + fireEvent.click(nextButton); + expect(fn).toHaveBeenCalled(); + }); + + it('should display and invoke the prev button', async () => { + const { rerender } = await renderInTestApp( + wrapInContext( + , + ), + ); + + expect( + screen.queryAllByRole('button', { name: 'Next Page' })[0], + ).toBeDisabled(); + + const fn = jest.fn(); + + rerender( + wrapInContext( + , + ), + ); + + const prevButton = screen.queryAllByRole('button', { + name: 'Previous Page', + })[0]; + expect(prevButton).toBeEnabled(); + + fireEvent.click(prevButton); + expect(fn).toHaveBeenCalled(); + }); + + it('should display entity names when loading has finished and no error occurred', async () => { + await renderInTestApp( + e.entity), + totalItems: data.length, + filters: { + kind: new EntityKindFilter('techdocs'), + }, + }} + > + + , + ); + + expect(screen.getByText(/techdocs-0/)).toBeInTheDocument(); + expect(screen.getByText(/techdocs-50/)).toBeInTheDocument(); + expect(screen.getByText(/techdocs-99/)).toBeInTheDocument(); + await waitFor(() => { + expect(screen.getByText(/My title/)).toBeInTheDocument(); + }); + }); +}); diff --git a/plugins/techdocs/src/home/components/Tables/OffsetPaginatedDocsTable.test.tsx b/plugins/techdocs/src/home/components/Tables/OffsetPaginatedDocsTable.test.tsx new file mode 100644 index 0000000000..2932b499e1 --- /dev/null +++ b/plugins/techdocs/src/home/components/Tables/OffsetPaginatedDocsTable.test.tsx @@ -0,0 +1,111 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { ReactNode } from 'react'; +import { fireEvent, screen } from '@testing-library/react'; +import { DocsTableRow } from './types'; +import { renderInTestApp } from '@backstage/test-utils'; +import { + DefaultEntityFilters, + EntityListContextProps, +} from '@backstage/plugin-catalog-react'; +import { MockEntityListContextProvider } from '@backstage/plugin-catalog-react/testUtils'; +import { OffsetPaginatedDocsTable } from './OffsetPaginatedDocsTable'; + +describe('OffsetPaginatedDocsTable', () => { + const data = new Array(100).fill(0).map((_, index) => { + const name = `tectdocs-${index}`; + return { + entity: { + apiVersion: '1', + kind: 'TestKind', + metadata: { + name, + }, + }, + resolved: { + docsUrl: 'https://example.com', + ownedByRelationsTitle: 'owned', + ownedByRelations: [], + }, + } as DocsTableRow; + }); + + const columns = [ + { + title: 'Title', + field: 'entity.metadata.name', + searchable: true, + }, + ]; + + const wrapInContext = ( + node: ReactNode, + value?: Partial>, + ) => { + return ( + + {node} + + ); + }; + + it('should display all the items', async () => { + await renderInTestApp( + wrapInContext( + , + { + setOffset: jest.fn(), + limit: Number.MAX_SAFE_INTEGER, + offset: 0, + totalItems: data.length, + }, + ), + ); + + for (const item of data) { + expect(screen.queryByText(item.entity.metadata.name)).toBeInTheDocument(); + } + }); + + it('should display and invoke the next and previous buttons', async () => { + const offsetFn = jest.fn(); + + await renderInTestApp( + wrapInContext( + , + { setOffset: offsetFn, limit: 10, totalItems: data.length, offset: 0 }, + ), + ); + + expect(offsetFn).toHaveBeenNthCalledWith(1, 0); + const nextButton = screen.queryAllByRole('button', { + name: 'Next Page', + })[0]; + expect(nextButton).toBeEnabled(); + + fireEvent.click(nextButton); + expect(offsetFn).toHaveBeenNthCalledWith(2, 10); + + const prevButton = screen.queryAllByRole('button', { + name: 'Previous Page', + })[0]; + expect(prevButton).toBeEnabled(); + + fireEvent.click(prevButton); + expect(offsetFn).toHaveBeenNthCalledWith(3, 0); + }); +});