From 7451d2ed60fb169743324ab050a3d282231b374e Mon Sep 17 00:00:00 2001 From: Hammad1007 Date: Thu, 25 Jan 2024 12:22:10 +0500 Subject: [PATCH] Install cypress and write tests for the app --- toast-notification/cypress.config.js | 9 +++ .../cypress/e2e/test1.spec.cy.js | 64 +++++++++++++++++++ .../cypress/fixtures/example.json | 5 ++ .../cypress/support/commands.js | 27 ++++++++ toast-notification/cypress/support/e2e.js | 20 ++++++ toast-notification/script.js | 2 +- 6 files changed, 126 insertions(+), 1 deletion(-) create mode 100644 toast-notification/cypress.config.js create mode 100644 toast-notification/cypress/e2e/test1.spec.cy.js create mode 100644 toast-notification/cypress/fixtures/example.json create mode 100644 toast-notification/cypress/support/commands.js create mode 100644 toast-notification/cypress/support/e2e.js diff --git a/toast-notification/cypress.config.js b/toast-notification/cypress.config.js new file mode 100644 index 0000000..97f47c4 --- /dev/null +++ b/toast-notification/cypress.config.js @@ -0,0 +1,9 @@ +const { defineConfig } = require("cypress"); + +module.exports = defineConfig({ + e2e: { + setupNodeEvents(on, config) { + // implement node event listeners here + }, + }, +}); diff --git a/toast-notification/cypress/e2e/test1.spec.cy.js b/toast-notification/cypress/e2e/test1.spec.cy.js new file mode 100644 index 0000000..5ab6f92 --- /dev/null +++ b/toast-notification/cypress/e2e/test1.spec.cy.js @@ -0,0 +1,64 @@ +describe('Project Toast Notification', () => { + beforeEach(() => { + cy.visit('http://127.0.0.1:5500/toast-notification/index.html') + }) + + it('Opens the homepage', () => { + + }) + + it('The screen is visble', () => { + cy.get('body').should('be.visible') + }) + + context('Body', () => { + context('Background', () => { + it('The background is visible', () => { + cy.get('body').should('be.visible') + }) + + it('The background color is correct', () => { + cy.get('body').should('be.visible').should('have.css', 'background-color', 'rgb(102, 51, 153)') + }) + }) + + context('Content', () => { + context('Button', () => { + it('The button is visible', () => { + cy.xpath('//button[@class="btn"]').should('be.visible') + }) + + it('The button has correct background color', () => { + cy.xpath('//button[@class="btn"]').should('be.visible') + .should('have.css', 'background-color', 'rgb(255, 255, 255)') + }) + + it('The text in the button is visible', () => { + cy.xpath('//button[@class="btn"]').should('be.visible') + .invoke('text').should('exist') + }) + + it('The text is correct', () => { + cy.xpath('//button[@class="btn"]').should('be.visible') + .invoke('text').should('include', 'Show Notification') + }) + + it('The text has correct color', () => { + cy.xpath('//button[@class="btn"]').should('be.visible') + .should('have.css', 'color', 'rgb(102, 51, 153)') + }) + + it('The button is clickable', () => { + cy.xpath('//button[@class="btn"]').should('be.visible').click() + }) + + it('When I click on the button, it generates notification messages on the bottom', () => { + cy.xpath('//button[@class="btn"]').should('be.visible').click() + cy.get('.toast').should('have.length.gt', 0); + cy.wait(10000); + cy.get('.toast').should('have.length', 0); + }) + }) + }) + }) +}) \ No newline at end of file diff --git a/toast-notification/cypress/fixtures/example.json b/toast-notification/cypress/fixtures/example.json new file mode 100644 index 0000000..02e4254 --- /dev/null +++ b/toast-notification/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/toast-notification/cypress/support/commands.js b/toast-notification/cypress/support/commands.js new file mode 100644 index 0000000..cc02d1e --- /dev/null +++ b/toast-notification/cypress/support/commands.js @@ -0,0 +1,27 @@ +// *********************************************** +// 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) => { ... }) + +import 'cypress-xpath'; \ No newline at end of file diff --git a/toast-notification/cypress/support/e2e.js b/toast-notification/cypress/support/e2e.js new file mode 100644 index 0000000..0e7290a --- /dev/null +++ b/toast-notification/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') \ No newline at end of file diff --git a/toast-notification/script.js b/toast-notification/script.js index ece1e00..f960f90 100644 --- a/toast-notification/script.js +++ b/toast-notification/script.js @@ -23,7 +23,7 @@ function createNotification(message = null, type = null) { setTimeout(() => { notif.remove() - }, 3000) + }, 10000) } function getRandomMessage() {