Tests AddOnsNavigation

MuckRock · Apr 23, 2024 · 692a99e · 692a99e
1 parent 90690f2
commit 692a99e
Show file tree

Hide file tree

Showing 3 changed files with 253 additions and 1 deletion.
diff --git a/src/lib/components/addons/AddOnsNavigation.svelte b/src/lib/components/addons/AddOnsNavigation.svelte
@@ -58,7 +58,6 @@
         href={`/app/add-ons?category=${key}`}
         active={active === key}
       >
-        <!-- <Hash16 fill="var(--gray-4)" /> -->
         {label}
       </SidebarItem>
     {/each}

diff --git a/src/lib/components/addons/tests/AddOnsNavigation.test.ts b/src/lib/components/addons/tests/AddOnsNavigation.test.ts
@@ -0,0 +1,8 @@
+import { test, expect } from "vitest";
+import { render } from "@testing-library/svelte";
+import AddOnsNavigation from "../AddOnsNavigation.svelte";
+
+test("AddOnsNavigation", () => {
+  const result = render(AddOnsNavigation);
+  expect(result.container).toMatchSnapshot();
+});
diff --git a/src/lib/components/addons/tests/__snapshots__/AddOnsNavigation.test.ts.snap b/src/lib/components/addons/tests/__snapshots__/AddOnsNavigation.test.ts.snap
@@ -0,0 +1,245 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AddOnsNavigation 1`] = `
+<body>
+  <div>
+    <div
+      style="display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 1rem;"
+    >
+      <header
+        class="header"
+      >
+        <h2>
+          Browse Add-Ons
+        </h2>
+         
+        <p>
+          Free automations, shortcuts and power-ups from the DocumentCloud community
+        </p>
+      </header>
+       
+      <div
+        style="display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0.5rem;"
+      >
+        <div
+          style="display: contents; --hover-background: var(--blue-2);"
+        >
+          <a
+            class="container s-YuF89jlhjvU4 active"
+            href="/app/add-ons"
+          >
+            <svg
+              class="octicon octicon-infinity"
+              fill="var(--blue-3)"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8 6.984c.59-.533 1.204-1.066 1.825-1.493.797-.548 1.7-.991 2.675-.991C14.414 4.5 16 6.086 16 8s-1.586 3.5-3.5 3.5c-.975 0-1.878-.444-2.675-.991-.621-.427-1.235-.96-1.825-1.493-.59.533-1.204 1.066-1.825 1.493-.797.547-1.7.991-2.675.991C1.586 11.5 0 9.914 0 8s1.586-3.5 3.5-3.5c.975 0 1.878.443 2.675.991.621.427 1.235.96 1.825 1.493ZM9.114 8c.536.483 1.052.922 1.56 1.273.704.483 1.3.727 1.826.727 1.086 0 2-.914 2-2 0-1.086-.914-2-2-2-.525 0-1.122.244-1.825.727-.51.35-1.025.79-1.561 1.273ZM3.5 6c-1.086 0-2 .914-2 2 0 1.086.914 2 2 2 .525 0 1.122-.244 1.825-.727.51-.35 1.025-.79 1.561-1.273-.536-.483-1.052-.922-1.56-1.273C4.621 6.244 4.025 6 3.5 6Z"
+              />
+            </svg>
+            <!--&lt;Infinity16&gt;-->
+            
+      All
+          </a>
+          
+          <!--&lt;SidebarItem&gt;-->
+        </div>
+         
+        <div
+          style="display: contents; --hover-background: var(--orange-light);"
+        >
+          <a
+            class="container s-YuF89jlhjvU4"
+            href="/app/add-ons?active=true"
+          >
+            <div
+              style="display: contents; --fill: var(--orange);"
+            >
+              <svg
+                class="s-TuslcW8XKaBT"
+                height="16px"
+                viewBox="0 0 16 16"
+                width="16px"
+              >
+                <title
+                  class="s-TuslcW8XKaBT"
+                >
+                  Pin
+                </title>
+                <path
+                  class="s-TuslcW8XKaBT"
+                  d="M3.00220543,1 C3.00220543,0.446875 3.44891524,0 4.00183577,0 L11.9988785,0 C12.551799,0 12.9985088,0.446875 12.9985088,1 C12.9985088,1.553125 12.551799,2 11.9988785,2 L11.0773442,2 L11.4334625,6.63125 C12.5799136,7.253125 13.4858286,8.29375 13.9169192,9.590625 L13.9481576,9.684375 C14.0512445,9.990625 13.9981391,10.325 13.8107084,10.584375 C13.6232777,10.84375 13.3202648,11 12.9985088,11 L3.00220543,11 C2.68044942,11 2.38056032,10.846875 2.19000578,10.584375 C1.99945125,10.321875 1.94946973,9.9875 2.05255661,9.684375 L2.08379506,9.590625 C2.51488564,8.29375 3.42080063,7.253125 4.56725167,6.63125 L4.92336998,2 L4.00183577,2 C3.44891524,2 3.00220543,1.553125 3.00220543,1 Z M7.00072677,12 L8.99998744,12 L8.99998744,15 C8.99998744,15.553125 8.55327764,16 8.00035711,16 C7.44743658,16 7.00072677,15.553125 7.00072677,15 L7.00072677,12 Z"
+                  fill-rule="nonzero"
+                />
+              </svg>
+              <!--&lt;Pin&gt;-->
+            </div>
+            
+      Pinned
+          </a>
+          
+          <!--&lt;SidebarItem&gt;-->
+        </div>
+         
+        <div
+          style="display: contents; --hover-background: var(--yellow-light);"
+        >
+          <a
+            class="container s-YuF89jlhjvU4"
+            href="/app/add-ons?featured=true"
+          >
+            <svg
+              class="octicon octicon-star-fill"
+              fill="var(--yellow)"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"
+              />
+            </svg>
+            <!--&lt;StarFill16&gt;-->
+            
+      Featured
+          </a>
+          
+          <!--&lt;SidebarItem&gt;-->
+        </div>
+         
+        <div
+          style="display: contents; --hover-background: var(--green-light);"
+        >
+          <a
+            class="container s-YuF89jlhjvU4"
+            href="/app/add-ons?premium=true"
+          >
+            <div
+              style="display: contents; --fill: var(--green);"
+            >
+              <svg
+                class="s-OXbz8kfW0Fj9"
+                height="16px"
+                viewBox="0 0 16 16"
+                width="16px"
+              >
+                <title
+                  class="s-OXbz8kfW0Fj9"
+                >
+                  Premium
+                </title>
+                <path
+                  class="s-OXbz8kfW0Fj9"
+                  clip-rule="evenodd"
+                  d="M7 1C7 3.76142 4.76142 6 2 6C4.76142 6 7 8.23858 7 11C7 8.23858 9.23858 6 12 6C9.23858 6 7 3.76142 7 1Z"
+                  fill-rule="evenodd"
+                />
+                <path
+                  class="s-OXbz8kfW0Fj9"
+                  clip-rule="evenodd"
+                  d="M11 9C11 10.6569 9.65685 12 8 12C9.65685 12 11 13.3431 11 15C11 13.3431 12.3431 12 14 12C12.3431 12 11 10.6569 11 9Z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+              <!--&lt;Premium&gt;-->
+            </div>
+            
+      Premium
+          </a>
+          
+          <!--&lt;SidebarItem&gt;-->
+        </div>
+      </div>
+      <!--&lt;Flex&gt;-->
+       
+      <div
+        style="display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0.5rem;"
+      >
+        <div
+          style="display: contents; --color: var(--gray-4);"
+        >
+          <span
+            class="container s-YuF89jlhjvU4 small"
+          >
+            Collections
+          </span>
+          
+          <!--&lt;SidebarItem&gt;-->
+        </div>
+         
+        <a
+          class="container s-YuF89jlhjvU4"
+          href="/app/add-ons?category=ai"
+        >
+          AI
+           
+        </a>
+        
+        <!--&lt;SidebarItem&gt;-->
+        <a
+          class="container s-YuF89jlhjvU4"
+          href="/app/add-ons?category=statistical"
+        >
+          Analyze
+           
+        </a>
+        
+        <!--&lt;SidebarItem&gt;-->
+        <a
+          class="container s-YuF89jlhjvU4"
+          href="/app/add-ons?category=bulk"
+        >
+          Bulk
+           
+        </a>
+        
+        <!--&lt;SidebarItem&gt;-->
+        <a
+          class="container s-YuF89jlhjvU4"
+          href="/app/add-ons?category=export"
+        >
+          Export
+           
+        </a>
+        
+        <!--&lt;SidebarItem&gt;-->
+        <a
+          class="container s-YuF89jlhjvU4"
+          href="/app/add-ons?category=extraction"
+        >
+          Extract
+           
+        </a>
+        
+        <!--&lt;SidebarItem&gt;-->
+        <a
+          class="container s-YuF89jlhjvU4"
+          href="/app/add-ons?category=file"
+        >
+          File
+           
+        </a>
+        
+        <!--&lt;SidebarItem&gt;-->
+        <a
+          class="container s-YuF89jlhjvU4"
+          href="/app/add-ons?category=monitor"
+        >
+          Monitor
+           
+        </a>
+        
+        <!--&lt;SidebarItem&gt;-->
+        
+      </div>
+      <!--&lt;Flex&gt;-->
+    </div>
+    <!--&lt;Flex&gt;-->
+    <!--&lt;AddOnsNavigation&gt;-->
+  </div>
+</body>
+`;