Merge 1d246bf918 into 236f68461b

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
+    },
+  },
+});

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')
+    })
+  })
+
+})

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"
+}

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) => { ... })

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')

_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
+    },
+  },
+});

_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')
+  })
+  
+})

_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"
+}

_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) => { ... })

_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')

_project_starter_/index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <h1>Project Starter</h1>
-    <script src="script.js"></script>
+    <!-- <script src="script.js"></script> -->
   </body>
 </html>

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
+    },
+  },
+});

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')
+  })
+
+})

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"
+}

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) => { ... })

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')

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
+    },
+  },
+});

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') 
+    });
+  })
+
+})

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"
+}

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) => { ... })

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')

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%,

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
+    },
+  },
+});

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')
+    })
+  })
+})

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"
+}

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) => { ... })

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')

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
+    },
+  },
+});

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)')
+  })
+
+})

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"
+}

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) => { ... })

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')

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
+    },
+  },
+});

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');
+      })
+
+    })
+  })
+
+})

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"
+}

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) => { ... })

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')

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
+    },
+  },
+});

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')
+      })
+    })
+  })
+})

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"
+}

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) => { ... })

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')

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
+    },
+  },
+});

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)
+              })
+            })
+          })
+        })
+      })
+    })
+  })
+})

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"
+}

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) => { ... })

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')

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
+    },
+  },
+});

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', ' ')
+        })
+      })
+    })
+  })
+})

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"
+}

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) => { ... })

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')

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
+    },
+  },
+});

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')
+            })
+          })
+        })
+      })
+    })
+  })
+})

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"
+}

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) => { ... })

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')