add dark mode tests (#34)

* add dark mode tests * improve dark mode a11y colors * update gettext
fschoenfeldt · Jul 13, 2023 · 03696a3 · 03696a3
1 parent 825c73f
commit 03696a3
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 25 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -8,7 +8,7 @@
     @apply h-full;
   }
   div[data-phx-main] {
-    @apply min-h-[calc(100vh-9rem)];
+    @apply flex flex-col min-h-[calc(100vh-3.5rem)];
   }
   /* merriweather-300 - latin */
   @font-face {
@@ -75,7 +75,7 @@
       Times, serif;
   }
   a {
-    @apply text-blue-600 underline;
+    @apply text-blue-600 dark:text-blue-400 underline;
   }
   h1,
   h2,
@@ -173,7 +173,7 @@
           @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm dark:border-gray-200 sm:text-sm;
         }
         button[type="submit"] {
-          @apply rounded border p-2 px-4 dark:text-gray-200;
+          @apply rounded border p-2 px-4 dark:text-gray-100;
         }
         .dropzone {
           @apply space-y-2 overflow-hidden rounded-lg border-2 border-dashed border-gray-300 p-4 dark:border-gray-500 flex flex-col justify-center;
@@ -199,9 +199,7 @@
       }
     }
   }
-  #photo {
-    @apply dark:bg-gray-800;
-  }
+
   #search {
     @apply p-4 lg:p-8;
   }

diff --git a/lib/fotohaecker_web/live/search_live/search.ex b/lib/fotohaecker_web/live/search_live/search.ex
@@ -22,8 +22,10 @@ defmodule FotohaeckerWeb.SearchLive.Search do
   def render(assigns) do
     ~H"""
     <div id="search">
-      <h1>Search results for "<%= @search_query %>"</h1>
-      <p><%= gettext("%{amount} results", %{amount: length(@search_results)}) %></p>
+      <h1 class="dark:text-gray-100">Search results for "<%= @search_query %>"</h1>
+      <p class="dark:text-gray-100">
+        <%= gettext("%{amount} results", %{amount: length(@search_results)}) %>
+      </p>
       <ul class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6">
         <%= for photo <- @search_results do %>
           <PhotoComponent.render photo={photo} />

diff --git a/lib/fotohaecker_web/live/user_live/index.ex b/lib/fotohaecker_web/live/user_live/index.ex
@@ -10,10 +10,10 @@ defmodule FotohaeckerWeb.UserLive.Index do
   def render(assigns) do
     ~H"""
     <div id="user" class="max-w-6xl mx-auto space-y-2 pt-2">
-      <h1><%= gettext("Your Account") %></h1>
+      <h1 class="dark:text-gray-100"><%= gettext("Your Account") %></h1>
       <dl class="space-y-2">
-        <dt class="font-bold"><%= gettext("Name/Email") %></dt>
-        <dd><%= @current_user.name %></dd>
+        <dt class="font-bold dark:text-gray-100"><%= gettext("Name/Email") %></dt>
+        <dd class="dark:text-gray-100"><%= @current_user.name %></dd>
       </dl>
       <.form
         for={%{}}
@@ -51,9 +51,7 @@ defmodule FotohaeckerWeb.UserLive.Index do
             )
           }
         >
-          <%!-- <span class="text-white"> --%>
           <%= gettext("logout") %>
-          <%!-- </span> --%>
         </button>
       </.form>
     </div>

diff --git a/lib/fotohaecker_web/templates/layout/live.html.heex b/lib/fotohaecker_web/templates/layout/live.html.heex
@@ -3,7 +3,7 @@
   id="header"
   current_user={@current_user}
 />
-<main class="min-h-full">
+<main class="min-h-full dark:bg-gray-800 flex-1">
   <p
     class="alert alert--info"
     role="alert"

diff --git a/priv/gettext/de_DE/LC_MESSAGES/default.po b/priv/gettext/de_DE/LC_MESSAGES/default.po
@@ -133,7 +133,7 @@ msgstr "Etwas ist beim Hochladen Deines Fotos schiefgelaufen. Bitte versuche es
 msgid "login"
 msgstr "Anmelden"
 
-#: lib/fotohaecker_web/live/user_live/index.ex:55
+#: lib/fotohaecker_web/live/user_live/index.ex:54
 #, elixir-autogen, elixir-format
 msgid "logout"
 msgstr "Abmelden"
@@ -280,7 +280,7 @@ msgstr "Feld %{field} bearbeiten"
 msgid "photo %{field}"
 msgstr "Foto %{field}"
 
-#: lib/fotohaecker_web/live/search_live/search.ex:26
+#: lib/fotohaecker_web/live/search_live/search.ex:27
 #, elixir-autogen, elixir-format
 msgid "%{amount} results"
 msgstr "%{amount} Ergebnisse"
@@ -290,7 +290,7 @@ msgstr "%{amount} Ergebnisse"
 msgid "No results"
 msgstr "Keine Ergebnisse"
 
-#: lib/fotohaecker_web/live/search_live/search.ex:32
+#: lib/fotohaecker_web/live/search_live/search.ex:34
 #, elixir-autogen, elixir-format
 msgid "No results found"
 msgstr "Keine Ergebnisse gefunden"

diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
@@ -132,7 +132,7 @@ msgstr ""
 msgid "login"
 msgstr ""
 
-#: lib/fotohaecker_web/live/user_live/index.ex:55
+#: lib/fotohaecker_web/live/user_live/index.ex:54
 #, elixir-autogen, elixir-format
 msgid "logout"
 msgstr ""
@@ -279,7 +279,7 @@ msgstr ""
 msgid "photo %{field}"
 msgstr ""
 
-#: lib/fotohaecker_web/live/search_live/search.ex:26
+#: lib/fotohaecker_web/live/search_live/search.ex:27
 #, elixir-autogen, elixir-format
 msgid "%{amount} results"
 msgstr ""
@@ -289,7 +289,7 @@ msgstr ""
 msgid "No results"
 msgstr ""
 
-#: lib/fotohaecker_web/live/search_live/search.ex:32
+#: lib/fotohaecker_web/live/search_live/search.ex:34
 #, elixir-autogen, elixir-format
 msgid "No results found"
 msgstr ""

diff --git a/priv/gettext/en_US/LC_MESSAGES/default.po b/priv/gettext/en_US/LC_MESSAGES/default.po
@@ -133,7 +133,7 @@ msgstr ""
 msgid "login"
 msgstr ""
 
-#: lib/fotohaecker_web/live/user_live/index.ex:55
+#: lib/fotohaecker_web/live/user_live/index.ex:54
 #, elixir-autogen, elixir-format
 msgid "logout"
 msgstr ""
@@ -280,7 +280,7 @@ msgstr ""
 msgid "photo %{field}"
 msgstr ""
 
-#: lib/fotohaecker_web/live/search_live/search.ex:26
+#: lib/fotohaecker_web/live/search_live/search.ex:27
 #, elixir-autogen, elixir-format
 msgid "%{amount} results"
 msgstr ""
@@ -290,7 +290,7 @@ msgstr ""
 msgid "No results"
 msgstr ""
 
-#: lib/fotohaecker_web/live/search_live/search.ex:32
+#: lib/fotohaecker_web/live/search_live/search.ex:34
 #, elixir-autogen, elixir-format
 msgid "No results found"
 msgstr ""

diff --git a/test/e2e/tests/home.spec.ts b/test/e2e/tests/home.spec.ts
@@ -15,6 +15,15 @@ test.describe("Home page", () => {
     expect(accessibilityScanResults.violations).toEqual([]);
   });
 
+  test("should not have any automatically detectable accessibility issues in dark mode", async ({
+    page,
+  }) => {
+    test.slow();
+    await page.emulateMedia({ colorScheme: "dark" });
+    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
   test("shows index page", async ({ page }) => {
     await expect(page).toHaveTitle("Home · Fotohaecker");
   });

diff --git a/test/e2e/tests/photo.spec.ts b/test/e2e/tests/photo.spec.ts
@@ -18,6 +18,15 @@ test.describe("Photo Page: Static", () => {
     expect(accessibilityScanResults.violations).toEqual([]);
   });
 
+  test("should not have any automatically detectable accessibility issues in dark mode", async ({
+    page,
+  }) => {
+    test.slow();
+    await page.emulateMedia({ colorScheme: "dark" });
+    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
   test("can download photo", async ({ page, context }) => {
     const pagePromise = context.waitForEvent("page");
     await page.locator("a", { hasText: "Download" }).click();

diff --git a/test/e2e/tests/search.spec.ts b/test/e2e/tests/search.spec.ts
@@ -53,5 +53,11 @@ test.describe("Search Page", () => {
 
     const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
     expect(accessibilityScanResults.violations).toEqual([]);
+
+    await page.emulateMedia({ colorScheme: "dark" });
+    const accessibilityScanResultsDarkMode = await new AxeBuilder({
+      page,
+    }).analyze();
+    expect(accessibilityScanResultsDarkMode.violations).toEqual([]);
   });
 });
diff --git a/test/e2e/tests/user.spec.ts b/test/e2e/tests/user.spec.ts
@@ -5,6 +5,7 @@ import AxeBuilder from "@axe-core/playwright";
 test.describe("User Settings page", () => {
   test.beforeEach(async ({ page }) => {
     await page.goto("/fh");
+    await page.locator("a", { hasText: "your account" }).click();
   });
 
   test("should not have any automatically detectable accessibility issues", async ({
@@ -15,16 +16,23 @@ test.describe("User Settings page", () => {
     expect(accessibilityScanResults.violations).toEqual([]);
   });
 
+  test("should not have any automatically detectable accessibility issues in dark mode", async ({
+    page,
+  }) => {
+    test.slow();
+    await page.emulateMedia({ colorScheme: "dark" });
+    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
   test("can visit account settings page", async ({ page }) => {
     const { email, password } = userFixture;
-    await page.locator("a", { hasText: "your account" }).click();
 
     await expect(page.locator("h1")).toHaveText("Your Account");
     await expect(page.locator("div#user")).toContainText(email);
   });
 
   test("can logout", async ({ page }) => {
-    await page.locator("a", { hasText: "your account" }).click();
     await page.locator("button", { hasText: "logout" }).click();
     await expect(page.locator(".alert--info")).toContainText("logged out");
     await page.locator(".alert--info").click();