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

/* Component test for OverlayAvatar 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 { initializeStores } from '@skeletonlabs/skeleton';
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/svelte';
import { readable } from 'svelte/store';
import { init, locale, register } from 'svelte-i18n';

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

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

	it('should mount', () => {
		// Arrange
		// See https://testing-library.com/docs/svelte-testing-library/example#contexts
		const modalStore = readable([]);

		// Act
		const { container } = render(OverlayAvatar, {
			context: new Map([['modalStore', modalStore]])
		});

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

	it('should have a Profile item', () => {
		// Arrange
		const modalStore = readable([]);

		// Act
		render(OverlayAvatar, {
			context: new Map([['modalStore', modalStore]])
		});

		// Assert
		expect(screen.getByText(enMessages.overlay.avatar.profile)).toBeInTheDocument();
	});

	it('should have a Settings item', () => {
		// Arrange
		const modalStore = readable([]);

		// Act
		render(OverlayAvatar, {
			context: new Map([['modalStore', modalStore]])
		});

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

	it('should have a Dark mode item', () => {
		// Arrange
		const modalStore = readable([]);

		// Act
		render(OverlayAvatar, {
			context: new Map([['modalStore', modalStore]])
		});

		// Assert
		expect(screen.getByText(enMessages.overlay.avatar.dark_mode)).toBeInTheDocument();
	});

	it('should have a About Anvil item', () => {
		// Arrange
		const modalStore = readable([]);

		// Act
		render(OverlayAvatar, {
			context: new Map([['modalStore', modalStore]])
		});

		// Assert
		expect(screen.getByText(enMessages.overlay.avatar.about_anvil)).toBeInTheDocument();
	});

	it('should have a Sign out item', () => {
		// Arrange
		const modalStore = readable([]);

		// Act
		render(OverlayAvatar, {
			context: new Map([['modalStore', modalStore]])
		});

		// Assert
		expect(screen.getByText(enMessages.overlay.avatar.sign_out)).toBeInTheDocument();
	});

	it('should open a modal on click on settings', () => {
		// Arrange
		const triggerSpy = vi.fn();
		const { subscribe, set, update } = readable([]);

		// Act
		render(OverlayAvatar, {
			context: new Map([
				[
					'modalStore',
					{
						subscribe,
						set,
						update,
						trigger: triggerSpy,
						close: vi.fn(),
						clear: vi.fn()
					}
				]
			])
		});
		const settings = screen.getByRole('button', {
			name: enMessages.overlay.avatar.settings
		});
		settings.click();

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