From 53dc5ec1085c921a5bbde2b02d8c8463c732b9b8 Mon Sep 17 00:00:00 2001 From: Hammad1007 Date: Wed, 17 Jan 2024 18:59:58 +0500 Subject: [PATCH] Install cypress and write tests --- theme-clock/cypress.config.js | 9 +++ theme-clock/cypress/e2e/test1.spec.cy.js | 93 +++++++++++++++++++++++ theme-clock/cypress/fixtures/example.json | 5 ++ theme-clock/cypress/support/commands.js | 25 ++++++ theme-clock/cypress/support/e2e.js | 20 +++++ 5 files changed, 152 insertions(+) create mode 100644 theme-clock/cypress.config.js create mode 100644 theme-clock/cypress/e2e/test1.spec.cy.js create mode 100644 theme-clock/cypress/fixtures/example.json create mode 100644 theme-clock/cypress/support/commands.js create mode 100644 theme-clock/cypress/support/e2e.js diff --git a/theme-clock/cypress.config.js b/theme-clock/cypress.config.js new file mode 100644 index 0000000..97f47c4 --- /dev/null +++ b/theme-clock/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/theme-clock/cypress/e2e/test1.spec.cy.js b/theme-clock/cypress/e2e/test1.spec.cy.js new file mode 100644 index 0000000..b74096a --- /dev/null +++ b/theme-clock/cypress/e2e/test1.spec.cy.js @@ -0,0 +1,93 @@ +describe('Project Theme Clock', () => { + beforeEach(() => { + cy.visit('http://127.0.0.1:5500/theme-clock/index.html') + }) + + it('Opens the homepage', () => { + + }) + + it('The screen is visible', () => { + cy.get('body').should('be.visible') + }) + + context('Body', () => { + context('Background', () => { + it('The background is visible', () => { + cy.get('body').should('be.visible') + }) + + it('The background has correct color', () => { + cy.get('body').should('be.visible').should('have.css', 'background-color', 'rgba(0, 0, 0, 0)') + }) + }) + + context('Content', () => { + it('The clock container is visible', () => { + cy.get('.clock-container').should('be.visible') + }) + + context('Clock', () => { + it('The clock container has the clock displayed', () => { + cy.get('.clock-container .clock').should('be.visible') + }) + + context('Needles', () => { + + it('The clock container has the hour needle', () => { + cy.get('.clock-container .clock .needle.hour').should('be.visible') + }) + + it('The clock container has the minute needle', () => { + cy.get('.clock-container .clock .needle.minute').should('be.visible') + }) + + it('The clock container has the second needle', () => { + cy.get('.clock-container .clock .needle.second').should('be.visible') + }) + + it('The clock container has the center point', () => { + cy.get('.center-point').should('be.visible') + }) + }) + + context('Text Time', () => { + it('The time is being displayed in text format as well', () => { + cy.get('.time').should('be.visible') + }) + + it('The current time is being displayed', () => { + const currentTime = new Date() + var hours = currentTime.getHours() + const minutes = currentTime.getMinutes() + const meridiem = hours >= 12 ? 'PM' : 'AM' + + hours = hours % 12 || 12; + + const formattedTime = `${hours}:${minutes} ${meridiem}`; + + cy.get('.time').should('have.text', formattedTime); + }) + }) + + context('Day, month, date', () => { + it('The date is visible', () => { + cy.get('.date').should('be.visible') + }) + + it('The date, month and day is visible', () => { + const currentDate = new Date(); + const day = currentDate.getDay(); + const month = currentDate.getMonth(); + const date = currentDate.getDate(); + + const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; + const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; + + cy.get('.date').should('have.text', `${days[day]}, ${months[month]} ${date}`); + }) + }) + }) + }) + }) +}) \ No newline at end of file diff --git a/theme-clock/cypress/fixtures/example.json b/theme-clock/cypress/fixtures/example.json new file mode 100644 index 0000000..02e4254 --- /dev/null +++ b/theme-clock/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/theme-clock/cypress/support/commands.js b/theme-clock/cypress/support/commands.js new file mode 100644 index 0000000..66ea16e --- /dev/null +++ b/theme-clock/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) => { ... }) \ No newline at end of file diff --git a/theme-clock/cypress/support/e2e.js b/theme-clock/cypress/support/e2e.js new file mode 100644 index 0000000..0e7290a --- /dev/null +++ b/theme-clock/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