test: add cli tests

Author: skovy

.github/workflows/main.yml

@@ -25,12 +25,12 @@ jobs:
       - name: Lint
         run: yarn lint
 
-      - name: Test
-        run: yarn test --ci --coverage --maxWorkers=2
-
       - name: Build
         run: yarn build
 
+      - name: Test
+        run: yarn test --ci --coverage --maxWorkers=2
+
   publish:
     needs: build
     runs-on: ubuntu-latest

package.json

@@ -41,6 +41,7 @@
     "**/tsdx/ts-jest": "27.1.3"
   },
   "devDependencies": {
+    "@types/fs-extra": "^9.0.13",
     "@types/glob": "^7.2.0",
     "@types/node": "^17.0.13",
     "dripip": "^0.10.0",
@@ -55,6 +56,7 @@
     "bundle-require": "^3.0.2",
     "cac": "^6.7.12",
     "esbuild": "^0.14.14",
+    "fs-extra": "^10.0.0",
     "glob": "^7.2.0",
     "postcss": "^8.4.5"
   }

recipes/color-props-to-red/input/a.css

@@ -0,0 +1,12 @@
+.a {
+  color: green;
+}
+
+.b {
+  margin-top: 123px;
+}
+
+.c {
+  background-color: orange;
+  color: #fff;
+}

recipes/color-props-to-red/output/a.css

@@ -0,0 +1,12 @@
+.a {
+  color: red;
+}
+
+.b {
+  margin-top: 123px;
+}
+
+.c {
+  background-color: orange;
+  color: red;
+}

test/transforms/color-to-red.ts recipes/color-props-to-red/transform.tstest/transforms/color-to-red.ts renamed to recipes/color-props-to-red/transform.ts

@@ -0,0 +1,20 @@
+.a {
+  color: green;
+}
+
+.b {
+  margin-top: 123px;
+}
+
+.c {
+  background-color: orange;
+  color: #fff;
+}
+
+.camelCase {
+  border: 1px solid red;
+}
+
+.kebab-case {
+  border: 1px solid blue;
+}

recipes/uppercase-selectors/input/a.css

@@ -0,0 +1,20 @@
+.A {
+  color: green;
+}
+
+.B {
+  margin-top: 123px;
+}
+
+.C {
+  background-color: orange;
+  color: #fff;
+}
+
+.CAMELCASE {
+  border: 1px solid red;
+}
+
+.KEBAB-CASE {
+  border: 1px solid blue;
+}

recipes/uppercase-selectors/output/a.css

@@ -0,0 +1,13 @@
+import { Transform } from '../../src';
+
+export const transform: Transform = (fileInfo, api) => {
+  const root = api.parse(fileInfo.source);
+
+  root.walk(node => {
+    if (node.type === 'rule') {
+      node.selector = node.selector.toUpperCase();
+    }
+  });
+
+  return root.toString();
+};

recipes/uppercase-selectors/transform.ts

@@ -1,5 +1,49 @@
+import { execSync } from 'child_process';
+import glob from 'glob';
+import path from 'path';
+import fs from 'fs-extra';
+
+const bin = './dist/cli.js';
+const cache = path.join(__dirname, '.cache');
+
+const run = (recipe: string) => {
+  // Setup the test files
+  const originalInput = `./recipes/${recipe}/input`;
+  const inputDest = path.resolve(cache, recipe);
+  fs.copySync(originalInput, inputDest);
+
+  // Run the command
+  const transform = `./recipes/${recipe}/transform.ts`;
+  const inputGlob = `${inputDest}/**/*.css`;
+  const command = `${bin} -t ${transform} '${inputGlob}'`;
+  execSync(command);
+
+  // Compare results
+  const expectedOutput = `./recipes/${recipe}/output`;
+  const expectedOutputGlob = `${expectedOutput}/**/*.css`;
+  const expectedFiles = glob.sync(expectedOutputGlob);
+
+  expectedFiles.forEach(expectedFile => {
+    const uniquePath = path.relative(expectedOutput, expectedFile);
+    const actualFilePath = path.join(inputDest, uniquePath);
+    const expectedContent = fs.readFileSync(expectedFile).toString();
+    const actualContent = fs.readFileSync(actualFilePath).toString();
+    expect(actualContent).toEqual(expectedContent);
+  });
+};
+
+const recipes = fs.readdirSync(path.resolve(__dirname, '../recipes'));
+
 describe('cli', () => {
-  it('should perform file transformations', () => {
-    // cli();
+  beforeAll(() => {
+    fs.removeSync(cache);
+  });
+
+  afterAll(() => {
+    fs.removeSync(cache);
+  });
+
+  it.each(recipes)('should perform %s transform correctly', recipe => {
+    run(recipe);
   });
 });