Add integration tests for dark mode toggle functionality on desktop and mobile

Author: andrewzamojc

src/lib/components/dark-mode-navigation-button.svelte

@@ -33,4 +33,5 @@
   tooltip={buttonText}
   label={buttonText}
   icon={buttonIcon}
+  data-testid="dark-mode-navigation-button"
 />

src/lib/holocene/navigation/navigation-button.svelte

@@ -25,6 +25,7 @@
     <div
       class="flex h-6 w-6 items-center after:absolute after:left-[calc(100%_+_1.5rem)] after:top-0 after:hidden after:h-8 after:items-center after:bg-slate-800 after:p-1 after:px-2 after:text-xs after:text-white after:content-[attr(data-tooltip)] group-data-[nav=closed]:hover:after:flex"
       data-tooltip={tooltip}
+      aria-hidden="true"
     >
       <Icon name={icon} {animate} {active} />
     </div>

…gration/dark-mode-toggle.desktop.spec.ts …ts/integration/dark-mode.desktop.spec.tstests/integration/dark-mode-toggle.desktop.spec.ts renamed to tests/integration/dark-mode.desktop.spec.ts tests/integration/dark-mode-toggle.desktop.spec.ts renamed to tests/integration/dark-mode.desktop.spec.ts

@@ -20,7 +20,6 @@ test.describe('Dark Mode Toggle', () => {
     const dayLabel = 'Day';
 
     // starts on day mode
-    // const button = page.getByRole('button', { name: dayLabel });
     const button = page.getByTestId('dark-mode-icon-button');
 
     await expect(button).toBeVisible();
@@ -31,21 +30,21 @@ test.describe('Dark Mode Toggle', () => {
 
     // after day is system mode
     await button.click();
-    await expect(button).toHaveAttribute('aria-label', systemDefaultLabel);
+    await expect(button).toHaveAccessibleName(systemDefaultLabel);
     expect(await page.evaluate(() => localStorage.getItem('dark mode'))).toBe(
       JSON.stringify('system'),
     );
 
     // after system is dark mode
     await button.click();
-    await expect(button).toHaveAttribute('aria-label', nightLabel);
+    await expect(button).toHaveAccessibleName(nightLabel);
     expect(await page.evaluate(() => localStorage.getItem('dark mode'))).toBe(
       JSON.stringify(true),
     );
 
     // cycle back to day
     await button.click();
-    await expect(button).toHaveAttribute('aria-label', dayLabel);
+    await expect(button).toHaveAccessibleName(dayLabel);
     expect(await page.evaluate(() => localStorage.getItem('dark mode'))).toBe(
       JSON.stringify(false),
     );

tests/integration/dark-mode.mobile.spec.ts

@@ -0,0 +1,55 @@
+import { expect, test } from '@playwright/test';
+
+import {
+  mockWorkflowsApis,
+  waitForWorkflowsApis,
+} from '~/test-utilities/mock-apis';
+
+test.describe('Dark Mode Toggle', () => {
+  test.beforeEach(async ({ page }) => {
+    await mockWorkflowsApis(page);
+    await page.goto('/namespaces/default/workflows');
+    await waitForWorkflowsApis(page, false);
+  });
+
+  test('user can toggle dark mode between on, off, and system default', async ({
+    page,
+  }) => {
+    const nightLabel = 'Night';
+    const systemDefaultLabel = 'System Default';
+    const dayLabel = 'Day';
+
+    // on mobile, the dark mode button is in the profile menu
+    await page.getByTestId('nav-profile-button').click();
+
+    // starts on day mode
+    const button = page.getByTestId('dark-mode-navigation-button');
+
+    await expect(button).toBeVisible();
+
+    expect(await page.evaluate(() => localStorage.getItem('dark mode'))).toBe(
+      null, // nothing in local storage yet
+    );
+
+    // after day is system mode
+    await button.click();
+    await expect(button).toHaveAccessibleName(systemDefaultLabel);
+    expect(await page.evaluate(() => localStorage.getItem('dark mode'))).toBe(
+      JSON.stringify('system'),
+    );
+
+    // after system is dark mode
+    await button.click();
+    await expect(button).toHaveAccessibleName(nightLabel);
+    expect(await page.evaluate(() => localStorage.getItem('dark mode'))).toBe(
+      JSON.stringify(true),
+    );
+
+    // cycle back to day
+    await button.click();
+    await expect(button).toHaveAccessibleName(dayLabel);
+    expect(await page.evaluate(() => localStorage.getItem('dark mode'))).toBe(
+      JSON.stringify(false),
+    );
+  });
+});