Add Example for cypress test in tutorial

examples/19_cypress_evaluation/config/config.json

@@ -0,0 +1,55 @@
+{
+    "autograding_method" : "docker",
+    "container_options" : {
+        //States that a given testcase uses a router by default. (Default value is true)
+        "use_router" : false
+    },
+    "testcases" : [
+      {
+        // Student-visible testcase name.
+        "title" : "Cypress Frontend Evaluation", 
+
+        // Commands to run (in order). These are not shell commands, although 
+        // they support some common shell wildcards. This can either be a 
+        // list or a single string.
+        "containers" : [
+          {
+            "container_name": "cypress-evaluator",
+            "commands" : [ "run-p start test" ],
+            // Should contain docker build from dockerfile mentioned in question input directory
+            "container_image" : "submitty/cypress-evaluation:latest"
+          }
+        ],
+
+        "dispatcher_actions" : [
+                                {
+                                  "action" : "delay",
+                                  "seconds" : 2
+                                },
+                                {
+                                  "containers" : ["cypress-evaluator"],
+                                  "action" : "stdin",
+                                  "string" : "Check output"
+                                }
+                              ],
+
+        // Point value of this testcase.
+        "points" : 10, 
+
+        "validation" : [
+            {
+                // Grade by "diffing" the student output with an
+                // instructor-provided file.
+                "method" : "diff",
+                // The student's container0 output. 
+                "actual_file" : "cypress-evaluator/results.txt",
+                // The title seen by students.
+                "description" : "Cypress Evaluator Output",
+                // The instructor-provided file (the correct answer).
+                "expected_file" : "expected_output.txt"
+            }
+        ]
+      }
+    ]
+  }
+

examples/19_cypress_evaluation/config/question_input/Dockerfile

@@ -0,0 +1,9 @@
+FROM cypress/included:13.6.6
+
+WORKDIR /app
+
+COPY . .
+
+RUN npm install
+
+CMD [ "npm", "run-p", "start", "test" ]

examples/19_cypress_evaluation/config/question_input/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) {},
+  },
+});

examples/19_cypress_evaluation/config/question_input/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');
+    });
+  });
+

examples/19_cypress_evaluation/config/question_input/cypress/fixtures/example.json

@@ -0,0 +1,6 @@
+{
+    "name": "Using fixtures to represent data",
+    "email": "[email protected]",
+    "body": "Fixtures are a great way to mock data for responses to routes"
+}
+

examples/19_cypress_evaluation/config/question_input/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) => { ... })

examples/19_cypress_evaluation/config/question_input/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')

examples/19_cypress_evaluation/config/question_input/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"
+    }
+  }
+

examples/19_cypress_evaluation/config/question_input/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);

examples/19_cypress_evaluation/config/test_output/expected_output.txt

@@ -0,0 +1 @@
+{"total_tests":1,"test_passed":1}

examples/19_cypress_evaluation/submissions/correct/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>