Test calendar component

Author: RoyalIcing

lib/components_guide_web.ex

@@ -43,6 +43,14 @@ defmodule ComponentsGuideWeb do
     end
   end
 
+  def component do
+    quote do
+      use Phoenix.Component
+
+      unquote(view_helpers())
+    end
+  end
+
   def live_view(opts \\ []) do
     quote do
       @opts Keyword.merge(

lib/components_guide_web/components/calendar_component.ex

@@ -0,0 +1,56 @@
+defmodule ComponentsGuideWeb.CalendarComponent do
+  use ComponentsGuideWeb, :component
+
+  def calendar_grid(assigns) do
+    %{year: year, month: month, day: day} = today = assigns[:date]
+    start_date = Date.beginning_of_month(today)
+    end_date = Date.end_of_month(today)
+    date_range = Date.range(start_date, end_date)
+
+    day_offset = 1 - Date.day_of_week(start_date)
+
+    assigns =
+      assigns
+      |> Map.merge(%{
+        date_range: date_range,
+        year: year,
+        month: month,
+        day: day,
+        day_offset: day_offset
+      })
+
+    ~H"""
+    <h2><%= @year %> <%= @month %> <%= Gettext.dgettext(ComponentsGuideWeb.Gettext, "months", "april") %></h2>
+    <table class="text-center">
+      <thead>
+        <tr>
+          <th abbr="Monday">Mon</th>
+          <th abbr="Tuesday">Tue</th>
+          <th abbr="Wednesday">Wed</th>
+          <th abbr="Thursday">Thu</th>
+          <th abbr="Friday">Fri</th>
+          <th abbr="Saturday">Sat</th>
+          <th abbr="Sunday">Sun</th>
+        </tr>
+      </thead>
+      <tbody>
+      <%= for week_n <- 1..6 do %>
+        <tr>
+          <%= for day_n <- 1..7 do %>
+            <% day = day_n + day_offset + ((week_n - 1) * 7) %>
+            <%= if day in @date_range.first.day..@date_range.last.day do %>
+              <% current = day == @day %>
+              <td aria-current={if current, do: "date", else: "false"} class={if current, do: "bg-red-900", else: ""}>
+                <%= day %>
+              </td>
+            <% else %>
+              <td class="bg-black"></td>
+            <% end %>
+          <% end %>
+        </tr>
+      <% end %>
+      </tbody>
+    </table>
+    """
+  end
+end

lib/components_guide_web/controllers/calendar_controller.ex

@@ -86,10 +86,13 @@ defmodule ComponentsGuideWeb.CalendarController do
       jest28: "https://jestjs.io/blog/2022/04/25/jest-28"
     }
 
+    today = Date.utc_today()
+
     assigns = [
       page_title:
         "Calendar of when important tools are released, become LTS, and reach end-of-life",
-      current_week: iso_week_number(Date.utc_today() |> Date.to_erl()),
+      today: today,
+      current_week: today |> Date.to_erl() |> iso_week_number(),
       list: create_list(groups, links)
     ]
 
@@ -150,6 +153,8 @@ end
 defmodule ComponentsGuideWeb.CalendarView do
   use ComponentsGuideWeb, :view
 
+  alias ComponentsGuideWeb.CalendarComponent
+
   def present_item({id, {date, type, meta}}) do
     options = %{
       what: pretty_name(id),

lib/components_guide_web/templates/calendar/index.html.heex

@@ -5,6 +5,7 @@
     <label><input type="checkbox" name="released" checked class="rounded text-sky-500"> Released</label>
     <label><input type="checkbox" name="lts_starts" checked class="rounded text-sky-500"> LTS</label>
   </form>
+  <CalendarComponent.calendar_grid date={@today} />
   <article>
     <%= for item <- @list do %>
     <%= present_item(item) %>

mix.exs

@@ -55,7 +55,8 @@ defmodule ComponentsGuide.MixProject do
       {:tesla, "~> 1.3.0"},
       {:mojito, "~> 0.6.1"},
       {:mint, "~> 1.0"},
-      {:floki, "~> 0.26.0"},
+      {:floki, "~> 0.32.0"},
+      {:html5ever, "~> 0.12.0"},
       {:plug_cowboy, "~> 2.0"},
       {:earmark, "~> 1.4.15"},
       {:paredown, "~> 0.1.0"},

mix.lock

@@ -16,10 +16,11 @@
   "ex_doc": {:hex, :ex_doc, "0.23.0", "a069bc9b0bf8efe323ecde8c0d62afc13d308b1fa3d228b65bca5cf8703a529d", [:mix], [{:earmark_parser, "~> 1.4.0", [hex: :earmark_parser, repo: "hexpm", optional: false]}, {:makeup_elixir, "~> 0.14", [hex: :makeup_elixir, repo: "hexpm", optional: false]}], "hexpm", "f5e2c4702468b2fd11b10d39416ddadd2fcdd173ba2a0285ebd92c39827a5a16"},
   "ex_image_info": {:hex, :ex_image_info, "0.2.4", "610002acba43520a9b1cf1421d55812bde5b8a8aeaf1fe7b1f8823e84e762adb", [:mix], [], "hexpm", "fd1a7e02664e3b14dfd3b231d22fdd48bd3dd694c4773e6272b3a6228f1106bc"},
   "file_system": {:hex, :file_system, "0.2.10", "fb082005a9cd1711c05b5248710f8826b02d7d1784e7c3451f9c1231d4fc162d", [:mix], [], "hexpm", "41195edbfb562a593726eda3b3e8b103a309b733ad25f3d642ba49696bf715dc"},
-  "floki": {:hex, :floki, "0.26.0", "4df88977e2e357c6720e1b650f613444bfb48c5acfc6a0c646ab007d08ad13bf", [:mix], [{:html_entities, "~> 0.5.0", [hex: :html_entities, repo: "hexpm", optional: false]}], "hexpm", "e7b66ce7feef5518a9cd9fc7b52dd62a64028bd9cb6d6ad282a0f0fc90a4ae52"},
+  "floki": {:hex, :floki, "0.32.1", "dfe3b8db3b793939c264e6f785bca01753d17318d144bd44b407fb3493acaa87", [:mix], [{:html_entities, "~> 0.5.0", [hex: :html_entities, repo: "hexpm", optional: false]}], "hexpm", "d4b91c713e4a784a3f7b1e3cc016eefc619f6b1c3898464222867cafd3c681a3"},
   "gettext": {:hex, :gettext, "0.19.1", "564953fd21f29358e68b91634799d9d26989f8d039d7512622efb3c3b1c97892", [:mix], [], "hexpm", "10c656c0912b8299adba9b061c06947511e3f109ab0d18b44a866a4498e77222"},
   "hackney": {:hex, :hackney, "1.18.1", "f48bf88f521f2a229fc7bae88cf4f85adc9cd9bcf23b5dc8eb6a1788c662c4f6", [:rebar3], [{:certifi, "~>2.9.0", [hex: :certifi, repo: "hexpm", optional: false]}, {:idna, "~>6.1.0", [hex: :idna, repo: "hexpm", optional: false]}, {:metrics, "~>1.0.0", [hex: :metrics, repo: "hexpm", optional: false]}, {:mimerl, "~>1.1", [hex: :mimerl, repo: "hexpm", optional: false]}, {:parse_trans, "3.3.1", [hex: :parse_trans, repo: "hexpm", optional: false]}, {:ssl_verify_fun, "~>1.1.0", [hex: :ssl_verify_fun, repo: "hexpm", optional: false]}, {:unicode_util_compat, "~>0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "a4ecdaff44297e9b5894ae499e9a070ea1888c84afdd1fd9b7b2bc384950128e"},
   "hpax": {:hex, :hpax, "0.1.1", "2396c313683ada39e98c20a75a82911592b47e5c24391363343bde74f82396ca", [:mix], [], "hexpm", "0ae7d5a0b04a8a60caf7a39fcf3ec476f35cc2cc16c05abea730d3ce6ac6c826"},
+  "html5ever": {:hex, :html5ever, "0.12.0", "b2a33306d5cf5f96a9967ae311215d31b30eb1b8e990f1439535d4323505d8ee", [:mix], [{:rustler_precompiled, "~> 0.2", [hex: :rustler_precompiled, repo: "hexpm", optional: false]}], "hexpm", "115d66cf44f6eabad6a2ee41392daea12fb35598b5b79d8bffa83bbead258e7b"},
   "html_entities": {:hex, :html_entities, "0.5.2", "9e47e70598da7de2a9ff6af8758399251db6dbb7eebe2b013f2bbd2515895c3c", [:mix], [], "hexpm", "c53ba390403485615623b9531e97696f076ed415e8d8058b1dbaa28181f4fdcc"},
   "httpoison": {:hex, :httpoison, "1.8.1", "df030d96de89dad2e9983f92b0c506a642d4b1f4a819c96ff77d12796189c63e", [:mix], [{:hackney, "~> 1.17", [hex: :hackney, repo: "hexpm", optional: false]}], "hexpm", "35156a6d678d6d516b9229e208942c405cf21232edd632327ecfaf4fd03e79e0"},
   "httpotion": {:hex, :httpotion, "3.1.3", "fdaf1e16b9318dcb722de57e75ac368c93d4c6e3c9125f93e960f953a750fb77", [:mix], [{:ibrowse, "== 4.4.0", [hex: :ibrowse, repo: "hexpm", optional: false]}], "hexpm", "e420172ef697a0f1f4dc40f89a319d5a3aad90ec51fa424f08c115f04192ae43"},

test/collected_live_web/components/calendar_component_test.exs

@@ -0,0 +1,36 @@
+defmodule ComponentsGuideWeb.CalendarComponentTest do
+  # use ExUnit.Case
+  # import Phoenix.LiveViewTest
+  use ComponentsGuideWeb.ComponentCase
+  alias ComponentsGuideWeb.CalendarComponent
+
+  describe "CalendarComponent.calendar_grid" do
+    setup context do
+      assigns = context[:assigns]
+      el = render_fragment(&CalendarComponent.calendar_grid/1, assigns)
+      {:ok, el: el}
+    end
+
+    @tag assigns: [date: ~D[2022-04-01]]
+    test "April 1 2022", %{el: el} do
+      current_date = el |> find("td[aria-current=date]")
+      assert "1" == current_date |> text() |> String.trim()
+      assert current_date |> Enum.count() == 1
+
+      assert 7 == count(el, "thead th")
+      assert 6 == count(el, "tbody tr")
+    end
+
+    @tag assigns: [date: ~D[2022-04-15]]
+    test "April 15 2022", %{el: el} do
+      current_date = el |> find("td[aria-current=date]")
+      assert "15" == current_date |> text() |> String.trim()
+    end
+
+    @tag assigns: [date: ~D[2022-01-03]]
+    test "January 3 2022", %{el: el} do
+      current_date = el |> find("td[aria-current=date]")
+      assert "3" == current_date |> text() |> String.trim()
+    end
+  end
+end

test/support/component_case.ex

@@ -0,0 +1,31 @@
+defmodule ComponentsGuideWeb.ComponentCase do
+  @moduledoc """
+  This module defines the test case to be used by
+  component tests.
+  """
+
+  use ExUnit.CaseTemplate
+
+  using do
+    quote do
+      import Phoenix.LiveViewTest
+
+      defdelegate find(el, selector), to: Floki
+      defdelegate text(html), to: Floki
+
+      def render_fragment(component, assigns) do
+        html = render_component(component, assigns)
+        {:ok, el} = Floki.parse_fragment(html)
+        el
+      end
+
+      def count(el, selector) do
+        find(el, selector) |> Enum.count()
+      end
+    end
+  end
+
+  setup _tags do
+    :ok
+  end
+end