-
-
Notifications
You must be signed in to change notification settings - Fork 379
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[pre-commit.ci lite] apply automatic fixes
- Loading branch information
1 parent
a82f9c9
commit 2976dc3
Showing
3 changed files
with
89 additions
and
89 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,36 @@ | ||
| (function () { | ||
| const label = document.getElementById('theme-toggle-label'); | ||
| const toggle = document.getElementById('theme-toggle'); | ||
| const label = document.getElementById('theme-toggle-label') | ||
| const toggle = document.getElementById('theme-toggle') | ||
|
|
||
| function applyDarkMode(darkMode) { | ||
| document.body.classList.toggle('dark-mode', darkMode); | ||
| label.textContent = darkMode ? '🌙' : '☀️'; | ||
| localStorage.setItem('darkMode', darkMode ? 'true' : 'false'); | ||
| localStorage.setItem('darkmode-pref-set', 'true'); | ||
| function applyDarkMode (darkMode) { | ||
| document.body.classList.toggle('dark-mode', darkMode) | ||
| label.textContent = darkMode ? '🌙' : '☀️' | ||
| localStorage.setItem('darkMode', darkMode ? 'true' : 'false') | ||
| localStorage.setItem('darkmode-pref-set', 'true') | ||
|
|
||
| if (darkMode) { | ||
| label.classList.add('rotate'); | ||
| } else { | ||
| label.classList.remove('rotate'); | ||
| } | ||
| if (darkMode) { | ||
| label.classList.add('rotate') | ||
| } else { | ||
| label.classList.remove('rotate') | ||
| } | ||
| } | ||
|
|
||
| function toggleTheme() { | ||
| const darkMode = !document.body.classList.contains('dark-mode'); | ||
| applyDarkMode(darkMode); | ||
| toggle.checked = darkMode; | ||
| } | ||
| function toggleTheme () { | ||
| const darkMode = !document.body.classList.contains('dark-mode') | ||
| applyDarkMode(darkMode) | ||
| toggle.checked = darkMode | ||
| } | ||
|
|
||
| window.addEventListener('load', () => { | ||
| const darkModePref = localStorage.getItem('darkMode') === 'true'; | ||
| applyDarkMode(darkModePref); | ||
| toggle.checked = darkModePref; | ||
| window.addEventListener('load', () => { | ||
| const darkModePref = localStorage.getItem('darkMode') === 'true' | ||
| applyDarkMode(darkModePref) | ||
| toggle.checked = darkModePref | ||
|
|
||
| // Prevent the rotate animation on load | ||
| label.classList.add('notransition'); // Temporarily disable transition | ||
| label.offsetHeight; // Trigger reflow to apply the transition disable | ||
| label.classList.remove('notransition'); // Re-enable transitions | ||
| }); | ||
| // Prevent the rotate animation on load | ||
| label.classList.add('notransition') // Temporarily disable transition | ||
| label.offsetHeight // Trigger reflow to apply the transition disable | ||
| label.classList.remove('notransition') // Re-enable transitions | ||
| }) | ||
|
|
||
| label.onclick = toggleTheme; | ||
| })(); | ||
| label.onclick = toggleTheme | ||
| })() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,67 +1,67 @@ | ||
| import ThemeSwitchPage from '../pages/themeSwitchPage' | ||
|
|
||
| describe('Theme Switching Tests', () => { | ||
| it('A user can switch the theme to dark on each page', () => { | ||
| cy.wrap(['', 'challenge/challenge-0', 'stats', 'about']).each((endpoint) => { | ||
| cy.visit(`/${endpoint}`); | ||
| cy.get('body').then(($body) => { | ||
| if (!$body.hasClass('dark-mode')) { // Adjust this condition to check for light mode | ||
| cy.dataCy(ThemeSwitchPage.DARK_MODE_RADIO).click(); | ||
| } | ||
| }); | ||
| cy.get(ThemeSwitchPage.DARK_MODE).should('exist'); | ||
| cy.dataCy(ThemeSwitchPage.DARK_MODE_RADIO).click(); | ||
| }); | ||
| }); | ||
| it('A user can switch the theme to dark on each page', () => { | ||
| cy.wrap(['', 'challenge/challenge-0', 'stats', 'about']).each((endpoint) => { | ||
| cy.visit(`/${endpoint}`) | ||
| cy.get('body').then(($body) => { | ||
| if (!$body.hasClass('dark-mode')) { // Adjust this condition to check for light mode | ||
| cy.dataCy(ThemeSwitchPage.DARK_MODE_RADIO).click() | ||
| } | ||
| }) | ||
| cy.get(ThemeSwitchPage.DARK_MODE).should('exist') | ||
| cy.dataCy(ThemeSwitchPage.DARK_MODE_RADIO).click() | ||
| }) | ||
| }) | ||
|
|
||
| it('Dark mode persists on each page', () => { | ||
| cy.wrap(['', 'challenge/challenge-0', 'stats', 'about']).each((endpoint) => { | ||
| cy.visit(`/${endpoint}`); | ||
| cy.get('body').then(($body) => { | ||
| if (!$body.hasClass('dark-mode')) { | ||
| cy.dataCy(ThemeSwitchPage.DARK_MODE_RADIO).click(); | ||
| } | ||
| }); | ||
| cy.get(ThemeSwitchPage.DARK_MODE).should('exist'); | ||
| }); | ||
| }); | ||
| cy.wrap(['', 'challenge/challenge-0', 'stats', 'about']).each((endpoint) => { | ||
| cy.visit(`/${endpoint}`) | ||
| cy.get('body').then(($body) => { | ||
| if (!$body.hasClass('dark-mode')) { | ||
| cy.dataCy(ThemeSwitchPage.DARK_MODE_RADIO).click() | ||
| } | ||
| }) | ||
| cy.get(ThemeSwitchPage.DARK_MODE).should('exist') | ||
| }) | ||
| }) | ||
|
|
||
| it('A user can switch the theme to dark on each page', () => { | ||
| cy.wrap(['', 'challenge/challenge-0', 'stats', 'about']).each((endpoint) => { | ||
| cy.visit(`/${endpoint}`); | ||
| cy.get('body').then(($body) => { | ||
| if ($body.hasClass('dark-mode')) { // Adjust this condition to check for light mode | ||
| cy.dataCy(ThemeSwitchPage.DARK_MODE_RADIO).click(); | ||
| } | ||
| }); | ||
| cy.get(ThemeSwitchPage.DARK_MODE).should('not.exist'); | ||
| cy.dataCy(ThemeSwitchPage.DARK_MODE_RADIO).click(); | ||
| }); | ||
| }); | ||
| it('A user can switch the theme to dark on each page', () => { | ||
| cy.wrap(['', 'challenge/challenge-0', 'stats', 'about']).each((endpoint) => { | ||
| cy.visit(`/${endpoint}`) | ||
| cy.get('body').then(($body) => { | ||
| if ($body.hasClass('dark-mode')) { // Adjust this condition to check for light mode | ||
| cy.dataCy(ThemeSwitchPage.DARK_MODE_RADIO).click() | ||
| } | ||
| }) | ||
| cy.get(ThemeSwitchPage.DARK_MODE).should('not.exist') | ||
| cy.dataCy(ThemeSwitchPage.DARK_MODE_RADIO).click() | ||
| }) | ||
| }) | ||
|
|
||
| it('A user can switch the theme to dark on each page', () => { | ||
| cy.wrap(['', 'challenge/challenge-0', 'stats', 'about']).each((endpoint) => { | ||
| cy.visit(`/${endpoint}`); | ||
| cy.get('body').then(($body) => { | ||
| if ($body.hasClass('dark-mode')) { // Adjust this condition to check for light mode | ||
| cy.dataCy(ThemeSwitchPage.DARK_MODE_RADIO).click(); | ||
| } | ||
| }); | ||
| cy.get(ThemeSwitchPage.DARK_MODE).should('not.exist'); | ||
| }); | ||
| }); | ||
| it('A user can switch the theme to dark on each page', () => { | ||
| cy.wrap(['', 'challenge/challenge-0', 'stats', 'about']).each((endpoint) => { | ||
| cy.visit(`/${endpoint}`) | ||
| cy.get('body').then(($body) => { | ||
| if ($body.hasClass('dark-mode')) { // Adjust this condition to check for light mode | ||
| cy.dataCy(ThemeSwitchPage.DARK_MODE_RADIO).click() | ||
| } | ||
| }) | ||
| cy.get(ThemeSwitchPage.DARK_MODE).should('not.exist') | ||
| }) | ||
| }) | ||
|
|
||
| it('A user can switch theme to dark and back to light on each page', () => { | ||
| cy.wrap(['', 'challenge/challenge-0', 'stats', 'about']).each((endpoint) => { | ||
| cy.visit(`/${endpoint}`); | ||
| cy.get('body').then(($body) => { | ||
| if (!$body.hasClass('dark-mode')) { // Adjust this condition to check for light mode | ||
| cy.dataCy(ThemeSwitchPage.DARK_MODE_RADIO).click(); | ||
| } | ||
| }); | ||
| cy.get(ThemeSwitchPage.DARK_MODE).should('exist'); | ||
| cy.dataCy(ThemeSwitchPage.DARK_MODE_RADIO).click(); | ||
| cy.get(ThemeSwitchPage.DARK_MODE).should('not.exist'); | ||
| }); | ||
| }); | ||
| }); | ||
| cy.wrap(['', 'challenge/challenge-0', 'stats', 'about']).each((endpoint) => { | ||
| cy.visit(`/${endpoint}`) | ||
| cy.get('body').then(($body) => { | ||
| if (!$body.hasClass('dark-mode')) { // Adjust this condition to check for light mode | ||
| cy.dataCy(ThemeSwitchPage.DARK_MODE_RADIO).click() | ||
| } | ||
| }) | ||
| cy.get(ThemeSwitchPage.DARK_MODE).should('exist') | ||
| cy.dataCy(ThemeSwitchPage.DARK_MODE_RADIO).click() | ||
| cy.get(ThemeSwitchPage.DARK_MODE).should('not.exist') | ||
| }) | ||
| }) | ||
| }) |