diff --git a/3d-boxes-background/cypress.config.js b/3d-boxes-background/cypress.config.js new file mode 100644 index 0000000..97f47c4 --- /dev/null +++ b/3d-boxes-background/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/3d-boxes-background/cypress/e2e/test1.spec.cy.js b/3d-boxes-background/cypress/e2e/test1.spec.cy.js new file mode 100644 index 0000000..96580b4 --- /dev/null +++ b/3d-boxes-background/cypress/e2e/test1.spec.cy.js @@ -0,0 +1,50 @@ +describe('Project 2: 3d-Boxes-Background', () => { + + beforeEach(() => { + cy.visit('http://127.0.0.1:5500/3d-boxes-background/') + }) + + it('Opens the Home Page', () => { + + }) + + it('White Background color', () => { + cy.get('body').should('have.css', 'background-color', 'rgb(250, 250, 250)') + }) + + it('Screen is visible', () => { + cy.get('body').should('be.visible') + }) + + it('Magic Button is visible', () => { + cy.get('.magic').should('be.visible') + }) + + it('Magic Button is clickable', () => { + cy.get('.magic').should('be.visible').click() + }) + + it('Small Boxes are visible on the screen', () => { + cy.get('.boxes').should('be.visible') + }) + + it('Magic button when clicked, the boxes merge into one box', () => { + cy.get('.magic').should('be.visible').click() + cy.get('.box').should('be.visible') + }) + + context('Magic Button toggle', () => { + before(() => { + cy.visit('http://127.0.0.1:5500/3d-boxes-background/') + cy.get('.magic').should('be.visible').click() + cy.get('.box').should('be.visible') + + }) + + it('If Magic button is toggled, then the box changes to small boxes', () => { + cy.get('.magic').should('be.visible').click() + cy.get('.boxes').should('be.visible') + }) + }) + +}) \ No newline at end of file diff --git a/3d-boxes-background/cypress/fixtures/example.json b/3d-boxes-background/cypress/fixtures/example.json new file mode 100644 index 0000000..02e4254 --- /dev/null +++ b/3d-boxes-background/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/3d-boxes-background/cypress/support/commands.js b/3d-boxes-background/cypress/support/commands.js new file mode 100644 index 0000000..66ea16e --- /dev/null +++ b/3d-boxes-background/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/3d-boxes-background/cypress/support/e2e.js b/3d-boxes-background/cypress/support/e2e.js new file mode 100644 index 0000000..0e7290a --- /dev/null +++ b/3d-boxes-background/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/_project_starter_/cypress.config.js b/_project_starter_/cypress.config.js new file mode 100644 index 0000000..97f47c4 --- /dev/null +++ b/_project_starter_/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/_project_starter_/cypress/e2e/test1.spec.cy.js b/_project_starter_/cypress/e2e/test1.spec.cy.js new file mode 100644 index 0000000..deb9a39 --- /dev/null +++ b/_project_starter_/cypress/e2e/test1.spec.cy.js @@ -0,0 +1,23 @@ +describe('Project 1: Project Starter', () => { + + beforeEach(() => { + cy.visit('http://127.0.0.1:5500/_project_starter_/') + }) + + it('Opens the Home Page', () => { + + }) + + it('White Background color', () => { + cy.get('body').should('have.css', 'background-color', 'rgba(0, 0, 0, 0)') + }) + + it('Screen is visible', () => { + cy.get('body').should('be.visible') + }) + + it('Text is visible', () => { + cy.get('h1').should('have.text', 'Project Starter') + }) + +}) \ No newline at end of file diff --git a/_project_starter_/cypress/fixtures/example.json b/_project_starter_/cypress/fixtures/example.json new file mode 100644 index 0000000..02e4254 --- /dev/null +++ b/_project_starter_/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/_project_starter_/cypress/support/commands.js b/_project_starter_/cypress/support/commands.js new file mode 100644 index 0000000..66ea16e --- /dev/null +++ b/_project_starter_/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/_project_starter_/cypress/support/e2e.js b/_project_starter_/cypress/support/e2e.js new file mode 100644 index 0000000..0e7290a --- /dev/null +++ b/_project_starter_/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/_project_starter_/index.html b/_project_starter_/index.html index 4783501..7f7705b 100644 --- a/_project_starter_/index.html +++ b/_project_starter_/index.html @@ -8,6 +8,6 @@

Project Starter

- + diff --git a/animated-countdown/cypress.config.js b/animated-countdown/cypress.config.js new file mode 100644 index 0000000..97f47c4 --- /dev/null +++ b/animated-countdown/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/animated-countdown/cypress/e2e/test1.spec.cy.js b/animated-countdown/cypress/e2e/test1.spec.cy.js new file mode 100644 index 0000000..076dcfa --- /dev/null +++ b/animated-countdown/cypress/e2e/test1.spec.cy.js @@ -0,0 +1,30 @@ +describe('Project 3: Animated Countdown', () => { + + beforeEach(() => { + cy.visit('http://127.0.0.1:5500/animated-countdown/index.html') + }) + it('Open the homepage', () => { + + }) + + it('White Background color', () => { + cy.get('body').should('have.css', 'background-color', 'rgba(0, 0, 0, 0)') + }) + + it('Screen is visible', () => { + cy.get('body').should('be.visible') + }) + + it('Get Ready text is visible', () => { + cy.get('.counter').get('h4').should('have.text', 'Get Ready') + }) + + it('Go word is visible', () => { + cy.get('.final').get('h1').should('have.text', 'GO') + }) + + it('Replay button', () => { + cy.get('body').get('.counter').get('.nums').get('span').should('contain', 'Replay') + }) + +}) \ No newline at end of file diff --git a/animated-countdown/cypress/fixtures/example.json b/animated-countdown/cypress/fixtures/example.json new file mode 100644 index 0000000..02e4254 --- /dev/null +++ b/animated-countdown/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/animated-countdown/cypress/support/commands.js b/animated-countdown/cypress/support/commands.js new file mode 100644 index 0000000..66ea16e --- /dev/null +++ b/animated-countdown/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/animated-countdown/cypress/support/e2e.js b/animated-countdown/cypress/support/e2e.js new file mode 100644 index 0000000..0e7290a --- /dev/null +++ b/animated-countdown/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/animated-navigation/cypress.config.js b/animated-navigation/cypress.config.js new file mode 100644 index 0000000..97f47c4 --- /dev/null +++ b/animated-navigation/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/animated-navigation/cypress/e2e/test1.spec.cy.js b/animated-navigation/cypress/e2e/test1.spec.cy.js new file mode 100644 index 0000000..8a2a8c5 --- /dev/null +++ b/animated-navigation/cypress/e2e/test1.spec.cy.js @@ -0,0 +1,57 @@ +describe('Project 4: Animated Navigation', () => { + + beforeEach(() => { + cy.visit('http://127.0.0.1:5500/animated-navigation') + }) + + it('Opens the browser', () => { + + }) + + it('Screen is visible', () => { + cy.get('body').should('be.visible') + }) + + it('Checks for the background color', () => { + cy.get('body').should('have.css', 'background-color', 'rgb(235, 251, 255)') + }) + + it('Checks for the linear gradient color on the screen', () => { + cy.get('body').should('have.css', 'background-image').and('contain', 'linear-gradient') + }) + + it('Checks for the current linear gradient colors', () => { + cy.get('body').should(($element) => { + const gradient = $element.css('background-image'); + expect(gradient).to.include('rgb(234, 251, 255)'); + expect(gradient).to.include('rgb(82, 144, 249)'); + }); + }) + + it('Navbar is visible', () => { + cy.get('body').get('#nav').should('be.visible') + }) + + it('Navbar background color', () => { + cy.get('body').get('nav#nav.active').should(($element) => { + const bgcolor = $element.css('background-color'); + expect(bgcolor).to.include('rgb(255, 255, 255)'); + }); + }) + + it('Cross icon is visible to close the navbar', () => { + cy.get('body').get('#toggle').should('be.visible') + }) + + it('Cross icon is clickable', () => { + cy.get('body').get('#toggle').should('be.visible').click() + }) + + it('The navbar should have the 4 headings visible', () => { + cy.get('.active ul li a').should('have.length', 4) + cy.get('.active ul li a').each(($link) => { + cy.wrap($link).should('be.visible') + }); + }) + +}) \ No newline at end of file diff --git a/animated-navigation/cypress/fixtures/example.json b/animated-navigation/cypress/fixtures/example.json new file mode 100644 index 0000000..02e4254 --- /dev/null +++ b/animated-navigation/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/animated-navigation/cypress/support/commands.js b/animated-navigation/cypress/support/commands.js new file mode 100644 index 0000000..66ea16e --- /dev/null +++ b/animated-navigation/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/animated-navigation/cypress/support/e2e.js b/animated-navigation/cypress/support/e2e.js new file mode 100644 index 0000000..0e7290a --- /dev/null +++ b/animated-navigation/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/animated-navigation/style.css b/animated-navigation/style.css index 77959ef..96a426d 100644 --- a/animated-navigation/style.css +++ b/animated-navigation/style.css @@ -5,7 +5,7 @@ } body { - background-color: #eafbff; + background-color: rgb(235, 251, 255); background-image: linear-gradient( to bottom, #eafbff 0%, diff --git a/background-slider/cypress.config.js b/background-slider/cypress.config.js new file mode 100644 index 0000000..97f47c4 --- /dev/null +++ b/background-slider/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/background-slider/cypress/e2e/test1.spec.cy.js b/background-slider/cypress/e2e/test1.spec.cy.js new file mode 100644 index 0000000..b8ef91e --- /dev/null +++ b/background-slider/cypress/e2e/test1.spec.cy.js @@ -0,0 +1,89 @@ +describe('Project 4: Background Slider', () => { + + beforeEach(() => { + cy.visit('http://127.0.0.1:5500/background-slider') + }) + + it('Opens the home page', () => { + + }) + + it('Screen is visible', () => { + cy.get('body').should('be.visible') + }) + + context('Image Slider', () => { + it('Slider container is visible', () => { + cy.get('.slider-container').should('be.visible') + }) + + context('Arrows', () => { + it('Arrows are visible', () => { + cy.get('.arrow').should('be.visible') + }) + + it('Color of arrows is white', () => { + cy.get('.arrow').should('have.css', 'color', 'rgb(255, 255, 255)') + }) + + context('Left Arrow', () => { + it('Left arrow is visible', () => { + cy.get('.fa-arrow-left ').should('be.visible') + }) + + it('Left arrow is clickable', () => { + cy.get('.fa-arrow-left ').should('be.visible').click() + }) + + it('Left arrow when clicked takes me to the previous image', () => { + cy.get('.fa-arrow-left ').should('be.visible').click() + cy.get('.slide').should('have.class', 'active').should('be.visible') + }) + + }) + + context('Right Arrow', () => { + it('Right arrow is visible', () => { + cy.get('.fa-arrow-right ').should('be.visible') + }) + + it('Right arrow is clickable', () => { + cy.get('.fa-arrow-right ').should('be.visible').click() + }) + + it('Right arrow when clicked takes me to the next image', () => { + cy.get('.fa-arrow-right ').should('be.visible').click() + cy.get('.slide').should('have.class', 'active').should('be.visible') + }) + + }) + }) + }) + + context('Background Image', () => { + it('Verifies the background image of the first slide', () => { + cy.get('.slide').first().should('have.css', 'background-image') + .and('include', 'photo-1549880338-65ddcdfd017b') + }) + + it('Verifies the background image of the second slide', () => { + cy.get('.slide').eq(1).should('have.css', 'background-image') + .and('include', 'photo-1511593358241-7eea1f3c84e5') + }) + + it('Verifies the background image of the third slide', () => { + cy.get('.slide').eq(2).should('have.css', 'background-image') + .and('include', 'photo-1495467033336-2effd8753d51') + }) + + it('Verifies the background image of the fourth slide', () => { + cy.get('.slide').eq(3).should('have.css', 'background-image') + .and('include', 'photo-1522735338363-cc7313be0ae0') + }) + + it('Verifies the background image of the fifth slide', () => { + cy.get('.slide').last().should('have.css', 'background-image') + .and('include', 'photo-1559087867-ce4c91325525') + }) + }) +}) \ No newline at end of file diff --git a/background-slider/cypress/fixtures/example.json b/background-slider/cypress/fixtures/example.json new file mode 100644 index 0000000..02e4254 --- /dev/null +++ b/background-slider/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/background-slider/cypress/support/commands.js b/background-slider/cypress/support/commands.js new file mode 100644 index 0000000..66ea16e --- /dev/null +++ b/background-slider/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/background-slider/cypress/support/e2e.js b/background-slider/cypress/support/e2e.js new file mode 100644 index 0000000..0e7290a --- /dev/null +++ b/background-slider/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/content-placeholder/cypress.config.js b/content-placeholder/cypress.config.js new file mode 100644 index 0000000..97f47c4 --- /dev/null +++ b/content-placeholder/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/content-placeholder/cypress/e2e/test1.spec.cy.js b/content-placeholder/cypress/e2e/test1.spec.cy.js new file mode 100644 index 0000000..e0c8858 --- /dev/null +++ b/content-placeholder/cypress/e2e/test1.spec.cy.js @@ -0,0 +1,18 @@ +describe('Project 6: Content Placeholder', () => { + beforeEach(() => { + cy.visit('http://127.0.0.1:5500/content-placeholder') + }) + + it('Opens the home page', () => { + + }) + + it('Body is visible', () => { + cy.get('body').should('be.visible') + }) + + it('Background color', () => { + cy.get('body').should('have.css', 'background-color', 'rgb(236, 240, 241)') + }) + +}) \ No newline at end of file diff --git a/content-placeholder/cypress/fixtures/example.json b/content-placeholder/cypress/fixtures/example.json new file mode 100644 index 0000000..02e4254 --- /dev/null +++ b/content-placeholder/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/content-placeholder/cypress/support/commands.js b/content-placeholder/cypress/support/commands.js new file mode 100644 index 0000000..66ea16e --- /dev/null +++ b/content-placeholder/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/content-placeholder/cypress/support/e2e.js b/content-placeholder/cypress/support/e2e.js new file mode 100644 index 0000000..0e7290a --- /dev/null +++ b/content-placeholder/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/custom-range-slider/cypress.config.js b/custom-range-slider/cypress.config.js new file mode 100644 index 0000000..97f47c4 --- /dev/null +++ b/custom-range-slider/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/custom-range-slider/cypress/e2e/test1.spec.cy.js b/custom-range-slider/cypress/e2e/test1.spec.cy.js new file mode 100644 index 0000000..5506aa8 --- /dev/null +++ b/custom-range-slider/cypress/e2e/test1.spec.cy.js @@ -0,0 +1,69 @@ +describe('Project: Custom Range Slider', () => { + beforeEach(() => { + cy.visit('http://127.0.0.1:5500/custom-range-slider') + }) + + it('Opens the home page', () => { + + }) + + it('Body Screen is visible', () => { + cy.get('body').should('be.visible') + }) + + it('Background color', () => { + const expectedGradient = /linear-gradient\(135deg,\s*rgb\(245,\s*247,\s*250\)\s*0%,\s*rgb\(195,\s*207,\s*226\)\s*100%\)/ + + cy.get('body').should('have.css', 'background-image').and('match', expectedGradient) + }) + + context('Body', () =>{ + context('Title text', () => { + it('Title text is visible', () => { + cy.get('body').get('h2').should('be.visible') + }) + + it('Title Text is correct', () => { + cy.get('body h2').should('be.visible').should('have.text', 'Custom Range Slider') + }) + }) + + context('Range Slider', () => { + it('Range slider is visible', () => { + cy.get('body .range-container').should('be.visible') + }) + + it('Range slider mid value is 50', () => { + cy.get('label[for="range"]').should('be.visible') + }) + + it('Range slider start value is 0', () => { + cy.get('#range').invoke('val', '0').trigger('input'); + cy.get('label[for="range"]').should('have.text', '0'); + }) + + it('Range slider end value is 100', () => { + cy.get('#range').invoke('val', '100').trigger('input'); + cy.get('label[for="range"]').should('have.text', '100'); + }) + + it('Range slider has any value between 0 and 100 inclusive', () => { + cy.get('#range').invoke('val', '29').trigger('input'); + cy.get('label[for="range"]').should('have.text', '29'); + + cy.get('#range').invoke('val', '63').trigger('input'); + cy.get('label[for="range"]').should('have.text', '63'); + }) + + it('Range slider does not have a value less than 0 or greater than 100', () => { + cy.get('#range').invoke('val', '-1').trigger('input'); + cy.get('label[for="range"]').should('not.have.text', '-1'); + + cy.get('#range').invoke('val', '101').trigger('input'); + cy.get('label[for="range"]').should('not.have.text', '101'); + }) + + }) + }) + +}) \ No newline at end of file diff --git a/custom-range-slider/cypress/fixtures/example.json b/custom-range-slider/cypress/fixtures/example.json new file mode 100644 index 0000000..02e4254 --- /dev/null +++ b/custom-range-slider/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/custom-range-slider/cypress/support/commands.js b/custom-range-slider/cypress/support/commands.js new file mode 100644 index 0000000..66ea16e --- /dev/null +++ b/custom-range-slider/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/custom-range-slider/cypress/support/e2e.js b/custom-range-slider/cypress/support/e2e.js new file mode 100644 index 0000000..0e7290a --- /dev/null +++ b/custom-range-slider/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/dad-jokes/cypress.config.js b/dad-jokes/cypress.config.js new file mode 100644 index 0000000..97f47c4 --- /dev/null +++ b/dad-jokes/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/dad-jokes/cypress/e2e/test1.spec.cy.js b/dad-jokes/cypress/e2e/test1.spec.cy.js new file mode 100644 index 0000000..b794ff8 --- /dev/null +++ b/dad-jokes/cypress/e2e/test1.spec.cy.js @@ -0,0 +1,60 @@ +describe('Project: Dad Jokes', () => { + beforeEach(() => { + cy.visit('http://127.0.0.1:5500/dad-jokes/index.html') + }) + + context('General Tests', () => { + it('Opens the home page', () => { + + }) + + it('Screen is visible', () => { + cy.get('body').should('be.visible') + }) + + it('Background color', () => { + cy.get('body').should('have.css', 'background-color', 'rgb(104, 109, 224)') + }) + }) + + context('Body', () => { + context('Title Text', () => { + it('Title text is visible', () => { + cy.get('body').get('.container h3').should('be.visible') + }) + + it('Title text is correct', () => { + cy.get('body').get('.container h3').should('have.text', "Don't Laugh Challenge") + }) + }) + + context('Get Another Joke button', () => { + it('Get Another Joke button is visible', () => { + cy.get('.btn').should('be.visible') + }) + + it('Color of the button is correct', () => { + cy.get('.btn').should('have.css', 'background-color', 'rgb(159, 104, 224)') + }) + + it('The button has the correct text displayed', () => { + cy.get('.btn').should('have.text', 'Get Another Joke') + }) + + it('The button is clickable', () => { + cy.get('.btn').should('be.visible').click() + }) + }) + + context('Joke', () => { + it('Joke is visible', () => { + cy.get('.container .joke#joke').should('be.visible') + }) + + it('Gets a new joke when the button is clicked', () => { + cy.get('.btn').should('be.visible').click() + cy.get('.container .joke#joke').should('be.visible') + }) + }) + }) +}) \ No newline at end of file diff --git a/dad-jokes/cypress/fixtures/example.json b/dad-jokes/cypress/fixtures/example.json new file mode 100644 index 0000000..02e4254 --- /dev/null +++ b/dad-jokes/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/dad-jokes/cypress/support/commands.js b/dad-jokes/cypress/support/commands.js new file mode 100644 index 0000000..66ea16e --- /dev/null +++ b/dad-jokes/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/dad-jokes/cypress/support/e2e.js b/dad-jokes/cypress/support/e2e.js new file mode 100644 index 0000000..0e7290a --- /dev/null +++ b/dad-jokes/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/notes-app/cypress.config.js b/notes-app/cypress.config.js new file mode 100644 index 0000000..97f47c4 --- /dev/null +++ b/notes-app/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/notes-app/cypress/e2e/test1.spec.cy.js b/notes-app/cypress/e2e/test1.spec.cy.js new file mode 100644 index 0000000..2b8ff76 --- /dev/null +++ b/notes-app/cypress/e2e/test1.spec.cy.js @@ -0,0 +1,120 @@ +describe('Project: Notes-App', () => { + + beforeEach(() => { + cy.visit('http://127.0.0.1:5500/notes-app') + }) + + it('Opens the Home Page', () => { + + }) + + it('Screen is visible', () => { + cy.get('body').should('be.visible') + }) + + context('Body', () => { + + context('Background-color', () => { + it('Background color is visible', () => { + cy.get('body').should('be.visible') + }) + + it('Background color is correct', () => { + cy.get('body').should('have.css', 'background-color', 'rgb(123, 218, 243)') + }) + }) + + context('Add Note Button', () => { + it('The button is visible', () => { + cy.get('body').get('.add').should('be.visible') + }) + + it('The color of the button is green', () => { + cy.get('body .add').should('have.css', 'background-color', 'rgb(158, 200, 98)') + }) + + it('The button has correct text', () => { + cy.get('button.add#add').invoke('text').invoke('trim').should('eq', 'Add note'); + }) + + it('The plus sign is visible', () => { + cy.get('button i').should('be.visible') + }) + + it('The color of the plus sign is white', () => { + cy.get('button i').should('be.visible').should('have.css', 'color', 'rgb(255, 255, 255)') + }) + + it('The button is clickable', () => { + cy.get('body .add').should('be.visible').click() + }) + + it('The button when clicked opens a new note', () => { + cy.get('body .add').should('be.visible').click() // checks if the note is visible or not too + cy.get('.note').should('be.visible') + }) + + context('New Note', () => { + it('The user is able to write in the note', () => { + cy.get('body .add').should('be.visible').click() + cy.get('.note').should('be.visible').type('Hello world, how are you?') + }) + + it('The note accepts multi line input as well', () => { + cy.get('body .add').should('be.visible').click() + cy.get('.note').should('be.visible').type('Hello world, how are you?').type('{enter}').type('The world says that it is fine.') + }) + + it('The user is able to delete characters with the help of backspace', () => { + cy.get('body .add').should('be.visible').click() + cy.get('.note').should('be.visible').type('Hello world, how are you?').type('{enter}').type('The world says that it is fine.') + .type('{backspace}').type('{backspace}').type('{backspace}').type('{backspace}').type('{backspace}') + }) + + context('Notepad buttons', () => { + beforeEach(() => { + cy.get('body .add').should('be.visible').click() + cy.get('.note').should('be.visible') + }) + + context('Save the text button', () => { + it('The button is visible', () => { + cy.get('.edit').should('be.visible') + }) + + it('The button is clickable', () => { + cy.get('.edit').should('be.visible').click() + }) + + it('The toggle button to edit and save the text', () => { + cy.get('.note').should('be.visible').type('Hello world, how are you?') + + cy.get('.edit').should('be.visible').click() + cy.get('.note textarea').should('not.be.visible') + + cy.get('.edit').should('be.visible').click() + cy.get('.note textarea').should('be.visible') + }) + }) + + context('Delete the note button', () => { + it('The button is visible', () => { + cy.get('.delete').should('be.visible') + }) + + it('The button is clickable', () => { + cy.get('.delete').should('be.visible').click() + }) + + it('The button when clicked deletes the note from the screen', () => { + cy.get('.note').its('length').then((initialNoteCount) => { + cy.get('.note:first-of-type .delete').click() + cy.get('.note').should('have.length', initialNoteCount - 1) + }) + }) + }) + }) + }) + }) + }) +}) \ No newline at end of file diff --git a/notes-app/cypress/fixtures/example.json b/notes-app/cypress/fixtures/example.json new file mode 100644 index 0000000..02e4254 --- /dev/null +++ b/notes-app/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/notes-app/cypress/support/commands.js b/notes-app/cypress/support/commands.js new file mode 100644 index 0000000..66ea16e --- /dev/null +++ b/notes-app/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/notes-app/cypress/support/e2e.js b/notes-app/cypress/support/e2e.js new file mode 100644 index 0000000..0e7290a --- /dev/null +++ b/notes-app/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/password-generator/cypress.config.js b/password-generator/cypress.config.js new file mode 100644 index 0000000..97f47c4 --- /dev/null +++ b/password-generator/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/password-generator/cypress/e2e/test1.spec.cy.js b/password-generator/cypress/e2e/test1.spec.cy.js new file mode 100644 index 0000000..eb9acc6 --- /dev/null +++ b/password-generator/cypress/e2e/test1.spec.cy.js @@ -0,0 +1,219 @@ +describe('Project: Password Generator', () => { + beforeEach(() => { + cy.visit('http://127.0.0.1:5500/password-generator/') + }) + + it('Opens the home page', () => { + + }) + + it('Screen is visible', () => { + cy.get('body').should('be.visible') + }) + + context('Body', () => { + context('Background', () => { + it('Background is visible', () => { + cy.get('body').should('be.visible') + }) + + it('Background color is correct', () => { + cy.get('body').should('be.visible').should('have.css', 'background-color', 'rgb(59, 59, 152)') + }) + }) + + context('Password Generator', () => { + it('The container is visible', () => { + cy.get('.container').should('be.visible') + }) + + it('The container has the correct background color', () => { + cy.get('.container').should('have.css', 'background-color', 'rgb(35, 35, 91)') + }) + + context('Password Generator Heading', () => { + it('The heading is visible', () => { + cy.get('.container h2').should('be.visible') + }) + + it('The heading is correct', () => { + cy.get('.container h2').should('have.text', 'Password Generator') + }) + + it('The color of he heading is black', () => { + cy.get('.container h2').should('have.css', 'color', 'rgb(255, 255, 255)') + }) + }) + + context('Password Generator Container', () => { + it('The text field is visible', () => { + cy.get('.result-container').should('be.visible') + }) + + it('The text field has correct color', () => { + cy.get('.result-container').should('have.css', 'background-color', 'rgba(0, 0, 0, 0.4)') + }) + + context('Copy to clipboard button', () => { + it('The copy button is visible', () => { + cy.get('.btn#clipboard').should('be.visible') + }) + + it('The copy button has the desired background color', () => { + cy.get('.btn#clipboard').should('have.css', 'background-color', 'rgb(59, 59, 152)') + }) + + context('Copy Icon', () => { + it('The icon is visible', () => { + cy.get('.btn#clipboard i').should('be.visible') + }) + + it('The icon has correct color', () => { + cy.get('.btn#clipboard i').should('have.css', 'color', 'rgb(255, 255, 255)') + }) + }) + }) + + context('Container Settings', () => { + it('The container is visible', () => { + cy.get('.settings').should('be.visible') + }) + context('Password Length', () => { + it('The password length text is visible', () => { + cy.contains('Password Length').should('be.visible') + }) + + it('The password length text is correct', () => { + cy.contains('Password Length').should('have.text', 'Password Length') + }) + + it('The password input field has value', () => { + cy.get('#length').should('have.value', '20') + }) + + it('The minimum value is 4 and maximum value is 20', () => { + cy.get('#length').clear().type('4').blur() + cy.get('#length').type('{downarrow}').should('have.value', '4') + cy.get('#length').clear().type('20').blur() + cy.get('#length').type('{uparrow}').should('have.value', '20') + }) + + it('The text field accepts any value between 4 and 20', () => { + cy.get('#length').clear() + cy.get('#length').type('10').should('have.value', '10') + }) + }) + + context('Include Uppercase Letters', () => { + it('The Include upper case letters is visible', () => { + cy.contains('Include uppercase letters').should('be.visible') + }) + + it('The Include upper case letters text is correct', () => { + cy.contains('Include uppercase letters').should('have.text', 'Include uppercase letters') + }) + + context('Include uppercase letters checkbox', () => { + it('The checkbox is visible', () => { + cy.get('#uppercase').should('be.visible') + }) + + it('The checkbox is a toggle button', () => { + cy.get('#uppercase').should('be.visible').click().should('not.be.checked') + cy.get('#uppercase').should('be.visible').click().should('be.checked') + }) + }) + }) + + context('Include Lowercase Letters', () => { + it('The Include lower case letters is visible', () => { + cy.contains('Include lowercase letters').should('be.visible') + }) + + it('The Include lower case letters text is correct', () => { + cy.contains('Include uppercase letters').should('have.text', 'Include uppercase letters') + }) + + context('Include uppercase letters checkbox', () => { + it('The checkbox is visible', () => { + cy.get('#lowercase').should('be.visible') + }) + + it('The checkbox is a toggle button', () => { + cy.get('#lowercase').should('be.visible').click().should('not.be.checked') + cy.get('#lowercase').should('be.visible').click().should('be.checked') + }) + }) + }) + + context('Include Numbers', () => { + it('The Include numbers is visible', () => { + cy.contains('Include numbers').should('be.visible') + }) + + it('The Include numbers text is correct', () => { + cy.contains('Include numbers').should('have.text', 'Include numbers') + }) + + context('Include numbers checkbox', () => { + it('The checkbox is visible', () => { + cy.get('#numbers').should('be.visible') + }) + + it('The checkbox is a toggle button', () => { + cy.get('#numbers').should('be.visible').click().should('not.be.checked') + cy.get('#numbers').should('be.visible').click().should('be.checked') + }) + }) + }) + + context('Include Special Characters', () => { + it('The Include special characters is visible', () => { + cy.contains('Include symbols').should('be.visible') + }) + + it('The Include symbols text is correct', () => { + cy.contains('Include symbols').should('have.text', 'Include symbols') + }) + + context('Include symbols checkbox', () => { + it('The checkbox is visible', () => { + cy.get('#symbols').should('be.visible') + }) + + it('The checkbox is a toggle button', () => { + cy.get('#symbols').should('be.visible').click().should('not.be.checked') + cy.get('#symbols').should('be.visible').click().should('be.checked') + }) + }) + }) + }) + }) + + context('Generate Password', () => { + it('The button is visible', () => { + cy.get('#generate').should('be.visible') + }) + + it('The background color', () => { + cy.get('#generate').should('have.css', 'background-color', 'rgb(59, 59, 152)') + }) + + context('Generate Password text', () => { + it('The text is visible', () => { + cy.get('#generate').contains('Generate Password') + }) + }) + + it('The button is clickable', () => { + cy.get('#generate').should('be.visible').click() + }) + + it('Generates a random password when the button is clicked', () => { + cy.get('#generate').should('be.visible').click() + cy.get('#result').should('not.have.text', ' ') + }) + }) + }) + }) +}) \ No newline at end of file diff --git a/password-generator/cypress/fixtures/example.json b/password-generator/cypress/fixtures/example.json new file mode 100644 index 0000000..02e4254 --- /dev/null +++ b/password-generator/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/password-generator/cypress/support/commands.js b/password-generator/cypress/support/commands.js new file mode 100644 index 0000000..66ea16e --- /dev/null +++ b/password-generator/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/password-generator/cypress/support/e2e.js b/password-generator/cypress/support/e2e.js new file mode 100644 index 0000000..0e7290a --- /dev/null +++ b/password-generator/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/todo-list/cypress.config.js b/todo-list/cypress.config.js new file mode 100644 index 0000000..97f47c4 --- /dev/null +++ b/todo-list/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/todo-list/cypress/e2e/test1.spec.cy.js b/todo-list/cypress/e2e/test1.spec.cy.js new file mode 100644 index 0000000..818148d --- /dev/null +++ b/todo-list/cypress/e2e/test1.spec.cy.js @@ -0,0 +1,104 @@ +describe('Project: Todo List', () => { + beforeEach(() => { + cy.visit('http://127.0.0.1:5500/todo-list/') + }) + + it ('Opens the home page', () => { + + }) + + it('Screen is visible', () => { + cy.get('body').should('be.visible') + }) + + context('Body', () => { + context('Background', () => { + it('Background is visible', () => { + cy.get('body').should('be.visible') + }) + + it('Background color is correct', () => { + cy.get('body').should('have.css', 'background-color', 'rgb(245, 245, 245)') + }) + + context('Heading', () => { + it('The heading is visible', () => { + cy.get('body h1').should('be.visible') + }) + + it('The heading has correct text', () => { + cy.get('body h1').should('have.text', 'todos') + }) + + it('The heading text has the correct color', () => { + cy.get('body h1').should('have.css', 'color', 'rgb(179, 131, 226)') + }) + }) + + context('ToDo List', () => { + it('The todo list bar is visible', () => { + cy.get('#form').should('be.visible') + }) + + it('The placeholder text is visible', () => { + cy.get('#form .input').should('be.visible') + }) + + // Test for placeholder text + it('The placeholder text is correct', () => { + cy.get('input[type="text"]').should('have.attr', 'placeholder', 'Enter your todo') + }) + + it('The text field is clickable', () => { + cy.get('#form .input').should('be.visible').click() + }) + + it('Type some data in the textfield', () => { + cy.get('#form .input').should('be.visible').click().type('Hello world, how are you?').type('{enter}') + }) + + it('The entry is listed below and visible', () => { + cy.get('#form .input').should('be.visible').click().type('Hello world, how are you?').type('{enter}') + cy.get('.todos').should('be.visible') + }) + }) + + context('Text below the Todos List', () => { + it('The text is visible', () => { + cy.get('body small').should('be.visible') + }) + + it('The color of the text is correct', () => { + cy.get('small').should('have.css', 'color', 'rgb(181, 181, 181)') + }) + + context('Left and Right Click', () => { + context('Left Click', () => { + it('The Left Click text is corect', () => { + cy.get('body small').contains('Left click to toggle completed.').should('be.visible') + }) + + it('Left click to toggle completed', () => { + cy.get('#form .input').should('be.visible').click().type('Hello world, how are you?').type('{enter}') + cy.get('.todos').click() + cy.get('.todos .completed').should('be.visible').click() + cy.get('.todos').should('be.visible') + }) + }) + + context('Right Click', () => { + it('The Right Click text is correct', () => { + cy.get('body small').contains('Right click to delete todo').should('be.visible') + }) + + it('Right click whe clicked deletes a todo', () => { + cy.get('#form .input').should('be.visible').click().type('Hello world, how are you?').type('{enter}') + cy.contains('.todos li', 'Hello world, how are you?').rightclick() + cy.contains('.todos li', 'Hello world, how are you?').should('not.exist') + }) + }) + }) + }) + }) + }) +}) \ No newline at end of file diff --git a/todo-list/cypress/fixtures/example.json b/todo-list/cypress/fixtures/example.json new file mode 100644 index 0000000..02e4254 --- /dev/null +++ b/todo-list/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/todo-list/cypress/support/commands.js b/todo-list/cypress/support/commands.js new file mode 100644 index 0000000..66ea16e --- /dev/null +++ b/todo-list/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/todo-list/cypress/support/e2e.js b/todo-list/cypress/support/e2e.js new file mode 100644 index 0000000..0e7290a --- /dev/null +++ b/todo-list/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