add tests (#1040)

Author: lukasoppermann

.eslintrc.cjs

@@ -35,6 +35,7 @@ module.exports = {
   },
   // rules which apply to JS, TS, etc.
   rules: {
+    'import/no-nodejs-modules': 0,
     'filenames/match-regex': 0,
     'eslint-comments/no-unused-disable': 0,
     'react/prop-types': 0,

.github/workflows/build_config.yml

@@ -0,0 +1,33 @@
+name: Testing custom transforms, formats, etc. for Style Dictionary
+
+on:
+  pull_request:
+    branches-ignore:
+      - 'changeset-release/**'
+  workflow_dispatch:
+
+jobs:
+  changes:
+    uses: ./.github/workflows/hasChanged.yml
+
+  build:
+    needs: changes
+    if: needs.changes.outputs.buildConfig == 'true' || github.event_name == 'workflow_dispatch'
+    name: Test if custom transforms, formats, etc. are working
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm i --no-audit --no-fund --ignore-scripts
+
+      - name: Run test
+        run: |
+          npm run test:integration

.github/workflows/hasChanged.yml

@@ -12,6 +12,9 @@ on:
       src:
         description: "Boolean value indicating change in src folder"
         value: ${{ jobs.hasChanged.outputs.src }}
+      buildConfig:
+        description: "Boolean value indicating changes of the build configuration in src folder"
+        value: ${{ jobs.hasChanged.outputs.buildConfig }}
       scripts:
         description: "Boolean value indicating change in scripts folder"
         value: ${{ jobs.hasChanged.outputs.scripts }}
@@ -35,6 +38,7 @@ jobs:
       outputAffected: ${{ steps.filter.outputs.outputAffected }}
       tokens: ${{ steps.filter.outputs.tokens }}
       src: ${{ steps.filter.outputs.src }}
+      buildConfig: ${{ steps.filter.outputs.buildConfig }}
       scripts: ${{ steps.filter.outputs.scripts }}
       buildScripts: ${{ steps.filter.outputs.buildScripts }}
       dependencies: ${{ steps.filter.outputs.dependencies }}
@@ -53,6 +57,8 @@ jobs:
             - 'src/**/**.ts'
             - 'src/**/**.json'
             - 'src/**/**.json5'
+          buildConfig:
+            - 'src/**/**.ts'
           scripts:
             - 'scripts/**'
           buildScripts:

.gitignore

@@ -7,3 +7,4 @@ coverage/
 docs/public/
 color-contrast-check.json
 blob-report
+integration/build

integration/build.test.ts

@@ -0,0 +1,62 @@
+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)
+  })
+})

integration/tokens/base.json5

@@ -0,0 +1,13 @@
+{
+  base: {
+    color: {
+      blue: {
+        "500": {
+          "$value": '#2C29FF',
+          "$type": 'color',
+          "$description": 'The primary color for interactive elements.',
+        },
+      }
+    }
+  }
+}

integration/tokens/functional.json5

@@ -0,0 +1,8 @@
+{
+  fgColor: {
+    link: {
+      $value: '{base.color.blue.500}',
+      $type: 'color',
+    }
+  }
+}

integrationbuild/css/variables.css

@@ -0,0 +1,4 @@
+:root {
+  --prefix-base-color-blue-500: #2c29ff; /* The primary color for interactive elements. */
+  --prefix-fg-color-link: #2c29ff;
+}

package.json

@@ -40,7 +40,8 @@
     "prepack": "npm run build",
     "release": "changeset publish",
     "start:storybook": "npm run build && cd docs/storybook && npm run storybook",
-    "test": "vitest run --coverage"
+    "test": "vitest run --coverage",
+    "test:integration": "vitest run -r integration"
   },
   "prettier": "@github/prettier-config",
   "devDependencies": {

src/formats/cssAdvanced.test.ts

@@ -224,7 +224,7 @@ describe('Format: tokens nested in media query', () => {
   /**
    * Test cases for formatting tokens with simple css variables
    */
-  it('Shows comment if option.description is true', () => {
+  it('Shows comment if option.formatting.commentStyle is long or not set', () => {
     const input = getMockFormatterArguments({
       dictionary: getMockDictionary({
         tokens: {
@@ -238,7 +238,9 @@ describe('Format: tokens nested in media query', () => {
         },
       }),
       options: {
-        descriptions: true,
+        formatting: {
+          commentStyle: 'long',
+        },
       },
       file: {
         destination: 'size-fine.css',
@@ -253,19 +255,7 @@ describe('Format: tokens nested in media query', () => {
       },
     })
 
-    const expectedOutput = syncPrettier.format(
-      ` @media (prefers-color-scheme: light){
-        :root {
-          --red: transformedValue; /* This is a description */
-        }
-      }`,
-      {parser: 'css', printWidth: 500},
-    )
-    expect(cssAdvanced(input)).toStrictEqual(expectedOutput)
-  })
-
-  it('Hides comment if option.description is false or not set', () => {
-    const input = getMockFormatterArguments({
+    const inputUnset = getMockFormatterArguments({
       dictionary: getMockDictionary({
         tokens: {
           subgroup: {
@@ -277,23 +267,34 @@ describe('Format: tokens nested in media query', () => {
           },
         },
       }),
-      options: {
-        descriptions: false,
-      },
+      options: {}, // description not set
       file: {
         destination: 'size-fine.css',
         options: {
           showFileHeader: false,
           queries: [
             {
-              query: '@media (prefers-color-scheme: dark)',
+              query: '@media (prefers-color-scheme: light)',
             },
           ],
         },
       },
     })
 
-    const inputUnset = getMockFormatterArguments({
+    const expectedOutput = syncPrettier.format(
+      ` @media (prefers-color-scheme: light){
+        :root {
+          --red: transformedValue; /* This is a description */
+        }
+      }`,
+      {parser: 'css', printWidth: 500},
+    )
+    expect(cssAdvanced(input)).toStrictEqual(expectedOutput)
+    expect(cssAdvanced(inputUnset)).toStrictEqual(expectedOutput)
+  })
+
+  it('Hides comment if option.formatting.commentStle is set to none', () => {
+    const input = getMockFormatterArguments({
       dictionary: getMockDictionary({
         tokens: {
           subgroup: {
@@ -305,7 +306,11 @@ describe('Format: tokens nested in media query', () => {
           },
         },
       }),
-      options: {}, // description not set
+      options: {
+        formatting: {
+          commentStyle: 'none',
+        },
+      },
       file: {
         destination: 'size-fine.css',
         options: {
@@ -328,6 +333,5 @@ describe('Format: tokens nested in media query', () => {
       {parser: 'css', printWidth: 500},
     )
     expect(cssAdvanced(input)).toStrictEqual(expectedOutput)
-    expect(cssAdvanced(inputUnset)).toStrictEqual(expectedOutput)
   })
 })