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

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

import Profile from '../../../src/lib/components/templates/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
		const data = {
			user: {}
		};

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

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

	it('should have a h1', () => {
		// Arrange
		const data = {
			user: {}
		};

		// Act
		render(Profile, { data });
		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
		const data = {
			user: {}
		};

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

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

	it('should have a report button', () => {
		// Arrange
		const data = {
			user: {}
		};

		// Act
		render(Profile, { data });
		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
		const data = {
			user: {}
		};

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

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

	describe('projects', () => {
		it('should have a h2', () => {
			// Arrange
			const data = {
				user: {}
			};

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

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

		it('should add a project', () => {
			// Arrange
			const data = {
				user: {}
			};

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

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

		it('should import a project', () => {
			// Arrange
			const data = {
				user: {}
			};

			// Act
			render(Profile, { data });
			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
			const data = {
				user: {}
			};

			// Act
			render(Profile, { data });
			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
			const data = {
				user: {
					created_with: 'Anvil',
					instance: 'domain.example',
					username: 'jane_doe'
				}
			};

			// Act
			render(Profile, { data });
			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}', data.user.username)
						.replace('{instance}', data.user.instance)
						.replace('{created_with}', data.user.created_with)
				)
			);
		});
	});
});