From 31fde3457f26739ce10dd9b073f18e6338a2b56b Mon Sep 17 00:00:00 2001 From: Hammad1007 Date: Wed, 24 Jan 2024 12:07:33 +0500 Subject: [PATCH] Install cypress and write tests --- feedback-ui-design/cypress.config.js | 9 + .../cypress/e2e/test.spec.cy.js | 255 ++++++++++++++++++ .../cypress/fixtures/example.json | 5 + .../cypress/support/commands.js | 27 ++ feedback-ui-design/cypress/support/e2e.js | 20 ++ 5 files changed, 316 insertions(+) create mode 100644 feedback-ui-design/cypress.config.js create mode 100644 feedback-ui-design/cypress/e2e/test.spec.cy.js create mode 100644 feedback-ui-design/cypress/fixtures/example.json create mode 100644 feedback-ui-design/cypress/support/commands.js create mode 100644 feedback-ui-design/cypress/support/e2e.js diff --git a/feedback-ui-design/cypress.config.js b/feedback-ui-design/cypress.config.js new file mode 100644 index 0000000..97f47c4 --- /dev/null +++ b/feedback-ui-design/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/feedback-ui-design/cypress/e2e/test.spec.cy.js b/feedback-ui-design/cypress/e2e/test.spec.cy.js new file mode 100644 index 0000000..18030c2 --- /dev/null +++ b/feedback-ui-design/cypress/e2e/test.spec.cy.js @@ -0,0 +1,255 @@ +describe('Project Feedback UI Design', () => { + beforeEach(() => { + cy.visit('http://127.0.0.1:5500/feedback-ui-design/index.html') + }) + + it('Opens the home page', () => { + + }) + + it('The screen is visible', () => { + cy.get('body').should('be.visible') + }) + + context('Body', () => { + it('The body is visible', () => { + cy.get('body').should('be.visible') + }) + + it('The background color of the body is visible', () => { + cy.get('body').should('have.css', 'background-color', 'rgb(254, 249, 242)') + }) + + context('Content Container', () => { + it('The container is visible', () => { + cy.get('.panel-container').should('be.visible') + }) + + it('The container has the correct background color', () => { + cy.get('.panel-container').should('be.visible') + .should('have.css', 'background-color', 'rgb(255, 255, 255)') + }) + + context('Title Text', () => { + it('The text is visible', () => { + cy.get('strong').should('be.visible') + }) + + it('The text is correct', () => { + cy.get('strong').should('be.visible').invoke('text').then((text) => { + const expectedText = 'How satisfied are you with our customer support performance?' + expect(text.replace(/\s+/g, ' ').trim()).to.include(expectedText) + }) + }) + + it('The text color is correct', () => { + cy.get('strong').should('be.visible') + .should('have.css', 'color', 'rgb(0, 0, 0)') + }) + }) + + context('Emojis', () => { + it('The emojis section is visible', () => { + cy.xpath('/html/body/div[1]/div').should('be.visible') + }) + + context('Unsatisfied Emoji', () => { + it('The emoji section is visible', () => { + cy.xpath('/html/body/div[1]/div/div[1]').should('be.visible') + }) + + it('The emoji is visible', () => { + cy.xpath('/html/body/div[1]/div/div[1]/img').should('be.visible') + }) + + it('The text is visible', () => { + cy.xpath('/html/body/div[1]/div/div[1]/small').should('be.visible') + }) + + it('The text is correct', () => { + cy.xpath('/html/body/div[1]/div/div[1]/small').should('be.visible') + .should('have.text', 'Unhappy') + }) + + it('The text has correct color', () => { + cy.xpath('/html/body/div[1]/div/div[1]/small').should('be.visible') + .should('have.css', 'color', 'rgb(85, 85, 85)') + }) + + it('The emoji is clickable', () => { + cy.xpath('/html/body/div[1]/div/div[1]').should('be.visible').click() + }) + }) + + context('Neutral Emoji', () => { + it('The emoji section is visible', () => { + cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible') + }) + + it('The emoji is visible', () => { + cy.xpath('/html/body/div[1]/div/div[2]/img').should('be.visible') + }) + + it('The text is visible', () => { + cy.xpath('/html/body/div[1]/div/div[2]/small').should('be.visible') + }) + + it('The text is correct', () => { + cy.xpath('/html/body/div[1]/div/div[2]/small').should('be.visible') + .should('have.text', 'Neutral') + }) + + it('The text has correct color', () => { + cy.xpath('/html/body/div[1]/div/div[2]/small').should('be.visible') + .should('have.css', 'color', 'rgb(85, 85, 85)') + }) + + it('The emoji is clickable', () => { + cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click() + }) + }) + + context('Satisfied Emoji', () => { + it('The emoji section is visible', () => { + cy.xpath('/html/body/div[1]/div/div[3]').should('be.visible') + }) + + it('The emoji is visible', () => { + cy.xpath('/html/body/div[1]/div/div[3]/img').should('be.visible') + }) + + it('The text is visible', () => { + cy.xpath('/html/body/div[1]/div/div[3]/small').should('be.visible') + }) + + it('The text is correct', () => { + cy.xpath('/html/body/div[1]/div/div[3]/small').should('be.visible') + .should('have.text', 'Satisfied') + }) + + it('The text has correct color', () => { + cy.xpath('/html/body/div[1]/div/div[3]/small').should('be.visible') + .should('have.css', 'color', 'rgb(17, 17, 17)') + }) + + it('The emoji is clickable', () => { + cy.xpath('/html/body/div[1]/div/div[3]').should('be.visible').click() + }) + }) + }) + + context('Send Review Button', () => { + it('The button is visible', () => { + cy.xpath('//*[@id="send"]').should('be.visible') + }) + + it('The button background is correct', () => { + cy.xpath('//*[@id="send"]').should('be.visible') + .should('have.css', 'background-color', 'rgb(48, 45, 43)') + }) + + it('The button has text visible', () => { + cy.xpath('//*[@id="send"]').should('be.visible').invoke('text') + .should('include', 'Send Review') + }) + }) + + context('Functionality', () => { + it('The functionality works', () => { + cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click() + cy.xpath('//*[@id="send"]').should('be.visible').click() + cy.xpath('//*[@id="panel"]').should('be.visible') + }) + + context('Panel Section', () => { + it('The panel is visible', () => { + cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click() + cy.xpath('//*[@id="send"]').should('be.visible').click() + cy.xpath('//*[@id="panel"]').should('be.visible') + }) + + context('Heart Icon', () => { + it('The icon is visible', () => { + cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click() + cy.xpath('//*[@id="send"]').should('be.visible').click() + cy.xpath('//*[@id="panel"]').should('be.visible') + cy.xpath('/html/body/div[1]/i').should('be.visible') + }) + }) + + context('Text', () => { + context('Thank You Text', () => { + it('The text is visible', () => { + cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click() + cy.xpath('//*[@id="send"]').should('be.visible').click() + cy.xpath('//*[@id="panel"]').should('be.visible') + cy.xpath('/html/body/div[1]/strong[1]').should('be.visible') + }) + + it('The text has correct text', () => { + cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click() + cy.xpath('//*[@id="send"]').should('be.visible').click() + cy.xpath('//*[@id="panel"]').should('be.visible') + cy.xpath('/html/body/div[1]/strong[1]').should('be.visible') + .should('have.text', 'Thank You!') + }) + + it('The text color is correct', () => { + cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click() + cy.xpath('//*[@id="send"]').should('be.visible').click() + cy.xpath('//*[@id="panel"]').should('be.visible') + cy.xpath('/html/body/div[1]/strong[1]').should('be.visible').should('have.css', 'color', 'rgb(0, 0, 0)') + }) + }) + + context('Feedback Text', () => { + it('The text is visible', () => { + cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click() + cy.xpath('//*[@id="send"]').should('be.visible').click() + cy.xpath('//*[@id="panel"]').should('be.visible') + cy.xpath('/html/body/div[1]/strong[2]').should('be.visible') + }) + + it('The text is correct', () => { + cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click() + cy.xpath('//*[@id="send"]').should('be.visible').click() + cy.xpath('//*[@id="panel"]').should('be.visible') + cy.xpath('/html/body/div[1]/strong[2]').should('be.visible').should('have.text', 'Feedback: Neutral') + }) + + it('The text has correct color', () => { + cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click() + cy.xpath('//*[@id="send"]').should('be.visible').click() + cy.xpath('//*[@id="panel"]').should('be.visible') + cy.xpath('/html/body/div[1]/strong[2]').should('be.visible').should('have.css', 'color', 'rgb(0, 0, 0)') + }) + }) + + context('Use Feedback text', () => { + it('The text is visible', () => { + cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click() + cy.xpath('//*[@id="send"]').should('be.visible').click() + cy.xpath('//*[@id="panel"]').should('be.visible') + cy.xpath('/html/body/div[1]/p').should('be.visible') + }) + + it('The text is correct', () => { + cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click() + cy.xpath('//*[@id="send"]').should('be.visible').click() + cy.xpath('//*[@id="panel"]').should('be.visible') + cy.xpath('/html/body/div[1]/p').should('be.visible').should('have.text', 'We\'ll use your feedback to improve our customer support') + }) + + it('The text has correct color', () => { + cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click() + cy.xpath('//*[@id="send"]').should('be.visible').click() + cy.xpath('//*[@id="panel"]').should('be.visible') + cy.xpath('/html/body/div[1]/p').should('be.visible').should('have.css', 'color', 'rgb(0, 0, 0)') + }) + }) + }) + }) + }) + }) + }) +}) \ No newline at end of file diff --git a/feedback-ui-design/cypress/fixtures/example.json b/feedback-ui-design/cypress/fixtures/example.json new file mode 100644 index 0000000..02e4254 --- /dev/null +++ b/feedback-ui-design/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/feedback-ui-design/cypress/support/commands.js b/feedback-ui-design/cypress/support/commands.js new file mode 100644 index 0000000..cc02d1e --- /dev/null +++ b/feedback-ui-design/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/feedback-ui-design/cypress/support/e2e.js b/feedback-ui-design/cypress/support/e2e.js new file mode 100644 index 0000000..0e7290a --- /dev/null +++ b/feedback-ui-design/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