Anvil/tests/components/pages/Profile.test.ts

/* Component test for Profile page.
 * 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 { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
import { storePopup } from '@skeletonlabs/skeleton';
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/svelte';
import { init, locale, register } from 'svelte-i18n';
import { readable } from 'svelte/store';

import Profile from '../../../src/lib/components/pages/Profile.svelte';
import enMessages from '../../../src/lib/i18n/locales/en.json';

describe('Profile.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([]);
		// See https://www.skeleton.dev/utilities/popups
		storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });

		const props = {
			data: {
				user: {}
			}
		};

		const context = new Map([
			['modalStore', modalStore],
			['storePopup', storePopup]
		]);

		// Act
		const { container } = render(Profile, { context, props });

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

	it('should have a h1', () => {
		// Arrange
		// See https://testing-library.com/docs/svelte-testing-library/example#contexts
		const modalStore = readable([]);
		// See https://www.skeleton.dev/utilities/popups
		storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });

		const props = {
			data: {
				user: {}
			}
		};

		const context = new Map([
			['modalStore', modalStore],
			['storePopup', storePopup]
		]);

		// Act
		render(Profile, { context, props });
		const h1 = screen.getByRole('heading', { level: 1 });

		// Assert
		expect(h1).toBeInTheDocument();
		expect(h1).toHaveTextContent(enMessages.page.profile.heading);
	});

	it('should have a block button', () => {
		// Arrange
		// See https://testing-library.com/docs/svelte-testing-library/example#contexts
		const modalStore = readable([]);
		// See https://www.skeleton.dev/utilities/popups
		storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });

		const props = {
			data: {
				user: {}
			}
		};

		const context = new Map([
			['modalStore', modalStore],
			['storePopup', storePopup]
		]);

		// Act
		render(Profile, { context, props });
		const button = screen.getByRole('button', { name: 'block' });

		// Assert
		expect(button).toBeInTheDocument();
	});

	it('should have a report button', () => {
		// Arrange
		// See https://testing-library.com/docs/svelte-testing-library/example#contexts
		const modalStore = readable([]);
		// See https://www.skeleton.dev/utilities/popups
		storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });

		const props = {
			data: {
				user: {}
			}
		};

		const context = new Map([
			['modalStore', modalStore],
			['storePopup', storePopup]
		]);

		// Act
		render(Profile, { context, props });
		const button = screen.getByRole('button', { name: 'report' });

		// Assert
		expect(button).toBeInTheDocument();
	});

	// FIXME: Reenable once emoji was replaced with svelte-octicon
	it.skip('should have a like button', () => {
		// Arrange
		// See https://testing-library.com/docs/svelte-testing-library/example#contexts
		const modalStore = readable([]);
		// See https://www.skeleton.dev/utilities/popups
		storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });

		const props = {
			data: {
				user: {}
			}
		};

		const context = new Map([
			['modalStore', modalStore],
			['storePopup', storePopup]
		]);

		// Act
		render(Profile, { context, props });
		const button = screen.getByRole('button', { name: enMessages.page.profile.activities.like });

		// Assert
		expect(button).toBeInTheDocument();
	});

	describe('projects', () => {
		it('should have a h2', () => {
			// Arrange
			// See https://testing-library.com/docs/svelte-testing-library/example#contexts
			const modalStore = readable([]);
			// See https://www.skeleton.dev/utilities/popups
			storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });

			const props = {
				data: {
					user: {}
				}
			};

			const context = new Map([
				['modalStore', modalStore],
				['storePopup', storePopup]
			]);

			// Act
			render(Profile, { context, props });
			const h2 = screen.getByRole('heading', {
				level: 2,
				name: enMessages.page.profile.projects.heading
			});

			// Assert
			expect(h2).toBeInTheDocument();
		});

		it('should add a project', () => {
			// Arrange
			// See https://testing-library.com/docs/svelte-testing-library/example#contexts
			const modalStore = readable([]);
			// See https://www.skeleton.dev/utilities/popups
			storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });

			const props = {
				data: {
					user: {}
				}
			};

			const context = new Map([
				['modalStore', modalStore],
				['storePopup', storePopup]
			]);

			// Act
			render(Profile, { context, props });
			const a = screen.getByRole('link', { name: 'Add a project' });

			// Assert
			expect(a).toBeInTheDocument();
		});

		it('should import a project', () => {
			// Arrange
			// See https://testing-library.com/docs/svelte-testing-library/example#contexts
			const modalStore = readable([]);
			// See https://www.skeleton.dev/utilities/popups
			storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });

			const props = {
				data: {
					user: {}
				}
			};

			const context = new Map([
				['modalStore', modalStore],
				['storePopup', storePopup]
			]);

			// Act
			render(Profile, { context, props });
			const a = screen.getByRole('link', { name: 'import a project' });

			// Assert
			expect(a).toBeInTheDocument();
			expect(a).toHaveAttribute('href', '/projects/import/');
		});
	});

	describe('history', () => {
		it('should have a h2', () => {
			// Arrange
			// See https://testing-library.com/docs/svelte-testing-library/example#contexts
			const modalStore = readable([]);
			// See https://www.skeleton.dev/utilities/popups
			storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });

			const props = {
				data: {
					user: {}
				}
			};

			const context = new Map([
				['modalStore', modalStore],
				['storePopup', storePopup]
			]);

			// Act
			render(Profile, { context, props });
			const h2 = screen.getByRole('heading', {
				level: 2,
				name: enMessages.page.profile.history.heading
			});

			// Assert
			expect(h2).toBeInTheDocument();
		});

		it('should have an entry for created account', () => {
			// Arrange
			// See https://testing-library.com/docs/svelte-testing-library/example#contexts
			const modalStore = readable([]);
			// See https://www.skeleton.dev/utilities/popups
			storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });

			const props = {
				data: {
					user: {
						created_with: 'Anvil',
						instance: 'domain.example',
						username: 'jane_doe'
					}
				}
			};

			const context = new Map([
				['modalStore', modalStore],
				['storePopup', storePopup]
			]);

			// Act
			render(Profile, { context, props });
			const li = screen.getByRole('listitem');

			// Assert
			expect(li).toBeInTheDocument();
			expect(li).toHaveTextContent(
				new RegExp(enMessages.page.profile.history.activities.setup.summary)
			);
			expect(li).toHaveTextContent(
				new RegExp(
					enMessages.page.profile.history.activities.setup.description
						.replace('{username}', props.data.user.username)
						.replace('{instance}', props.data.user.instance)
						.replace('{created_with}', props.data.user.created_with)
				)
			);
		});
	});
});