From a47a85851e1cd5d28830f8091220abd120299ba3 Mon Sep 17 00:00:00 2001 From: Parvin Sattorova Date: Fri, 20 Oct 2023 23:52:34 -0600 Subject: [PATCH] Add sypress test to contact component --- cypress/e2e/contactSection.cy.js | 39 +++++++++++++++ package-lock.json | 14 +++--- package.json | 2 +- src/Components/Contact/Contact.js | 2 +- src/Components/Homepage/Homepage.scss | 46 +++++++++--------- .../images/refugee-child-looking.png | Bin 6 files changed, 72 insertions(+), 31 deletions(-) create mode 100644 cypress/e2e/contactSection.cy.js rename "src/apollo-client/Screenshot 2023-10-14 at 3.04.00\342\200\257PM.png" => src/images/refugee-child-looking.png (100%) diff --git a/cypress/e2e/contactSection.cy.js b/cypress/e2e/contactSection.cy.js new file mode 100644 index 0000000..e8147f8 --- /dev/null +++ b/cypress/e2e/contactSection.cy.js @@ -0,0 +1,39 @@ +describe('ContactSection Component - Happy Path', () => { + + beforeEach(() => { + cy.visit('http://localhost:3000/'); + }); + + it('should display the main elements of the homepage', () => { + cy.get('.home-header').should('be.visible'); + cy.get('.nav-bar').should('be.visible'); + cy.get('[href="/contact"]').should('contain', 'helpful resources'); + cy.get('[href="/contact"]').click(); + }); + + it('should render the component correctly', () => { + cy.visit('http://localhost:3000/contact'); + + cy.location('pathname').should('eq', '/contact'); + cy.viewport(1280, 720); + cy.get('.weallhuman-img').should('be.visible'); + }); + + it('should navigate to the contact page from the homepage', () => { + cy.visit('http://localhost:3000'); + cy.get('.nav-bar').should('be.visible'); + cy.get('[href="/contact"]').click(); + cy.url().should('include', '/contact'); + }); +}); + +describe('ContactSection Component - Sad Path', () => { + + it('should handle missing image gracefully', () => { + cy.intercept('GET', '**/usa-custom.jpeg', { statusCode: 404 }); + cy.visit('http://localhost:3000/contact'); + cy.reload(); + cy.viewport(1280, 720); + cy.get('img[alt="usa-custom"]').should('be.visible'); + }); +}); diff --git a/package-lock.json b/package-lock.json index 21983dc..745bd9d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,7 +26,7 @@ }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "cypress": "^13.3.1" + "cypress": "^13.3.2" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -7129,9 +7129,9 @@ "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, "node_modules/cypress": { - "version": "13.3.1", - "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.3.1.tgz", - "integrity": "sha512-g4mJLZxYN+UAF2LMy3Znd4LBnUmS59Vynd81VES59RdW48Yt+QtR2cush3melOoVNz0PPbADpWr8DcUx6mif8Q==", + "version": "13.3.2", + "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.3.2.tgz", + "integrity": "sha512-ArLmZObcLC+xxCp7zJZZbhby9FUf5CueLej9dUM4+5j37FTS4iMSgHxQLDu01PydFUvDXcNoIVRCYrHHxD7Ybg==", "dev": true, "hasInstallScript": true, "dependencies": { @@ -24513,9 +24513,9 @@ "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, "cypress": { - "version": "13.3.1", - "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.3.1.tgz", - "integrity": "sha512-g4mJLZxYN+UAF2LMy3Znd4LBnUmS59Vynd81VES59RdW48Yt+QtR2cush3melOoVNz0PPbADpWr8DcUx6mif8Q==", + "version": "13.3.2", + "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.3.2.tgz", + "integrity": "sha512-ArLmZObcLC+xxCp7zJZZbhby9FUf5CueLej9dUM4+5j37FTS4iMSgHxQLDu01PydFUvDXcNoIVRCYrHHxD7Ybg==", "dev": true, "requires": { "@cypress/request": "^3.0.0", diff --git a/package.json b/package.json index fb5911c..4458445 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,6 @@ }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "cypress": "^13.3.1" + "cypress": "^13.3.2" } } diff --git a/src/Components/Contact/Contact.js b/src/Components/Contact/Contact.js index 151aa9b..fb1df97 100644 --- a/src/Components/Contact/Contact.js +++ b/src/Components/Contact/Contact.js @@ -8,7 +8,7 @@ const ContactSection = () => {
- Refugees + usa-custom
diff --git a/src/Components/Homepage/Homepage.scss b/src/Components/Homepage/Homepage.scss index 594fd36..e319186 100644 --- a/src/Components/Homepage/Homepage.scss +++ b/src/Components/Homepage/Homepage.scss @@ -25,11 +25,11 @@ $netflix-red: #E50914; display: flex; flex-direction: column; align-items: center; - justify-content: flex-start; + justify-content: flex-start; } .content-section { - padding-top: 30px; + padding-top: 30px; display: flex; align-items: flex-start; justify-content: space-between; @@ -44,12 +44,12 @@ $netflix-red: #E50914; display: flex; justify-content: center; align-items: center; - flex-direction: column; + flex-direction: column; - button.play-video, + button.play-video, button.hide-video { - margin-top: 15px; - } + margin-top: 15px; + } .media-content { width: 100%; @@ -57,10 +57,10 @@ $netflix-red: #E50914; justify-content: center; align-items: center; } - + .video-controls { margin-top: 20px; - text-align: center; + text-align: center; } .refugee-image-container { @@ -72,16 +72,16 @@ $netflix-red: #E50914; overflow: hidden; position: relative; } - + .refugees-img { margin-top: 30px; top: 0; left: 0; right: 0; bottom: 0; - max-width: 100%; + max-width: 100%; height: auto; - margin: auto; + margin: auto; display: block; box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1); border-radius: 8px; @@ -95,14 +95,14 @@ $netflix-red: #E50914; display: flex; flex-direction: column; justify-content: center; - align-items: center; + align-items: center; padding: 40px; .title-container { margin-bottom: 20px; background: linear-gradient(135deg, #e9f5fc, #fff); padding: 10px 20px; - border-radius: 8px; + border-radius: 10px; box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05); h2 { @@ -110,7 +110,7 @@ $netflix-red: #E50914; letter-spacing: 1px; text-transform: uppercase; text-align: center; - font-weight: 600; + font-weight: 600; font-size: 2.2rem; line-height: 1.3; } @@ -121,16 +121,18 @@ $netflix-red: #E50914; line-height: 1.6; color: rgba(0, 0, 0, 0.7); text-align: justify; - max-width: 80%; font-size: 1.1rem; color: #555; + max-width: 85%; + margin-bottom: 10px; + font-weight: 400; } } - .play-video, .hide-video { + .play-video, + .hide-video { margin-top: 15px; background-color: $netflix-red; - // background-color: #37b3fe; border-radius: 30px; color: #FFFFFF; border: none; @@ -154,9 +156,9 @@ $netflix-red: #E50914; position: relative; width: 100%; padding-bottom: 56.25%; - border-radius: 15px; + border-radius: 15px; overflow: hidden; - box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); } iframe { @@ -172,9 +174,9 @@ iframe { .content-section { flex-direction: column; - .media-side, .text-side { + .media-side, + .text-side { width: 100%; } } -} - +} \ No newline at end of file diff --git "a/src/apollo-client/Screenshot 2023-10-14 at 3.04.00\342\200\257PM.png" b/src/images/refugee-child-looking.png similarity index 100% rename from "src/apollo-client/Screenshot 2023-10-14 at 3.04.00\342\200\257PM.png" rename to src/images/refugee-child-looking.png