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.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it } from "vitest"
+import { darkColors, lightColors } from "./resources"
+
+describe("lightColors", () => {
+ it("lavender should be #c8cdea", () => {
+ expect(lightColors.lavender).toBe("#c8cdea")
+ })
+
+ it("orange should be #f1d7c0", () => {
+ expect(lightColors.orange).toBe("#f1d7c0")
+ })
+
+ it("green should be #e0e9c9", () => {
+ expect(lightColors.green).toBe("#e0e9c9")
+ })
+
+ it("red should be #e9cac9", () => {
+ expect(lightColors.red).toBe("#e9cac9")
+ })
+
+ it("teal should be #cfe2e0", () => {
+ expect(lightColors.teal).toBe("#cfe2e0")
+ })
+
+ it("yellow should be #efebc2", () => {
+ expect(lightColors.yellow).toBe("#efebc2")
+ })
+
+ it("purple should be #dccdea", () => {
+ expect(lightColors.purple).toBe("#dccdea")
+ })
+})
+
+describe("darkColors", () => {
+ it("lavender should be #141a38", () => {
+ expect(darkColors.lavender).toBe("#141a38")
+ })
+
+ it("orange should be #3f250e", () => {
+ expect(darkColors.orange).toBe("#3f250e")
+ })
+
+ it("green should be #2d3616", () => {
+ expect(darkColors.green).toBe("#2d3616")
+ })
+
+ it("red should be #361716", () => {
+ expect(darkColors.red).toBe("#361716")
+ })
+
+ it("teal should be #1d302e", () => {
+ expect(darkColors.teal).toBe("#1d302e")
+ })
+
+ it("yellow should be #3c3910", () => {
+ expect(darkColors.yellow).toBe("#3c3910")
+ })
+
+ it("purple should be #29183a", () => {
+ expect(darkColors.purple).toBe("#29183a")
+ })
+})

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}"],
  },
 }