Skip to content

Commit

Permalink
Merge f9dea5a into f2e0a63
Browse files Browse the repository at this point in the history
  • Loading branch information
@Schwehn42
Schwehn42 authored Jan 13, 2025
2 parents f2e0a63 + f9dea5a commit 92ec167
Show file tree
Hide file tree
Showing 2 changed files with 314 additions and 2 deletions.
13 changes: 12 additions & 1 deletion src/components/SettingsDialog/Appearance/__tests__/Appearance.test.tsx
View file
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
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>
`;

0 comments on commit 92ec167

Please sign in to comment.