From aad4162be83486553b08dacf556814f4108a2a81 Mon Sep 17 00:00:00 2001 From: Raphael Kabo Date: Fri, 6 Oct 2023 14:16:39 +0100 Subject: Set up Cypress --- cypress/e2e/event.cy.ts | 98 +++++++++++++++++++++++++++++++++++++++ cypress/fixtures/example.json | 5 ++ cypress/fixtures/test-header.png | Bin 0 -> 2896 bytes cypress/support/commands.ts | 37 +++++++++++++++ cypress/support/e2e.ts | 20 ++++++++ cypress/tsconfig.json | 8 ++++ 6 files changed, 168 insertions(+) create mode 100644 cypress/e2e/event.cy.ts create mode 100644 cypress/fixtures/example.json create mode 100644 cypress/fixtures/test-header.png create mode 100644 cypress/support/commands.ts create mode 100644 cypress/support/e2e.ts create mode 100644 cypress/tsconfig.json (limited to 'cypress') diff --git a/cypress/e2e/event.cy.ts b/cypress/e2e/event.cy.ts new file mode 100644 index 0000000..ef8b249 --- /dev/null +++ b/cypress/e2e/event.cy.ts @@ -0,0 +1,98 @@ +const eventData = { + eventName: "Your Event Name", + eventLocation: "Event Location", + timezone: "Europe/London", + eventDescription: "Event Description", + eventURL: "https://example.com", + imagePath: "path/to/your/image.jpg", // If you have an image to upload + hostName: "Your Name", + creatorEmail: "test@example.com", + eventGroupCheckbox: false, + eventGroupID: "YourEventGroupID", + eventGroupEditToken: "YourEventGroupEditToken", + interactionCheckbox: true, + joinCheckbox: true, + maxAttendeesCheckbox: true, + maxAttendees: 10, + eventStart: "", + eventEnd: "", +}; + +describe("Events", () => { + beforeEach(() => { + cy.clearLocalStorage(); + + cy.visit("/new/event/public"); + cy.get("#showNewEventFormButton").click(); + + cy.get("#eventName").type(eventData.eventName); + cy.get("#eventLocation").type(eventData.eventLocation); + cy.get("#eventStart").click(); + // This opens a datepicker, so find the first non-disabled day and click it + cy.get(".datepicker--cell-day:not(.-disabled-)").first().click(); + cy.get("#eventStart").invoke("val").as("eventStart"); + // Click away from the datepicker to close it + cy.get("#eventName").click(); + cy.get("#eventEnd").click(); + // This opens a datepicker, so find the last non-disabled day and click it + cy.get(".datepicker--cell-day:not(.-disabled-)").last().click(); + cy.get("#eventEnd").invoke("val").as("eventEnd"); + // Click away from the datepicker to close it + cy.get("#eventName").click(); + // #timezone is a Select2 dropdown, so select the option you want + cy.get("#timezone").select(eventData.timezone, { force: true }); + + cy.get("#eventDescription").type(eventData.eventDescription); + cy.get("#eventURL").type(eventData.eventURL); + // Upload an image + // if (eventData.imagePath) { + // cy.get("#eventImageUpload").attachFile(eventData.imagePath); + // } + + cy.get("#hostName").type(eventData.hostName); + cy.get("#creatorEmail").type(eventData.creatorEmail); + + // Check checkboxes based on eventData + if (eventData.eventGroupCheckbox) { + cy.get("#eventGroupCheckbox").check(); + cy.get("#eventGroupID").type(eventData.eventGroupID); + cy.get("#eventGroupEditToken").type(eventData.eventGroupEditToken); + } + + if (eventData.interactionCheckbox) { + cy.get("#interactionCheckbox").check(); + } + + if (eventData.joinCheckbox) { + cy.get("#joinCheckbox").check(); + } + + if (eventData.maxAttendeesCheckbox) { + cy.get("#maxAttendeesCheckbox").check(); + cy.get("#maxAttendees").type(eventData.maxAttendees.toString()); + } + + // Submit the form + cy.get("#newEventFormSubmit").click(); + }); + it("creates a new event", function () { + // Check that all the data is correct + cy.get(".p-name").should("have.text", eventData.eventName); + cy.get(".p-location").should("have.text", eventData.eventLocation); + cy.get(".p-summary").should("contain.text", eventData.eventDescription); + cy.get("#hosted-by").should( + "contain.text", + `Hosted by ${eventData.hostName}` + ); + cy.get("#attendees-alert").should("contain.text", "10 spots remaining"); + let [startDate, startTime] = this.eventStart.split(", "); + let [endDate, endTime] = this.eventEnd.split(", "); + // Remove leading zeroes from the times + startTime = startTime.replace(/^0+/, ""); + endTime = endTime.replace(/^0+/, ""); + cy.get(".dt-duration").should("contain.text", startDate); + cy.get(".dt-duration").should("contain.text", endDate); + cy.get(".dt-duration").should("contain.text", startTime); + cy.get(".dt-duration").should("contain.text", endTime); + }); +}); diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json new file mode 100644 index 0000000..02e4254 --- /dev/null +++ b/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" +} diff --git a/cypress/fixtures/test-header.png b/cypress/fixtures/test-header.png new file mode 100644 index 0000000..d8a98cb Binary files /dev/null and b/cypress/fixtures/test-header.png differ diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts new file mode 100644 index 0000000..698b01a --- /dev/null +++ b/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// This example commands.ts 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) => { ... }) +// +// declare global { +// namespace Cypress { +// interface Chainable { +// login(email: string, password: string): Chainable +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } \ No newline at end of file diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts new file mode 100644 index 0000000..f80f74f --- /dev/null +++ b/cypress/support/e2e.ts @@ -0,0 +1,20 @@ +// *********************************************************** +// This example support/e2e.ts 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') \ No newline at end of file diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json new file mode 100644 index 0000000..83fb87e --- /dev/null +++ b/cypress/tsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress", "node"] + }, + "include": ["**/*.ts"] +} \ No newline at end of file -- cgit v1.2.3