From edff65678abbbd2037d65c8e63ef261000ce4919 Mon Sep 17 00:00:00 2001 From: Guillaume Date: Mon, 14 Jun 2021 18:36:38 +0200 Subject: [PATCH] test: custom var() --- lib/parsers.test.js | 91 ++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 89 insertions(+), 2 deletions(-) diff --git a/lib/parsers.test.js b/lib/parsers.test.js index ba7d15f9..085ba4f3 100644 --- a/lib/parsers.test.js +++ b/lib/parsers.test.js @@ -6,24 +6,36 @@ describe('parseInteger', () => { it('works with calc', () => { expect(parsers.parseInteger('calc(1 + 1)')).toBe('2'); }); + it('works with custom variable', () => { + expect(parsers.parseInteger('var(--integer)')).toBe('var(--integer)'); + }); it.todo('more tests'); }); describe('parseNumber', () => { it('works with calc', () => { expect(parsers.parseNumber('calc(1.5 + 1.5)')).toBe('3'); }); + it('works with custom variable', () => { + expect(parsers.parseNumber('var(--number)')).toBe('var(--number)'); + }); it.todo('more tests'); }); describe('parseLength', () => { it('works with calc', () => { expect(parsers.parseLength('calc(1px + 1px)')).toBe('calc(2px)'); }); + it('works with custom variable', () => { + expect(parsers.parseLength('var(--length)')).toBe('var(--length)'); + }); it.todo('more tests'); }); describe('parsePercentage', () => { it('works with calc', () => { expect(parsers.parsePercentage('calc(1% + 1%)')).toBe('calc(2%)'); }); + it('works with custom variable', () => { + expect(parsers.parsePercentage('var(--percentage)')).toBe('var(--percentage)'); + }); it.todo('more tests'); }); describe('parseLengthOrPercentage', () => { @@ -33,12 +45,18 @@ describe('parseAngle', () => { it('works with calc', () => { expect(parsers.parseAngle('calc(1deg + 1deg)')).toBe('calc(2deg)'); }); + it('works with custom variable', () => { + expect(parsers.parseAngle('var(--angle)')).toBe('var(--angle)'); + }); it.todo('test'); }); describe('parseTime', () => { it('works with calc', () => { expect(parsers.parseTime('calc(1s + 1s)')).toBe('calc(2s)'); }); + it('works with custom variable', () => { + expect(parsers.parseTime('var(--time)')).toBe('var(--time)'); + }); it.todo('more tests'); }); describe('parseCalc', () => { @@ -75,6 +93,9 @@ describe('parseCalc', () => { expect(parsers.parseCalc('calc(1s + 1000ms)', resolveTime)).toBe('calc(2000ms)'); expect(parsers.parseCalc('CALc(1px + 1em)', resolveLengthOrPercentage)).toBe('calc(1px + 1em)'); }); + it('works with custom variable', () => { + expect(parsers.parseCalc('calc(var(--integer) + 1)')).toBe('calc(var(--integer) + 1)'); + }); }); describe('parseKeyword', () => { it('returns null for invalid values', () => { @@ -92,6 +113,9 @@ describe('parseKeyword', () => { it('parses predefined keywords', () => { expect(parsers.parseKeyword('SOLId', ['solid'])).toBe('solid'); }); + it('works with custom variable', () => { + expect(parsers.parseKeyword('var(--keyword)')).toBe('var(--keyword)'); + }); }); describe('parseCustomIdentifier', () => { it('returns null for invalid values', () => { @@ -122,12 +146,29 @@ describe('parseCustomIdentifier', () => { ]; valid.forEach(value => expect(parsers.parseCustomIdentifier(value)).toBe(value)); }); + it('works with custom variable', () => { + expect(parsers.parseCustomIdentifier('var(--identifier)')).toBe('var(--identifier)'); + }); +}); +describe('parseDashedIdentifier', () => { + it('returns null for invalid values', () => { + expect(parsers.parseDashedIdentifier('identifier')).toBeNull(); + }); + it('works with custom variable', () => { + expect(parsers.parseDashedIdentifier('var(--dashed-ident)')).toBe('var(--dashed-ident)'); + }); }); describe('parseUrl', () => { - it.todo('test'); + it('works with custom variable', () => { + expect(parsers.parseUrl('var(--url)')).toBe('var(--url)'); + }); + it.todo('more tests'); }); describe('parseString', () => { - it.todo('test'); + it('works with custom variable', () => { + expect(parsers.parseString('var(--string)')).toBe('var(--string)'); + }); + it.todo('more tests'); }); describe('parseColor', () => { it('should convert hsl to rgb values', () => { @@ -142,9 +183,55 @@ describe('parseColor', () => { expect(output).toBe('rgba(5, 5, 5, 0.5)'); }); + it('works with custom variable', () => { + expect(parsers.parseColor('rgb(var(--')).toBe('rgb(var(--'); + expect(parsers.parseColor('hsl(var(--')).toBe('hsl(var(--'); + expect(parsers.parseColor('rgb(var(--red), 0, 0, var(--alpha))')).toBe( + 'rgb(var(--red), 0, 0, var(--alpha))' + ); + expect(parsers.parseColor('hsl(var(--hue), var(--sat), 0, var(--alpha))')).toBe( + 'hsl(var(--hue), var(--sat), 0, var(--alpha))' + ); + }); it.todo('Add more tests'); }); +describe('parseCustomVariable', () => { + it('returns null for invalid values', () => { + const invalid = [ + 'var(, --property)', + 'var(1px, --property)', + 'vvar(--property)', + 'varr(--property)', + 'var(--prop erty)', + 'var(--, var(1px))', + ]; + invalid.forEach(input => expect(parsers.parseCustomVariable(input)).toBeNull()); + }); + it('parses a property with fallback value(s)', () => { + expect(parsers.parseCustomVariable('var(--foo, 100px)')).toBe('var(--foo, 100px)'); + expect(parsers.parseCustomVariable('var(--foo, var(--bar))')).toBe('var(--foo, var(--bar))'); + }); + it('returns value even when it might be resolved as invalid at user time', () => { + const invalid = [ + 'var(--', + 'var(--, )', + 'var(--)invalid', + 'invalid var(--)', + 'var(--prop) erty', + 'var(--, --prop erty)', + 'calc(var(--', + 'calc(var(--integer) + 1)', + ]; + invalid.forEach(input => expect(parsers.parseCustomVariable(input)).toBe(input)); + }); + it('returns a case senstive property reference name', () => { + expect(parsers.parseCustomVariable('VAr(--PROPerty)')).toBe('var(--PROPerty)'); + }); + it('works with calc', () => { + expect(parsers.parseCustomVariable('var(--foo, calc(1 + 1))')).toBe('var(--foo, calc(1 + 1))'); + }); +}); describe('cssPropertyToIDLAttribute', () => { it.todo('test'); });