From 0bc64b7d941f76052b121c6b39a685df5e3cf441 Mon Sep 17 00:00:00 2001
From: Alvaro Perez Pintado <122454645+AlvaroNW@users.noreply.github.com>
Date: Thu, 15 Jun 2023 18:05:44 +0200
Subject: [PATCH] testing

---
 cypress/component/themeToggle.cy.tsx | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 cypress/component/themeToggle.cy.tsx

diff --git a/cypress/component/themeToggle.cy.tsx b/cypress/component/themeToggle.cy.tsx
new file mode 100644
index 0000000..c583362
--- /dev/null
+++ b/cypress/component/themeToggle.cy.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import ThemeSwitcher from "../../components/ThemeSwitcher";
+import Home from "@/app/page";
+import useDarkMode from '@/hooks/useDarkMode';
+import '../../app/globals.css';
+
+describe('ThemeSwitcher component', () => {
+  it('should toggle between light and dark mode', () => {
+    cy.mount(<Home />);
+    cy.mount(<ThemeSwitcher />);
+    cy.wait(100);
+
+    // checking that the toggle is there and light mode is active
+    cy.get('.toggle').should('exist');
+    cy.get('.toggle').should(($toggle) => {
+        const backgroundImage = $toggle.css('background-image');
+        expect(backgroundImage).to.include('linear-gradient(rgb(0, 255, 255), rgb(135, 206, 235)');
+    });
+    // checking that the toggle is clickable and dark mode is active
+    cy.get('.toggle').click();
+    cy.get('.toggle-dark').should('exist');
+    cy.get('.toggle-dark').should(($toggle) => {
+        const backgroundImage = $toggle.css('background-image');
+        expect(backgroundImage).to.include('linear-gradient(rgb(25, 25, 112), rgb(102, 51, 153)');
+    });
+  });
+});
\ No newline at end of file