Anvil/tests/components/atoms/SettingsSidebar.test.ts

/* Component test for SettingsSidebar atom.
 * Copyright (C) 2024 André Jaenisch
 * SPDX-FileCopyrightText: 2024 André Jaenisch
 * SPDX-License-Identifier: AGPL-3.0-or-later
 *
 * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/svelte';
import { get, readable } from 'svelte/store';
import { init, locale, register } from 'svelte-i18n';

import SettingsSidebar from '../../../src/lib/components/atoms/SettingsSidebar.svelte';
import enMessages from '../../../src/lib/i18n/locales/en.json';

describe('SettingsSidebar.svelte', () => {
	beforeEach(() => {
		register('en', () => import('../../../src/lib/i18n/locales/en.json'));
		init({ fallbackLocale: 'en', initialLocale: 'en' });
		locale.set('en');
	});

	it('should mount', () => {
		// Arrange
		// Nothing to prepare

		// Act
		const { container } = render(SettingsSidebar);

		// Assert
		expect(container).toBeTruthy();
	});

	it('should have a headline', () => {
		// Arrange
		// Nothing to prepare

		// Act
		render(SettingsSidebar);

		// Assert
		expect(screen.getByText(enMessages.settings.headline)).toBeInTheDocument();
	});

	it('should have a profile tile', () => {
		// Arrange
		// Nothing to prepare

		// Act
		render(SettingsSidebar);

		// Assert
		expect(screen.getByText(enMessages.settings.profile.label)).toBeInTheDocument();
	});

	it('should have an account tile', () => {
		// Arrange
		// Nothing to prepare

		// Act
		render(SettingsSidebar);

		// Assert
		expect(screen.getByText(enMessages.settings.account.label)).toBeInTheDocument();
	});

	it('should have a SSH/GPG keys tile', () => {
		// Arrange
		// Nothing to prepare

		// Act
		render(SettingsSidebar);

		// Assert
		expect(screen.getByText(enMessages.settings.ssh_gpg_keys.label)).toBeInTheDocument();
	});

	it('should have an appearance tile', () => {
		// Arrange
		// Nothing to prepare

		// Act
		render(SettingsSidebar);

		// Assert
		expect(screen.getByText(enMessages.settings.appearance.label)).toBeInTheDocument();
	});

	it('should have a notifications tile', () => {
		// Arrange
		// Nothing to prepare

		// Act
		render(SettingsSidebar);

		// Assert
		expect(screen.getByText(enMessages.settings.notifications.label)).toBeInTheDocument();
	});

	describe('when clicking a tile', () => {
		it('should dispatch a switch-settings event when clicking a tile', () => {
			// Arrange
			const listener = vi.fn();

			// Act
			const { component } = render(SettingsSidebar);
			component.$on('switch-settings', listener);
			const profileTile = screen.getByText(enMessages.settings.profile.label);
			expect(profileTile).toBeInTheDocument();
			profileTile.click();

			// Assert
			expect(listener).toHaveBeenCalledOnce();
		});

		it('should pass the clicked tile in the event', () => {
			// Arrange
			const listener = vi.fn();

			// Act
			const { component } = render(SettingsSidebar);
			component.$on('switch-settings', listener);
			const profileTile = screen.getByText(enMessages.settings.profile.label);
			expect(profileTile).toBeInTheDocument();
			profileTile.click();

			// Assert
			expect(listener).toHaveBeenCalledWith(
				new CustomEvent('switch-settings', {
					detail: 'profile'
				})
			);
		});
	});
});