feat: add UI tests workflow

.github/workflows/cypress-tests.yml

@@ -0,0 +1,29 @@
+name: Run tests
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    types: [opened, reopened, synchronize, ready_for_review]
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+
+    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: Use NPM version 8.5.5
+        run: npm install -g [email protected]
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Cypress Tests are running
+        run : node  ./scripts/index.js && npm run test

cypress.config.js

@@ -6,6 +6,7 @@ module.exports = defineConfig({
       framework: "next",
       bundler: "webpack",
     },
-
+    video : false,
+    screenshotOnRunFailure : false
   },
 });

cypress/test/editor/CodeBlock.cy.js

@@ -1,30 +1,33 @@
-import { mount } from 'cypress/react'
-import CodeBlock from '../../../components/editor/CodeBlock'
+import { mount } from 'cypress/react';
+import CodeBlock from '../../../components/editor/CodeBlock';
 
 describe('CodeBlock component', () => {
   beforeEach(() => {
     mount(
       <CodeBlock>
-        { `const message = 'Hello, World!';\nconsole.log(message);` }
+        {`const message = 'Hello, World!';\nconsole.log(message);`}
       </CodeBlock>
-    )
+    );
   });
 
   it('should render correctly', () => {
-     cy.get('.bg-code-editor-dark').should('exist')
+    cy.get('.bg-code-editor-dark').should('exist');
+  });
 
-  })
   it('should copy code to clipboard when clicking the copy button', () => {
-    const copiedText = "const message = 'Hello, World!';\r\nconsole.log(message);"
-
-    cy.get('[data-test="copy-button"]').click({force:true})
+    const originalText = "const message = 'Hello, World!';\r\nconsole.log(message);";
+    const copiedText = originalText.replace(/\r/g, ''); // Remove \r characters
+
+    cy.get('[data-test="copy-button"]').click({ force: true });
     cy.get('[data-testid="clicked-text"]').should('exist');
 
     cy.window().then((win) => {
       cy.document().then((doc) => {
-        cy.wrap(win.navigator.clipboard.readText()).should('eq', copiedText)
-      })
-    })
-  })
-
-})
+        win.navigator.clipboard.readText().then((clipboardContent) => {
+          const sanitizedClipboardContent = clipboardContent.replace(/\r/g, '');
+          expect(sanitizedClipboardContent).to.equal(copiedText);
+        });
+      });
+    });
+  });
+});

package.json

@@ -14,7 +14,7 @@
     "generate:dashboard": "node scripts/dashboard/build-dashboard.js",
     "generate:videos": "node scripts/build-newsroom-videos.js",
     "generate:tools": "node scripts/build-tools.js",
-    "test": "echo \"No tests configured yet\"",
+    "test": "npx cypress run --component",
     "release": "echo \"No release to npm for this project\"",
     "cypress": "cypress open",
     "cypress-run": "cypress run"