From 012a31dd86c4d517b0def11a80f2a75bf5312273 Mon Sep 17 00:00:00 2001 From: Andrew Michael McNutt Date: Thu, 21 Mar 2024 12:35:52 -0700 Subject: [PATCH] fix tests --- public/lang-docs.md | 172 ++++++++++++------- src/lib/__snapshots__/ColorLint.test.ts.snap | 14 +- src/lib/__snapshots__/LintDocs.test.ts.snap | 172 ++++++++++++------- src/linting/Eval.svelte | 2 +- src/linting/LintCustomizationAddTest.svelte | 11 +- src/linting/LintCustomizationTab.svelte | 4 +- 6 files changed, 231 insertions(+), 144 deletions(-) diff --git a/public/lang-docs.md b/public/lang-docs.md index 56cf0b84..9d97c1d1 100644 --- a/public/lang-docs.md +++ b/public/lang-docs.md @@ -664,6 +664,113 @@ Program: +### Even Distribution in Hue + +Description: Categorical values should have an even distribution around the hue circle in LCH color space + +Natural Language: (std(speed(sort(colors, x => lch.h(x)))) < 10 OR std(speed(sort(colors, x => lch.h(x) + 180 % 360))) < 10) + +Palettes that will fail this test: + +- #ffb9ba, #67de25, #25d4c3, #724dd6, #6d0e44 with a #fff background + + + +Palettes that will pass this test: + +- #ffc5b8, #00dec1, #006095, #b7d119, #6e0074 with a #fff background + +- #4682b4 with a #fff background + + +Program: + +```json +{ + "$schema": "http://localhost:8888/lint-schema.json", + "or": [ + { + "<": { + "left": { + "std": { + "speed": { "sort": "colors", "func": {"lch.h": "x"}, "varb": "x" } + } + }, + "right": 10 + } + }, + { + "<": { + "left": { + "std": { + "speed": { + "sort": "colors", + "varb": "x", + "func": { + "%": { + "left": { + "+": { "left": {"lch.h": "x"}, "right": 180 } + }, + "right": 360 + } + } + } + } + }, + "right": 10 + } + } + ] +} + +``` + + + + + +### Even Distribution in Lightness + +Description: Values should be space evenly in lightness in LCH color space + +Natural Language: std(speed(sort(colors, x => lch.l(x)))) < 5 + +Palettes that will fail this test: + +- #ffb9ba, #67de25, #25d4c3, #724dd6, #6d0e44 with a #fff background + +- #174c00, #166100, #267500, #78c12d, #b7ff6d with a #fff background + + + +Palettes that will pass this test: + +- #1a4400, #1f6e00, #4a9500, #74bd28, #9ee754 with a #fff background + +- #4682b4 with a #fff background + + +Program: + +```json +{ + "$schema": "http://localhost:8888/lint-schema.json", + "<": { + "left": { + "std": { + "speed": { "sort": "colors", "func": {"lch.l": "x"}, "varb": "x" } + } + }, + "right": 5 + } +} + +``` + + + + + ### Fair Description: Do the colors stand out equally? A color palette is described as fair if both chroma and luminance ranges are below a certain threshold and unfair if one of them is above a certain threshold. @@ -1308,71 +1415,6 @@ Program: -### Even Distribution - -Description: Categorical values should have an even distribution around the hue circle in LCH color space - -Natural Language: (std(speed(sort(colors, x => lch.h(x)))) < 10 OR std(speed(sort(colors, x => lch.h(x) + 180 % 360))) < 10) - -Palettes that will fail this test: - -- #ffb9ba, #67de25, #25d4c3, #724dd6, #6d0e44 with a #fff background - - - -Palettes that will pass this test: - -- #ffc5b8, #00dec1, #006095, #b7d119, #6e0074 with a #fff background - -- #4682b4 with a #fff background - - -Program: - -```json -{ - "$schema": "http://localhost:8888/lint-schema.json", - "or": [ - { - "<": { - "left": { - "std": { - "speed": { "sort": "colors", "func": {"lch.h": "x"}, "varb": "x" } - } - }, - "right": 10 - } - }, - { - "<": { - "left": { - "std": { - "speed": { - "sort": "colors", - "varb": "x", - "func": { - "%": { - "left": { - "+": { "left": {"lch.h": "x"}, "right": 180 } - }, - "right": 360 - } - } - } - } - }, - "right": 10 - } - } - ] -} - -``` - - - - - ### In Gamut Description: Checks if the colors are in the sRGB gamut. This is important to ensure that the colors are visible and can be displayed on most devices. diff --git a/src/lib/__snapshots__/ColorLint.test.ts.snap b/src/lib/__snapshots__/ColorLint.test.ts.snap index 5f0afa98..fdca4201 100644 --- a/src/lib/__snapshots__/ColorLint.test.ts.snap +++ b/src/lib/__snapshots__/ColorLint.test.ts.snap @@ -64,11 +64,19 @@ exports[`ColorLint - Contrast (3) contrastTextAAA 1`] = `"These colors () do not exports[`ColorLint - Contrast (3) contrastTextAAA 2`] = `"These colors (#af3b4b) do not have a sufficient contrast ratio with the background and may be hard to discriminate in some contexts."`; -exports[`ColorLint - EvenDistribution 1`] = `"This palette does not evenly distribute the colors around its range correctly. Try making the spacing between the colors more regular to resolve this issue. "`; +exports[`ColorLint - EvenDistribution (1) Hue 1`] = `"This palette does not evenly distribute the colors around its range correctly. Try making the spacing between the colors more regular to resolve this issue. "`; -exports[`ColorLint - EvenDistribution 2`] = `"This palette does not evenly distribute the colors around its range correctly. Try making the spacing between the colors more regular to resolve this issue. "`; +exports[`ColorLint - EvenDistribution (1) Hue 2`] = `"This palette does not evenly distribute the colors around its range correctly. Try making the spacing between the colors more regular to resolve this issue. "`; -exports[`ColorLint - EvenDistribution 3`] = `"This palette does not evenly distribute the colors around its range correctly. Try making the spacing between the colors more regular to resolve this issue. "`; +exports[`ColorLint - EvenDistribution (1) Hue 3`] = `"This palette does not evenly distribute the colors around its range correctly. Try making the spacing between the colors more regular to resolve this issue. "`; + +exports[`ColorLint - EvenDistribution (2) Lightness 1`] = `"This palette does not evenly distribute the colors in lightness (in LCH space) correctly. Try making the spacing between the colors more regular to resolve this issue."`; + +exports[`ColorLint - EvenDistribution (2) Lightness 2`] = `"This palette does not evenly distribute the colors in lightness (in LCH space) correctly. Try making the spacing between the colors more regular to resolve this issue."`; + +exports[`ColorLint - EvenDistribution (2) Lightness 3`] = `"This palette does not evenly distribute the colors in lightness (in LCH space) correctly. Try making the spacing between the colors more regular to resolve this issue."`; + +exports[`ColorLint - EvenDistribution (2) Lightness 4`] = `"This palette does not evenly distribute the colors in lightness (in LCH space) correctly. Try making the spacing between the colors more regular to resolve this issue."`; exports[`ColorLint - Fair Nominal 1`] = `"This palette is unfair (meaning that some values may unduely stand out). Note that this check is naturally at odds with color vision deficiency friendly palettes. Maximum chroma range: 80, maximum luminance range: 50."`; diff --git a/src/lib/__snapshots__/LintDocs.test.ts.snap b/src/lib/__snapshots__/LintDocs.test.ts.snap index ef40a79e..48e24f97 100644 --- a/src/lib/__snapshots__/LintDocs.test.ts.snap +++ b/src/lib/__snapshots__/LintDocs.test.ts.snap @@ -667,6 +667,113 @@ Program: +### Even Distribution in Hue + +Description: Categorical values should have an even distribution around the hue circle in LCH color space + +Natural Language: (std(speed(sort(colors, x => lch.h(x)))) < 10 OR std(speed(sort(colors, x => lch.h(x) + 180 % 360))) < 10) + +Palettes that will fail this test: + +- #ffb9ba, #67de25, #25d4c3, #724dd6, #6d0e44 with a #fff background + + + +Palettes that will pass this test: + +- #ffc5b8, #00dec1, #006095, #b7d119, #6e0074 with a #fff background + +- #4682b4 with a #fff background + + +Program: + +\`\`\`json +{ + "$schema": "http://localhost:8888/lint-schema.json", + "or": [ + { + "<": { + "left": { + "std": { + "speed": { "sort": "colors", "func": {"lch.h": "x"}, "varb": "x" } + } + }, + "right": 10 + } + }, + { + "<": { + "left": { + "std": { + "speed": { + "sort": "colors", + "varb": "x", + "func": { + "%": { + "left": { + "+": { "left": {"lch.h": "x"}, "right": 180 } + }, + "right": 360 + } + } + } + } + }, + "right": 10 + } + } + ] +} + +\`\`\` + + + + + +### Even Distribution in Lightness + +Description: Values should be space evenly in lightness in LCH color space + +Natural Language: std(speed(sort(colors, x => lch.l(x)))) < 5 + +Palettes that will fail this test: + +- #ffb9ba, #67de25, #25d4c3, #724dd6, #6d0e44 with a #fff background + +- #174c00, #166100, #267500, #78c12d, #b7ff6d with a #fff background + + + +Palettes that will pass this test: + +- #1a4400, #1f6e00, #4a9500, #74bd28, #9ee754 with a #fff background + +- #4682b4 with a #fff background + + +Program: + +\`\`\`json +{ + "$schema": "http://localhost:8888/lint-schema.json", + "<": { + "left": { + "std": { + "speed": { "sort": "colors", "func": {"lch.l": "x"}, "varb": "x" } + } + }, + "right": 5 + } +} + +\`\`\` + + + + + ### Fair Description: Do the colors stand out equally? A color palette is described as fair if both chroma and luminance ranges are below a certain threshold and unfair if one of them is above a certain threshold. @@ -1311,71 +1418,6 @@ Program: -### Even Distribution - -Description: Categorical values should have an even distribution around the hue circle in LCH color space - -Natural Language: (std(speed(sort(colors, x => lch.h(x)))) < 10 OR std(speed(sort(colors, x => lch.h(x) + 180 % 360))) < 10) - -Palettes that will fail this test: - -- #ffb9ba, #67de25, #25d4c3, #724dd6, #6d0e44 with a #fff background - - - -Palettes that will pass this test: - -- #ffc5b8, #00dec1, #006095, #b7d119, #6e0074 with a #fff background - -- #4682b4 with a #fff background - - -Program: - -\`\`\`json -{ - "$schema": "http://localhost:8888/lint-schema.json", - "or": [ - { - "<": { - "left": { - "std": { - "speed": { "sort": "colors", "func": {"lch.h": "x"}, "varb": "x" } - } - }, - "right": 10 - } - }, - { - "<": { - "left": { - "std": { - "speed": { - "sort": "colors", - "varb": "x", - "func": { - "%": { - "left": { - "+": { "left": {"lch.h": "x"}, "right": 180 } - }, - "right": 360 - } - } - } - } - }, - "right": 10 - } - } - ] -} - -\`\`\` - - - - - ### In Gamut Description: Checks if the colors are in the sRGB gamut. This is important to ensure that the colors are visible and can be displayed on most devices. diff --git a/src/linting/Eval.svelte b/src/linting/Eval.svelte index b3349d15..e3554c23 100644 --- a/src/linting/Eval.svelte +++ b/src/linting/Eval.svelte @@ -26,7 +26,7 @@ if (!acc[check.group]) { acc[check.group] = []; } - // extremely dumb hack to move wcags to the top + // extremely dumb hack to move WCAGs to the top if (check.name.startsWith("WCAG")) { acc[check.group].push(check); } else { diff --git a/src/linting/LintCustomizationAddTest.svelte b/src/linting/LintCustomizationAddTest.svelte index a0a0bd40..9c5b173b 100644 --- a/src/linting/LintCustomizationAddTest.svelte +++ b/src/linting/LintCustomizationAddTest.svelte @@ -6,7 +6,7 @@ import type { Palette } from "../types"; export let currentPal: Palette; - export let lint: CustomLint; + export let currentTests: CustomLint["expectedPassingTests"]; export let setNewTests: (tests: CustomLint["expectedPassingTests"]) => void; @@ -15,12 +15,8 @@