V0.3.8 (#1)

* refactored path for Unsupported

* Added json results for Cypress and mocha html report generation

* Added bitloops option check in patching step

* added cypress helper functions

---------

Co-authored-by: ellik95 <[email protected]>

Author: danias

package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-bitloops",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "Next.js with TypeScript, Tailwind, Storybook and Cypress generator by Bitloops",
   "license": "MIT",
   "author": "Bitloops S.A.",

setup/index.js

@@ -119,6 +119,9 @@ export default class extends Generator {
         this.log('Installing Cypress...');
         this.spawnCommandSync('npm', ['install', '--save-dev', 'cypress']);
         this.log('Cypress installed!');
+        if (this.options.bitloops) {
+          this.spawnCommandSync('npm', ['install', '--save-dev', 'mochawesome', 'mochawesome-merge', 'mochawesome-report-generator']);
+        }
       }
     }
 
@@ -176,16 +179,27 @@ export default class extends Generator {
         this.destinationPath('src/app/globals.css'),
       ); 
 
-      this.log('Adding Bitloops support components...');
-      this.fs.copyTpl(
-        this.templatePath('src.components.bitloops.Unsupported.tsx'),
-        this.destinationPath('src/components/bitloops/Unsupported.tsx'),
-      ); 
-      if (this.options.storybook) {
+      if (this.options.bitloops) {
+        this.log('Adding Bitloops support components...');
+        const path = 'src/components/bitloops/Unsupported.tsx';
         this.fs.copyTpl(
-          this.templatePath('src.components.bitloops.Unsupported.stories.tsx'),
-          this.destinationPath('src/components/bitloops/Unsupported.stories.tsx'),
+          this.templatePath(path),
+          this.destinationPath(path),
         ); 
+        if (this.options.storybook) {
+          const path = 'src/components/bitloops/Unsupported.stories.tsx';
+          this.fs.copyTpl(
+            this.templatePath(path),
+            this.destinationPath(path),
+          ); 
+        }
+        if (this.options.cypress) {
+          const path = 'cypress/helpers/index.ts';
+          this.fs.copyTpl(
+            this.templatePath(path),
+            this.destinationPath(path),
+          );
+        }
       }
     }
 

setup/templates/cypress.config.ts

@@ -1,8 +1,32 @@
 import { defineConfig } from 'cypress';
+import * as fs from 'fs';
+import * as path from 'path';
 
 export default defineConfig({
   e2e: {
     specPattern: "**/*.cy.{ts,tsx}",
     supportFile: false,
+    testIsolation: false,
+    setupNodeEvents(on) {
+      on('task', {
+        saveTestResults(results) {
+          const resultsPath = path.join(__dirname, '.', 'cypress', 'results', 'results.json');
+          if (!fs.existsSync(resultsPath)) {
+            fs.writeFileSync(resultsPath, '[]'); // Create file if it doesn't exist
+          }
+          const existingResults = JSON.parse(fs.readFileSync(resultsPath, 'utf8'));
+          existingResults.push(JSON.parse(results));
+          fs.writeFileSync(resultsPath, JSON.stringify(existingResults, null, 2));
+          return null; // Indicate the task was successful
+        }
+      });
+    },
   },
+  reporter: "mochawesome",
+    reporterOptions: {
+      reportDir: "cypress/results",
+      overwrite: true,
+      html: true,
+      json: true,
+    },
 });

setup/templates/cypress/helpers/index.ts

@@ -0,0 +1,57 @@
+export const getWindowBounds = (window: Window): DOMRect => {
+  return new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+};
+
+export const isOutOfBounds = (inRect: DOMRect, outRect: DOMRect): boolean => {
+  const isOut =
+    inRect.left < outRect.left ||
+    inRect.right > outRect.right ||
+    inRect.bottom > outRect.bottom ||
+    inRect.top < outRect.top;
+  return isOut;
+};
+
+export const hasHorizontalScroll = (document: Document): boolean => {
+  const scrollingElement = document.scrollingElement;
+  if (!scrollingElement) {
+    return false;
+  }
+  const scrollWidth = scrollingElement.scrollWidth || 0;
+  const clientWidth = scrollingElement.clientWidth || 0;
+
+  return scrollWidth > clientWidth;
+};
+
+export const areVerticalLeftAligned = (rects: DOMRect[]): boolean => {
+  const firstRect = rects[0];
+  for (let i = 1; i < rects.length; i++) {
+    if (rects[i].x !== firstRect.x) {
+      return false;
+    }
+  }
+  return true;
+};
+
+export const areVerticalCenteredAligned = (rects: DOMRect[]): boolean => {
+  const firstRect = rects[0];
+  const xCenterOfFirstRect = firstRect.x + firstRect.width / 2;
+  for (let i = 1; i < rects.length; i++) {
+    const xCenterOfRect = rects[i].x + rects[i].width / 2;
+    if (xCenterOfRect !== xCenterOfFirstRect) {
+      return false;
+    }
+  }
+  return true;
+};
+
+export const areVerticalRightAligned = (rects: DOMRect[]): boolean => {
+  const firstRect = rects[0];
+  const xRightOfFirstRect = firstRect.x + firstRect.width;
+  for (let i = 1; i < rects.length; i++) {
+    const xRightOfRect = rects[i].x + rects[i].width;
+    if (xRightOfRect !== xRightOfFirstRect) {
+      return false;
+    }
+  }
+  return true;
+};