Merge pull request #530 from PrestaShopCorp/add-chromatic

Add chromatic

.github/workflows/chromatic.yml

@@ -0,0 +1,50 @@
+# based on .github/workflows/chromatic.yml
+
+# Workflow name
+name: 'Chromatic'
+# Event for the workflow
+on:
+  pull_request:
+    types: [opened,edited,reopened,synchronize,labeled]
+    paths:
+      - '_dev/**'
+  push:
+    branches:
+      - master
+
+env:
+  NODE_VERSION: 20
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push' || (contains(github.event.pull_request.labels.*.name, 'waiting for UX') && github.event.pull_request.head.repo.full_name == 'PrestaShopCorp/ps_facebook')
+    # Job steps
+    steps:
+        # 👇 Version 2 of the action
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0 # 👈 Required to retrieve git history
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: npm
+          cache-dependency-path: '_dev/package-lock.json'
+
+      - name: Install dependencies
+        working-directory: ./_dev
+        run: npm install
+
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v10
+        # Chromatic GitHub Action options
+        with:
+          workingDir: ./_dev
+          token: ${{ secrets.GITHUB_TOKEN }}
+          # 👇 Chromatic projectToken
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

_dev/.storybook/preview.js

@@ -123,7 +123,11 @@ export const parameters = {
         value: '#000000'
       },
     ],
-  }
+  },
+  chromatic: {
+    delay: 500,
+    diffThreshold: 0.15, // Test to see if we have less false positive
+  },
 }
 
 export const globalTypes = {

_dev/package.json

@@ -11,7 +11,8 @@
     "lint": "eslint --no-fix -c .eslintrc.js src/",
     "lint-fix": "eslint --fix -c .eslintrc.js src/",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "chromatic": "chromatic --exit-zero-on-changes"
   },
   "dependencies": {
     "@prestashopcorp/billing-cdc": "0.0.48",
@@ -44,6 +45,7 @@
     "@vitejs/plugin-vue2": "^2.0.3",
     "@vue/eslint-config-airbnb": "^5.3.0",
     "@vue/eslint-config-typescript": "^12.0.0",
+    "chromatic": "^10.2.0",
     "eslint": "^7.0.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prestashop": "^0.2.1",
@@ -63,5 +65,8 @@
     "vite-plugin-vue2": "^2.0.3",
     "vue-loader": "^15.10",
     "vue-template-compiler": "^2.7.14"
-  }
+  },
+  "version": "",
+  "readme": "ERROR: No README data found!",
+  "_id": "dev@"
 }

_dev/stories/105-configuration-fb-connected.stories.ts

@@ -9,13 +9,13 @@ const contextPsFacebook = {
   facebookBusinessManager: {
     name: 'La Fanchonette',
     email: '[email protected]',
-    createdAt: Date.now(),
+    createdAt: '2024-01-10T14:29:09+0100',
     id: '12345689',
   },
   pixel: {
     name: 'La Fanchonette Test Pixel',
     id: '1234567890',
-    lastActive: Date.now(),
+    lastActive: '2024-01-10T14:29:09+0100',
     isActive: true,
   },
   page: {
@@ -25,7 +25,7 @@ const contextPsFacebook = {
   },
   ads: {
     name: 'La Fanchonette',
-    createdAt: Date.now(),
+    createdAt: '2024-01-10T14:29:09+0100',
   },
 };
 
@@ -36,12 +36,12 @@ const contextPsFacebookOverflows = {
   facebookBusinessManager: {
     name: 'La Fanchonette qui s\'étend sur la longueur',
     email: 'fanchonette.a.very.long.email.should.not.be.a.problem.even.if.its.too.long@ps.com',
-    createdAt: Date.now(),
+    createdAt: '2024-01-10T14:29:09+0100',
   },
   pixel: {
     name: 'La Fanchonette qui s\'étend sur la longueur Test Pixel',
     id: '123456789012345678901234567890',
-    lastActive: Date.now(),
+    lastActive: '2024-01-10T14:29:09+0100',
     isActive: true,
   },
   page: {
@@ -51,7 +51,7 @@ const contextPsFacebookOverflows = {
   },
   ads: {
     name: 'La Fanchonette qui s\'étend sur la longueur',
-    createdAt: Date.now(),
+    createdAt: '2024-01-10T14:29:09+0100',
   },
 };
 
@@ -62,13 +62,13 @@ const contextPsFacebookMissingPermissions = {
   facebookBusinessManager: {
     name: 'La Fanchonette',
     email: '[email protected]',
-    createdAt: Date.now(),
+    createdAt: '2024-01-10T14:29:09+0100',
     id: '12345689',
   },
   pixel: {
     name: 'La Fanchonette Test Pixel',
     id: '1234567890',
-    lastActive: Date.now(),
+    lastActive: '2024-01-10T14:29:09+0100',
     isActive: true,
   },
   page: {
@@ -78,7 +78,7 @@ const contextPsFacebookMissingPermissions = {
   },
   ads: {
     name: 'La Fanchonette',
-    createdAt: Date.now(),
+    createdAt: '2024-01-10T14:29:09+0100',
   },
 };
 
@@ -90,7 +90,7 @@ export default {
 const Template = (args: any, {argTypes}: any) => ({
   props: Object.keys(argTypes),
   components: {FacebookConnected},
-  template: '<facebook-connected :contextPsFacebook="contextPsFacebook" :psFacebookAppId="psFacebookAppId" :externalBusinessId="externalBusinessId" @onEditClick="onEditClick" @onUninstallClick="onUninstallClick" @onPixelActivation="onPixelActivation" />',
+  template: '<facebook-connected :contextPsFacebook="contextPsFacebook" :psFacebookAppId="psFacebookAppId" :externalBusinessId="externalBusinessId" @onEditClick="onEditClick" @onPixelActivation="onPixelActivation" />',
 });
 export const Default:any = Template.bind({});
 Default.args = {

_dev/stories/110-configuration-completed-modal.stories.ts

@@ -9,9 +9,7 @@ const Template = (args: any, { argTypes }: any) => ({
   props: Object.keys(argTypes),
   components: { ModalConfigurationCompleted },
   template: `
-    <modal-configuration-completed
-      @onHide="onHide"
-    />
+    <modal-configuration-completed />
   `,
 });
 export const ConfigurationCompleted: any = Template.bind({});

_dev/stories/800-debug.stories.ts

@@ -8,7 +8,7 @@ export default {
 const Template = (args: any, {argTypes}: any) => ({
   props: Object.keys(argTypes),
   components: {DebugPage},
-  template: '<debug-page :locale="locale" />',
+  template: '<debug-page />',
 });
 
 export const Debug: any = Template.bind({});