Write tests using xpath and locator elements

theme-clock/cypress/e2e/test1.spec.cy.js

@@ -27,6 +27,63 @@ describe('Project Theme Clock', () => {
         cy.get('.clock-container').should('be.visible')
       })
 
+      context('Dark Mode button', () => {
+        it('The button is visible', () => {
+          cy.get('.toggle').should('be.visible')
+        })
+
+        it('The button has correct background color', () => {
+          cy.get('.toggle').should('be.visible').should('have.css', 'background-color', 'rgb(0, 0, 0)')
+        })
+
+        it('The button should have correct text', () => {
+          cy.get('.toggle').should('be.visible').should('have.text', 'Dark mode')
+        })
+
+        it('The button is clickable', () => {
+          cy.get('.toggle').should('be.visible').click()
+        })
+
+        context('Dark mode button toggle', () => {
+          it('The button is clickable', () => {
+            cy.get('.toggle').should('be.visible').click()
+            cy.get('.toggle').should('be.visible').should('have.text', 'Light mode')
+          })
+
+          it('When the button is clicked, the background color turns black', () => {
+            cy.get('.toggle').should('be.visible').click()
+            cy.xpath('//html[@class="dark"]').should('be.visible')
+          })
+
+          it('The color of the button is correct', () => {
+            cy.get('.toggle').should('be.visible').click()
+            cy.xpath('//html[@class="dark"]').should('be.visible')
+            cy.get('.toggle').should('have.css', 'background-color', 'rgb(255, 255, 255)')
+          })
+
+          it('The text time has white color', () => {
+            cy.get('.toggle').should('be.visible').click()
+            const currentTime = new Date()
+            var hours = currentTime.getHours()
+            const minutes = currentTime.getMinutes()
+            const meridiem = hours >= 12 ? 'PM' : 'AM'
+  
+            hours = hours % 12 || 12
+            // Format minutes to have leading zero if less than 10
+            const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes
+  
+            const formattedTime = `${hours}:${formattedMinutes} ${meridiem}`
+  
+            cy.get('.time').should('have.text', formattedTime).should('have.css', 'color', 'rgb(255, 255, 255)')
+          })
+
+          it('The span circle color is white', () => {
+            cy.get('.toggle').should('be.visible').click()
+            cy.get('.circle').should('have.css', 'background-color', 'rgb(255, 255, 255)')
+          })
+        })
+      })
+
       context('Clock', () => {
         it('The clock container has the clock displayed', () => {
           cy.get('.clock-container .clock').should('be.visible')
@@ -62,11 +119,13 @@ describe('Project Theme Clock', () => {
             const minutes = currentTime.getMinutes()
             const meridiem = hours >= 12 ? 'PM' : 'AM'
   
-            hours = hours % 12 || 12;
+            hours = hours % 12 || 12
+            // Format minutes to have leading zero if less than 10
+            const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes
   
-            const formattedTime = `${hours}:${minutes} ${meridiem}`;
+            const formattedTime = `${hours}:${formattedMinutes} ${meridiem}`
   
-            cy.get('.time').should('have.text', formattedTime);
+            cy.get('.time').should('have.text', formattedTime)
           })
         })
 
@@ -86,6 +145,10 @@ describe('Project Theme Clock', () => {
 
             cy.get('.date').should('have.text', `${days[day]}, ${months[month]} ${date}`);
           })
+
+          it('The span circle color is black', () => {
+            cy.get('.circle').should('have.css', 'background-color', 'rgb(0, 0, 0)')
+          })
         })
       })
     })

theme-clock/cypress/support/commands.js

@@ -22,4 +22,6 @@
 //
 //
 // -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+import 'cypress-xpath';