GitHub actions

.github/workflows/test.yml

@@ -0,0 +1,16 @@
+name: Cypress Tests
+
+on: push
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Install Cypress 📥
+        run: npm i cypress@12.14.0
+      - name: yarn run clientTest
+        uses: cypress-io/github-action@v4
+        with:
+          browser: chrome

cypress.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

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) => { ... })

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')

site-admin/.gitignore

@@ -1 +1,2 @@
 node_modules
+site-admin/cyress/videos

site-admin/cypress.config.js

@@ -0,0 +1,12 @@
+const cucumber = require('cypress-cucumber-preprocessor').default
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+      on('file:preprocessor', cucumber())
+    },
+    specPattern: "**/*.feature",
+  },
+});

site-admin/cypress.env.json

@@ -0,0 +1,4 @@
+{
+    "applicationURL": "http://localhost:3000",
+    "clientURL": "https://ktm.js.org/"
+}

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/Episode.feature

@@ -0,0 +1,6 @@
+Feature: Meetups page
+  Scenario: visiting the meetups page
+    When I visit "meetups" page
+    Then I should see "Episodes" in navigation bar
+    Then I click the "Add new episode"
+    Then I fill form with episode details

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

@@ -0,0 +1,29 @@
+import { When, Then } from "cypress-cucumber-preprocessor/steps";
+
+Then(`I click the {string}`, (label) => {
+  cy.contains(label).should('exist').click()
+});
+
+Then(`I fill form with episode details`, () => {
+  cy.fixture('data.json').then((data) => {
+    const { venue : {date, startsAt, endsAt}, company : {name, address}, session: {title, description, time}, person  } = data;
+    cy.get('input[name="date"]').type(date);
+    cy.get('input[name="startsAt"]').type(startsAt);
+    cy.get('input[name="endsAt"]').type(endsAt);
+    cy.get('#pac-s').type(name,{ force: true} );
+    cy.get('input[name="venue[addr_line1]"]').type(address);
+    cy.get('input[name="session[0][title]"]').type(title);
+    cy.get('input[name="session[0][time]"]').type(time);
+    cy.get('textarea').type(description, { force: true});
+    cy.get('#token-input-speakers').type(person.name, { force: true});
+    cy.wait(1000);
+    cy.get('.token-input-dropdown-item2').click();
+    cy.get('#token-input-sponsors').type(name, { force: true});
+    cy.wait(1000);
+    cy.get('.token-input-dropdown-item2').click();
+    cy.get('#token-input-supporters').type(name, { force: true});
+    cy.wait(1000);
+    cy.get('.token-input-dropdown-item2').click();
+    cy.get('button[type="submit"]').click();
+  });
+});

site-admin/cypress/e2e/Organizations.feature

@@ -0,0 +1,10 @@
+Feature: Organizations page
+  Scenario: visiting the Organizations page
+    When I visit "companies" page
+    Then I should see "Organizations" in navigation bar
+    Then I click the "Add new company"
+    Then I fill form with company info
+    Then I fill form with company photo
+    Then I click the "Save"
+    Then I see the company info
+

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

@@ -0,0 +1,42 @@
+import { When, Then } from "cypress-cucumber-preprocessor/steps";
+
+Then(`I fill form with company info`, () => {
+  cy.fixture('data.json').then((data) => {
+    const { company : {name, address, phone_number, email, website, facebook, twitter, about, github } } = data;
+    cy.get('input[name="name"]').type(name);
+    cy.get('input[name="address_1"]').type(address);
+    cy.get('input[name="phone_number"]').type(phone_number);
+    cy.get('input[name="email"]').type(email);
+    cy.get('textarea').type(about, { force: true});
+    cy.get('input[name="website"]').type(website);
+    cy.get('input[name="twitter"]').type(twitter);
+    cy.get('input[name="github"]').type(github);
+    cy.get('input[name="facebook"]').type(facebook);
+  });
+});
+
+Then(`I fill form with company photo`, () => {
+  // Load JPEG image file as binary data
+  cy.fixture('company.jpeg', 'binary').then((fileContent) => {
+    // Create a Blob object from the binary data
+    const blob = Cypress.Blob.binaryStringToBlob(fileContent);
+    // Create a File object from the Blob
+    const testFile = new File([blob], 'company.jpeg', { type: 'image/jpeg' });
+
+    // Upload the file by setting the value of the file input field
+    cy.get('input[type="file"]').then((input) => {
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(testFile);
+      input[0].files = dataTransfer.files;
+      cy.wrap(input).trigger('change', { force: true });
+    });
+  });
+})
+
+Then(`I see the company info`, () => {
+  cy.fixture('data.json').then((data) => {
+    const { company : {name, website } } = data;
+    cy.contains(name).should('exist')
+    cy.contains(website).should('exist')
+  })
+})

site-admin/cypress/e2e/People.feature

@@ -0,0 +1,9 @@
+Feature: People page
+  Scenario: visiting the people page
+    When I visit "people" page
+    Then I should see "People" in navigation bar
+    Then I click the "Add new member"
+    Then I fill form with user info
+    Then I fill form with user photo
+    Then I click the "Save"
+    Then I see the user info

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

@@ -0,0 +1,42 @@
+import { When, Then } from "cypress-cucumber-preprocessor/steps";
+
+Then(`I fill form with user info`, () => {
+  cy.fixture('data.json').then((data) => {
+    const { person: {name, designation, organization, bio, facebook, twitter, github } } = data;
+
+    cy.get('input[name="name"]').type(name);
+    cy.get('input[name="designation"]').type(designation);
+    cy.get('input[name="organization"]').type(organization);
+    cy.get('textarea').type(bio, { force: true});
+    cy.get('input[name="twitter"]').type(twitter);
+    cy.get('input[name="github"]').type(github);
+    cy.get('input[name="facebook"]').type(facebook);
+  });
+});
+
+Then(`I fill form with user photo`, () => {
+  // Load JPEG image file as binary data
+  cy.fixture('user.jpeg', 'binary').then((fileContent) => {
+    // Create a Blob object from the binary data
+    const blob = Cypress.Blob.binaryStringToBlob(fileContent);
+
+    // Create a File object from the Blob
+    const testFile = new File([blob], 'user.jpeg', { type: 'image/jpeg' });
+
+    // Upload the file by setting the value of the file input field
+    cy.get('input[type="file"]').then((input) => {
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(testFile);
+      input[0].files = dataTransfer.files;
+      cy.wrap(input).trigger('change', { force: true });
+    });
+  });
+})
+
+Then(`I see the user info`, () => {
+  cy.fixture('data.json').then((data) => {
+    const { person : {name, designation, organization, bio, facebook, twitter, github } } = data;
+    cy.contains(name).should('exist')
+    cy.contains(`${designation} at ${organization}`).should('exist')
+  })
+})

site-admin/cypress/fixtures/data.json

@@ -0,0 +1,34 @@
+{
+  "person": {
+    "name": "Emily Brown",
+    "designation": "Data Scientist",
+    "organization": "Acme Co.",
+    "bio": "Creative thinker with a keen eye for detail. Enjoys collaborating with cross-functional teams to build exceptional products.",
+    "twitter": "https://twitter.com/example",
+    "facebook": "https://facebook.com/example",
+    "github": "https://github.com/example",
+    "imageURL": "fixtures/user.jpeg"
+  },
+  "company": {
+    "name": "ABC Inc.",
+    "address": "789 Oak St, City, State, Country",
+    "phone_number": "+71 223-4673",
+    "email": "info@abc.inc",
+    "about": "With years of experience, we provide high-quality services...",
+    "website": "https://www.abc.inc",
+    "logoURL": "fixtures/company.jpeg",
+    "twitter": "https://twitter.com/example",
+    "facebook": "https://facebook.com/example",
+    "github": "https://github.com/example"
+  },
+  "venue": {
+    "date": "2023-07-24",
+    "startsAt": "11:00",
+    "endsAt": "01:00"
+  },
+  "session": {
+    "title": "Awesome Title",
+    "time": "11:00",
+    "description": "This is an awesome session"
+  }
+}

site-admin/cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}