Add e2e tests

.github/workflows/ci.yml

@@ -49,17 +49,53 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-mix-
 
-      - name: Install dependencies
+      # === live_view_responsive project steps ===
+      - name: Install dependencies (live_view_responsive)
         run: mix deps.get
 
-      - name: Compiles without warnings
+      - name: Compiles without warnings (live_view_responsive)
         run: mix compile --warnings-as-errors
 
-      - name: Check formatting
+      - name: Check formatting (live_view_responsive)
         run: mix format --check-formatted
 
-      - name: Run Credo in strict mode
+      - name: Run Credo in strict mode (live_view_responsive)
         run: mix credo --strict
 
-      - name: Run tests
+      - name: Run tests (live_view_responsive)
         run: mix test
+
+      # === example_app steps ===
+      - name: Install JS dependencies (example_app/assets)
+        run: npm install
+        working-directory: example_app/assets
+
+      - name: Install Google Chrome
+        uses: browser-actions/setup-chrome@v1
+
+      - name: Install Chromedriver
+        uses: nanasess/setup-chromedriver@v2
+
+      - name: Install dependencies (example_app)
+        run: mix deps.get
+        working-directory: example_app
+
+      - name: Compiles without warnings (example_app)
+        run: mix compile --warnings-as-errors
+        working-directory: example_app
+
+      - name: Check formatting (example_app)
+        run: mix format --check-formatted
+        working-directory: example_app
+
+      - name: Run Credo in strict mode (example_app)
+        run: mix credo --strict
+        working-directory: example_app
+
+      - name: Build assets (example_app)
+        run: mix assets.deploy
+        working-directory: example_app
+
+      - name: Run tests (example_app)
+        run: mix test
+        working-directory: example_app

example_app/config/test.exs

@@ -5,7 +5,22 @@ import Config
 config :example_app, ExampleAppWeb.Endpoint,
   http: [ip: {127, 0, 0, 1}, port: 4002],
   secret_key_base: "nz11cARZHThIJYfcB2c0btc/yXloegtxc+XdeeP6C/lciNzTWwbpag6z6Hs9ejoo",
-  server: false
+  server: true
+
+config :wallaby,
+  driver: Wallaby.Chrome,
+  chrome: [
+    headless: true,
+    args: [
+      "--no-sandbox",
+      "--disable-gpu",
+      "--disable-dev-shm-usage",
+      "--disable-dev-tools",
+      "--disable-extensions"
+    ]
+  ],
+  otp_app: :example_app,
+  base_url: "http://localhost:4002"
 
 # In test we don't send emails.
 config :example_app, ExampleApp.Mailer, adapter: Swoosh.Adapters.Test

example_app/lib/example_app/liveview_responsive.ex

@@ -1,8 +1,10 @@
 defmodule ExampleApp.LiveViewResponsive do
-  use LiveViewResponsive.Breakpoints, [
+  @moduledoc false
+
+  use LiveViewResponsive.Breakpoints,
     sm: [min_width: 576],
     md: [min_width: 768],
     lg: [min_width: 992],
     portrait: [orientation: :portrait],
-  ]
+    landscape: [orientation: :landscape]
 end

example_app/lib/example_app_web/components/core_components.ex

@@ -16,6 +16,7 @@ defmodule ExampleAppWeb.CoreComponents do
   """
   use Phoenix.Component
 
+  alias Phoenix.HTML.Form
   alias Phoenix.LiveView.JS
   import ExampleAppWeb.Gettext
 
@@ -305,7 +306,7 @@ defmodule ExampleAppWeb.CoreComponents do
   def input(%{type: "checkbox"} = assigns) do
     assigns =
       assign_new(assigns, :checked, fn ->
-        Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value])
+        Form.normalize_value("checkbox", assigns[:value])
       end)
 
     ~H"""

example_app/lib/example_app_web/components/layouts/app.html.heex

@@ -5,7 +5,7 @@
         <img src={~p"/images/logo.svg"} width="36" />
       </a>
       <p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
-        live_view_responsive 
+        live_view_responsive
       </p>
     </div>
     <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">

example_app/lib/example_app_web/components/live/device_test_live.ex

@@ -1,39 +1,80 @@
 defmodule ExampleAppWeb.Components.Live.DeviceTestLive do
-  @moduledoc false
+  @moduledoc """
+  Live component for testing device/media query responsiveness. Uses Tailwind for styling.
+  """
 
   use ExampleAppWeb, :live_component
   use ExampleApp.LiveViewResponsive
 
   @impl true
   def mount(socket) do
-    socket = socket
+    socket =
+      socket
       |> assign_sm_media_query()
       |> assign_md_media_query()
       |> assign_lg_media_query()
       |> assign_portrait_media_query()
+      |> assign_landscape_media_query()
 
     {:ok, socket}
   end
 
+  @impl true
   def render(assigns) do
     ~H"""
-    <div>
+    <div class="p-8 bg-gray-50 min-h-screen">
       <.live_view_responsive myself={@myself} />
 
-      <h1>Device test</h1>
-      <h2>Media query components</h2>
-      <ul>
-        <li><.sm_media_query>sm</.sm_media_query></li>
-        <li><.md_media_query>md</.md_media_query></li>
-        <li><.lg_media_query>lg</.lg_media_query></li>
-        <li><.portrait_media_query>portrait</.portrait_media_query></li>
+      <h1 class="text-3xl font-bold text-gray-800 mb-2">Device Test</h1>
+      <h2 class="text-xl font-semibold text-gray-700 mb-4">Media Query Components</h2>
+      <ul class="mb-8 space-y-2">
+        <li>
+          <.sm_media_query>
+            <span data-testid="component-sm" class="px-2 py-1 bg-blue-100 rounded">sm</span>
+          </.sm_media_query>
+        </li>
+        <li>
+          <.md_media_query>
+            <span data-testid="component-md" class="px-2 py-1 bg-green-100 rounded">md</span>
+          </.md_media_query>
+        </li>
+        <li>
+          <.lg_media_query>
+            <span data-testid="component-lg" class="px-2 py-1 bg-yellow-100 rounded">lg</span>
+          </.lg_media_query>
+        </li>
+        <li>
+          <.portrait_media_query>
+            <span data-testid="component-portrait" class="px-2 py-1 bg-purple-100 rounded">
+              portrait
+            </span>
+          </.portrait_media_query>
+        </li>
+        <li>
+          <.landscape_media_query>
+            <span data-testid="component-landscape" class="px-2 py-1 bg-pink-100 rounded">
+              landscape
+            </span>
+          </.landscape_media_query>
+        </li>
       </ul>
-      <h2>Media query assigns</h2>
-      <ul>
-        <li :if={@sm}>sm</li>
-        <li :if={@md}>md</li>
-        <li :if={@lg}>lg</li>
-        <li :if={@portrait}>portrait</li>
+      <h2 class="text-xl font-semibold text-gray-700 mb-4">Media Query Assigns</h2>
+      <ul class="space-y-2">
+        <li :if={@sm}>
+          <span data-testid="assign-sm" class="px-2 py-1 bg-blue-200 rounded">sm</span>
+        </li>
+        <li :if={@md}>
+          <span data-testid="assign-md" class="px-2 py-1 bg-green-200 rounded">md</span>
+        </li>
+        <li :if={@lg}>
+          <span data-testid="assign-lg" class="px-2 py-1 bg-yellow-200 rounded">lg</span>
+        </li>
+        <li :if={@portrait}>
+          <span data-testid="assign-portrait" class="px-2 py-1 bg-purple-200 rounded">portrait</span>
+        </li>
+        <li :if={@landscape}>
+          <span data-testid="assign-landscape" class="px-2 py-1 bg-pink-200 rounded">landscape</span>
+        </li>
       </ul>
     </div>
     """