Merge pull request #387 from dmlb/tag-color-units

render fix for tag color and write some unit tests

package.json

@@ -17,10 +17,12 @@
     "@sveltejs/adapter-auto": "^1.0.0",
     "@sveltejs/adapter-static": "^1.0.0",
     "@sveltejs/kit": "^1.0.0",
+    "@testing-library/svelte": "^4.1.0",
     "@types/lodash.partition": "^4.6.7",
     "@types/mixpanel-browser": "^2.47.2",
     "all-contributors-cli": "^6.25.0",
     "autoprefixer": "^10.4.13",
+    "jsdom": "^24.0.0",
     "lodash.partition": "^4.6.0",
     "postcss": "^8.4.20",
     "prettier": "^3.0.3",
@@ -33,13 +35,13 @@
     "tslib": "^2.4.1",
     "typescript": "^4.9.3",
     "vite": "^4.0.0",
+    "vitest": "^1.3.1",
     "yaml": "^2.2.0"
   },
   "type": "module",
   "dependencies": {
     "fuse.js": "^6.6.2",
     "mixpanel-browser": "^2.47.0",
-    "ts-node": "^10.4.0",
-    "vitest": "^0.26.2"
+    "ts-node": "^10.4.0"
   }
 }

src/lib/components/FilterForm.svelte

@@ -80,7 +80,7 @@
       class="p-4 space-y-4"
     >
       <div class="flex flex-row flex-wrap gap-2">
-        {#each filterOptions as filterOption}
+        {#each filterOptions as filterOption (filterOption)}
           <!-- checkboxes -->
           <TagWrapper
             tagColor={filterOption.color}

src/lib/components/TagWrapper.svelte

@@ -7,12 +7,13 @@
   let darkTagColor: string | undefined
 
   if (tagColor !== undefined) {
-    lightTagColor = lightColors[tagColor]
-    darkTagColor = darkColors[tagColor]
+    lightTagColor = lightColors[tagColor] ?? undefined
+    darkTagColor = darkColors[tagColor] ?? undefined
   }
 </script>
 
 <div
+  data-testid="tag-wrapper-component"
   class="bg-zinc-200 dark:bg-zinc-700 text-black dark:text-white rounded-full {extraClasses}"
   class:tag-color={lightTagColor || darkTagColor}
   style:--tag-color={lightTagColor}

src/lib/components/TagWrapper.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest"
+import { render } from "@testing-library/svelte"
+
+import TagWrapper from "./TagWrapper.svelte"
+import { darkColors, lightColors } from "../resources"
+
+describe("TagWrapper", () => {
+  it("renders the style css var for light color hex to --tag-color", () => {
+    const tagComp = render(TagWrapper, { tagColor: "lavender" })
+    const divEl = tagComp.getByTestId("tag-wrapper-component")
+
+    expect(getComputedStyle(divEl).getPropertyValue("--tag-color")).toContain(
+      lightColors.lavender
+    )
+  })
+
+  it("renders the tag-color class for tag colour match found", () => {
+    const tagComp = render(TagWrapper, { tagColor: "lavender" })
+    const divEl = tagComp.getByTestId("tag-wrapper-component")
+
+    expect(divEl.classList).toContain("tag-color")
+  })
+
+  it("renders the style css var for dark color hex to --tag-color-dark", () => {
+    const tagComp = render(TagWrapper, { tagColor: "lavender" })
+    const divEl = tagComp.getByTestId("tag-wrapper-component")
+
+    expect(
+      getComputedStyle(divEl).getPropertyValue("--tag-color-dark")
+    ).toContain(darkColors.lavender)
+  })
+
+  it("does not add the style css var for colour not in the map", () => {
+    const tagComp = render(TagWrapper, { tagColor: "not-real" })
+    const divEl = tagComp.getByTestId("tag-wrapper-component")
+
+    expect(getComputedStyle(divEl).getPropertyValue("--tag-color-dark")).toBe(
+      ""
+    )
+  })
+
+  it("does not add the tag-color class for colour not in the map", () => {
+    const tagComp = render(TagWrapper, { tagColor: "not-real" })
+    const divEl = tagComp.getByTestId("tag-wrapper-component")
+
+    expect(divEl.classList).not.toContain("tag-color")
+  })
+})

src/lib/resources.ts

@@ -5,7 +5,7 @@ interface Color {
 }
 
 // ! Keep in sync with `data/resource_tags.schema.json` which determines valid colors
-let colorData: Color[] = [
+const colorData: Color[] = [
   {
     name: "lavender",
     lightHex: "#c8cdea",
@@ -41,18 +41,18 @@ let colorData: Color[] = [
     lightHex: "#dccdea",
     darkHex: "#29183a",
   },
-]
+] as const
 
 // Mappings of human readable color names to hex values for light and dark modes
-export let lightColors = colorData.reduce<{ [key: string]: string }>(
+export const lightColors = colorData.reduce<{ [key: string]: string }>(
   (obj, item: Color) => {
     obj[item.name] = item.lightHex
     return obj
   },
   {}
 )
 
-export let darkColors = colorData.reduce<{ [key: string]: string }>(
+export const darkColors = colorData.reduce<{ [key: string]: string }>(
   (obj, item: Color) => {
     obj[item.name] = item.darkHex
     return obj

src/routes/resources/+page.svelte

@@ -156,7 +156,7 @@
 <ol
   class="grid xl:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-x-4 gap-y-4 mt-3"
 >
-  {#each displayedResources.slice(0, displayedResourceLimit) as resource}
+  {#each displayedResources.slice(0, displayedResourceLimit) as resource (resource)}
     <li><ListItem {resource} /></li>
   {:else}
     <li>No resources here!</li>

src/routes/resources/ListItem.svelte

@@ -61,7 +61,7 @@
         {resource.description}
       </p>
       <div class="flex flex-wrap text-xs py-2">
-        {#each resource.tags as tag}
+        {#each resource.tags as tag (tag)}
           <TagWrapper
             tagColor={tag.color}
             extraClasses="whitespace-nowrap p-1 my-1 mr-2"

src/routes/youtube/+page.svelte

@@ -78,7 +78,7 @@
   <ol
     class="grid grid-flow-row mt-3 xl:grid-cols-5 md:grid-cols-4 sm:grid-cols-1 gap-4"
   >
-    {#each displayedVideos.slice(0, displayedVideoLimit) as video}
+    {#each displayedVideos.slice(0, displayedVideoLimit) as video (video)}
       <li>
         <YoutubeThumbnail
           {...video}

svelte.config.js

@@ -8,6 +8,9 @@ const dev = process.argv.includes("dev")
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   preprocess: vitePreprocess(),
+  compilerOptions: {
+    accessors: process.env.TEST,
+  },
   kit: {
     adapter: adapter({
       pages: "build",

tsconfig.json

@@ -8,6 +8,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "sourceMap": true,
-    "strict": true
+    "strict": true,
+    "types": ["vitest/globals", "@testing-library/jest-dom"]
   }
 }

vite.config.js

@@ -4,6 +4,8 @@ import { sveltekit } from "@sveltejs/kit/vite"
 const config = {
   plugins: [sveltekit()],
   test: {
+    globals: true,
+    environment: "jsdom",
     include: ["**/*.{test,spec}.{js,ts}"],
   },
 }