Add chromatic testing (#170)

.github/workflows/ci-chromatic.yaml

@@ -0,0 +1,43 @@
+name: 'CI Chromatic'
+
+on:
+  push:
+jobs:
+  chromatic-deployment:
+    runs-on: ubuntu-latest
+    env:
+      REACT_APP_API_URL: http://127.0.0.1:3000/graphql
+      REACT_APP_AUTH_URL: http://127.0.0.1:3000/auth
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+      - name: Cache node modules
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - name: Front / Write .env
+        run: |
+          cd front
+          touch .env
+          echo "REACT_APP_API_URL: $REACT_APP_API_URL" >> .env
+          echo "REACT_APP_AUTH_URL: $REACT_APP_AUTH_URL" >> .env
+      - name: Front / Install Dependencies
+        run: cd front && npm install
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        with:
+          workingDir: ./front
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+        

front/.env.example

@@ -1,2 +1,4 @@
 REACT_APP_API_URL=http://localhost:3000/graphql
 REACT_APP_AUTH_URL=http://localhost:3000/auth
+
+CHROMATIC_PROJECT_TOKEN=REPLACE_ME

front/.gitignore

@@ -8,6 +8,7 @@
 # testing
 /coverage
 storybook-static
+build-storybook.log
 
 # production
 /build

front/codegen.js

@@ -1,13 +1,5 @@
 module.exports = {
-  schema: [
+  schema: process.env.REACT_APP_API_URL,
-    {
-      'http://localhost:3000/graphql': {
-        headers: {
-          'x-hasura-admin-secret': process.env.HASURA_GRAPHQL_ADMIN_SECRET,
-        },
-      },
-    },
-  ],
   documents: ['./src/**/*.tsx', './src/**/*.ts'],
   overwrite: true,
   generates: {

front/package.json

@@ -34,7 +34,8 @@
     "test-storybook": "test-storybook",
     "build-storybook": "storybook build -s public",
     "coverage": "test-storybook --coverage && npx nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook --check-coverage",
-    "graphql:generate": "REACT_APP_GRAPHQL_ADMIN_SECRET=$REACT_APP_GRAPHQL_ADMIN_SECRET graphql-codegen --config codegen.js"
+    "graphql:generate": "dotenv cross-var graphql-codegen --config codegen.js",
+    "chromatic": "dotenv cross-var npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"
   },
   "eslintConfig": {
     "extends": [
@@ -98,7 +99,10 @@
     "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "babel-plugin-named-exports-order": "^0.0.2",
+    "chromatic": "^6.18.0",
     "concurrently": "^8.0.1",
+    "cross-var": "^1.1.0",
+    "dotenv-cli": "^7.2.1",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",