tests

.github/workflows/tests.yml

@@ -2,13 +2,27 @@ name: "🧪 Tests"
 
 on:
   workflow_dispatch:
+    inputs:
+      filter:
+        type: choice
+        description: Filter tests
+        default: " "
+        options:
+          - " "
+          - "-t framework"
+          - "-t contrast"
+          - "-t foreground"
+          - "-t variables"
+          - "-t colors"
   push:
     branches:
       - master
     paths:
       - "src/theming/**"
 jobs:
-  release:
+  tests:
+    env:
+      filter: ${{ github.event.inputs.filter || ' '}}
     timeout-minutes: 10
     name: "Build"
     runs-on: ubuntu-latest
@@ -26,4 +40,4 @@ jobs:
         run: bun run build:skipfullcss
 
       - name: Run tests
-        run: bun test
+        run: bun test ${{ env.filter }}

src/tests/a11y.test.js

@@ -1,28 +1,14 @@
 import { expect, test } from "bun:test"
+import { wcagContrast } from "culori"
 import * as colorFunctions from "../theming/functions"
 import * as themes from "../theming/themes"
-const { wcagContrast } = require("culori")
-
-import { trimThemeName, ContrastRatioWarningThreshold, ContrastRatioErrorThreshold } from "./utils"
+import { trimThemeName } from "./utils"
+import { colorPairs, ContrastRatioErrorThreshold, ContrastRatioWarningThreshold } from "./data"
 
 for (let themeKey in themes) {
   if (themeKey === "default") continue
   // for each variable name
-  for (let variableName of [
-    ["--pc", "--p"],
-    ["--sc", "--s"],
-    ["--ac", "--a"],
-    ["--nc", "--n"],
-
-    ["--bc", "--b1"],
-    ["--bc", "--b2"],
-    ["--bc", "--b3"],
-
-    ["--inc", "--in"],
-    ["--suc", "--su"],
-    ["--wac", "--wa"],
-    ["--erc", "--er"],
-  ]) {
+  for (let variableName of colorPairs) {
     test(`${trimThemeName(themeKey)}: \t${variableName[0].substring(2)}/${variableName[1].substring(
       2
     )} \tcontrast = ${wcagContrast(

src/tests/colors.test.js

@@ -1,15 +1,10 @@
 import { expect, test } from "bun:test"
 import * as colorFunctions from "../theming/functions"
+import { forgroundPairs } from "./data"
 
-test("Foreground color generator function", () => {
-  expect(colorFunctions.generateForegroundColorFrom("#fff", 0.8, "oklch")).toBe("0.2 0 0")
-  expect(colorFunctions.generateForegroundColorFrom("#000", 0.8, "oklch")).toBe("0.8 0 0")
-  expect(colorFunctions.generateForegroundColorFrom("#fff", 1, "oklch")).toBe("0 0 0")
-  expect(colorFunctions.generateForegroundColorFrom("#000", 1, "oklch")).toBe("1 0 0")
-  expect(colorFunctions.generateForegroundColorFrom("#1D9BF0", 0.8, "oklch")).toBe(
-    "0.133411 0.032291 245.539977"
-  )
-  expect(colorFunctions.generateForegroundColorFrom("#CF212E", 0.8, "oklch")).toBe(
-    "0.910234 0.041137 24.396801"
-  )
-})
+// foreach array
+for (const pair of forgroundPairs) {
+  test(`foreground color for \t${pair.input} \tis oklch(${pair.result})`, () => {
+    expect(colorFunctions.generateForegroundColorFrom(pair.input, pair.percent)).toBe(pair.result)
+  })
+}

src/tests/data.js

@@ -1,3 +1,49 @@
+// WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1
+// for normal text and 3:1 for large text. WCAG 2.1 requires a
+// contrast ratio of at least 3:1 for graphics and user interface
+// components (such as form input borders). WCAG Level AAA requires
+// a contrast ratio of at least 7:1 for normal text and 4.5:1 for
+// large text.
+
+export const ContrastRatioWarningThreshold = 4.5
+export const ContrastRatioErrorThreshold = 3
+
+export const colorPairs = [
+  ["--pc", "--p"],
+  ["--sc", "--s"],
+  ["--ac", "--a"],
+  ["--nc", "--n"],
+
+  ["--bc", "--b1"],
+  ["--bc", "--b2"],
+  ["--bc", "--b3"],
+
+  ["--inc", "--in"],
+  ["--suc", "--su"],
+  ["--wac", "--wa"],
+  ["--erc", "--er"],
+]
+
+export const cssVars = [
+  "--rounded-box",
+  "--rounded-btn",
+  "--rounded-badge",
+  "--animation-btn",
+  "--animation-input",
+  "--btn-focus-scale",
+  "--border-btn",
+  "--tab-border",
+  "--tab-radius",
+]
+
+export const forgroundPairs = [
+  { input: "#fff", percent: 0.8, result: "0.2 0 0" },
+  { input: "#000", percent: 0.8, result: "0.8 0 0" },
+  { input: "#fff", percent: 1, result: "0 0 0" },
+  { input: "#000", percent: 1, result: "1 0 0" },
+  { input: "#1D9BF0", percent: 0.8, result: "0.133411 0.032291 245.539977" },
+  { input: "#CF212E", percent: 0.8, result: "0.910234 0.041137 24.396801" },
+]
 export const repos = [
   {
     name: "daisyui-vite",
@@ -11,4 +57,16 @@ export const repos = [
     file: "daisyui-next/.next/static/css/*.css",
     string: "btn",
   },
+  {
+    name: "daisyui-sveltekit",
+    repo: "https://github.com/daisyui/daisyui-sveltekit",
+    file: "daisyui-sveltekit/.svelte-kit/output/server/_app/immutable/**/_page.*.css",
+    string: "btn",
+  },
+  {
+    name: "daisyui-nuxt",
+    repo: "https://github.com/daisyui/daisyui-nuxt",
+    file: "daisyui-nuxt/.output/server/chunks/app/_nuxt/entry-styles.*.mjs",
+    string: "btn",
+  },
 ]

src/tests/frameworks.test.js

@@ -1,4 +1,4 @@
-import { test, expect, beforeAll, afterAll } from "bun:test"
+import { test, expect, beforeAll } from "bun:test"
 import { executeCommand, stringExistsInFile } from "./utils"
 import { repos } from "./data"
 
@@ -8,12 +8,12 @@ beforeAll(() => {
 
 repos.forEach((config) => {
   test(
-    `framework test: ${config.string} exists in ${config.file}`,
+    `framework – ${config.name}: ${config.string} exists in ${config.file}`,
     () => {
+      console.log(`building ${config.repo}...`)
       executeCommand(
-        `cd src/tests/files && rm -rf ${config.name} && git clone ${config.repo} && cd ${config.name} && bun i && bun run build`
+        `cd src/tests/files && rm -rf ${config.name} && git clone ${config.repo} --quiet && cd ${config.name} && bun i --silent && bun run build`
       )
-      executeCommand(`cd src/tests/files && cd ${config.name} && bun i && bun run build`)
       expect(stringExistsInFile(`src/tests/files/${config.file}`, config.string)).toBe(true)
       executeCommand(`cd src/tests/files && rm -rf ${config.name}`)
     },

src/tests/themes.test.js

@@ -3,6 +3,7 @@ import * as colorFunctions from "../theming/functions"
 import * as themes from "../theming/themes"
 import * as colorNames from "../theming/colorNames"
 import { trimThemeName } from "./utils"
+import { cssVars } from "./data"
 
 for (let themeKey in themes) {
   if (themeKey === "default") continue
@@ -18,17 +19,7 @@ for (let themeKey in themes) {
 for (let themeKey in themes) {
   if (themeKey === "default") continue
   test(`${trimThemeName(themeKey)}:   \tvariables`, () => {
-    for (let variableName of [
-      "--rounded-box",
-      "--rounded-btn",
-      "--rounded-badge",
-      "--animation-btn",
-      "--animation-input",
-      "--btn-focus-scale",
-      "--border-btn",
-      "--tab-border",
-      "--tab-radius",
-    ]) {
+    for (let variableName of cssVars) {
       expect(colorFunctions.convertColorFormat(themes[themeKey])).toHaveProperty(variableName)
     }
   })

src/tests/utils.js

@@ -2,16 +2,6 @@ import { execSync } from "child_process"
 import fs from "fs"
 import glob from "glob"
 
-// WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1
-// for normal text and 3:1 for large text. WCAG 2.1 requires a
-// contrast ratio of at least 3:1 for graphics and user interface
-// components (such as form input borders). WCAG Level AAA requires
-// a contrast ratio of at least 7:1 for normal text and 4.5:1 for
-// large text.
-
-export const ContrastRatioWarningThreshold = 4.5
-export const ContrastRatioErrorThreshold = 3
-
 export const trimCssVariable = (input) => {
   return input.replace("--", "")
 }
@@ -22,7 +12,7 @@ export const trimThemeName = (input) => {
 
 export function executeCommand(command) {
   try {
-    execSync(command, { stdio: "inherit" })
+    execSync(command, { stdio: ["inherit"] })
   } catch (error) {
     console.error(`Error executing command: ${command}`)
     console.error(error.message)