From 8a0ddbd15005765ba9d382acf45eeb448a6cc32f Mon Sep 17 00:00:00 2001 From: Hammad1007 Date: Mon, 22 Jan 2024 13:14:08 +0500 Subject: [PATCH] Install cypress and write teh E2E tests --- github-profiles/cypress.config.js | 9 ++ github-profiles/cypress/e2e/test.spec.cy.js | 123 ++++++++++++++++++ github-profiles/cypress/fixtures/example.json | 5 + github-profiles/cypress/support/commands.js | 27 ++++ github-profiles/cypress/support/e2e.js | 20 +++ 5 files changed, 184 insertions(+) create mode 100644 github-profiles/cypress.config.js create mode 100644 github-profiles/cypress/e2e/test.spec.cy.js create mode 100644 github-profiles/cypress/fixtures/example.json create mode 100644 github-profiles/cypress/support/commands.js create mode 100644 github-profiles/cypress/support/e2e.js diff --git a/github-profiles/cypress.config.js b/github-profiles/cypress.config.js new file mode 100644 index 0000000..97f47c4 --- /dev/null +++ b/github-profiles/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/github-profiles/cypress/e2e/test.spec.cy.js b/github-profiles/cypress/e2e/test.spec.cy.js new file mode 100644 index 0000000..17c97f6 --- /dev/null +++ b/github-profiles/cypress/e2e/test.spec.cy.js @@ -0,0 +1,123 @@ +// Function to check if body is visible +function isVisible() { + it('The body is visible', () => { + cy.get('body').should('be.visible') + }) +} + +describe('Project Github Profiles', () => { + beforeEach(() => { + cy.visit('http://127.0.0.1:5500/github-profiles/index.html') + }) + + it('Opens the home page', () => { + + }) + + it('The body is visible', () => { + isVisible() + }) + + context('Body', () => { + context('Background', () => { + it('The background is visible', () => { + isVisible() + }) + + it('The background color is correct', () => { + cy.get('body').should('be.visible').should('have.css', 'background-color', 'rgb(42, 42, 114)') + }) + + context('The Search Bar', () => { + context('Search bar', () => { + it('The search bar is visible', () => { + cy.xpath('//form[@class="user-form"]').should('be.visible') + }) + + it('The search bar has visible background color', () => { + cy.xpath('//*[@id="search"]').should('be.visible').should('have.css', 'background-color', 'rgb(76, 40, 133)') + }) + + it('The search bar has visible placeholder text', () => { + cy.xpath('//*[@id="search"]').should('be.visible').should('have.attr', 'placeholder', 'Search a Github User') + }) + + it('The search bar placeholder text has correct color', () => { + cy.xpath('//*[@id="search"]').should('be.visible').should('have.attr', 'placeholder', 'Search a Github User').should('have.css', 'color', 'rgb(255, 255, 255)') + }) + + it('The search bar is clickable', () => { + cy.xpath('//form[@class="user-form"]').should('be.visible').click() + }) + + it('The user when enters a correct name gets the result', () => { + cy.get('#search').should('be.visible').click().type('Hammad1007') + cy.get('#form').submit() + cy.get('.user-info').should('be.visible') + }) + + context('Correct User Card', () => { + it('The card has correct background color', () => { + cy.get('#search').should('be.visible').click().type('Hammad1007') + cy.get('#form').submit() + cy.wait(10) + cy.get('.user-info').should('be.visible').should('have.css', 'background-color', 'rgba(0, 0, 0, 0)') + }) + + context('Card', () => { + context('Image', () => { + it('The image of the user is visible', () => { + cy.get('#search').should('be.visible').click().type('Hammad1007') + cy.get('#form').submit() + cy.wait(10) + cy.xpath('/html/body/main/div/div[1]/img').should('be.visible') + }) + }) + + context('Text', () => { + it('The card content is visible', () => { + cy.get('#search').should('be.visible').click().type('Hammad1007') + cy.get('#form').submit() + cy.wait(10) + cy.xpath('/html/body/main/div').should('be.visible') + }) + + context('Heading', () => { + it('The heading text is visible', () => { + cy.get('#search').should('be.visible').click().type('Hammad1007') + cy.get('#form').submit() + cy.wait(10) + cy.xpath('/html/body/main/div/div[2]/h2').should('be.visible') + }) + + it('The heading text is correct', () => { + cy.get('#search').should('be.visible').click().type('Hammad1007') + cy.get('#form').submit() + cy.wait(10) + cy.xpath('/html/body/main/div/div[2]/h2').should('be.visible').should('have.text', 'Hammad Rashid') + }) + + it('The color of the text is correct', () => { + cy.get('#search').should('be.visible').click().type('Hammad1007') + cy.get('#form').submit() + cy.wait(10) + cy.xpath('/html/body/main/div/div[2]/h2').should('be.visible').should('have.css', 'color', 'rgb(238, 238, 238)') + }) + }) + }) + }) + }) + + context('Incorrect User Card', () => { + it('Invalid input results in no result', () => { + cy.get('#search').should('be.visible').click().type('qwerty') + cy.get('#form').submit() + cy.wait(10) + cy.get('.user-info').should('not.be.visible') + }) + }) + }) + }) + }) + }) +}) \ No newline at end of file diff --git a/github-profiles/cypress/fixtures/example.json b/github-profiles/cypress/fixtures/example.json new file mode 100644 index 0000000..02e4254 --- /dev/null +++ b/github-profiles/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/github-profiles/cypress/support/commands.js b/github-profiles/cypress/support/commands.js new file mode 100644 index 0000000..cc02d1e --- /dev/null +++ b/github-profiles/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/github-profiles/cypress/support/e2e.js b/github-profiles/cypress/support/e2e.js new file mode 100644 index 0000000..0e7290a --- /dev/null +++ b/github-profiles/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