feat: 🎸 client e2e test

.github/workflows/client-test.yml

@@ -0,0 +1,12 @@
+name: Cypress Tests
+
+on: push
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Run client test
+        run: cd site-admin && yarn && npx cypress run --spec cypress/e2e/Client.feature

site-admin/cypress.config.js

@@ -1,11 +1,33 @@
 const cucumber = require('cypress-cucumber-preprocessor').default
 const { defineConfig } = require("cypress");
 
+//For connecting to SQL Server
+const mysql = require("mysql2")
+function queryTestDb(query, config) {
+// creates a new mysql connection using credentials from cypress.json env's
+const connection = mysql.createConnection(config.env.db)
+// start connection to db
+connection.connect()
+// exec query + disconnect to db as a Promise
+return new Promise((resolve, reject) => {
+  connection.query(query, (error, results) => {
+    if (error) reject(error)
+    else {
+      connection.end()
+      return resolve(results)
+    }
+  })
+  })
+}
+
 module.exports = defineConfig({
+
   e2e: {
     setupNodeEvents(on, config) {
       // implement node event listeners here
       on('file:preprocessor', cucumber())
+      on('task', { queryDb: query => { return queryTestDb(query, config) }, }); //For running sql query
+
     },
     specPattern: "**/*.feature",
   },

site-admin/cypress.env.json

@@ -1,3 +1,11 @@
 {
-    "applicationURL": "http://localhost:3000"
-}
+    "applicationURL": "http://localhost:3000",
+    "clientURL": "https://ktm.js.org/",
+    "apiURL": "https://jsonplaceholder.cypress.io/comments",
+        "db": {
+          "host": "127.0.0.1",
+          "user": "root",
+          "password": "",
+          "database": "test-demo"
+        }
+      }

site-admin/cypress/e2e/Client.feature

@@ -0,0 +1,9 @@
+Feature: Client page
+  Scenario: Visiting the Client page
+
+    Given I am on the "clientURL"
+    Then session number "session #1" should be visible
+    Then meetup date "September 27th" should be present
+    And session title "Streamline UI Components in JS Frameworks" should be present and visible
+    And session time "03:00pm - 04:30pm" should exsist
+    Then session sponser should be present

site-admin/cypress/e2e/Client/Client.js

@@ -0,0 +1,26 @@
+import { When, Then } from "cypress-cucumber-preprocessor/steps";
+
+Given(`I am on the {string}`, (url) => {
+  cy.visit(`${Cypress.env("clientURL")}`);
+  cy.get('.logo').should('exist').should('be.visible')
+});
+
+Then(`session number {string} should be visible`, (Session__Number) => {
+  cy.get('.Session__Number').should('exist').should('be.visible')
+});
+
+Then(`meetup date {string} should be present`, (Meetup__Date) => {
+  cy.get('.Meetup__Date').should('exist').should('be.visible')
+});
+
+Then(`session title {string} should be present and visible`, (Session__Title) => {
+  cy.get('.Session__Title').should('be.visible')
+});
+
+Then(`session time {string} should exsist`, (Meetup__Date) => {
+  cy.get('.Session__Time').should('exist');
+});
+
+Then(`session sponser should be present`, (Meetup__Date) => {
+cy.get('.Panel__SponsorsAndSupporters').children().contains('Sponsors') 
+});

site-admin/cypress/e2e/DBTest.feature

@@ -0,0 +1,6 @@
+Feature: DB test
+
+  I want to get the list of exsisting customers per project
+
+  Scenario: Pinging the DB table
+    Given count list of rows

site-admin/cypress/e2e/DBTest/DBTest.js

@@ -0,0 +1,8 @@
+import { Given } from "cypress-cucumber-preprocessor/steps";
+
+Given('count list of rows', () => {
+  cy.task('queryDb', `SELECT COUNT(*) as "rowCount" FROM Users`).then((result) => {
+
+    expect(result[0].rowCount).to.equal(3)
+  });
+})

site-admin/cypress/e2e/GetAPI.feature

@@ -0,0 +1,6 @@
+Feature: Fetching the list of customers
+
+  I want to get the list of exsisting customers per project
+
+  Scenario: Pinging the customers end point 
+    Given fetching the list of customers

site-admin/cypress/e2e/GetAPI/GetAPI.js

@@ -0,0 +1,11 @@
+import { Given } from "cypress-cucumber-preprocessor/steps";
+
+
+Given('fetching the list of customers', () => {
+  cy.request("GET", Cypress.env("apiURL"), {
+  }).then((response) => {
+     expect(response.status).to.eq(200)
+     expect(response).to.have.property('headers')
+     expect(response).to.have.property('duration')
+  });
+})

site-admin/cypress/plugins/index.js

@@ -16,7 +16,10 @@
  * @type {Cypress.PluginConfig}
  */
 // eslint-disable-next-line no-unused-vars
-module.exports = (on, config) => {
+
+module.exports =  (on, config) => { 
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
+  //on('task', { queryDb: query => { return queryTestDb(query, config) }, }); //For running sql query
+
 }