Merge pull request #1045 from amzn/fix-tests

Fix tests & slight API changes

.changeset/fifty-dragons-heal.md

@@ -0,0 +1,6 @@
+---
+'style-dictionary': minor
+---
+
+Preprocessors are a new feature added to style-dictionary, which allows you to do any type of processing of the token dictionary **after** parsing, **before** resolving and transforming.
+See [preprocessor docs](https://github.com/amzn/style-dictionary/tree/v4/docs/preprocessors.md) for more information.

.changeset/gorgeous-lamps-chew.md

@@ -0,0 +1,5 @@
+---
+'style-dictionary': minor
+---
+
+options.log to be respected in all error logging, including platform specific logs.

.changeset/light-games-occur.md

@@ -0,0 +1,5 @@
+---
+'style-dictionary': major
+---
+
+BREAKING: StyleDictionaryInstance.properties & .allProperties have been removed. They were deprecated in v3 in favor of .tokens and .allTokens.

.changeset/unlucky-cameras-draw.md

@@ -0,0 +1,67 @@
+---
+'style-dictionary': major
+---
+
+BREAKING: StyleDictionary to be initialized with a new API and have async methods. Use:
+
+```js
+import StyleDictionary from 'style-dictionary';
+
+/**
+ * old: 
+ *   const sd = StyleDictionary.extend({ source: ['tokens.json'], platforms: {} });
+ *   sd.buildAllPlatforms();
+ */ 
+const sd = new StyleDictionary({ source: ['tokens.json'], platforms: {} });
+await sd.buildAllPlatforms();
+```
+
+You can still extend a dictionary instance with an extended config, but `.extend()` is only used for this, it is no longer used to initialize the first instance:
+
+```js
+import StyleDictionary from 'style-dictionary';
+
+const sd = new StyleDictionary({ source: ['tokens.json'], platforms: {} });
+const extended = await sd.extend({ 
+  fileHeader: {
+    myFileHeader: (defaultMessage) => {
+      return [...defaultMessage, 'hello, world!'];
+    }
+  }
+});
+```
+
+To ensure your initialized StyleDictionary instance is fully ready and has imported all your tokens, you can await `hasInitialized`:
+
+```js
+import StyleDictionary from 'style-dictionary';
+
+const sd = new StyleDictionary({ source: ['tokens.json'], platforms: {} });
+await sd.hasInitialized;
+console.log(sd.allTokens);
+```
+
+For error handling and testing purposes, you can also manually initialize the style-dictionary config:
+
+```js
+import StyleDictionary from 'style-dictionary';
+
+const sd = new StyleDictionary({ source: ['tokens.js'], platforms: {} }, { init: false });
+try {
+  await sd.init();
+} catch(e) {
+  // handle error, e.g. when tokens.js file has syntax errors and cannot be imported
+}
+console.log(sd.allTokens);
+```
+
+The main reason for an initialize step after class instantiation is that async constructors are not a thing in JavaScript, and if you return a promise from a constructor to "hack it", TypeScript will eventually trip over it.
+
+Due to being able to dynamically (asynchronously) import ES Modules rather than synchronously require CommonJS modules, we had to make the APIs asynchronous, so the following methods are now async:
+
+- extend
+- exportPlatform
+- buildAllPlatforms & buildPlatform
+- cleanAllPlatforms & cleanPlatform
+
+In a future release, most other methods will be made async or support async as well, such as parsers, transforms, formats etc.

.eslintrc.json

@@ -3,23 +3,21 @@
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "plugins": ["jest"],
   "env": {
     "node": true,
     "mocha": true,
-    "jest": true
+    "es6": true
   },
   "globals": {
     "Buffer": true,
     "escape": true
   },
-  "extends": ["eslint:recommended", "plugin:jest/recommended"],
+  "extends": ["eslint:recommended"],
   "rules": {
     "no-console": 0,
     "no-unused-vars": 1,
     "no-control-regex": 0,
     "comma-dangle": 0,
-    "no-prototype-builtins": 0,
-    "jest/valid-title": 0
+    "no-prototype-builtins": 0
   }
 }

.github/workflows/verify.yml

@@ -13,20 +13,21 @@ jobs:
       - uses: actions/checkout@v2
 
       - name: Setup Node ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'npm'
 
       - name: Install Dependencies
         run: npm ci
 
       - name: Linting & Formatting
         run: npm run lint
 
-      - name: Tests
-        run: npm run test
+      - name: Node tests
+        run: npm run test:node
 
-      # in case we use playwright & @web/test-runner in the future
-      # - name: Install chromium
-      #   run: npx playwright install-deps chromium
+      - name: Install chromium
+        run: npx playwright install --with-deps chromium
+
+      - name: Browser tests
+        run: npm run test:browser

.npmignore

@@ -2,4 +2,4 @@
 .eslintrc.json
 .editorconfig
 images/
-test/
+__tests__/

.prettierignore

@@ -1 +1,2 @@
-.changeset/
+.changeset/
+**/*.snap.js

CONTRIBUTING.md

@@ -58,7 +58,7 @@ We separate each function/method into its own file and group them into directori
 
 Any new features should implement the proper unit tests. We use Jest to test our framework.
 
-If you are adding a new transform, action, or format: please add new unit tests. You can see examples in test/formats.
+If you are adding a new transform, action, or format: please add new unit tests. You can see examples in **tests**/formats.
 
 ## Documentation