breadcrumb tests done

gurujada · Feb 16, 2024 · c4dec45 · c4dec45
1 parent 0e3e013
commit c4dec45
Show file tree

Hide file tree

Showing 5 changed files with 316 additions and 77 deletions.
diff --git a/lib/library_web/components/breadcrumb.ex b/lib/library_web/components/breadcrumb.ex
@@ -9,55 +9,55 @@ defmodule Breadcrumb do
 
   attr :link_type, :string, default: "live_patch", values: ["live_patch", "navigate", "a"]
 
+  attr :icon, :string, default: nil
+
   def breadcrumb(assigns) do
     ~H"""
     <div class={@class}>
       <%= for {link, counter} <- Enum.with_index(@links) do %>
         <%= if counter > 0 do %>
           <.separator separator={@separator} />
         <% end %>
+
         <Link.linkv
           to={link.to}
           class={"#{get_link_classes(assigns)} #{ending_class(assigns, link)} "}
           link_type={Map.get(link, :link_type, "live_patch")}
         >
+          <.icon
+            name={Map.get(link, :icon, "hero-")}
+            class={["w-4 h-4 inline-flex items-center justify-center", @link_class]}
+          />
           <%= link.label %>
         </Link.linkv>
-
-        <%!-- <Link.a to={link.to} class={@link_class}>
-          <div class="flex items-center gap-2">
-            <%= if link[:icon] do %>
-              <Icon.icon name={link[:icon]} class={["pc-breadcrumb-icon", link[:icon_class]]} />
-            <% end %>
-            <%= if link[:label] do %>
-              <%= link.label %>
-            <% end %>
-          </div>
-        </Link.a> --%>
       <% end %>
     </div>
     """
   end
 
   def get_link_classes(assigns) do
-    "select-none inline-flex items-center text-sm text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 dark:focus:text-blue-500 #{assigns.link_class}"
+    "select-none inline-flex truncate items-center text-sm text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 dark:focus:text-blue-500 #{assigns.link_class}"
   end
 
   def ending_class(assigns, link) do
     if List.last(assigns.links) == link do
-      "text-black font-semibold"
+      "text-gray-800 font-semibold"
     end
   end
 
+  def icon(%{name: "hero-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]} />
+    """
+  end
+
   def separator(assigns) do
     case assigns.separator do
       "arrow" ->
         ~H"""
         <svg
-          class="inline-flex flex-shrink-0 w-6 h-6 mx-2 text-gray-400 stroke-current ark:text-gray-600"
+          class="inline-flex flex-shrink-0 h-5 w-5 mx-2 text-gray-400 stroke-current ark:text-gray-600"
           xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
@@ -72,7 +72,7 @@ defmodule Breadcrumb do
       "slash" ->
         ~H"""
         <svg
-          class="inline-flex flex-shrink-0 w-6 h-6 mx-2 text-gray-400 stroke-current ark:text-gray-600"
+          class="inline-flex flex-shrink-0 h-5 w-5 mx-2 text-gray-400 stroke-current ark:text-gray-600"
           viewBox="0 0 16 16"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"

diff --git a/lib/library_web/components/link.ex b/lib/library_web/components/link.ex
@@ -4,67 +4,67 @@ defmodule Link do
 
   attr :link_type, :string,
     default: "button",
-    values: ["button", "link", "live_patch", "live_redirect"]
+    values: ["button", "link", "live_patch", "navigate"]
 
   attr :to, :string, default: ""
 
   slot :icon, required: false
   attr :icon_position, :string, default: "left", values: ["left", "right"]
   attr :class, :string, default: ""
 
-  def linkv(assigns) do
-    case assigns[:link_type] do
-      "live_patch" ->
-        ~H"""
-        <.link patch={~p"/#{@to}"} class={@class}>
-          <%= if @icon && @icon_position == "left" do %>
-            <%= render_slot(@icon) %>
-          <% end %>
-          <%= render_slot(@inner_block) %>
-          <%= if @icon && @icon_position == "right" do %>
-            <%= render_slot(@icon) %>
-          <% end %>
-        </.link>
-        """
+  def linkv(%{link_type: "a"} = assigns) do
+    ~H"""
+    <.link href={@to} class={@class}>
+      <%= if @icon && @icon_position == "left" do %>
+        <%= render_slot(@icon) %>
+      <% end %>
+      <%= render_slot(@inner_block) %>
+      <%= if @icon && @icon_position == "right" do %>
+        <%= render_slot(@icon) %>
+      <% end %>
+    </.link>
+    """
+  end
 
-      "button" ->
-        ~H"""
-        <.link class={@class}>
-          <%= if @icon && @icon_position == "left" do %>
-            <%= render_slot(@icon) %>
-          <% end %>
-          <%= render_slot(@inner_block) %>
-          <%= if @icon && @icon_position == "right" do %>
-            <%= render_slot(@icon) %>
-          <% end %>
-        </.link>
-        """
+  def linkv(%{link_type: "live_patch"} = assigns) do
+    ~H"""
+    <.link patch={~p"/#{@to}"} class={@class}>
+      <%= if @icon && @icon_position == "left" do %>
+        <%= render_slot(@icon) %>
+      <% end %>
+      <%= render_slot(@inner_block) %>
+      <%= if @icon && @icon_position == "right" do %>
+        <%= render_slot(@icon) %>
+      <% end %>
+    </.link>
+    """
+  end
 
-      "a" ->
-        ~H"""
-        <.link href={@to} class={@class}>
-          <%= if @icon && @icon_position == "left" do %>
-            <%= render_slot(@icon) %>
-          <% end %>
-          <%= render_slot(@inner_block) %>
-          <%= if @icon && @icon_position == "right" do %>
-            <%= render_slot(@icon) %>
-          <% end %>
-        </.link>
-        """
+  def linkv(%{link_type: "button"} = assigns) do
+    ~H"""
+    <.link class={@class}>
+      <%= if @icon && @icon_position == "left" do %>
+        <%= render_slot(@icon) %>
+      <% end %>
+      <%= render_slot(@inner_block) %>
+      <%= if @icon && @icon_position == "right" do %>
+        <%= render_slot(@icon) %>
+      <% end %>
+    </.link>
+    """
+  end
 
-      "live_redirect" ->
-        ~H"""
-        <.link navigate={~p"/#{@to}"} class={@class}>
-          <%= if @icon && @icon_position == "left" do %>
-            <%= render_slot(@icon) %>
-          <% end %>
-          <%= render_slot(@inner_block) %>
-          <%= if @icon && @icon_position == "right" do %>
-            <%= render_slot(@icon) %>
-          <% end %>
-        </.link>
-        """
-    end
+  def linkv(%{link_type: "navigate"} = assigns) do
+    ~H"""
+    <.link navigate={~p"/#{@to}"} class={@class}>
+      <%= if @icon && @icon_position == "left" do %>
+        <%= render_slot(@icon) %>
+      <% end %>
+      <%= render_slot(@inner_block) %>
+      <%= if @icon && @icon_position == "right" do %>
+        <%= render_slot(@icon) %>
+      <% end %>
+    </.link>
+    """
   end
 end
diff --git a/lib/library_web/live/post_live/index.html.heex b/lib/library_web/live/post_live/index.html.heex
@@ -1,7 +1,3 @@
-<LibraryWeb.Button.button size="sm" variant="shadow" color="danger">
-  Click me
-</LibraryWeb.Button.button>
-
 <%!-- <div class={["-translate-x-full fixed top-0 start-0 transition-all duration-300 transform h-full max-w-xs w-full z-[80] bg-red-900 border-e ark:bg-gray-800 ark:border-gray-700", @show_cart && "hidden"]} tabindex="-1">
           <div class="flex items-center justify-between px-4 py-3 border-b dark:border-gray-700">
             <h3 class="font-bold text-gray-800 dark:text-white">
@@ -204,17 +200,23 @@
   Connected
 </Chip.chip> --%>
 
-<%!-- <Breadcrumb.breadcrumb
-  separator="arrow"
+<Breadcrumb.breadcrumb
+  separator="slash"
   link_class=""
   links={[
-    %{label: "Link 1", to: "https://www.virinchi.me", link_type: "a"},
+    %{
+      label: "Link 1",
+      to: "https://www.virinchi.me",
+      link_type: "a",
+      icon: "hero-building-office-2"
+    },
     %{label: "Link 2", to: ""},
     %{label: "Link 3", to: ""},
     %{label: "Link 4", to: ""}
   ]}
 >
-</Breadcrumb.breadcrumb> --%>
+</Breadcrumb.breadcrumb>
+
 <%!--
 <div class="my-4">
   <h1 class="text-lg">Inputs</h1>

diff --git a/test/library_web/components/breadcrumb_test.exs b/test/library_web/components/breadcrumb_test.exs
@@ -0,0 +1,157 @@
+defmodule Library.BreadcrumbTest do
+  use ExUnit.Case, async: true
+  import Phoenix.LiveViewTest
+  import Phoenix.Component
+  import Breadcrumb
+
+  describe "basic breadcrumb tests" do
+    test "basic usage" do
+      assigns = %{}
+
+      component =
+        rendered_to_string(~H"""
+        <.breadcrumb links={[
+          %{label: "Link 1", to: "https://www.virinchi.me"}
+        ]}>
+        </.breadcrumb>
+        """)
+
+      assert component =~ "Link 1"
+      assert component =~ "<a"
+      assert component =~ "href"
+      assert component =~ "www.virinchi.me"
+    end
+
+    test "arbitrary attributes" do
+      assigns = %{}
+
+      component =
+        rendered_to_string(~H"""
+        <.breadcrumb
+          class="bg-primary"
+          links={[
+            %{label: "Link 1", to: ""}
+          ]}
+        >
+        </.breadcrumb>
+        """)
+
+      assert component =~ "bg-primary"
+    end
+
+    test "link_class" do
+      assigns = %{}
+
+      component =
+        rendered_to_string(~H"""
+        <.breadcrumb
+          link_class="mt-8"
+          links={[
+            %{label: "Link 1", to: ""}
+          ]}
+        >
+        </.breadcrumb>
+        """)
+
+      assert component =~ "mt-8"
+    end
+
+    test "separator(slash)" do
+      assigns = %{}
+
+      component =
+        rendered_to_string(~H"""
+        <.breadcrumb
+          separator="slash"
+          links={[
+            %{label: "Link 1", to: ""},
+            %{label: "Link 1", to: ""}
+          ]}
+        >
+        </.breadcrumb>
+        """)
+
+      # Path for slash
+      assert component =~ "<path d=\"M6 13L10 3\""
+    end
+
+    test "separator(arrow)" do
+      assigns = %{}
+
+      component =
+        rendered_to_string(~H"""
+        <.breadcrumb links={[
+          %{label: "Link 1", to: ""},
+          %{label: "Link 2", to: ""}
+        ]}>
+        </.breadcrumb>
+        """)
+
+      # Path for arrow
+      assert component =~ "<path d=\"m9 18 6-6-6-6\">"
+    end
+
+    test "icon test" do
+      assigns = %{}
+
+      component =
+        rendered_to_string(~H"""
+        <.breadcrumb links={[
+          %{label: "Link 1", to: "", icon: "hero-user-solid"},
+          %{label: "Link 2", to: ""}
+        ]}>
+        </.breadcrumb>
+        """)
+
+      # Path for hero-user-solid
+      assert component =~ "d=\"M7.5 6a4.5 4.5 0"
+    end
+  end
+
+  describe "breadcrumb methods" do
+    test "method link_type(a)" do
+      assigns = %{}
+
+      component =
+        rendered_to_string(~H"""
+        <.breadcrumb links={[
+          %{label: "Link 1", to: "", link_type: "a", icon: "hero-user-solid"},
+          %{label: "Link 2", to: "", link_type: "a"}
+        ]}>
+        </.breadcrumb>
+        """)
+
+      assert component =~ "<a href=\"\""
+    end
+
+    test "method link_type(live_patch)" do
+      assigns = %{}
+
+      component =
+        rendered_to_string(~H"""
+        <.breadcrumb links={[
+          %{label: "Link 1", to: "", icon: "hero-user-solid"},
+          %{label: "Link 2", to: ""}
+        ]}>
+        </.breadcrumb>
+        """)
+
+      assert component =~ "<a href=\"/\" data-phx-link=\"patch\" data-phx-link-state=\"push\""
+    end
+
+    test "method link_type(navigate)" do
+      assigns = %{}
+
+      component =
+        rendered_to_string(~H"""
+        <.breadcrumb links={[
+          %{label: "Link 1", to: "", link_type: "navigate", icon: "hero-user-solid"},
+          %{label: "Link 2", to: "", link_type: "navigate"}
+        ]}>
+        </.breadcrumb>
+        """)
+
+      assert component =~ "<a href=\"/\" data-phx-link=\"redirect\" data-phx-link-state=\"push\""
+    end
+  end
+end