add example for cypress test in tutorial

Submitty · MUFFANUJ · Apr 2, 2024 · Apr 2, 2024 · Apr 2, 2024 · Apr 2, 2024
commit 84183e205dbc9bcbb8600b4330a202e0a1dfb91b
diff --git a/examples/19_cypress_test/.gitignore b/examples/19_cypress_test/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+package-lock.json
+mochawesome-report/
diff --git a/examples/19_cypress_test/Dockerfile b/examples/19_cypress_test/Dockerfile
@@ -0,0 +1,5 @@
+FROM cypress/included:13.6.6
+
+RUN npm install
+
+CMD [ "npm", "run-p", "start", "test" ]
diff --git a/examples/19_cypress_test/cypress.config.js b/examples/19_cypress_test/cypress.config.js
@@ -0,0 +1,15 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  reporter: 'mochawesome',
+  html: false,
+  json: true,
+  chromeWebSecurity: false,
+  screenshotOnRunFailure: false,
+  video: false,
+  e2e: {
+    // We've imported your old npm i -g npm-run-all plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {},
+  },
+});
diff --git a/examples/19_cypress_test/cypress/e2e/html_testing.cy.js b/examples/19_cypress_test/cypress/e2e/html_testing.cy.js
@@ -0,0 +1,13 @@
+describe('template spec', () => {
+    it('passes', () => {
+      cy.visit('http://localhost:8080');
+      cy.get('.btn').should('contain', '0');
+      cy.get('.btn').click();
+      cy.get('.btn').should('contain', '1');
+      cy.get('.btn').click();
+      cy.get('.btn').should('contain', '2');
+      cy.get('.btn').click();
+      cy.get('.btn').should('contain', '3');
+    });
+  });
+
diff --git a/examples/19_cypress_test/cypress/fixtures/example.json b/examples/19_cypress_test/cypress/fixtures/example.json
@@ -0,0 +1,6 @@
+{
+    "name": "Using fixtures to represent data",
+    "email": "hello@cypress.io",
+    "body": "Fixtures are a great way to mock data for responses to routes"
+}
+
diff --git a/examples/19_cypress_test/cypress/support/commands.js b/examples/19_cypress_test/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
diff --git a/examples/19_cypress_test/cypress/support/e2e.js b/examples/19_cypress_test/cypress/support/e2e.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
diff --git a/examples/19_cypress_test/index.html b/examples/19_cypress_test/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cypress Testing</title>
+    <style>
+        body{
+            text-align: center;
+            margin: 100px auto;
+        }
+        .btn{
+            width: 20vw;
+            height: 20vh;
+            background-color: fuchsia;
+            border: none;
+            border-radius: 60px;
+            font-size: 60px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <button data-test="btn-test" class="btn">0</button>
+
+</body>
+<script>
+    let count = 0;
+    const btn = document.querySelector(".btn");
+    btn.addEventListener("click", ()=>{
+        count++;
+        btn.textContent = count;
+    })
+</script>
+</html>
diff --git a/examples/19_cypress_test/package.json b/examples/19_cypress_test/package.json
@@ -0,0 +1,21 @@
+{
+    "name": "testing",
+    "version": "1.0.0",
+    "description": "",
+    "main": "cypress.config.js",
+    "scripts": {
+      "start": "http-server",
+      "test": "cypress run  --headless --reporter mochawesome && node parser.js"
+    },
+    "author": "",
+    "license": "ISC",
+    "dependencies": {
+      "cypress": "^13.7.1",
+      "http-server": "^14.1.1",
+      "mochawesome": "^7.1.3",
+      "run-p": "^0.0.0",
+      "start": "^5.1.0",
+      "test": "^3.3.0"
+    }
+  }
+
diff --git a/examples/19_cypress_test/parser.js b/examples/19_cypress_test/parser.js
@@ -0,0 +1,39 @@
+const { time } = require('console');
+const { exit } = require('process');
+
+try {
+  const fs = require('fs');
+  const resultFile = 'result.txt';
+  const jsonData = fs.readFileSync(
+    './mochawesome-report/mochawesome.json',
+    'utf8',
+    (err, data) => {
+      if (err) {
+        console.error(err);
+        return;
+      }
+      console.log(data);
+    },
+  );
+  mochaObj = JSON.parse(jsonData);
+  mochaStats = mochaObj['stats'];
+
+  fs.writeFile(
+    resultFile,
+    JSON.stringify({
+      total_tests: mochaStats['tests'],
+      test_passed: mochaStats['passes'],
+    }),
+    (err) => {
+      if (err) {
+        console.log(err);
+      }
+    },
+  );
+} catch (err) {
+  console.log('Error in parsing JSON file: ', err);
+}
+
+setTimeout(() => {
+  exit(1);
+}, 1000);
diff --git a/examples/19_cypress_test/result.txt b/examples/19_cypress_test/result.txt
@@ -0,0 +1 @@
+{"total_tests":1,"test_passed":1}