Move over tests to Hydrogen using impunity

This commit is contained in:
RMidhunSuresh 2022-03-07 13:10:44 +05:30
parent f170ef0206
commit a5d46bb40c
3 changed files with 70 additions and 3 deletions

View file

@ -10,6 +10,7 @@
"lint-ts": "eslint src/ -c .ts-eslintrc.js --ext .ts", "lint-ts": "eslint src/ -c .ts-eslintrc.js --ext .ts",
"lint-ci": "eslint src/", "lint-ci": "eslint src/",
"test": "impunity --entry-point src/platform/web/main.js src/platform/web/Platform.js --force-esm-dirs lib/ src/ --root-dir src/", "test": "impunity --entry-point src/platform/web/main.js src/platform/web/Platform.js --force-esm-dirs lib/ src/ --root-dir src/",
"test:postcss": "impunity --entry-point postcss/test.js ",
"start": "vite --port 3000", "start": "vite --port 3000",
"build": "vite build", "build": "vite build",
"build:sdk": "./scripts/sdk/build.sh" "build:sdk": "./scripts/sdk/build.sh"

View file

@ -1,4 +1,4 @@
import { offColor } from 'off-color'; const offColor = require("off-color").offColor;
let aliasMap; let aliasMap;
let resolvedMap; let resolvedMap;
@ -22,13 +22,13 @@ function resolveDerivedVariable(decl, variables) {
switch (operation) { switch (operation) {
case "darker": { case "darker": {
const colorString = variables[baseVariable] ?? getValueFromAlias(baseVariable); const colorString = variables[baseVariable] ?? getValueFromAlias(baseVariable);
const newColorString = new offColor(colorString).darken(argument / 100).hex(); const newColorString = offColor(colorString).darken(argument / 100).hex();
resolvedMap.set(wholeVariable, newColorString); resolvedMap.set(wholeVariable, newColorString);
break; break;
} }
case "lighter": { case "lighter": {
const colorString = variables[baseVariable] ?? getValueFromAlias(baseVariable); const colorString = variables[baseVariable] ?? getValueFromAlias(baseVariable);
const newColorString = new offColor(colorString).lighten(argument / 100).hex(); const newColorString = offColor(colorString).lighten(argument / 100).hex();
resolvedMap.set(wholeVariable, newColorString); resolvedMap.set(wholeVariable, newColorString);
break; break;
} }

66
postcss/test.js Normal file
View file

@ -0,0 +1,66 @@
const offColor = require("off-color").offColor;
const postcss = require("postcss");
const plugin = require("./css-compile-variables");
async function run(input, output, opts = {}, assert) {
let result = await postcss([plugin(opts)]).process(input, { from: undefined, });
assert.strictEqual(
result.css.replaceAll(/\s/g, ""),
output.replaceAll(/\s/g, "")
);
assert.strictEqual(result.warnings().length, 0);
}
module.exports.tests = function tests() {
return {
"derived variables are resolved": async (assert) => {
const inputCSS = `div {
background-color: var(--foo-color--lighter-50);
}`;
const transformedColor = offColor("#ff0").lighten(0.5);
const outputCSS =
inputCSS +
`
:root {
--foo-color: #ff0;
--foo-color--lighter-50: ${transformedColor.hex()};
}
`;
await run(
inputCSS,
outputCSS,
{ variables: { "foo-color": "#ff0" } },
assert
);
},
"derived variables work with alias": async (assert) => {
const inputCSS = `div {
background: var(--icon-color--darker-20);
--my-alias: var(--icon-color--darker-20);
color: var(--my-alias--lighter-15);
}`;
const colorDarker = offColor("#fff").darken(0.2).hex();
const aliasLighter = offColor(colorDarker).lighten(0.15).hex();
const outputCSS = `div {
background: var(--icon-color--darker-20);
--my-alias: var(--icon-color--darker-20);
color: var(--my-alias--lighter-15);
}
:root {
--icon-color: #fff;
--icon-color--darker-20: ${colorDarker};
--my-alias--lighter-15: ${aliasLighter};
}
`;
await run(inputCSS, outputCSS, { variables: { "icon-color": "#fff" }, }, assert);
},
"derived variable throws if base not present in config": async (assert) => {
const css = `:root {
color: var(--icon-color--darker-20);
}`;
assert.rejects(async () => await postcss([plugin({ variables: {} })]).process(css, { from: undefined, }));
}
};
};