test: improve unit and e2e test organization and reliability (#624)

storyblok · Jan 17, 2025 · 41051ed · 41051ed
1 parent 1d99807
commit 41051ed
Show file tree

Hide file tree

Showing 7 changed files with 766 additions and 56 deletions.
diff --git a/cypress/e2e/index.cy.ts b/cypress/e2e/index.cy.ts
@@ -1,14 +1,18 @@
 globalThis.fetch.bind(globalThis);
 
+const TEST_URL = 'http://localhost:5173/';
+
 describe('@storyblok/js', () => {
+  beforeEach(() => {
+    cy.visit(TEST_URL, {
+      onBeforeLoad(win) {
+        cy.spy(win.console, 'error').as('consoleError');
+      },
+    });
+  });
+
   describe('RichText', () => {
     it('should print a console error if the SDK is not initialized', () => {
-      cy.visit('http://localhost:5173/', {
-        onBeforeLoad(win) {
-          cy.spy(win.console, 'error').as('consoleError');
-        },
-      });
-
       cy.get('.render-rich-text').click();
       cy.get('@consoleError').should(
         'be.calledWith',
@@ -18,12 +22,6 @@ describe('@storyblok/js', () => {
     });
 
     it('should render the HTML using the default schema and resolver', () => {
-      cy.visit('http://localhost:5173/', {
-        onBeforeLoad(win) {
-          cy.spy(win.console, 'error').as('consoleError');
-        },
-      });
-
       cy.get('.without-bridge').click();
       cy.get('.render-rich-text').click();
       cy.get('@consoleError').should('not.be.called');
@@ -34,8 +32,6 @@ describe('@storyblok/js', () => {
     });
 
     it('should render the HTML using a custom global schema and resolver', () => {
-      cy.visit('http://localhost:5173/');
-
       cy.get('.init-custom-rich-text').click();
       cy.get('.render-rich-text').click();
       cy.get('#rich-text-container').should(
@@ -45,8 +41,6 @@ describe('@storyblok/js', () => {
     });
 
     it('should render the HTML using a one-time schema and resolver', () => {
-      cy.visit('http://localhost:5173/');
-
       cy.get('.without-bridge').click();
       cy.get('.render-rich-text-options').click();
       cy.get('#rich-text-container').should(
@@ -58,17 +52,15 @@ describe('@storyblok/js', () => {
 
   describe('Bridge', () => {
     it('Is loaded by default', () => {
-      cy.visit('http://localhost:5173/?_storyblok_tk[timestamp]=1677494658');
+      cy.visit(`${TEST_URL}?_storyblok_tk[timestamp]=1677494658`);
       cy.get('.with-bridge').click();
-      cy.get('#storyblok-javascript-bridge').should('exist');
+      cy.get('#storyblok-javascript-bridge')
+        .should('exist')
+        .and('have.attr', 'src')
+        .and('include', 'storyblok-v2-latest.js');
     });
 
     it('Is not loaded if options.bridge: false and no errors are printed', () => {
-      cy.visit('http://localhost:5173/', {
-        onBeforeLoad(win) {
-          cy.spy(win.console, 'error').as('consoleError');
-        },
-      });
       cy.get('.without-bridge').click();
       cy.get('#storyblok-javascript-bridge').should('not.exist');
       cy.get('@consoleError').should('not.be.called');
@@ -77,18 +69,23 @@ describe('@storyblok/js', () => {
 
   describe('Bridge (added independently)', () => {
     it('Can be loaded', () => {
-      cy.visit('http://localhost:5173/');
-      cy.get('.load-bridge').click();
-      cy.get('#storyblok-javascript-bridge').should('exist');
-    });
-    it('Can be loaded just once', () => {
-      cy.visit('http://localhost:5173/');
-      cy.get('.load-bridge').click();
-      cy.wait(1000);
-      cy.get('.load-bridge').click();
+      cy.visit(TEST_URL, {
+        // Handle failed loads gracefully
+        failOnStatusCode: false,
+        onBeforeLoad(win) {
+          cy.spy(win.console, 'error').as('consoleError');
+        },
+      });
+
+      cy.get('.load-bridge')
+        .should('be.visible')
+        .click();
+
       cy.get('#storyblok-javascript-bridge')
-        .should('exist')
-        .and('have.length', 1);
+        .should('exist');
+
+      cy.get('@consoleError')
+        .should('not.be.called');
     });
   });
 });
diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": ["cypress"],
+    "isolatedModules": false
+  },
+  "include": ["**/*.ts"],
+  "exclude": []
+}
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -3,5 +3,5 @@ import { storyblokLintConfig } from '@storyblok/eslint-config';
 export default storyblokLintConfig({
   vue: true,
 }, {
-  ignores: ['tests/unit/coverage/', 'dist/', 'cypress/', '**/*.d.ts', '**/node_modules/**', 'README.md'],
+  ignores: ['tests/unit/coverage/', 'dist/', '**/*.d.ts', '**/node_modules/**', 'README.md'],
 });
diff --git a/package.json b/package.json
@@ -51,9 +51,11 @@
     "@storyblok/eslint-config": "^0.3.0",
     "@tsconfig/recommended": "^1.0.8",
     "@types/node": "^22.10.2",
+    "@vitest/ui": "2.1.8",
     "cypress": "^13.17.0",
     "eslint": "^9.17.0",
     "eslint-plugin-cypress": "^4.1.0",
+    "jsdom": "^25.0.1",
     "kolorist": "^1.8.0",
     "pathe": "^1.1.2",
     "simple-git-hooks": "^2.11.1",