From 6bd378830d1467ded58d5dadfaf8c1c2143ecf41 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Thu, 25 Apr 2024 14:53:29 +0200 Subject: [PATCH] cleaup tests for cssAdvanced (#935) --- src/formats/cssAdvanced.test.ts | 142 +++++++++++++++++++++++++++++-- src/formats/cssThemed.test.ts | 77 ----------------- src/formats/cssVariables.test.ts | 57 ------------- 3 files changed, 136 insertions(+), 140 deletions(-) delete mode 100644 src/formats/cssThemed.test.ts delete mode 100644 src/formats/cssVariables.test.ts diff --git a/src/formats/cssAdvanced.test.ts b/src/formats/cssAdvanced.test.ts index 58fb31013..2f0dd96c9 100644 --- a/src/formats/cssAdvanced.test.ts +++ b/src/formats/cssAdvanced.test.ts @@ -4,18 +4,71 @@ import {format} from 'prettier' import type {TransformedToken} from 'style-dictionary' describe('Format: tokens nested in media query', () => { - it('Wraps in :root if no media query defined', () => { + /** + * Test cases for formatting tokens with simple css variables + */ + it('Formats tokens as css variables with default :root selector', () => { const input = getMockFormatterArguments() const expectedOutput = format( `:root { + --red: transformedValue; + }`, + { + parser: 'css', + printWidth: 500, + }, + ) + expect(cssAdvanced(input)).toStrictEqual(expectedOutput) + }) + + it('Formats tokens with custom selectors', () => { + const input = getMockFormatterArguments({ + file: { + destination: 'test.css', + options: { + showFileHeader: false, + selector: `[data-color-mode="dark"]`, + }, + }, + }) + const expectedOutput = format( + ` [data-color-mode="dark"] { + --red: transformedValue; + }`, + {parser: 'css', printWidth: 500}, + ) + expect(cssAdvanced(input)).toStrictEqual(expectedOutput) + }) + + /** + * Test cases for formatting using media queries + */ + it('Formats all tokens with screen media query and default selector', () => { + const input = getMockFormatterArguments({ + file: { + destination: 'tokens.ts', + options: { + showFileHeader: false, + queries: [ + { + query: '@media screen', + }, + ], + }, + }, + }) + const expectedOutput = format( + ` @media screen { + :root { --red: transformedValue; + } }`, {parser: 'css', printWidth: 500}, ) expect(cssAdvanced(input)).toStrictEqual(expectedOutput) }) - it('Wrap all tokens in screen media query', () => { + it('Formats all tokens with screen media query and custom selector', () => { const input = getMockFormatterArguments({ file: { destination: 'tokens.ts', @@ -24,6 +77,7 @@ describe('Format: tokens nested in media query', () => { queries: [ { query: '@media screen', + selector: '[data-color-mode="dark"]', }, ], }, @@ -31,7 +85,7 @@ describe('Format: tokens nested in media query', () => { }) const expectedOutput = format( ` @media screen { - :root { + [data-color-mode="dark"] { --red: transformedValue; } }`, @@ -40,7 +94,7 @@ describe('Format: tokens nested in media query', () => { expect(cssAdvanced(input)).toStrictEqual(expectedOutput) }) - it('Ignore if no matching media query is found', () => { + it('Outputs nothing if no matching media query is found', () => { const input = getMockFormatterArguments({ file: { destination: 'size-coarse.css', @@ -58,7 +112,7 @@ describe('Format: tokens nested in media query', () => { expect(cssAdvanced(input)).toStrictEqual('') }) - it('Wraps in defined media query if files match', () => { + it('Formats only matching tokens in defined media query using matcher', () => { const input = getMockFormatterArguments({ dictionary: getMockDictionary({ tokens: { @@ -67,6 +121,10 @@ describe('Format: tokens nested in media query', () => { name: 'tokens-subgroup-gap', filePath: 'size-fine.json', }), + bigGap: getMockToken({ + name: 'tokens-subgroup-gap', + filePath: 'size-coarse.json', + }), }, }, }), @@ -93,8 +151,80 @@ describe('Format: tokens nested in media query', () => { ) expect(cssAdvanced(input)).toStrictEqual(expectedOutput) }) + /** + * Test cases for formatting using selectors + */ + it('Formats all tokens with custom selectors', () => { + const input = getMockFormatterArguments({ + file: { + destination: 'dark.css', + options: { + showFileHeader: false, + queries: [ + { + selector: + '[data-color-mode="dark"][data-dark-theme="dark"], [data-color-mode="auto"][data-light-theme="dark"]', + }, + ], + }, + }, + }) + const expectedOutput = format( + ` [data-color-mode="dark"][data-dark-theme="dark"], + [data-color-mode="auto"][data-light-theme="dark"] { + --red: transformedValue; + }`, + {parser: 'css', printWidth: 500}, + ) + expect(cssAdvanced(input)).toStrictEqual(expectedOutput) + }) - it('Show comment if option.description is true', () => { + it('Formats only matching tokens with custom selectors', () => { + const input = getMockFormatterArguments({ + dictionary: getMockDictionary({ + tokens: { + subgroup: { + gap: getMockToken({ + name: 'tokens-subgroup-gap', + filePath: 'size-fine.json', + }), + bigGap: getMockToken({ + name: 'tokens-subgroup-gap', + filePath: 'size-coarse.json', // should not show up in output + }), + }, + }, + }), + file: { + destination: 'dark.css', + options: { + showFileHeader: false, + queries: [ + { + selector: + '[data-color-mode="dark"][data-dark-theme="dark"], [data-color-mode="auto"][data-light-theme="dark"]', + matcher: (token: TransformedToken) => token.filePath.includes('size.json'), // no token in this file + }, + { + selector: '[data-color-mode="auto"][data-dark-theme="dark"]', + matcher: (token: TransformedToken) => token.filePath.includes('size-fine.json'), + }, + ], + }, + }, + }) + const expectedOutput = format( + `[data-color-mode="auto"][data-dark-theme="dark"] { + --tokens-subgroup-gap: transformedValue; + }`, + {parser: 'css', printWidth: 500}, + ) + expect(cssAdvanced(input)).toStrictEqual(expectedOutput) + }) + /** + * Test cases for formatting tokens with simple css variables + */ + it('Shows comment if option.description is true', () => { const input = getMockFormatterArguments({ dictionary: getMockDictionary({ tokens: { diff --git a/src/formats/cssThemed.test.ts b/src/formats/cssThemed.test.ts deleted file mode 100644 index fca95fc39..000000000 --- a/src/formats/cssThemed.test.ts +++ /dev/null @@ -1,77 +0,0 @@ -import {cssAdvanced} from './cssAdvanced' -import {getMockFormatterArguments} from '../test-utilities' -import {format} from 'prettier' - -describe('Format: Css Themed', () => { - it('Formats tokens', () => { - const input = getMockFormatterArguments() - const expectedOutput = format( - `:root { - --red: transformedValue; - }`, - { - parser: 'css', - printWidth: 500, - }, - ) - expect(cssAdvanced(input)).toStrictEqual(expectedOutput) - }) - - it('Formats tokens with custom selectors', () => { - const input = getMockFormatterArguments({ - file: { - destination: 'dark.css', - options: { - showFileHeader: false, - queries: [ - { - selector: - '[data-color-mode="dark"][data-dark-theme="dark"], [data-color-mode="auto"][data-light-theme="dark"]', - }, - { - query: '@media (prefers-color-scheme: dark)', - selector: '[data-color-mode="auto"][data-dark-theme="dark"]', - }, - ], - }, - }, - }) - const expectedOutput = format( - ` [data-color-mode="dark"][data-dark-theme="dark"], - [data-color-mode="auto"][data-light-theme="dark"] { - --red: transformedValue; - } - @media (prefers-color-scheme: dark) { - [data-color-mode="auto"][data-dark-theme="dark"] { - --red: transformedValue; - } - }`, - {parser: 'css', printWidth: 500}, - ) - expect(cssAdvanced(input)).toStrictEqual(expectedOutput) - }) - - it('Formats tokens with only one selector', () => { - const input = getMockFormatterArguments({ - file: { - destination: 'dark.css', - options: { - showFileHeader: false, - selector: '', - queries: [ - { - query: `[data-color-mode="dark"]`, - }, - ], - }, - }, - }) - const expectedOutput = format( - `[data-color-mode="dark"]{ - --red: transformedValue; - }`, - {parser: 'css', printWidth: 500}, - ) - expect(cssAdvanced(input)).toStrictEqual(expectedOutput) - }) -}) diff --git a/src/formats/cssVariables.test.ts b/src/formats/cssVariables.test.ts deleted file mode 100644 index 3ae304a62..000000000 --- a/src/formats/cssVariables.test.ts +++ /dev/null @@ -1,57 +0,0 @@ -import {cssAdvanced} from './cssAdvanced' -import {getMockFormatterArguments} from '../test-utilities' -import {format} from 'prettier' - -describe('Format: css/variables', () => { - it('Formats tokens', () => { - const input = getMockFormatterArguments() - const expectedOutput = format( - `:root { - --red: transformedValue; - }`, - { - parser: 'css', - printWidth: 500, - }, - ) - expect(cssAdvanced(input)).toStrictEqual(expectedOutput) - }) - - it('Formats tokens with custom selectors', () => { - const input = getMockFormatterArguments({ - file: { - destination: 'test.css', - options: { - showFileHeader: false, - selector: `[data-color-mode="dark"]`, - }, - }, - }) - const expectedOutput = format( - ` [data-color-mode="dark"] { - --red: transformedValue; - }`, - {parser: 'css', printWidth: 500}, - ) - expect(cssAdvanced(input)).toStrictEqual(expectedOutput) - }) - - it('Formats tokens with only options.selector', () => { - const input = getMockFormatterArguments({ - file: { - destination: 'test.css', - options: { - showFileHeader: false, - selector: `[data-color-mode="dark"]`, - }, - }, - }) - const expectedOutput = format( - `[data-color-mode="dark"]{ - --red: transformedValue; - }`, - {parser: 'css', printWidth: 500}, - ) - expect(cssAdvanced(input)).toStrictEqual(expectedOutput) - }) -})