From c89768b87f6d9f2aa6b227908d0d125ac4bb6a81 Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Mon, 18 Dec 2023 14:15:56 +0500
Subject: [PATCH] Update the code for testing animated navigation

---
 .../cypress/e2e/test1.spec.cy.js              | 58 ++++++++++++++++++-
 animated-navigation/style.css                 |  2 +-
 2 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/animated-navigation/cypress/e2e/test1.spec.cy.js b/animated-navigation/cypress/e2e/test1.spec.cy.js
index 322992c..8a2a8c5 100644
--- a/animated-navigation/cypress/e2e/test1.spec.cy.js
+++ b/animated-navigation/cypress/e2e/test1.spec.cy.js
@@ -1,5 +1,57 @@
-describe('template spec', () => {
-  it('passes', () => {
-    cy.visit('https://example.cypress.io')
+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/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%,