From d506461a6fc61cb2879ae3277b550d2891fcf145 Mon Sep 17 00:00:00 2001 From: Pouya Saadeghi Date: Sat, 18 Nov 2023 06:06:01 +0330 Subject: [PATCH] tests --- .github/workflows/tests.yml | 18 +++++++++-- src/tests/a11y.test.js | 22 +++----------- src/tests/colors.test.js | 19 +++++------- src/tests/data.js | 58 ++++++++++++++++++++++++++++++++++++ src/tests/frameworks.test.js | 8 ++--- src/tests/themes.test.js | 13 ++------ src/tests/utils.js | 12 +------- 7 files changed, 92 insertions(+), 58 deletions(-) diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 801f0358163..ecd7cfd9877 100644 --- a/.github/workflows/tests.yml +++ b/.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 }} diff --git a/src/tests/a11y.test.js b/src/tests/a11y.test.js index 4026be3c583..f44994cebdd 100644 --- a/src/tests/a11y.test.js +++ b/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( diff --git a/src/tests/colors.test.js b/src/tests/colors.test.js index dcd1aea9267..28472ccf8d1 100644 --- a/src/tests/colors.test.js +++ b/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) + }) +} diff --git a/src/tests/data.js b/src/tests/data.js index 56ef3c3398d..3e84193f6c8 100644 --- a/src/tests/data.js +++ b/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", + }, ] diff --git a/src/tests/frameworks.test.js b/src/tests/frameworks.test.js index 0a3c5e99fd6..8d83647ca7f 100644 --- a/src/tests/frameworks.test.js +++ b/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}`) }, diff --git a/src/tests/themes.test.js b/src/tests/themes.test.js index c33c9645868..ecf3cfb1d89 100644 --- a/src/tests/themes.test.js +++ b/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) } }) diff --git a/src/tests/utils.js b/src/tests/utils.js index e5c78ecfab6..4f7056bc6d1 100644 --- a/src/tests/utils.js +++ b/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)