msb-public
/
50projects50days
mirror of https://github.com/bradtraversy/50projects50days
1
0
Code Issues Projects Releases Wiki Activity

Merge 31fde3457f into 236f68461b

Browse Source
pull/176/merge
Hammad Rashid 2 years ago committed by GitHub
parent 236f68461b 31fde3457f
commit 8bdd7ff1ec
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 316 additions and 0 deletions
Show Stats Download Patch File Download Diff File

9
feedback-ui-design/cypress.config.js
Unescape View File

@ -0,0 +1,9 @@
const { defineConfig } = require("cypress");
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
},
},
});

255
feedback-ui-design/cypress/e2e/test.spec.cy.js
Unescape View File

@ -0,0 +1,255 @@
describe('Project Feedback UI Design', () => {
beforeEach(() => {
cy.visit('http://127.0.0.1:5500/feedback-ui-design/index.html')
})
it('Opens the home page', () => {
})
it('The screen is visible', () => {
cy.get('body').should('be.visible')
})
context('Body', () => {
it('The body is visible', () => {
cy.get('body').should('be.visible')
})
it('The background color of the body is visible', () => {
cy.get('body').should('have.css', 'background-color', 'rgb(254, 249, 242)')
})
context('Content Container', () => {
it('The container is visible', () => {
cy.get('.panel-container').should('be.visible')
})
it('The container has the correct background color', () => {
cy.get('.panel-container').should('be.visible')
.should('have.css', 'background-color', 'rgb(255, 255, 255)')
})
context('Title Text', () => {
it('The text is visible', () => {
cy.get('strong').should('be.visible')
})
it('The text is correct', () => {
cy.get('strong').should('be.visible').invoke('text').then((text) => {
const expectedText = 'How satisfied are you with our customer support performance?'
expect(text.replace(/\s+/g, ' ').trim()).to.include(expectedText)
})
})
it('The text color is correct', () => {
cy.get('strong').should('be.visible')
.should('have.css', 'color', 'rgb(0, 0, 0)')
})
})
context('Emojis', () => {
it('The emojis section is visible', () => {
cy.xpath('/html/body/div[1]/div').should('be.visible')
})
context('Unsatisfied Emoji', () => {
it('The emoji section is visible', () => {
cy.xpath('/html/body/div[1]/div/div[1]').should('be.visible')
})
it('The emoji is visible', () => {
cy.xpath('/html/body/div[1]/div/div[1]/img').should('be.visible')
})
it('The text is visible', () => {
cy.xpath('/html/body/div[1]/div/div[1]/small').should('be.visible')
})
it('The text is correct', () => {
cy.xpath('/html/body/div[1]/div/div[1]/small').should('be.visible')
.should('have.text', 'Unhappy')
})
it('The text has correct color', () => {
cy.xpath('/html/body/div[1]/div/div[1]/small').should('be.visible')
.should('have.css', 'color', 'rgb(85, 85, 85)')
})
it('The emoji is clickable', () => {
cy.xpath('/html/body/div[1]/div/div[1]').should('be.visible').click()
})
})
context('Neutral Emoji', () => {
it('The emoji section is visible', () => {
cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible')
})
it('The emoji is visible', () => {
cy.xpath('/html/body/div[1]/div/div[2]/img').should('be.visible')
})
it('The text is visible', () => {
cy.xpath('/html/body/div[1]/div/div[2]/small').should('be.visible')
})
it('The text is correct', () => {
cy.xpath('/html/body/div[1]/div/div[2]/small').should('be.visible')
.should('have.text', 'Neutral')
})
it('The text has correct color', () => {
cy.xpath('/html/body/div[1]/div/div[2]/small').should('be.visible')
.should('have.css', 'color', 'rgb(85, 85, 85)')
})
it('The emoji is clickable', () => {
cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click()
})
})
context('Satisfied Emoji', () => {
it('The emoji section is visible', () => {
cy.xpath('/html/body/div[1]/div/div[3]').should('be.visible')
})
it('The emoji is visible', () => {
cy.xpath('/html/body/div[1]/div/div[3]/img').should('be.visible')
})
it('The text is visible', () => {
cy.xpath('/html/body/div[1]/div/div[3]/small').should('be.visible')
})
it('The text is correct', () => {
cy.xpath('/html/body/div[1]/div/div[3]/small').should('be.visible')
.should('have.text', 'Satisfied')
})
it('The text has correct color', () => {
cy.xpath('/html/body/div[1]/div/div[3]/small').should('be.visible')
.should('have.css', 'color', 'rgb(17, 17, 17)')
})
it('The emoji is clickable', () => {
cy.xpath('/html/body/div[1]/div/div[3]').should('be.visible').click()
})
})
})
context('Send Review Button', () => {
it('The button is visible', () => {
cy.xpath('//*[@id="send"]').should('be.visible')
})
it('The button background is correct', () => {
cy.xpath('//*[@id="send"]').should('be.visible')
.should('have.css', 'background-color', 'rgb(48, 45, 43)')
})
it('The button has text visible', () => {
cy.xpath('//*[@id="send"]').should('be.visible').invoke('text')
.should('include', 'Send Review')
})
})
context('Functionality', () => {
it('The functionality works', () => {
cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click()
cy.xpath('//*[@id="send"]').should('be.visible').click()
cy.xpath('//*[@id="panel"]').should('be.visible')
})
context('Panel Section', () => {
it('The panel is visible', () => {
cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click()
cy.xpath('//*[@id="send"]').should('be.visible').click()
cy.xpath('//*[@id="panel"]').should('be.visible')
})
context('Heart Icon', () => {
it('The icon is visible', () => {
cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click()
cy.xpath('//*[@id="send"]').should('be.visible').click()
cy.xpath('//*[@id="panel"]').should('be.visible')
cy.xpath('/html/body/div[1]/i').should('be.visible')
})
})
context('Text', () => {
context('Thank You Text', () => {
it('The text is visible', () => {
cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click()
cy.xpath('//*[@id="send"]').should('be.visible').click()
cy.xpath('//*[@id="panel"]').should('be.visible')
cy.xpath('/html/body/div[1]/strong[1]').should('be.visible')
})
it('The text has correct text', () => {
cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click()
cy.xpath('//*[@id="send"]').should('be.visible').click()
cy.xpath('//*[@id="panel"]').should('be.visible')
cy.xpath('/html/body/div[1]/strong[1]').should('be.visible')
.should('have.text', 'Thank You!')
})
it('The text color is correct', () => {
cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click()
cy.xpath('//*[@id="send"]').should('be.visible').click()
cy.xpath('//*[@id="panel"]').should('be.visible')
cy.xpath('/html/body/div[1]/strong[1]').should('be.visible').should('have.css', 'color', 'rgb(0, 0, 0)')
})
})
context('Feedback Text', () => {
it('The text is visible', () => {
cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click()
cy.xpath('//*[@id="send"]').should('be.visible').click()
cy.xpath('//*[@id="panel"]').should('be.visible')
cy.xpath('/html/body/div[1]/strong[2]').should('be.visible')
})
it('The text is correct', () => {
cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click()
cy.xpath('//*[@id="send"]').should('be.visible').click()
cy.xpath('//*[@id="panel"]').should('be.visible')
cy.xpath('/html/body/div[1]/strong[2]').should('be.visible').should('have.text', 'Feedback: Neutral')
})
it('The text has correct color', () => {
cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click()
cy.xpath('//*[@id="send"]').should('be.visible').click()
cy.xpath('//*[@id="panel"]').should('be.visible')
cy.xpath('/html/body/div[1]/strong[2]').should('be.visible').should('have.css', 'color', 'rgb(0, 0, 0)')
})
})
context('Use Feedback text', () => {
it('The text is visible', () => {
cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click()
cy.xpath('//*[@id="send"]').should('be.visible').click()
cy.xpath('//*[@id="panel"]').should('be.visible')
cy.xpath('/html/body/div[1]/p').should('be.visible')
})
it('The text is correct', () => {
cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click()
cy.xpath('//*[@id="send"]').should('be.visible').click()
cy.xpath('//*[@id="panel"]').should('be.visible')
cy.xpath('/html/body/div[1]/p').should('be.visible').should('have.text', 'We\'ll use your feedback to improve our customer support')
})
it('The text has correct color', () => {
cy.xpath('/html/body/div[1]/div/div[2]').should('be.visible').click()
cy.xpath('//*[@id="send"]').should('be.visible').click()
cy.xpath('//*[@id="panel"]').should('be.visible')
cy.xpath('/html/body/div[1]/p').should('be.visible').should('have.css', 'color', 'rgb(0, 0, 0)')
})
})
})
})
})
})
})
})

5
feedback-ui-design/cypress/fixtures/example.json
Unescape View File

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

27
feedback-ui-design/cypress/support/commands.js
Unescape View File

@ -0,0 +1,27 @@
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add('login', (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
import 'cypress-xpath';

20
feedback-ui-design/cypress/support/e2e.js
Unescape View File

@ -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')
Write Preview
Loading…
Cancel
Save