test(healthcheck): trim duplicate drawer coverage

Reuse the Healthcheck fixture and keep focus restoration checks alongside
the browser interaction matrix. Check reload once per opening order and
make the external-close test detect focus stealing.

Author: astandrik

src/components/Drawer/__test__/DrawerAccessibility.test.tsx

@@ -10,7 +10,7 @@ jest.mock('../../../utils/hooks/useSetting', () => ({
     useSetting: () => [undefined, jest.fn()],
 }));
 
-function Fixture({disableModal = true}: {disableModal?: boolean}) {
+function Fixture() {
     const [healthcheck, setHealthcheck] = React.useState(false);
     const [assistant, setAssistant] = React.useState(false);
     return (
@@ -21,7 +21,7 @@ function Fixture({disableModal = true}: {disableModal?: boolean}) {
                     isDrawerVisible={healthcheck}
                     onCloseDrawer={() => setHealthcheck(false)}
                     drawerControls={[{type: 'close'}]}
-                    disableModal={disableModal}
+                    disableModal
                     renderDrawerContent={() => <input aria-label="Healthcheck filter" />}
                 >
                     <button onClick={() => setHealthcheck(true)}>Open Healthcheck</button>
@@ -65,46 +65,6 @@ afterEach(() => {
     jest.restoreAllMocks();
 });
 
-for (const first of ['Healthcheck', 'assistant']) {
-    test(`keeps both panels and the page accessible with ${first} opened first`, async () => {
-        render(<Fixture />);
-        fireEvent.click(screen.getByRole('button', {name: `Open ${first}`}));
-        const second = first === 'Healthcheck' ? 'assistant' : 'Healthcheck';
-        fireEvent.click(await screen.findByRole('button', {name: `Open ${second}`}));
-        expect(await screen.findByRole('dialog', {name: 'Healthcheck'})).toBeInTheDocument();
-        expect(screen.getByRole('dialog', {name: 'Assistant'})).toBeInTheDocument();
-        expect(screen.getByRole('button', {name: 'Open assistant'})).toBeInTheDocument();
-        fireEvent.click(
-            within(screen.getByRole('dialog', {name: 'Healthcheck'})).getByRole('button', {
-                name: 'Close',
-            }),
-        );
-        await waitFor(() =>
-            expect(screen.queryByRole('dialog', {name: 'Healthcheck'})).not.toBeInTheDocument(),
-        );
-        expect(screen.getByRole('dialog', {name: 'Assistant'})).toBeInTheDocument();
-    });
-}
-
-test('Escape outside a non-modal drawer leaves it open, Escape inside closes it', async () => {
-    render(<Fixture />);
-    fireEvent.click(screen.getByRole('button', {name: 'Open Healthcheck'}));
-    const panel = await screen.findByRole('dialog', {name: 'Healthcheck'});
-    fireEvent.keyDown(screen.getByRole('button', {name: 'Open assistant'}), {key: 'Escape'});
-    expect(panel).toBeInTheDocument();
-    fireEvent.keyDown(panel, {key: 'Escape'});
-    await waitFor(() =>
-        expect(screen.queryByRole('dialog', {name: 'Healthcheck'})).not.toBeInTheDocument(),
-    );
-});
-
-test('preserves modal behavior for callers that opt out of the new mode', async () => {
-    render(<Fixture disableModal={false} />);
-    fireEvent.click(screen.getByRole('button', {name: 'Open Healthcheck'}));
-    expect(await screen.findByRole('dialog', {name: 'Healthcheck'})).toBeInTheDocument();
-    expect(screen.queryByRole('button', {name: 'Open assistant'})).not.toBeInTheDocument();
-});
-
 test('returns focus to its opener after visiting the adjacent panel', async () => {
     render(<Fixture />);
     const opener = screen.getByRole('button', {name: 'Open Healthcheck'});
@@ -123,7 +83,9 @@ test('returns focus to its opener after visiting the adjacent panel', async () =
 
 test('does not steal focus from an adjacent panel when closed externally', async () => {
     render(<Fixture />);
-    fireEvent.click(screen.getByRole('button', {name: 'Open Healthcheck'}));
+    const opener = screen.getByRole('button', {name: 'Open Healthcheck'});
+    opener.focus();
+    fireEvent.click(opener);
     const healthcheck = await screen.findByRole('dialog', {name: 'Healthcheck'});
     fireEvent.click(screen.getByRole('button', {name: 'Open assistant'}));
     const assistantClose = await screen.findByRole('button', {name: 'Close assistant'});

src/containers/Tenant/Healthcheck/components/__test__/HealthcheckDrawerExtension.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {ThemeProvider} from '@gravity-ui/uikit';
-import {fireEvent, render, screen, waitFor, within} from '@testing-library/react';
+import {isInaccessible, render, screen, waitFor} from '@testing-library/react';
 
 import {
     DrawerContextProvider,
@@ -70,6 +70,7 @@ function DrawerFixture({
                     downloadTooltip="Download"
                 >
                     <InsetProbe />
+                    <button>Page action</button>
                 </HealthcheckDrawer>
             </DrawerContextProvider>
         </ThemeProvider>
@@ -153,45 +154,11 @@ describe('Healthcheck drawer extension', () => {
         async (disableModal) => {
             configureUIFactory({healthcheck: {disableModal}});
 
-            function ConfiguredDrawer() {
-                const [open, setOpen] = React.useState(false);
-                const close = React.useCallback(() => setOpen(false), []);
-
-                return (
-                    <ThemeProvider theme="light">
-                        <DrawerContextProvider>
-                            <HealthcheckDrawer
-                                isDrawerVisible={open}
-                                onCloseDrawer={close}
-                                drawerId="configured-healthcheck"
-                                storageKey="configured-healthcheck"
-                                title="Configured Healthcheck"
-                                healthcheckData={undefined}
-                                downloadFilePrefix="healthcheck"
-                                downloadTooltip="Download"
-                                renderDrawerContent={() => <input aria-label="Filter" />}
-                            >
-                                <button onClick={() => setOpen(true)}>Open Healthcheck</button>
-                                <button>Adjacent panel</button>
-                            </HealthcheckDrawer>
-                        </DrawerContextProvider>
-                    </ThemeProvider>
-                );
-            }
-
-            render(<ConfiguredDrawer />);
-            fireEvent.click(screen.getByRole('button', {name: 'Open Healthcheck'}));
-            const drawer = await screen.findByRole('dialog', {name: 'Configured Healthcheck'});
-            if (disableModal) {
-                expect(screen.getByRole('button', {name: 'Adjacent panel'})).toBeInTheDocument();
-            } else {
-                expect(
-                    screen.queryByRole('button', {name: 'Adjacent panel'}),
-                ).not.toBeInTheDocument();
-            }
-            fireEvent.click(within(drawer).getByRole('button', {name: 'Close'}));
-            await waitFor(() => expect(drawer).not.toBeInTheDocument());
-            expect(screen.getByRole('button', {name: 'Adjacent panel'})).toBeInTheDocument();
+            render(<DrawerFixture />);
+            await screen.findByRole('dialog', {name: 'Healthcheck'});
+            await waitFor(() => {
+                expect(isInaccessible(screen.getByText('Page action'))).toBe(!disableModal);
+            });
         },
     );
 

tests/fixtures/healthcheckDrawer.tsx

@@ -7,7 +7,7 @@ import {Provider} from 'react-redux';
 import {DrawerContextProvider} from '../../src/components/Drawer/DrawerContext';
 import {HealthcheckDrawer} from '../../src/containers/Tenant/Healthcheck/components/HealthcheckDrawer';
 import {store} from '../../src/store/defaultStore';
-import {configureUIFactory, uiFactory} from '../../src/uiFactory/uiFactory';
+import {configureUIFactory} from '../../src/uiFactory/uiFactory';
 
 const COMPANION_WIDTH = 320;
 
@@ -109,7 +109,7 @@ export function renderHealthcheckDrawerFixture(
     mode: NonNullable<Window['e2eHealthcheckDrawerMode']>,
 ) {
     const overrides = mode === 'default' ? {} : {disableModal: mode === 'non-modal'};
-    configureUIFactory({healthcheck: {...uiFactory.healthcheck, ...overrides}});
+    configureUIFactory({healthcheck: overrides});
 
     const container = document.getElementById('root');
     if (!container) {

tests/suites/sidebar/healthcheckAccessibility.test.ts

@@ -91,11 +91,14 @@ test.describe('Non-modal Healthcheck accessibility', () => {
             await expect(panel(page, 'companion')).toBeVisible();
             await openPanel(page, 'Healthcheck');
             await expect(page.getByRole('dialog')).toHaveCount(2);
+            await page.reload();
+            await expect(page.getByTestId('healthcheck-drawer-fixture')).toBeVisible();
+            await openBoth(page, first);
         });
 
         for (const closing of ['Healthcheck', 'companion'] as const) {
             for (const method of ['Close', 'Escape'] as const) {
-                test(`${first} first: ${method} ${closing}, reopen and reload`, async ({page}) => {
+                test(`${first} first: ${method} ${closing} and reopen`, async ({page}) => {
                     await openFixture(page);
                     await openBoth(page, first);
                     const closingPanel = panel(page, closing);
@@ -118,9 +121,6 @@ test.describe('Non-modal Healthcheck accessibility', () => {
                     ).toBeFocused();
                     await openPanel(page, closing);
                     await expect(page.getByRole('dialog')).toHaveCount(2);
-                    await page.reload();
-                    await expect(page.getByTestId('healthcheck-drawer-fixture')).toBeVisible();
-                    await openBoth(page, first);
                 });
             }
         }