test: parallelizing cypress tests to speed up pipeline (#1)

Parallelizing cypress tests to speed up pipeline

.github/workflows/cypress-tests.yml

@@ -9,19 +9,25 @@ on:
 jobs:
   cypress-run:
     runs-on: ubuntu-latest
-
+    strategy:
+      fail-fast: false
+      matrix:
+        containers: [0, 1, 2, 3, 4, 5, 6, 7]
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
-     
+
       - name: Use Node.js 16.x
         uses: actions/setup-node@v3
         with:
           node-version: 16.x
 
-
       - name: Install dependencies
         run: npm install
 
       - name: Cypress Tests are running
-        run : node  ./scripts/index.js && npm run test
+        uses: nick-fields/retry@v2
+        with:
+          timeout_minutes: 10
+          max_attempts: 3
+          command: node ./scripts/index.js && npx cypress run --component --spec $(node cypress-parallel.js ${{ matrix.containers }} 8)

cypress-parallel.js

@@ -0,0 +1,31 @@
+const fs = require('fs');
+const path = require('path');
+
+const NODE_INDEX = Number(process.argv[2] || 1);
+const NODE_TOTAL = Number(process.argv[3] || 1);
+
+const TEST_FOLDER = './cypress/test';
+
+console.log(getSpecFiles().join(','))
+
+function getSpecFiles() {
+  const allSpecFiles = traverse(TEST_FOLDER);
+  const node_index= NODE_INDEX +1;
+  return allSpecFiles.sort()
+    .filter((_, index) => (index % NODE_TOTAL) === (node_index - 1));
+
+}
+
+function traverse(dir) {
+  let files = fs.readdirSync(dir);
+  files = files.map(file => {
+    const filePath = path.join(dir, file);
+    const stats = fs.statSync(filePath);
+    if (stats.isDirectory()) return traverse(filePath);
+    else if (stats.isFile())return filePath;
+  });
+
+  return files
+    .reduce((all, folderContents) => all.concat(folderContents), []);
+
+}

cypress/support/commands.js

@@ -22,4 +22,4 @@
 //
 //
 // -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/component.js

@@ -25,4 +25,4 @@ import '../../styles/globals.css'
 Cypress.Commands.add('mount', mount)
 
 // Example use:
-// cy.mount(<MyComponent />)
+// cy.mount(<MyComponent />)

package.json

@@ -95,7 +95,9 @@
     "swiper": "^8.3.2",
     "tailwind-merge": "^1.3.0",
     "tailwindcss": "^3.1.4",
-    "yaml": "^2.2.2"
+    "yaml": "^2.2.2",
+    "fs": "^0.0.1-security",
+    "path": "^0.12.7"
   },
   "devDependencies": {
     "@cypress/react": "^7.0.3",