passing tests locally

Author: a2937

cypress/e2e/english/landing/landing.cy.ts

@@ -51,24 +51,29 @@ describe('Landing (Hashnode sourced)', () => {
 
     it('The dark mode button should be able to change the theme to dark mode from light mode', function () {
       visit(false);
+      cy.get(selectors.toggleDropDownMenuButton).click();
       cy.get(selectors.darkModeButton).click();
 
       cy.get('body', { timeout: 1000 }).should('have.class', 'dark-mode');
     });
 
     it('The dark mode button should be able to change the theme to light mode from dark mode', function () {
       visit(true);
+      cy.get(selectors.toggleDropDownMenuButton).click();
       cy.get(selectors.darkModeButton).click();
 
       cy.get('body', { timeout: 1000 }).should('not.have.class', 'dark-mode');
     });
 
     it('The theme should be set to dark and update the value in localStorage to dark', function () {
-      visit(false);
+      cy.clearLocalStorage();
+      cy.clearCookies();
+      cy.get(selectors.toggleDropDownMenuButton).click();
       cy.get(selectors.darkModeButton).click();
       cy.window().then(win => {
         expect(win.localStorage.getItem('theme')).to.equal('dark');
       });
+      visit(false);
     });
 
     // Because all templates readers see use `default.njk` as a base,

src/_includes/assets/js/dark-mode.js

@@ -4,6 +4,7 @@ function loadDarkModePreference() {
     window.matchMedia('(prefers-color-scheme: dark)')?.matches ||
     theme == 'dark'
   ) {
+    localStorage.setItem('theme', 'dark');
     document.body.classList.add('dark-mode');
   }
 }
@@ -14,5 +15,10 @@ document.addEventListener('DOMContentLoaded', () => {
     .getElementById('toggle-dark-mode')
     .addEventListener('click', function () {
       document.body.classList.toggle('dark-mode');
+      if (document.body.classList.contains('dark-mode')) {
+        localStorage.setItem('theme', 'dark');
+      } else {
+        localStorage.setItem('theme', 'light');
+      }
     });
 });

src/_includes/partials/site-nav.njk

@@ -18,8 +18,7 @@
                   rel="noopener noreferrer"
                   href="{% t 'links:forum' %}"
                   target="_blank"
-                  data-test-label="forum-button"
-              >{% t 'buttons.forum' %}</a></li>
+                  data-test-label="forum-button" >{% t 'buttons.forum' %}</a></li>
               <li><a
                   class="nav-link nav-link-flex"
                   id="nav-learn"
@@ -28,20 +27,21 @@
                   target="_blank"
                   data-test-label="learn-button"
               >{% t 'buttons.learn' %}</a></li>
+            <li><a
+                class="nav-link nav-link-flex"
+                id="toggle-dark-mode"
+                data-test-label="dark-mode-button">
+            {% t 'buttons.toggle-dark-mode' %}</a></li>
             </ul>
             <a
                 class="toggle-button-nav"
                 id="nav-donate"
                 rel="noopener noreferrer"
                 href="{% t 'links:donate' %}"
                 target="_blank"
-                data-test-label="donate-button"
-          >{% t 'buttons.donate' %}</a>
-          <li
-              class="nav-link nav-link-flex"
-              id="toggle-dark-mode"
-              data-test-label="dark-mode-button"
-          >{% t 'buttons.toggle-dark-mode' %}</li>
+                data-test-label="donate-button">
+                {% t 'buttons.donate' %}
+            </a>
         </div>
 
     </div>