diff --git a/.eslintrc b/.eslintrc index daaa641e2..b58d62e30 100644 --- a/.eslintrc +++ b/.eslintrc @@ -95,6 +95,7 @@ { "allowTestingFrameworkSetupHook": "beforeEach" } - ] + ], + "testing-library/prefer-find-by": "off" } } diff --git a/__tests__/integration/mirador/tests/annotations.test.js b/__tests__/integration/mirador/tests/annotations.test.js index 3ff7414d9..a59b84059 100644 --- a/__tests__/integration/mirador/tests/annotations.test.js +++ b/__tests__/integration/mirador/tests/annotations.test.js @@ -1,5 +1,5 @@ import { expect, it } from 'vitest'; -import { screen, fireEvent, within } from '@testing-library/react'; +import { screen, fireEvent } from '@testing-library/react'; import { setupIntegrationTestViewer } from '@tests/utils/test-utils'; import config from '../mirador-configs/single-van-gogh'; @@ -13,7 +13,7 @@ describe('Annotations in Mirador', () => { setupIntegrationTestViewer(config); it('Loads the manifest', async () => { - const element = await screen.findByRole('region', { name: /Window: Self-Portrait Dedicated to Paul Gauguin/i }); + const element = await screen.findByLabelText(/Window: Self-Portrait Dedicated to Paul Gauguin/i); expect(element).toBeInTheDocument(); }); @@ -45,12 +45,20 @@ describe('Annotations in Mirador', () => { // Re. this regex: be sure that the number of annotations starts with a non zero digit const annoCountSubtitle = await screen.findByText(/Showing [1-9]\d* annotations/); expect(annoCountSubtitle).toBeInTheDocument(); - const annotationCount = annoCountSubtitle.innerText.match(/\d+/)[0]; + const annotationCount = annoCountSubtitle.textContent.match(/\d+/)[0]; - const annotationPanel = await screen.findByRole('complementary', { name: /annotations/i }); - expect(annotationPanel).toBeInTheDocument(); + // NOTE: findByRole was causing mysterious failures so we are using querySelector + // for the rest of this test. + /* eslint-disable testing-library/no-node-access */ + const annotationPanel = annoCountSubtitle.closest('aside'); + const menu = annotationPanel.querySelector('[role="menu"]'); - const listItems = await within(annotationPanel).findAllByRole('menuitem'); - expect(listItems).toHaveLength(annotationCount); + // Find all menu items + const listItems = menu.querySelectorAll('[role="menuitem"]'); + /* eslint-enable testing-library/no-node-access */ + + // Convert annotationCount (likely a string) to number + const expectedCount = Number(annotationCount); + expect(listItems.length).toBe(expectedCount); }); }); diff --git a/__tests__/integration/mirador/tests/minimalist.test.js b/__tests__/integration/mirador/tests/minimalist.test.js index 5edaabaa0..1126726de 100644 --- a/__tests__/integration/mirador/tests/minimalist.test.js +++ b/__tests__/integration/mirador/tests/minimalist.test.js @@ -7,7 +7,7 @@ describe('Minimalist configuration to Mirador', () => { setupIntegrationTestViewer(config); it('Loads a manifest and displays it without some of the default controls', async () => { - expect(await screen.findByRole('region', { name: /Window: Self-Portrait Dedicated to Paul Gauguin/i })).toBeInTheDocument(); + expect(await screen.findByLabelText(/Window: Self-Portrait Dedicated to Paul Gauguin/i)).toBeInTheDocument(); const infoButton = await screen.findByRole('tab', { name: /Information/i }); expect(infoButton).toBeInTheDocument(); diff --git a/__tests__/integration/mirador/tests/thumbnail-navigation.test.js b/__tests__/integration/mirador/tests/thumbnail-navigation.test.js index 0df91ba5e..74fb699e0 100644 --- a/__tests__/integration/mirador/tests/thumbnail-navigation.test.js +++ b/__tests__/integration/mirador/tests/thumbnail-navigation.test.js @@ -10,7 +10,8 @@ describe('Canvas navigation by clicking thumbnails', () => { /* eslint-disable */ it.skip('navigates a manifest using thumbnail navigation', async (context) => { // Make sure we have the manifest - const windowElement = await screen.findByRole('region', { name: /Window: Bodleian Library MS. Ind. Inst. Misc. 22/i }); + const windowElement = await screen.findByLabelText(/Window: Bodleian Library MS. Ind. Inst. Misc. 22/i); + expect(windowElement).toBeInTheDocument(); const windowId = windowElement.getAttribute('id'); diff --git a/__tests__/integration/mirador/tests/viewer-config.test.js b/__tests__/integration/mirador/tests/viewer-config.test.js index db51cf392..2fe1c1975 100644 --- a/__tests__/integration/mirador/tests/viewer-config.test.js +++ b/__tests__/integration/mirador/tests/viewer-config.test.js @@ -8,7 +8,7 @@ describe('initialViewerConfig', () => { describe('initialViewerConfig', () => { it('allows initialViewerConfig to be passed', async (context) => { - expect(await screen.findByRole('region', { name: /Window: Self-Portrait Dedicated to Paul Gauguin/i })).toBeInTheDocument(); + expect(await screen.findByLabelText(/Window: Self-Portrait Dedicated to Paul Gauguin/i)).toBeInTheDocument(); let viewerObject; await waitFor(() => { diff --git a/__tests__/integration/mirador/tests/window-actions.test.js b/__tests__/integration/mirador/tests/window-actions.test.js index 979fce627..cffd01f26 100644 --- a/__tests__/integration/mirador/tests/window-actions.test.js +++ b/__tests__/integration/mirador/tests/window-actions.test.js @@ -7,7 +7,7 @@ describe('Window actions', () => { setupIntegrationTestViewer(config); it('Closes a Mirador window', async () => { - expect(await screen.findByRole('region', { name: /Window: Self-Portrait Dedicated to Paul Gauguin/i })).toBeInTheDocument(); + expect(await screen.findByLabelText(/Window: Self-Portrait Dedicated to Paul Gauguin/i)).toBeInTheDocument(); const closeButton = screen.getByRole('button', { name: /Close window/i }); fireEvent.click(closeButton); await waitFor(() => expect(screen.queryByRole('region', { name: /Window: Self-Portrait Dedicated to Paul Gauguin/i })).not.toBeInTheDocument()); diff --git a/__tests__/utils/test-utils.js b/__tests__/utils/test-utils.js index 445ab7e0d..2d229f142 100644 --- a/__tests__/utils/test-utils.js +++ b/__tests__/utils/test-utils.js @@ -65,7 +65,7 @@ const setupMiradorViewer = async (config, plugins) => { render(
{ context.miradorInstance = miradorInstance; // Wait for the viewer to render - expect(await screen.findByTestId('mirador')).toBeInTheDocument(); + expect(await screen.findByTestId('test-mirador')).toBeInTheDocument(); expect(await screen.findByLabelText('Workspace')).toBeInTheDocument(); - - if ((config.windows || []).length > 0) { - await screen.findAllByRole('region', { name: /Window:/i }); - } }); }; diff --git a/package.json b/package.json index 1c0aa118f..849058015 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "lint:translations": "node ./scripts/i18n-lint.js", "size": "bundlewatch --config bundlewatch.config.json", "start": "vite", - "test": "npm run build && npm run lint && npm run size && vitest run" + "test": "npm run build && npm run lint && npm run size && DEBUG_PRINT_LIMIT=70000 vitest run" }, "license": "Apache-2.0", "contributors": [ @@ -85,7 +85,7 @@ "@emotion/styled": "^11.10.6", "@mui/material": "^7.x", "@mui/system": "^7.x", - "@testing-library/dom": "^10.4.0", + "@testing-library/dom": "^10.4.1", "@testing-library/jest-dom": "^6.1.5", "@testing-library/react": "^16.0.1", "@testing-library/user-event": "^14.4.3", @@ -104,7 +104,7 @@ "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-testing-library": "^6.2.0", "glob": "^10.3.0", - "happy-dom": "^17.0", + "happy-dom": "^18.0.1", "react": "^19.0.0", "react-dnd-test-backend": "^16.0.1", "react-dom": "^19.0.0", diff --git a/src/components/Window.jsx b/src/components/Window.jsx index f9869f2fb..a90d4c512 100644 --- a/src/components/Window.jsx +++ b/src/components/Window.jsx @@ -103,6 +103,7 @@ export function Window({ id={windowId} className={ns('window')} aria-label={t('window', { label })} + data-testid="test-region" >