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

/* Component test for ImportProject template.
 * 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 { init, locale, register } from 'svelte-i18n';

import ImportProject from '../../../src/lib/components/templates/ImportProject.svelte';
import enMessages from '../../../src/lib/i18n/locales/en.json';

describe('ImportProject.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 = {};

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

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

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

		// Act
		render(ImportProject, { data });

		// Assert
		expect(screen.getByRole('form')).toBeInTheDocument();
	});

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

		// Act
		render(ImportProject, { data });
		const h2 = screen.getByRole('heading', { level: 2 });

		// Assert
		expect(h2).toBeInTheDocument();
		expect(h2).toHaveTextContent(enMessages.page.import_project.heading);
	});

	it('should have an intro text', () => {
		// Arrange
		const data = {};

		// Act
		render(ImportProject, { data });

		// Assert
		expect(screen.getByText(enMessages.page.import_project.intro)).toBeInTheDocument();
	});

	describe('name', () => {
		it('should have a label', () => {
			// Arrange
			const data = {};

			// Act
			render(ImportProject, { data });

			// Turn into regular expression to account for the asterisk
			const name = screen.getByLabelText(
				new RegExp(enMessages.page.import_project.form.fields.name.label)
			);

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

		it('should have a text input', () => {
			// Arrange
			const data = {};

			// Act
			render(ImportProject, { data });

			const name = screen.getByPlaceholderText(
				enMessages.page.import_project.form.fields.name.placeholder
			);

			// Assert
			expect(name).toBeInTheDocument();
			expect(name).toHaveAttribute('type', 'text');
		});

		describe('when empty', () => {
			it('should display an error', () => {
				// Arrange
				const data = {};

				// Act
				render(ImportProject, { data });

				// Assert
				expect(
					screen.getByText(enMessages.page.import_project.form.fields.name.error)
				).toBeInTheDocument();
			});
		});

		// FIXME: Enable once the dev server is running
		describe.skip('when filled', () => {
			it('should hide the error', () => {
				// Arrange
				const data = {};

				// Act
				render(ImportProject, { data });

				// Assert
				expect(
					screen.getByText(enMessages.page.import_project.form.fields.name.error)
				).not.toBeInTheDocument();
			});

			it('should show a live updating hint', () => {
				// Arrange
				const data = {};
				const value = 'Vervis';

				// Act
				render(ImportProject, { data, value });

				// Assert
				expect(screen.getByText(`domain.example/projects/${value}`)).toBeInTheDocument();
			});
		});
	});

	describe('description', () => {
		it('should have a label', () => {
			// Arrange
			const data = {};

			// Act
			render(ImportProject, { data });

			const description = screen.getByLabelText(
				enMessages.page.import_project.form.fields.description.label
			);

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

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

			// Act
			render(ImportProject, { data });

			const description = screen.getByPlaceholderText(
				enMessages.page.import_project.form.fields.description.placeholder
			);

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

	describe('avatar', () => {
		it('should have a heading', () => {
			// Arrange
			const data = {};

			// Act
			render(ImportProject, { data });

			const components = screen.getByRole('heading', {
				level: 3,
				name: enMessages.page.import_project.form.components
			});

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

		describe('repository', () => {
			it('should have a label', () => {
				// Arrange
				const data = {};

				// Act
				render(ImportProject, { data });

				const avatar = screen.getByRole('heading', {
					level: 3,
					name: enMessages.page.import_project.form.avatar
				});

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

			it('should have an upload button', () => {
				// Arrange
				const data = {};

				// Act
				render(ImportProject, { data });

				// Turn into regular expression to account for the icon
				const avatar = screen.getByLabelText(
					new RegExp(enMessages.page.import_project.form.fields.avatar.label)
				);

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

	describe('components', () => {
		it('should have a heading', () => {
			// Arrange
			const data = {};

			// Act
			render(ImportProject, { data });

			const components = screen.getByRole('heading', {
				level: 3,
				name: enMessages.page.import_project.form.components
			});

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

		describe('repository', () => {
			it('should have a label', () => {
				// Arrange
				const data = {};

				// Act
				render(ImportProject, { data });

				// Turn into regular expression to account for the icon
				const repository = screen.getByLabelText(
					enMessages.page.import_project.form.fields.repository.label
				);

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

			it('should have an URL input', () => {
				// Arrange
				const data = {};

				// Act
				render(ImportProject, { data });

				// Turn into regular expression to account for the icon
				const repository = screen.getByPlaceholderText(
					enMessages.page.import_project.form.fields.repository.placeholder
				);

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

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

				// Act
				render(ImportProject, { data });

				// Turn into regular expression to account for the icon
				const repository = screen.getByText(
					enMessages.page.import_project.form.fields.repository.hint
				);

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

		describe('issues', () => {
			it('should have a label', () => {
				// Arrange
				const data = {};

				// Act
				render(ImportProject, { data });

				// Turn into regular expression to account for the icon
				const issues = screen.getByLabelText(
					enMessages.page.import_project.form.fields.issues.label
				);

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

		describe('pull requests', () => {
			it('should have a label', () => {
				// Arrange
				const data = {};

				// Act
				render(ImportProject, { data });

				// Turn into regular expression to account for the icon
				const issues = screen.getByLabelText(enMessages.page.import_project.form.fields.pr.label);

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