[DT-2854] add an integration test to make sure dark mode toggling works through localstorage (#2752)

* add an integration test to make sure dark mode toggling works through localstorage

* rename dark-mode spec file so it only runs on desktop

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

Author: andrewzamojc

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

@@ -35,5 +35,6 @@
     label={buttonText}
     icon={buttonIcon}
     on:click={cycleDarkModePreference}
+    data-testid="dark-mode-icon-button"
   />
 </Tooltip>

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>

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

@@ -0,0 +1,48 @@
+import { expect, test } from '@playwright/test';
+
+import { mockWorkflowsApis } from '~/test-utilities/mock-apis';
+
+test.describe('Dark Mode Toggle', () => {
+  test.beforeEach(async ({ page }) => {
+    await mockWorkflowsApis(page);
+    await page.goto('/');
+  });
+
+  test('user can toggle dark mode between on, off, and system default', async ({
+    page,
+  }) => {
+    const nightLabel = 'Night';
+    const systemDefaultLabel = 'System Default';
+    const dayLabel = 'Day';
+
+    // starts on day mode
+    const button = page.getByTestId('dark-mode-icon-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),
+    );
+  });
+});

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

@@ -0,0 +1,51 @@
+import { expect, test } from '@playwright/test';
+
+import { mockWorkflowsApis } from '~/test-utilities/mock-apis';
+
+test.describe('Dark Mode Toggle', () => {
+  test.beforeEach(async ({ page }) => {
+    await mockWorkflowsApis(page);
+    await page.goto('/');
+  });
+
+  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),
+    );
+  });
+});