From 48f0a95a3bf53321d950f23e480607cf94349751 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 20 Sep 2024 12:50:05 +0300 Subject: [PATCH] more tests, fixed some issues --- src/components/alert.style.js | 4 ++- src/components/button_unstyled.style.js | 3 +- src/components/input.style.js | 2 +- src/components/panel_header.style.js | 1 - src/services/theme_data/iss_deserializer.js | 23 ++++++++---- src/services/theme_data/iss_serializer.js | 2 +- .../theme_data/iss_deserializer.spec.js | 36 +++++++++++++++---- 7 files changed, 53 insertions(+), 18 deletions(-) diff --git a/src/components/alert.style.js b/src/components/alert.style.js index 19bd4bbb..abbeb5ba 100644 --- a/src/components/alert.style.js +++ b/src/components/alert.style.js @@ -27,7 +27,9 @@ export default { component: 'Alert' }, component: 'Border', - textColor: '--parent' + directives: { + textColor: '--parent' + } }, { variant: 'error', diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js index 65b5c57b..435f9cc6 100644 --- a/src/components/button_unstyled.style.js +++ b/src/components/button_unstyled.style.js @@ -16,8 +16,7 @@ export default { { directives: { background: '#ffffff', - opacity: 0, - shadow: [] + opacity: 0 } }, { diff --git a/src/components/input.style.js b/src/components/input.style.js index 139a0034..7302cd6d 100644 --- a/src/components/input.style.js +++ b/src/components/input.style.js @@ -26,7 +26,7 @@ export default { { component: 'Root', directives: { - '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2)' + '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2), $borderSide(#000000, top, 0.2)' } }, { diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js index 32464bc5..7c145758 100644 --- a/src/components/panel_header.style.js +++ b/src/components/panel_header.style.js @@ -17,7 +17,6 @@ export default { directives: { backgroundNoCssColor: 'yes', background: '--fg', - shadow: [] } } ] diff --git a/src/services/theme_data/iss_deserializer.js b/src/services/theme_data/iss_deserializer.js index 8d4c987e..5d71f35f 100644 --- a/src/services/theme_data/iss_deserializer.js +++ b/src/services/theme_data/iss_deserializer.js @@ -6,13 +6,13 @@ const parseShadow = string => { // inset keyword (optional) '^(?:(inset)\\s+)?', // x - '(?:([0-9]+(?:\\.[0-9]+)?)\\s+)', + '(?:(-?[0-9]+(?:\\.[0-9]+)?)\\s+)', // y - '(?:([0-9]+(?:\\.[0-9]+)?)\\s+)', + '(?:(-?[0-9]+(?:\\.[0-9]+)?)\\s+)', // blur (optional) - '(?:([0-9]+(?:\\.[0-9]+)?)\\s+)?', + '(?:(-?[0-9]+(?:\\.[0-9]+)?)\\s+)?', // spread (optional) - '(?:([0-9]+(?:\\.[0-9]+)?)\\s+)?', + '(?:(-?[0-9]+(?:\\.[0-9]+)?)\\s+)?', // either hex, variable or function '(#[0-9a-f]{6}|--[a-z\\-_]+|\\$[a-z\\-()_]+)', // opacity (optional) @@ -23,7 +23,18 @@ const parseShadow = string => { if (result == null) { return string } else { - return Object.fromEntries(modes.map((mode, i) => [mode, result[i]])) + const numeric = new Set(['x', 'y', 'blur', 'spread', 'alpha']) + const { x, y, blur, spread, alpha, inset, color } = Object.fromEntries(modes.map((mode, i) => { + if (numeric.has(mode)) { + return [mode, Number(result[i])] + } else if (mode === 'inset') { + return [mode, !!result[i]] + } else { + return [mode, result[i]] + } + }).filter(([k, v]) => v !== false).slice(1)) + + return { x, y, blur, spread, color, alpha, inset } } } // this works nearly the same as HTML tree converter @@ -127,7 +138,7 @@ export const deserialize = (input) => { const [property, value] = d.split(':') let realValue = value.trim() if (property === 'shadow') { - realValue = parseShadow(value.split(',').map(v => v.trim())) + realValue = value.split(',').map(v => parseShadow(v.trim())) } if (!Number.isNaN(Number(value))) { realValue = Number(value) } diff --git a/src/services/theme_data/iss_serializer.js b/src/services/theme_data/iss_serializer.js index 6bba85e4..959852b7 100644 --- a/src/services/theme_data/iss_serializer.js +++ b/src/services/theme_data/iss_serializer.js @@ -2,7 +2,7 @@ import { unroll } from './iss_utils.js' const serializeShadow = s => { if (typeof s === 'object') { - return `{${s.inset ? 'inset ' : ''}${s.x} ${s.y} ${s.blur} ${s.spread} ${s.color} / ${s.alpha}}` + return `${s.inset ? 'inset ' : ''}${s.x} ${s.y} ${s.blur} ${s.spread} ${s.color} / ${s.alpha}` } else { return s } diff --git a/test/unit/specs/services/theme_data/iss_deserializer.spec.js b/test/unit/specs/services/theme_data/iss_deserializer.spec.js index 7654fb53..6141015c 100644 --- a/test/unit/specs/services/theme_data/iss_deserializer.spec.js +++ b/test/unit/specs/services/theme_data/iss_deserializer.spec.js @@ -1,16 +1,40 @@ import { deserialize } from 'src/services/theme_data/iss_deserializer.js' import { serialize } from 'src/services/theme_data/iss_serializer.js' -import Button from 'src/components/button.style.js' +const componentsContext = require.context('src', true, /\.style.js(on)?$/) -describe('ISS (de)serialization', () => { - describe('ISS deserialization', () => { - it('Output should equal input', () => { - const normalized = Button.defaultRules.map(x => ({ component: 'Button', ...x })) +describe.only('ISS (de)serialization', () => { + componentsContext.keys().forEach(key => { + const component = componentsContext(key).default + + it(`(De)serialization of component ${component.name} works`, () => { + const normalized = component.defaultRules.map(x => ({ component: component.name, ...x })) const serialized = serialize(normalized) const deserialized = deserialize(serialized) // for some reason comparing objects directly fails the assert - expect(JSON.stringify(deserialized)).to.equal(JSON.stringify(normalized)) + expect(JSON.stringify(deserialized, null, 2)).to.equal(JSON.stringify(normalized, null, 2)) }) }) + + /* + // Debug snippet + const onlyComponent = componentsContext('./components/panel_header.style.js').default + it(`(De)serialization of component ${onlyComponent.name} works`, () => { + const normalized = onlyComponent.defaultRules.map(x => ({ component: onlyComponent.name, ...x })) + console.log('BEGIN INPUT ================') + console.log(normalized) + console.log('END INPUT ==================') + const serialized = serialize(normalized) + console.log('BEGIN SERIAL ===============') + console.log(serialized) + console.log('END SERIAL =================') + const deserialized = deserialize(serialized) + console.log('BEGIN DESERIALIZED =========') + console.log(serialized) + console.log('END DESERIALIZED ===========') + + // for some reason comparing objects directly fails the assert + expect(JSON.stringify(deserialized, null, 2)).to.equal(JSON.stringify(normalized, null, 2)) + }) + */ })