From 196a13f8531cb37dbb61f9fd5e32bab9a7a1bb79 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Mon, 2 Sep 2024 14:34:31 +0200 Subject: [PATCH] Add more integration tests (#1041) * adding more integration test * add tests --- .eslintrc.cjs | 10 +- integration/baseline.test.ts | 127 ++++++++++++ integration/build.test.ts | 62 ------ integration/integration.test.ts | 288 ++++++++++++++++++++++++++++ integration/tokens/base.json5 | 2 +- integration/tokens/functional.json5 | 4 +- 6 files changed, 427 insertions(+), 66 deletions(-) create mode 100644 integration/baseline.test.ts delete mode 100644 integration/build.test.ts create mode 100644 integration/integration.test.ts diff --git a/.eslintrc.cjs b/.eslintrc.cjs index d13e14f88..90ae7a63e 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -15,7 +15,15 @@ module.exports = { 'plugin:github/browser', 'prettier', ], - ignorePatterns: ['node_modules', 'coverage/**/*', 'docs', 'dist/**/*', 'CHANGELOG.md', 'src/@types/'], + ignorePatterns: [ + 'node_modules', + 'coverage/**/*', + 'docs', + 'dist/**/*', + 'integration/build/**/*', + 'CHANGELOG.md', + 'src/@types/', + ], globals: { __DEV__: 'readonly', }, diff --git a/integration/baseline.test.ts b/integration/baseline.test.ts new file mode 100644 index 000000000..56956b68e --- /dev/null +++ b/integration/baseline.test.ts @@ -0,0 +1,127 @@ +import {PrimerStyleDictionary} from '../src/PrimerStyleDictionary' +import fs from 'fs' + +describe('PrimerStyleDictionary', () => { + const basePath = `./integration` + const extendedSD = PrimerStyleDictionary.extend({ + source: [`${basePath}/tokens/**/*.json5`], + platforms: { + css: { + prefix: 'PREFIX', + transformGroup: 'css', + buildPath: `${basePath}/build/css/`, + files: [ + { + options: { + showFileHeader: false, + }, + destination: 'variables.css', + format: 'css/variables', + }, + ], + }, + json: { + prefix: 'PREFIX', + buildPath: `${basePath}/build/json/`, + files: [ + { + options: { + showFileHeader: false, + }, + destination: 'variables.json', + format: 'json', + }, + ], + }, + jsonFlat: { + prefix: 'PREFIX', + buildPath: `${basePath}/build/json/`, + transforms: ['name/cti/pascal'], + files: [ + { + options: { + showFileHeader: false, + }, + destination: 'flat.json', + format: 'json/flat', + }, + ], + }, + }, + }) + + extendedSD.cleanAllPlatforms() + extendedSD.buildAllPlatforms() + + it('runs baseline css/variables format', () => { + const output = fs.readFileSync(`${basePath}/build/css/variables.css`, 'utf8') + const expectedOutput = `:root { + --prefix-base-color-aqua-blue-500: #2C29FF; /* The primary color for interactive elements. */ + --prefix-fg-color-link-rest-01: #2C29FF; +} +` + expect(output).toBe(expectedOutput) + }) + + it('runs baseline json format', () => { + const output = fs.readFileSync(`${basePath}/build/json/variables.json`, 'utf8') + const expectedOutput = `{ + "base": { + "color": { + "aquaBlue": { + "500": { + "value": "#2C29FF", + "$type": "color", + "comment": "The primary color for interactive elements.", + "filePath": "integration/tokens/base.json5", + "isSource": true, + "original": { + "value": "#2C29FF", + "$type": "color", + "comment": "The primary color for interactive elements." + }, + "name": "500", + "attributes": {}, + "path": [ + "base", + "color", + "aquaBlue", + "500" + ] + } + } + } + }, + "fgColor": { + "link-rest-01": { + "value": "#2C29FF", + "$type": "color", + "filePath": "integration/tokens/functional.json5", + "isSource": true, + "original": { + "value": "{base.color.aquaBlue.500}", + "$type": "color" + }, + "name": "link-rest-01", + "attributes": {}, + "path": [ + "fgColor", + "link-rest-01" + ] + } + } +} +` + expect(output).toBe(expectedOutput) + }) + + it('runs baseline flat json format', () => { + const output = fs.readFileSync(`${basePath}/build/json/flat.json`, 'utf8') + const expectedOutput = `{ + "PrefixBaseColorAquaBlue500": "#2C29FF", + "PrefixFgColorLinkRest01": "#2C29FF" +} +` + expect(output).toBe(expectedOutput) + }) +}) diff --git a/integration/build.test.ts b/integration/build.test.ts deleted file mode 100644 index 065e34e0f..000000000 --- a/integration/build.test.ts +++ /dev/null @@ -1,62 +0,0 @@ -import {PrimerStyleDictionary} from '../src/PrimerStyleDictionary' -import fs from 'fs' - -describe('PrimerStyleDictionary', () => { - const basePath = `./integration` - const extendedSD = PrimerStyleDictionary.extend({ - source: [`${basePath}/tokens/**/*.json5`], - platforms: { - css: { - prefix: 'PREFIX', - transformGroup: 'css', - buildPath: `${basePath}/build/css/`, - files: [ - { - options: { - showFileHeader: false, - }, - destination: 'variables.css', - format: 'css/variables', - }, - ], - }, - advancedCss: { - prefix: 'PREFIX', - transformGroup: 'css', - buildPath: `${basePath}/build/css/`, - files: [ - { - options: { - showFileHeader: false, - }, - destination: 'advanced.css', - format: 'css/advanced', - }, - ], - }, - }, - }) - - extendedSD.cleanAllPlatforms() - extendedSD.buildAllPlatforms() - - it('it should transform with css/variables format', () => { - const output = fs.readFileSync(`${basePath}/build/css/variables.css`, 'utf8') - const expectedOutput = `:root { - --prefix-base-color-blue-500: #2C29FF; /* The primary color for interactive elements. */ - --prefix-fg-color-link: #2C29FF; -} -` - expect(output).toBe(expectedOutput) - }) - - it('it should transform with css/advanced format', () => { - const output = fs.readFileSync(`${basePath}/build/css/advanced.css`, 'utf8') - const expectedOutput = `:root { - --prefix-base-color-blue-500: #2c29ff; /* The primary color for interactive elements. */ - --prefix-fg-color-link: #2c29ff; -} -` - expect(output).toBe(expectedOutput) - }) -}) diff --git a/integration/integration.test.ts b/integration/integration.test.ts new file mode 100644 index 000000000..f2cfdbf96 --- /dev/null +++ b/integration/integration.test.ts @@ -0,0 +1,288 @@ +import {PrimerStyleDictionary} from '../src/PrimerStyleDictionary' +import fs from 'fs' + +describe('PrimerStyleDictionary', () => { + const basePath = `./integration` + const extendedSD = PrimerStyleDictionary.extend({ + source: [`${basePath}/tokens/**/*.json5`], + platforms: { + advancedCss: { + prefix: 'PREFIX', + transforms: [ + 'name/pathToKebabCase', + 'color/hex', + 'color/hexAlpha', + 'color/hexMix', + 'dimension/rem', + 'duration/css', + 'shadow/css', + 'border/css', + 'typography/css', + 'fontFamily/css', + 'fontWeight/number', + ], + buildPath: `${basePath}/build/css/`, + files: [ + { + options: { + showFileHeader: false, + }, + destination: 'advanced.css', + format: 'css/advanced', + }, + ], + }, + commonJs: { + prefix: 'PREFIX', + transforms: [ + 'color/hex', + 'color/hexMix', + 'color/hexAlpha', + 'dimension/rem', + 'shadow/css', + 'border/css', + 'typography/css', + 'fontFamily/css', + 'fontWeight/number', + ], + buildPath: `${basePath}/build/js/`, + files: [ + { + options: { + showFileHeader: false, + }, + destination: 'common.js', + format: 'javascript/commonJs', + }, + ], + }, + javascriptEsm: { + prefix: 'PREFIX', + buildPath: `${basePath}/build/js/`, + transforms: [ + 'color/hex', + 'color/hexMix', + 'color/hexAlpha', + 'dimension/rem', + 'shadow/css', + 'border/css', + 'typography/css', + 'fontFamily/css', + 'fontWeight/number', + ], + files: [ + { + options: { + showFileHeader: false, + }, + destination: 'esm.mjs', + format: 'javascript/esm', + }, + ], + }, + jsonFigma: { + prefix: 'PREFIX', + buildPath: `${basePath}/build/json/`, + transforms: [ + 'color/rgbaFloat', + 'name/pathToFigma', + 'figma/attributes', + 'fontFamily/figma', + 'float/pixelUnitless', + 'dimension/pixelUnitless', + 'fontWeight/number', + ], + files: [ + { + options: { + showFileHeader: false, + }, + destination: 'figma.json', + format: 'json/figma', + }, + ], + }, + jsonNestedPrefixed: { + prefix: 'PREFIX', + buildPath: `${basePath}/build/json/`, + transforms: [ + 'color/hex', + 'color/hexMix', + 'color/hexAlpha', + 'dimension/rem', + 'shadow/css', + 'border/css', + 'typography/css', + 'fontFamily/css', + 'fontWeight/number', + ], + files: [ + { + options: { + showFileHeader: false, + }, + destination: 'nested.json', + format: 'json/nested-prefixed', + }, + ], + }, + tsDefinition: { + prefix: 'PREFIX', + buildPath: `${basePath}/build/js/`, + transforms: [ + 'color/hex', + 'color/hexAlpha', + 'shadow/css', + 'border/css', + 'dimension/rem', + 'typography/css', + 'fontFamily/css', + 'fontWeight/number', + ], + files: [ + { + options: { + showFileHeader: false, + }, + destination: 'definitions.d.ts', + format: 'typescript/export-definition', + }, + ], + }, + }, + }) + + extendedSD.cleanAllPlatforms() + extendedSD.buildAllPlatforms() + + it('runs css/advanced format', () => { + const output = fs.readFileSync(`${basePath}/build/css/advanced.css`, 'utf8') + const expectedOutput = `:root { + --PREFIX-base-color-aquaBlue-500: #2c29ff; /* The primary color for interactive elements. */ + --PREFIX-fgColor-link-rest-01: #2c29ff; +} +` + expect(output).toBe(expectedOutput) + }) + + it('runs commonJs format', () => { + const output = fs.readFileSync(`${basePath}/build/js/common.js`, 'utf8') + const expectedOutput = `exports.default = { + PREFIX: { + base: { + color: { + aquaBlue: { + "500": "#2c29ff", + }, + }, + }, + fgColor: { + "link-rest-01": "#2c29ff", + }, + }, +}; +` + expect(output).toBe(expectedOutput) + }) + + it('runs esm format', () => { + const output = fs.readFileSync(`${basePath}/build/js/esm.mjs`, 'utf8') + const expectedOutput = `export default { + PREFIX: { + base: { + color: { + aquaBlue: { + "500": "#2c29ff", + }, + }, + }, + fgColor: { + "link-rest-01": "#2c29ff", + }, + }, +}; +` + expect(output).toBe(expectedOutput) + }) + + it('runs figma format', () => { + const output = fs.readFileSync(`${basePath}/build/json/figma.json`, 'utf8') + const expectedOutput = `[ + { + "name": "PREFIX/base/color/aquaBlue/500", + "value": { + "r": 0.17254901960784313, + "g": 0.1607843137254902, + "b": 1, + "a": 1 + }, + "type": "COLOR", + "description": "The primary color for interactive elements.", + "refId": "PREFIX/base/color/aquaBlue/500", + "mode": "default", + "scopes": ["ALL_SCOPES"] + }, + { + "name": "PREFIX/fgColor/link-rest-01", + "value": { + "r": 0.17254901960784313, + "g": 0.1607843137254902, + "b": 1, + "a": 1 + }, + "type": "COLOR", + "refId": "PREFIX/fgColor/link-rest-01", + "reference": "PREFIX/base/color/aquaBlue/500", + "mode": "default", + "scopes": ["ALL_SCOPES"] + } +] +` + expect(output).toBe(expectedOutput) + }) + + it('runs json-nested-prefixed format', () => { + const output = fs.readFileSync(`${basePath}/build/json/nested.json`, 'utf8') + const expectedOutput = `{ + "PREFIX": { + "base": { + "color": { + "aquaBlue": { + "500": "#2c29ff" + } + } + }, + "fgColor": { + "link-rest-01": "#2c29ff" + } + } +} +` + expect(output).toBe(expectedOutput) + }) + + it('runs ts definition format', () => { + const output = fs.readFileSync(`${basePath}/build/js/definitions.d.ts`, 'utf8') + const expectedOutput = `/** + * @description hex string (6 or 8-digit) + */ +type ColorHex = string; + +export type tokens = { + PREFIX: { + base: { + color: { + aquaBlue: { + "500": ColorHex; + }; + }; + }; + fgColor: { + "link-rest-01": ColorHex; + }; + }; +}; +` + expect(output).toBe(expectedOutput) + }) +}) diff --git a/integration/tokens/base.json5 b/integration/tokens/base.json5 index c6c9a998d..2b0998055 100644 --- a/integration/tokens/base.json5 +++ b/integration/tokens/base.json5 @@ -1,7 +1,7 @@ { base: { color: { - blue: { + aquaBlue: { "500": { "$value": '#2C29FF', "$type": 'color', diff --git a/integration/tokens/functional.json5 b/integration/tokens/functional.json5 index 6b73f4ca2..82846d17e 100644 --- a/integration/tokens/functional.json5 +++ b/integration/tokens/functional.json5 @@ -1,7 +1,7 @@ { fgColor: { - link: { - $value: '{base.color.blue.500}', + "link-rest-01": { + $value: '{base.color.aquaBlue.500}', $type: 'color', } }