Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test: mock system time for snowfall #4760

Merged
merged 2 commits into from
Jan 13, 2025
Merged

test: mock system time for snowfall #4760

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5ebdde0
test: mock system time
Schwehn42 Jan 10, 2025
f9dea5a
add element check to tests
Schwehn42 Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion src/components/SettingsDialog/Appearance/__tests__/Appearance.test.tsx
View file
Open in desktop
brandstetterm marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import getTestStore from "utils/test/getTestStore";
import {Appearance} from "../Appearance";
import {getByLabelText} from "@testing-library/dom";
import i18n from "i18nTest";
import {within} from "@testing-library/react";
import {t} from "i18next";

const createAppearance = () => (
<Provider store={getTestStore()}>
Expand All @@ -13,9 +15,18 @@ const createAppearance = () => (
);

describe("Appearance", () => {
test("should render all Settings correctly", () => {
test("should render all Settings correctly with Snowfall", () => {
jest.useFakeTimers().setSystemTime(new Date(2025, 11, 24)); // Christmas!
const {container} = render(createAppearance());
expect(container.firstChild).toMatchSnapshot();
expect(within(container.getElementsByClassName("appearance-container")[0] as HTMLDivElement).queryByLabelText(t("Appearance.showSnowfall"))).toBeInTheDocument();
});

test("should render all Settings correctly without Snowfall", () => {
jest.useFakeTimers().setSystemTime(new Date(2025, 5, 7)); // my birthday!
const {container} = render(createAppearance());
expect(container.firstChild).toMatchSnapshot();
expect(within(container.getElementsByClassName("appearance-container")[0] as HTMLDivElement).queryByLabelText(t("Appearance.showSnowfall"))).not.toBeInTheDocument();
});

test("should have a notifications toggle", () => {
Expand Down
303 changes: 302 additions & 1 deletion src/components/SettingsDialog/Appearance/__tests__/__snapshots__/Appearance.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Appearance should render all Settings correctly 1`] = `
exports[`Appearance should render all Settings correctly with Snowfall 1`] = `
<div
class="settings-dialog__container accent-color__backlog-blue"
>
Expand Down Expand Up @@ -318,3 +318,304 @@ exports[`Appearance should render all Settings correctly 1`] = `
</div>
</div>
`;

exports[`Appearance should render all Settings correctly without Snowfall 1`] = `
<div
class="settings-dialog__container accent-color__backlog-blue"
>
<header
class="settings-dialog__header"
>
<h2
class="settings-dialog__header-text"
>
Appearance
</h2>
</header>
<div
class="appearance-container"
>
<div
class="appearance-settings__theme-container"
>
<span
class="appearance-settings__theme-title"
>
Color scheme
</span>
<form
class="appearance-settings__theme-options"
>
<label
class="appearence-settings__theme-option"
for="auto"
title="Scrumlr will match the appearance mode (dark or light) with your active system settings"
>
<input
checked=""
id="auto"
name="themeAuto"
type="radio"
value="auto"
/>
<img
alt="Color scheme Auto"
src="theme-preview-light.svg"
/>
<img
alt="Color scheme Auto"
src="theme-preview-dark.svg"
/>
<p>
<svg
class="appearance-settings__theme-icon"
>
general-settings.svg
</svg>
<span>
Auto
</span>
</p>
</label>
<label
class="appearence-settings__theme-option"
for="light"
>
<input
id="light"
name="themeLight"
type="radio"
value="light"
/>
<img
alt="Color scheme Light"
src="theme-preview-light.svg"
/>
<p>
<svg
class="appearance-settings__theme-icon"
>
settings-light-mode.svg
</svg>
<span>
Light
</span>
</p>
</label>
<label
class="appearence-settings__theme-option"
for="dark"
>
<input
id="dark"
name="themeDark"
type="radio"
value="dark"
/>
<img
alt="Color scheme Dark"
src="theme-preview-dark.svg"
/>
<p>
<svg
class="appearance-settings__theme-icon"
>
settings-dark-mode.svg
</svg>
<span>
Dark
</span>
</p>
</label>
</form>
</div>
<section>
<button
aria-checked="true"
aria-label="Show hotkey notifications"
class="settings-option-button"
role="switch"
type="button"
>
<span
class="settings-option-button__label"
>
Show hotkey notifications
</span>
<div
class="toggle toggle--active"
/>
</button>
</section>
<section>
<button
aria-checked="true"
aria-label="Show board reactions"
class="settings-option-button"
role="switch"
type="button"
>
<span
class="settings-option-button__label"
>
Show board reactions
</span>
<div
class="toggle toggle--active"
/>
</button>
</section>
<div
class="settings-dropdown"
>
<button
aria-controls="dropdown-list"
aria-expanded="false"
class="settings-dropdown__button"
role="combobox"
>
<span>
Emoji skin tone
</span>
<p
class="settings-dropdown__item--current"
>
<span>
👏
</span>
<svg
class="settings-dropdown__item-icon settings-dropdown__item-icon--dropdown"
>
arrow-right.svg
</svg>
</p>
</button>
<ul
class="settings-dropdown__list"
id="dropdown-list"
role="listbox"
>
<li
class="settings-dropdown__item"
>
<button
class="settings-dropdown__button"
>
<span>
👏
</span>
</button>
</li>
<li
class="settings-dropdown__item"
>
<button
class="settings-dropdown__button"
>
<span>
👏🏻
</span>
</button>
</li>
<li
class="settings-dropdown__item"
>
<button
class="settings-dropdown__button"
>
<span>
👏🏼
</span>
</button>
</li>
<li
class="settings-dropdown__item"
>
<button
class="settings-dropdown__button"
>
<span>
👏🏽
</span>
</button>
</li>
<li
class="settings-dropdown__item"
>
<button
class="settings-dropdown__button"
>
<span>
👏🏾
</span>
</button>
</li>
<li
class="settings-dropdown__item"
>
<button
class="settings-dropdown__button"
>
<span>
👏🏿
</span>
</button>
</li>
</ul>
</div>
<div
class="settings-dropdown"
>
<button
aria-controls="dropdown-list"
aria-expanded="false"
class="settings-dropdown__button"
role="combobox"
>
<span>
Language
</span>
<p
class="settings-dropdown__item--current"
>
<svg
class="settings-dropdown__item-icon"
>
US.svg
</svg>
<span>
English
</span>
<svg
class="settings-dropdown__item-icon settings-dropdown__item-icon--dropdown"
>
arrow-right.svg
</svg>
</p>
</button>
<ul
class="settings-dropdown__list"
id="dropdown-list"
role="listbox"
>
<li
class="settings-dropdown__item"
>
<button
class="settings-dropdown__button"
>
<svg
class="settings-dropdown__item-icon"
>
DE.svg
</svg>
<span>
German
</span>
</button>
</li>
</ul>
</div>
</div>
</div>
`;
Loading