20a44974d5
This way it is easier to inspect the design implementation. Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
323 lines
6.9 KiB
TypeScript
323 lines
6.9 KiB
TypeScript
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/pages/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();
|
|
});
|
|
});
|
|
});
|
|
});
|