From e3670d2d622046444ef56e70d9a2d9a86f54e358 Mon Sep 17 00:00:00 2001 From: lokesh-bruno Date: Mon, 21 Sep 2026 16:35:12 +0530 Subject: [PATCH 1/4] Theme test cases coverage --- .../e2e/tests/theming/theme-toggle.spec.ts | 107 ++++++++++++++---- 1 file changed, 86 insertions(+), 21 deletions(-) diff --git a/packages/bruno-api-docs/e2e/tests/theming/theme-toggle.spec.ts b/packages/bruno-api-docs/e2e/tests/theming/theme-toggle.spec.ts index 0559d4c3..8c1c82c6 100644 --- a/packages/bruno-api-docs/e2e/tests/theming/theme-toggle.spec.ts +++ b/packages/bruno-api-docs/e2e/tests/theming/theme-toggle.spec.ts @@ -6,34 +6,99 @@ import { test, expect } from '../../playwright'; test.describe('Theme switcher', () => { test.use({ colorScheme: 'light' }); - test.beforeEach(async ({ page }) => { - await page.goto('/'); - }); + test.describe('when the OS prefers light', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/'); + }); - test('starts in light mode, with the toggle offering "Switch to dark theme"', async ({ page, themeToggle }) => { - await expect(page.locator('html')).toHaveAttribute('data-theme', 'light'); - await expect(themeToggle.button).toHaveAccessibleName('Switch to dark theme'); - }); + test('starts in light mode, with the toggle offering "Switch to dark theme"', async ({ page, themeToggle }) => { + await expect(page.locator('html')).toHaveAttribute('data-theme', 'light'); + await expect(themeToggle.button).toHaveAccessibleName('Switch to dark theme'); + }); - test('switches the whole app to dark mode when the toggle is clicked', async ({ page, themeToggle }) => { - await themeToggle.toggle(); + test('switches the whole app to dark mode when the toggle is clicked', async ({ page, themeToggle }) => { + await themeToggle.toggle(); - await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark'); - // The toggle now offers the opposite action. - await expect(themeToggle.button).toHaveAccessibleName('Switch to light theme'); - }); + await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark'); + // The toggle now offers the opposite action. + await expect(themeToggle.button).toHaveAccessibleName('Switch to light theme'); + }); + + test('switches back to light mode when the toggle is clicked again', async ({ page, themeToggle }) => { + await themeToggle.toggle(); + await themeToggle.toggle(); + + await expect(page.locator('html')).toHaveAttribute('data-theme', 'light'); + }); + + test('remembers the chosen theme across a page reload', async ({ page, themeToggle }) => { + await themeToggle.toggle(); + await page.reload(); + + await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark'); + }); + + test('remembers the chosen theme across Overview, Environments, and a request', async ({ + page, + sidebar, + themeToggle, + overviewPage, + environmentsPage, + requestPage + }) => { + await themeToggle.toggle(); + await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark'); - test('switches back to light mode when the toggle is clicked again', async ({ page, themeToggle }) => { - await themeToggle.toggle(); - await themeToggle.toggle(); + await sidebar.overview.click(); + await expect(overviewPage.root).toBeVisible(); + await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark'); - await expect(page.locator('html')).toHaveAttribute('data-theme', 'light'); + await sidebar.environments.click(); + await expect(environmentsPage.root).toBeVisible(); + await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark'); + + await sidebar.open(['echo json']); + await expect(requestPage.root).toBeVisible(); + await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark'); + await expect(themeToggle.button).toHaveAccessibleName('Switch to light theme'); + }); + + test('remembers the chosen theme when the doc is opened in a new tab', async ({ + page, + context, + themeToggle + }) => { + await themeToggle.toggle(); + await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark'); + + const reopened = await context.newPage(); + await reopened.goto('/'); + + await expect(reopened.locator('html')).toHaveAttribute('data-theme', 'dark'); + await expect(reopened.getByTestId('theme-toggle')).toHaveAccessibleName('Switch to light theme'); + }); }); - test('remembers the chosen theme across a page reload', async ({ page, themeToggle }) => { - await themeToggle.toggle(); - await page.reload(); + test.describe('when the OS prefers dark', () => { + test.use({ colorScheme: 'dark' }); + + test.beforeEach(async ({ page }) => { + await page.goto('/'); + }); + + test('starts in dark mode, with the toggle offering "Switch to light theme"', async ({ page, themeToggle }) => { + await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark'); + await expect(themeToggle.button).toHaveAccessibleName('Switch to light theme'); + }); + + test('keeps an explicit light choice after reload, even though the OS prefers dark', async ({ page, themeToggle }) => { + await themeToggle.toggle(); + await expect(page.locator('html')).toHaveAttribute('data-theme', 'light'); + + await page.reload(); - await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark'); + await expect(page.locator('html')).toHaveAttribute('data-theme', 'light'); + await expect(themeToggle.button).toHaveAccessibleName('Switch to dark theme'); + }); }); }); From b040e9331db0c1a458c5cf454dc2b00c1c3b7429 Mon Sep 17 00:00:00 2001 From: lokesh-bruno Date: Tue, 22 Sep 2026 16:10:31 +0530 Subject: [PATCH 2/4] removed comments --- packages/bruno-api-docs/e2e/tests/theming/theme-toggle.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/bruno-api-docs/e2e/tests/theming/theme-toggle.spec.ts b/packages/bruno-api-docs/e2e/tests/theming/theme-toggle.spec.ts index 8c1c82c6..b1ca7e01 100644 --- a/packages/bruno-api-docs/e2e/tests/theming/theme-toggle.spec.ts +++ b/packages/bruno-api-docs/e2e/tests/theming/theme-toggle.spec.ts @@ -20,7 +20,7 @@ test.describe('Theme switcher', () => { await themeToggle.toggle(); await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark'); - // The toggle now offers the opposite action. + await expect(themeToggle.button).toHaveAccessibleName('Switch to light theme'); }); From 1e6f20a8a4fc2dd5eea4781e5c6eb2d2dc713ec2 Mon Sep 17 00:00:00 2001 From: Arpit Date: Thu, 24 Sep 2026 00:40:50 +0530 Subject: [PATCH 3/4] Update e2e tests for theme switcher coverage Expanded Playwright coverage for the theme switcher in e2e tests. --- .changeset/sweet-peaches-stare.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/sweet-peaches-stare.md diff --git a/.changeset/sweet-peaches-stare.md b/.changeset/sweet-peaches-stare.md new file mode 100644 index 00000000..e23c7460 --- /dev/null +++ b/.changeset/sweet-peaches-stare.md @@ -0,0 +1,5 @@ +--- +"@usebruno/api-docs": patch +--- + +test(e2e): expand Playwright coverage for the theme switcher From 033b42769c16f9a0c8cdb65db4a9faae355f3da9 Mon Sep 17 00:00:00 2001 From: lokesh-bruno Date: Fri, 25 Sep 2026 13:03:47 +0530 Subject: [PATCH 4/4] Addressed comments --- .../bruno-api-docs/e2e/tests/theming/theme-toggle.spec.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/bruno-api-docs/e2e/tests/theming/theme-toggle.spec.ts b/packages/bruno-api-docs/e2e/tests/theming/theme-toggle.spec.ts index b1ca7e01..38925824 100644 --- a/packages/bruno-api-docs/e2e/tests/theming/theme-toggle.spec.ts +++ b/packages/bruno-api-docs/e2e/tests/theming/theme-toggle.spec.ts @@ -1,4 +1,5 @@ import { test, expect } from '../../playwright'; +import { ThemeToggleComponent } from '../../components/layout/theme-toggle.component'; /** * The header has one button that flips the whole app between light and dark. @@ -73,9 +74,10 @@ test.describe('Theme switcher', () => { const reopened = await context.newPage(); await reopened.goto('/'); + const reopenedToggle = new ThemeToggleComponent(reopened); await expect(reopened.locator('html')).toHaveAttribute('data-theme', 'dark'); - await expect(reopened.getByTestId('theme-toggle')).toHaveAccessibleName('Switch to light theme'); + await expect(reopenedToggle.button).toHaveAccessibleName('Switch to light theme'); }); });