Skip to content

test: added test case for subnavigation #6595

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mfranzke wants to merge 4 commits into
base: main
Choose a base branch
from
Open

test: added test case for subnavigation #6595

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6025f19
test: added test case for subnavigation
mfranzke Apr 30, 2026
99ea75a
Apply suggestion from @Copilot
mfranzke May 1, 2026
20f24ed
Merge branch 'main' into 6594-testnavigation-item-add-test-for-opened…
mfranzke May 11, 2026
b61182a
Merge branch 'main' into 6594-testnavigation-item-add-test-for-opened…
mfranzke May 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 61 additions & 0 deletions packages/components/src/components/navigation-item/navigation-item.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import AxeBuilder from '@axe-core/playwright';
import { expect, test } from '@playwright/experimental-ct-react';

import { DBDrawer } from '../drawer';
import { DBNavigation } from '../navigation';
import { DBNavigationItem } from './index';
// @ts-ignore - vue can only find it with .ts as file ending
import { DEFAULT_VIEWPORT } from '../../shared/constants.ts';
Expand All @@ -19,6 +21,44 @@ const comp: any = (
</menu>
);

const nestedSubNavigationComp: any = (
<DBDrawer open={true} backdrop="none" position="absolute">
<DBNavigation>
<DBNavigationItem
subNavigation={
<>
<DBNavigationItem
subNavigation={
<>
<DBNavigationItem>
<a href="#" aria-current="page">
Sub-Sub-Navi-Item 1
</a>
</DBNavigationItem>
<DBNavigationItem>
<a href="#">Sub-Sub-Navi-Item 2</a>
</DBNavigationItem>
</>
}>
Sub-Navi-Item 1
</DBNavigationItem>
<DBNavigationItem>
<a href="#">Sub-Navi-Item 2</a>
</DBNavigationItem>
</>
}>
Navi-Item 1
</DBNavigationItem>
<DBNavigationItem icon="x_placeholder">
<a href="#">Navi-Item 2</a>
</DBNavigationItem>
<DBNavigationItem disabled>
<a href="#">Navi-Item 3</a>
</DBNavigationItem>
</DBNavigation>
</DBDrawer>
);

const testComponent = () => {
test('should contain text', async ({ mount }) => {
const component = await mount(comp);
Expand All @@ -29,6 +69,27 @@ const testComponent = () => {
const component = await mount(comp);
await expect(component).toHaveScreenshot();
});

test('should match screenshot with expanded mobile sub-navigation inside drawer', async ({
mount,
page
}) => {
await page.emulateMedia({ reducedMotion: 'reduce' });
await mount(nestedSubNavigationComp);

const navigationItemButton = page.getByRole('button', { name: 'Navi-Item 1' });
const subNavigationItemButton = page.getByRole('button', { name: 'Sub-Navi-Item 1' });

await navigationItemButton.click();
await expect(navigationItemButton).toHaveAttribute('aria-expanded', 'true');

await subNavigationItemButton.click();
await expect(subNavigationItemButton).toHaveAttribute('aria-expanded', 'true');

const drawer = page.locator('.db-drawer');
Comment thread
mfranzke marked this conversation as resolved.
await expect(drawer).toHaveAttribute('data-transition', 'open');
await expect(drawer).toHaveScreenshot();
Comment thread
mfranzke marked this conversation as resolved.
Comment on lines +89 to +91
});
};
const testA11y = () => {
test('should have same aria-snapshot', async ({ mount }, testInfo) => {
Expand Down
Loading