feat: Update public portal colors with new design (#8230)
This commit is contained in:
Sivin Varghese
@@ -1,15 +1,4 @@
|
||||
import {
|
||||
InitializationHelpers,
|
||||
generatePortalBgColor,
|
||||
generatePortalBg,
|
||||
generateGradientToBottom,
|
||||
setPortalStyles,
|
||||
setPortalClass,
|
||||
updateThemeStyles,
|
||||
toggleAppearanceDropdown,
|
||||
updateURLParameter,
|
||||
removeURLParameter,
|
||||
} from '../portalHelpers';
|
||||
import { InitializationHelpers } from '../portalHelpers';
|
||||
|
||||
describe('#navigateToLocalePage', () => {
|
||||
it('returns correct cookie name', () => {
|
||||
@@ -32,303 +21,3 @@ describe('#navigateToLocalePage', () => {
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Theme Functions', () => {
|
||||
describe('#generatePortalBgColor', () => {
|
||||
it('returns mixed color for dark theme', () => {
|
||||
const result = generatePortalBgColor('#FF5733', 'dark');
|
||||
expect(result).toBe('color-mix(in srgb, #FF5733 20%, black)');
|
||||
});
|
||||
|
||||
it('returns mixed color for light theme', () => {
|
||||
const result = generatePortalBgColor('#FF5733', 'light');
|
||||
expect(result).toBe('color-mix(in srgb, #FF5733 20%, white)');
|
||||
});
|
||||
});
|
||||
|
||||
describe('#generatePortalBg', () => {
|
||||
it('returns background for dark theme', () => {
|
||||
const result = generatePortalBg('#FF5733', 'dark');
|
||||
expect(result).toBe(
|
||||
'background: url(/assets/images/hc/hexagon-dark.svg) color-mix(in srgb, #FF5733 20%, black)'
|
||||
);
|
||||
});
|
||||
|
||||
it('returns background for light theme', () => {
|
||||
const result = generatePortalBg('#FF5733', 'light');
|
||||
expect(result).toBe(
|
||||
'background: url(/assets/images/hc/hexagon-light.svg) color-mix(in srgb, #FF5733 20%, white)'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#generateGradientToBottom', () => {
|
||||
it('returns gradient for dark theme', () => {
|
||||
const result = generateGradientToBottom('dark');
|
||||
expect(result).toBe(
|
||||
'background-image: linear-gradient(to bottom, transparent, #151718)'
|
||||
);
|
||||
});
|
||||
|
||||
it('returns gradient for light theme', () => {
|
||||
const result = generateGradientToBottom('light');
|
||||
expect(result).toBe(
|
||||
'background-image: linear-gradient(to bottom, transparent, white)'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#setPortalStyles', () => {
|
||||
let mockPortalBgDiv;
|
||||
let mockPortalBgGradientDiv;
|
||||
|
||||
beforeEach(() => {
|
||||
// Mocking portal background div
|
||||
mockPortalBgDiv = document.createElement('div');
|
||||
mockPortalBgDiv.id = 'portal-bg';
|
||||
document.body.appendChild(mockPortalBgDiv);
|
||||
|
||||
// Mocking portal background gradient div
|
||||
mockPortalBgGradientDiv = document.createElement('div');
|
||||
mockPortalBgGradientDiv.id = 'portal-bg-gradient';
|
||||
document.body.appendChild(mockPortalBgGradientDiv);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
it('sets styles for portal background based on theme', () => {
|
||||
window.portalConfig = { portalColor: '#FF5733' };
|
||||
|
||||
setPortalStyles('dark');
|
||||
const expectedPortalBgStyle =
|
||||
'background: url(/assets/images/hc/hexagon-dark.svg) color-mix(in srgb, #FF5733 20%, black)';
|
||||
const expectedGradientStyle =
|
||||
'background-image: linear-gradient(to bottom, transparent, #151718)';
|
||||
|
||||
expect(mockPortalBgDiv.getAttribute('style')).toBe(expectedPortalBgStyle);
|
||||
expect(mockPortalBgGradientDiv.getAttribute('style')).toBe(
|
||||
expectedGradientStyle
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#setPortalClass', () => {
|
||||
let mockPortalDiv;
|
||||
|
||||
beforeEach(() => {
|
||||
// Mocking portal div
|
||||
mockPortalDiv = document.createElement('div');
|
||||
mockPortalDiv.id = 'portal';
|
||||
mockPortalDiv.classList.add('light');
|
||||
document.body.appendChild(mockPortalDiv);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
it('sets portal class to "dark" based on theme', () => {
|
||||
setPortalClass('dark');
|
||||
expect(mockPortalDiv.classList.contains('dark')).toBe(true);
|
||||
expect(mockPortalDiv.classList.contains('light')).toBe(false);
|
||||
});
|
||||
|
||||
it('sets portal class to "light" based on theme', () => {
|
||||
setPortalClass('light');
|
||||
expect(mockPortalDiv.classList.contains('light')).toBe(true);
|
||||
expect(mockPortalDiv.classList.contains('dark')).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('toggleAppearanceDropdown', () => {
|
||||
it('sets dropdown display to flex if initially none', () => {
|
||||
document.body.innerHTML = `<div id="appearance-dropdown" style="display: none;"></div>`;
|
||||
toggleAppearanceDropdown();
|
||||
const dropdown = document.getElementById('appearance-dropdown');
|
||||
expect(dropdown.style.display).toBe('flex');
|
||||
});
|
||||
|
||||
it('sets dropdown display to none if initially flex', () => {
|
||||
document.body.innerHTML = `<div id="appearance-dropdown" style="display: flex;"></div>`;
|
||||
toggleAppearanceDropdown();
|
||||
const dropdown = document.getElementById('appearance-dropdown');
|
||||
expect(dropdown.style.display).toBe('none');
|
||||
});
|
||||
|
||||
it('does nothing if dropdown element does not exist', () => {
|
||||
document.body.innerHTML = ``;
|
||||
expect(() => toggleAppearanceDropdown()).not.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe('updateURLParameter', () => {
|
||||
it('updates a given parameter with a new value', () => {
|
||||
const originalUrl = 'http://example.com?param=oldValue';
|
||||
delete window.location;
|
||||
window.location = new URL(originalUrl);
|
||||
|
||||
const updatedUrl = updateURLParameter('param', 'newValue');
|
||||
expect(updatedUrl).toContain('param=newValue');
|
||||
});
|
||||
|
||||
it('adds a new parameter if it does not exist', () => {
|
||||
const originalUrl = 'http://example.com';
|
||||
delete window.location;
|
||||
window.location = new URL(originalUrl);
|
||||
|
||||
const updatedUrl = updateURLParameter('newParam', 'value');
|
||||
expect(updatedUrl).toContain('newParam=value');
|
||||
});
|
||||
});
|
||||
|
||||
describe('removeURLParameter', () => {
|
||||
it('removes an existing parameter', () => {
|
||||
const originalUrl = 'http://example.com?param=value';
|
||||
delete window.location;
|
||||
window.location = new URL(originalUrl);
|
||||
|
||||
const updatedUrl = removeURLParameter('param');
|
||||
expect(updatedUrl).not.toContain('param=value');
|
||||
});
|
||||
|
||||
it('does nothing if the parameter does not exist', () => {
|
||||
const originalUrl = 'http://example.com/';
|
||||
delete window.location;
|
||||
window.location = new URL(originalUrl);
|
||||
|
||||
const updatedUrl = removeURLParameter('param');
|
||||
expect(updatedUrl).toBe(originalUrl);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#updateThemeStyles', () => {
|
||||
let mockPortalDiv;
|
||||
let mockPortalBgDiv;
|
||||
let mockPortalBgGradientDiv;
|
||||
|
||||
beforeEach(() => {
|
||||
// Mocking portal div
|
||||
mockPortalDiv = document.createElement('div');
|
||||
mockPortalDiv.id = 'portal';
|
||||
document.body.appendChild(mockPortalDiv);
|
||||
|
||||
// Mocking portal background div
|
||||
mockPortalBgDiv = document.createElement('div');
|
||||
mockPortalBgDiv.id = 'portal-bg';
|
||||
document.body.appendChild(mockPortalBgDiv);
|
||||
|
||||
// Mocking portal background gradient div
|
||||
mockPortalBgGradientDiv = document.createElement('div');
|
||||
mockPortalBgGradientDiv.id = 'portal-bg-gradient';
|
||||
document.body.appendChild(mockPortalBgGradientDiv);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
it('updates theme styles based on theme', () => {
|
||||
window.portalConfig = { portalColor: '#FF5733' };
|
||||
|
||||
updateThemeStyles('dark');
|
||||
|
||||
const expectedPortalBgStyle =
|
||||
'background: url(/assets/images/hc/hexagon-dark.svg) color-mix(in srgb, #FF5733 20%, black)';
|
||||
const expectedGradientStyle =
|
||||
'background-image: linear-gradient(to bottom, transparent, #151718)';
|
||||
|
||||
expect(mockPortalDiv.classList.contains('dark')).toBe(true);
|
||||
expect(mockPortalBgDiv.getAttribute('style')).toBe(expectedPortalBgStyle);
|
||||
expect(mockPortalBgGradientDiv.getAttribute('style')).toBe(
|
||||
expectedGradientStyle
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#initializeTheme', () => {
|
||||
let mockPortalDiv;
|
||||
|
||||
beforeEach(() => {
|
||||
mockPortalDiv = document.createElement('div');
|
||||
mockPortalDiv.id = 'portal';
|
||||
document.body.appendChild(mockPortalDiv);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
it('updates theme based on system preferences', () => {
|
||||
const mediaQueryList = {
|
||||
matches: true,
|
||||
addEventListener: jest.fn(),
|
||||
};
|
||||
window.matchMedia = jest.fn().mockReturnValue(mediaQueryList);
|
||||
window.portalConfig = { theme: 'system' };
|
||||
|
||||
InitializationHelpers.initializeTheme();
|
||||
|
||||
expect(mediaQueryList.addEventListener).toBeCalledWith(
|
||||
'change',
|
||||
expect.any(Function)
|
||||
);
|
||||
expect(mockPortalDiv.classList.contains('dark')).toBe(true);
|
||||
});
|
||||
|
||||
it('does not update theme if themeFromServer is not "system"', () => {
|
||||
const mediaQueryList = {
|
||||
matches: true,
|
||||
addEventListener: jest.fn(),
|
||||
};
|
||||
window.matchMedia = jest.fn().mockReturnValue(mediaQueryList);
|
||||
window.portalConfig = { theme: 'dark' };
|
||||
|
||||
InitializationHelpers.initializeTheme();
|
||||
|
||||
expect(mediaQueryList.addEventListener).not.toBeCalled();
|
||||
expect(mockPortalDiv.classList.contains('dark')).toBe(false);
|
||||
expect(mockPortalDiv.classList.contains('light')).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('initializeToggleButton', () => {
|
||||
it('adds a click listener to the toggle button', () => {
|
||||
document.body.innerHTML = `<button id="toggle-appearance"></button>`;
|
||||
InitializationHelpers.initializeToggleButton();
|
||||
const toggleButton = document.getElementById('toggle-appearance');
|
||||
expect(toggleButton.onclick).toBeDefined();
|
||||
});
|
||||
|
||||
it('does nothing if the toggle button is not present', () => {
|
||||
document.body.innerHTML = ``;
|
||||
expect(() =>
|
||||
InitializationHelpers.initializeToggleButton()
|
||||
).not.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe('initializeThemeSwitchButtons', () => {
|
||||
it('adds click listeners to theme switch buttons', () => {
|
||||
document.body.innerHTML = `<div id="appearance-dropdown"><button data-theme="dark"></button><button data-theme="light"></button></div>`;
|
||||
InitializationHelpers.initializeThemeSwitchButtons();
|
||||
const buttons = document.querySelectorAll('button[data-theme]');
|
||||
buttons.forEach(button => expect(button.onclick).toBeDefined());
|
||||
});
|
||||
|
||||
it('does nothing if theme switch buttons are not present', () => {
|
||||
document.body.innerHTML = ``;
|
||||
expect(() =>
|
||||
InitializationHelpers.initializeThemeSwitchButtons()
|
||||
).not.toThrow();
|
||||
});
|
||||
|
||||
it('does nothing if appearance-dropdown is not present', () => {
|
||||
document.body.innerHTML = ``;
|
||||
expect(() =>
|
||||
InitializationHelpers.initializeThemeSwitchButtons()
|
||||
).not.toThrow();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
279
app/javascript/portal/specs/portalTheme.spec.js
Normal file
279
app/javascript/portal/specs/portalTheme.spec.js
Normal file
@@ -0,0 +1,279 @@
|
||||
import {
|
||||
setPortalHoverColor,
|
||||
removeQueryParamsFromUrl,
|
||||
updateThemeInHeader,
|
||||
switchTheme,
|
||||
initializeThemeSwitchButtons,
|
||||
initializeToggleButton,
|
||||
initializeMediaQueryListener,
|
||||
initializeTheme,
|
||||
} from '../portalThemeHelper.js';
|
||||
import { adjustColorForContrast } from '../../shared/helpers/colorHelper.js';
|
||||
|
||||
describe('portalThemeHelper', () => {
|
||||
let themeToggleButton;
|
||||
let appearanceDropdown;
|
||||
|
||||
beforeEach(() => {
|
||||
themeToggleButton = document.createElement('div');
|
||||
themeToggleButton.id = 'toggle-appearance';
|
||||
document.body.appendChild(themeToggleButton);
|
||||
|
||||
appearanceDropdown = document.createElement('div');
|
||||
appearanceDropdown.id = 'appearance-dropdown';
|
||||
document.body.appendChild(appearanceDropdown);
|
||||
|
||||
window.matchMedia = jest.fn().mockImplementation(query => ({
|
||||
matches: query === '(prefers-color-scheme: dark)',
|
||||
addEventListener: jest.fn(),
|
||||
removeEventListener: jest.fn(),
|
||||
}));
|
||||
|
||||
window.portalConfig = { portalColor: '#ff5733' };
|
||||
document.documentElement.style.setProperty = jest.fn();
|
||||
document.documentElement.classList.remove('dark', 'light');
|
||||
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
themeToggleButton.remove();
|
||||
appearanceDropdown.remove();
|
||||
delete window.portalConfig;
|
||||
document.documentElement.style.setProperty.mockRestore();
|
||||
document.documentElement.classList.remove('dark', 'light');
|
||||
localStorage.clear();
|
||||
});
|
||||
|
||||
describe('#setPortalHoverColor', () => {
|
||||
it('should apply dark hover color in dark theme', () => {
|
||||
const hoverColor = adjustColorForContrast('#ff5733', '#151718');
|
||||
setPortalHoverColor('dark');
|
||||
expect(document.documentElement.style.setProperty).toHaveBeenCalledWith(
|
||||
'--dynamic-hover-color',
|
||||
hoverColor
|
||||
);
|
||||
});
|
||||
|
||||
it('should apply light hover color in light theme', () => {
|
||||
const hoverColor = adjustColorForContrast('#ff5733', '#ffffff');
|
||||
setPortalHoverColor('light');
|
||||
expect(document.documentElement.style.setProperty).toHaveBeenCalledWith(
|
||||
'--dynamic-hover-color',
|
||||
hoverColor
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#removeQueryParamsFromUrl', () => {
|
||||
let originalLocation;
|
||||
|
||||
beforeEach(() => {
|
||||
originalLocation = window.location;
|
||||
delete window.location;
|
||||
window.location = new URL('http://localhost:3000/');
|
||||
window.history.replaceState = jest.fn();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
window.location = originalLocation;
|
||||
});
|
||||
|
||||
it('should not remove query params if theme is not in the URL', () => {
|
||||
removeQueryParamsFromUrl();
|
||||
expect(window.history.replaceState).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should remove theme query param from the URL', () => {
|
||||
window.location = new URL(
|
||||
'http://localhost:3000/?theme=light&show_plain_layout=true'
|
||||
);
|
||||
removeQueryParamsFromUrl('theme');
|
||||
expect(window.history.replaceState).toHaveBeenCalledWith(
|
||||
{},
|
||||
'',
|
||||
'http://localhost:3000/?show_plain_layout=true'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#updateThemeInHeader', () => {
|
||||
beforeEach(() => {
|
||||
themeToggleButton.innerHTML = `
|
||||
<div class="theme-button" data-theme="light"></div>
|
||||
<div class="theme-button" data-theme="dark"></div>
|
||||
<div class="theme-button" data-theme="system"></div>
|
||||
`;
|
||||
});
|
||||
|
||||
it('should not update header if theme toggle button is not found', () => {
|
||||
themeToggleButton.remove();
|
||||
updateThemeInHeader('light');
|
||||
expect(document.querySelector('.theme-button')).toBeNull();
|
||||
});
|
||||
|
||||
it('should show the theme button for the selected theme', () => {
|
||||
updateThemeInHeader('light');
|
||||
const lightButton = themeToggleButton.querySelector(
|
||||
'.theme-button[data-theme="light"]'
|
||||
);
|
||||
expect(lightButton.classList).toContain('flex');
|
||||
});
|
||||
});
|
||||
|
||||
describe('#switchTheme', () => {
|
||||
it('should set theme to system theme and update classes', () => {
|
||||
window.matchMedia = jest.fn().mockReturnValue({ matches: true });
|
||||
switchTheme('system');
|
||||
expect(localStorage.theme).toBeUndefined();
|
||||
expect(document.documentElement.classList).toContain('dark');
|
||||
});
|
||||
|
||||
it('should set theme to light theme and update classes', () => {
|
||||
switchTheme('light');
|
||||
expect(localStorage.theme).toBe('light');
|
||||
expect(document.documentElement.classList).toContain('light');
|
||||
});
|
||||
|
||||
it('should set theme to dark theme and update classes', () => {
|
||||
switchTheme('dark');
|
||||
expect(localStorage.theme).toBe('dark');
|
||||
expect(document.documentElement.classList).toContain('dark');
|
||||
});
|
||||
});
|
||||
|
||||
describe('#initializeThemeSwitchButtons', () => {
|
||||
beforeEach(() => {
|
||||
appearanceDropdown.innerHTML = `
|
||||
<button data-theme="light"><span class="check-mark-icon light-theme"></span></button>
|
||||
<button data-theme="dark"><span class="check-mark-icon dark-theme"></span></button>
|
||||
<button data-theme="system"><span class="check-mark-icon system-theme"></span></button>
|
||||
`;
|
||||
});
|
||||
|
||||
it('does nothing if the appearance dropdown is not found', () => {
|
||||
appearanceDropdown.remove();
|
||||
expect(appearanceDropdown.dataset.currentTheme).toBeUndefined();
|
||||
});
|
||||
it('should set current theme to system if no theme in localStorage', () => {
|
||||
localStorage.removeItem('theme');
|
||||
initializeThemeSwitchButtons();
|
||||
expect(appearanceDropdown.dataset.currentTheme).toBe('system');
|
||||
});
|
||||
|
||||
it('sets the current theme to the light theme', () => {
|
||||
localStorage.theme = 'light';
|
||||
appearanceDropdown.dataset.currentTheme = 'light';
|
||||
initializeThemeSwitchButtons();
|
||||
expect(appearanceDropdown.dataset.currentTheme).toBe('light');
|
||||
});
|
||||
|
||||
it('sets the current theme to the dark theme', () => {
|
||||
localStorage.theme = 'dark';
|
||||
appearanceDropdown.dataset.currentTheme = 'dark';
|
||||
initializeThemeSwitchButtons();
|
||||
expect(appearanceDropdown.dataset.currentTheme).toBe('dark');
|
||||
});
|
||||
});
|
||||
|
||||
describe('#initializeToggleButton', () => {
|
||||
it('does nothing if the theme toggle button is not found', () => {
|
||||
themeToggleButton.remove();
|
||||
initializeToggleButton();
|
||||
expect(appearanceDropdown.style.display).toBe('');
|
||||
});
|
||||
|
||||
it('toggles the appearance dropdown show/hide', () => {
|
||||
themeToggleButton.click();
|
||||
appearanceDropdown.style.display = 'flex';
|
||||
expect(appearanceDropdown.style.display).toBe('flex');
|
||||
themeToggleButton.click();
|
||||
appearanceDropdown.style.display = 'none';
|
||||
expect(appearanceDropdown.style.display).toBe('none');
|
||||
});
|
||||
});
|
||||
|
||||
describe('#initializeMediaQueryListener', () => {
|
||||
let mediaQuery;
|
||||
|
||||
beforeEach(() => {
|
||||
mediaQuery = {
|
||||
addEventListener: jest.fn(),
|
||||
matches: false,
|
||||
};
|
||||
window.matchMedia = jest.fn().mockReturnValue(mediaQuery);
|
||||
});
|
||||
|
||||
it('adds a listener to the media query', () => {
|
||||
initializeMediaQueryListener();
|
||||
expect(window.matchMedia).toHaveBeenCalledWith(
|
||||
'(prefers-color-scheme: dark)'
|
||||
);
|
||||
expect(mediaQuery.addEventListener).toHaveBeenCalledWith(
|
||||
'change',
|
||||
expect.any(Function)
|
||||
);
|
||||
});
|
||||
|
||||
it('does not switch theme if local storage theme is light or dark', () => {
|
||||
localStorage.theme = 'light';
|
||||
initializeMediaQueryListener();
|
||||
mediaQuery.matches = true;
|
||||
mediaQuery.addEventListener.mock.calls[0][1]();
|
||||
expect(localStorage.theme).toBe('light');
|
||||
});
|
||||
|
||||
it('switches to dark theme if system preference changes to dark and no theme is set in local storage', () => {
|
||||
localStorage.removeItem('theme');
|
||||
initializeMediaQueryListener();
|
||||
mediaQuery.matches = true;
|
||||
mediaQuery.addEventListener.mock.calls[0][1]();
|
||||
expect(document.documentElement.classList).toContain('dark');
|
||||
});
|
||||
|
||||
it('switches to light theme if system preference changes to light and no theme is set in local storage', () => {
|
||||
localStorage.removeItem('theme');
|
||||
initializeMediaQueryListener();
|
||||
mediaQuery.matches = false;
|
||||
mediaQuery.addEventListener.mock.calls[0][1]();
|
||||
expect(document.documentElement.classList).toContain('light');
|
||||
});
|
||||
});
|
||||
|
||||
describe('#initializeTheme', () => {
|
||||
it('should not initialize theme if plain layout is enabled', () => {
|
||||
window.portalConfig.isPlainLayoutEnabled = 'true';
|
||||
initializeTheme();
|
||||
expect(localStorage.theme).toBeUndefined();
|
||||
expect(document.documentElement.classList).not.toContain('light');
|
||||
expect(document.documentElement.classList).not.toContain('dark');
|
||||
});
|
||||
|
||||
it('sets the theme to the system theme', () => {
|
||||
initializeTheme();
|
||||
expect(localStorage.theme).toBeUndefined();
|
||||
const prefersDarkMode = window.matchMedia(
|
||||
'(prefers-color-scheme: dark)'
|
||||
).matches;
|
||||
expect(document.documentElement.classList.contains('light')).toBe(
|
||||
!prefersDarkMode
|
||||
);
|
||||
});
|
||||
|
||||
it('sets the theme to the light theme', () => {
|
||||
localStorage.theme = 'light';
|
||||
document.documentElement.classList.add('light');
|
||||
initializeTheme();
|
||||
expect(localStorage.theme).toBe('light');
|
||||
expect(document.documentElement.classList.contains('light')).toBe(true);
|
||||
});
|
||||
|
||||
it('sets the theme to the dark theme', () => {
|
||||
localStorage.theme = 'dark';
|
||||
document.documentElement.classList.add('dark');
|
||||
initializeTheme();
|
||||
expect(localStorage.theme).toBe('dark');
|
||||
expect(document.documentElement.classList.contains('dark')).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user