2024-03-06 16:03:12 +01:00
|
|
|
/* Component test for Profile 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/>.
|
|
|
|
*/
|
|
|
|
|
2024-07-27 14:12:08 +02:00
|
|
|
import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
|
|
|
|
import { storePopup } from '@skeletonlabs/skeleton';
|
2024-02-19 11:33:41 +01:00
|
|
|
import '@testing-library/jest-dom';
|
|
|
|
import { render, screen } from '@testing-library/svelte';
|
|
|
|
import { init, locale, register } from 'svelte-i18n';
|
2024-07-27 14:12:08 +02:00
|
|
|
import { readable } from 'svelte/store';
|
2024-02-19 11:33:41 +01:00
|
|
|
|
|
|
|
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
|
2024-07-27 14:12:08 +02:00
|
|
|
// 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: {}
|
|
|
|
}
|
2024-02-19 11:33:41 +01:00
|
|
|
};
|
|
|
|
|
2024-07-27 14:12:08 +02:00
|
|
|
const context = new Map([
|
|
|
|
['modalStore', modalStore],
|
|
|
|
['storePopup', storePopup]
|
|
|
|
]);
|
|
|
|
|
2024-02-19 11:33:41 +01:00
|
|
|
// Act
|
2024-07-27 14:12:08 +02:00
|
|
|
const { container } = render(Profile, { context, props });
|
2024-02-19 11:33:41 +01:00
|
|
|
|
|
|
|
// Assert
|
|
|
|
expect(container).toBeTruthy();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should have a h1', () => {
|
|
|
|
// Arrange
|
2024-07-27 14:12:08 +02:00
|
|
|
// 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: {}
|
|
|
|
}
|
2024-02-19 11:33:41 +01:00
|
|
|
};
|
|
|
|
|
2024-07-27 14:12:08 +02:00
|
|
|
const context = new Map([
|
|
|
|
['modalStore', modalStore],
|
|
|
|
['storePopup', storePopup]
|
|
|
|
]);
|
|
|
|
|
2024-02-19 11:33:41 +01:00
|
|
|
// Act
|
2024-07-27 14:12:08 +02:00
|
|
|
render(Profile, { context, props });
|
2024-02-19 11:33:41 +01:00
|
|
|
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
|
2024-07-27 14:12:08 +02:00
|
|
|
// 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: {}
|
|
|
|
}
|
2024-02-19 11:33:41 +01:00
|
|
|
};
|
|
|
|
|
2024-07-27 14:12:08 +02:00
|
|
|
const context = new Map([
|
|
|
|
['modalStore', modalStore],
|
|
|
|
['storePopup', storePopup]
|
|
|
|
]);
|
|
|
|
|
2024-02-19 11:33:41 +01:00
|
|
|
// Act
|
2024-07-27 14:12:08 +02:00
|
|
|
render(Profile, { context, props });
|
2024-02-19 11:33:41 +01:00
|
|
|
const button = screen.getByRole('button', { name: 'block' });
|
|
|
|
|
|
|
|
// Assert
|
|
|
|
expect(button).toBeInTheDocument();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should have a report button', () => {
|
|
|
|
// Arrange
|
2024-07-27 14:12:08 +02:00
|
|
|
// 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: {}
|
|
|
|
}
|
2024-02-19 11:33:41 +01:00
|
|
|
};
|
|
|
|
|
2024-07-27 14:12:08 +02:00
|
|
|
const context = new Map([
|
|
|
|
['modalStore', modalStore],
|
|
|
|
['storePopup', storePopup]
|
|
|
|
]);
|
|
|
|
|
2024-02-19 11:33:41 +01:00
|
|
|
// Act
|
2024-07-27 14:12:08 +02:00
|
|
|
render(Profile, { context, props });
|
2024-02-19 11:33:41 +01:00
|
|
|
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
|
2024-07-27 14:12:08 +02:00
|
|
|
// 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: {}
|
|
|
|
}
|
2024-02-19 11:33:41 +01:00
|
|
|
};
|
|
|
|
|
2024-07-27 14:12:08 +02:00
|
|
|
const context = new Map([
|
|
|
|
['modalStore', modalStore],
|
|
|
|
['storePopup', storePopup]
|
|
|
|
]);
|
|
|
|
|
2024-02-19 11:33:41 +01:00
|
|
|
// Act
|
2024-07-27 14:12:08 +02:00
|
|
|
render(Profile, { context, props });
|
2024-02-19 11:33:41 +01:00
|
|
|
const button = screen.getByRole('button', { name: enMessages.page.profile.activities.like });
|
|
|
|
|
|
|
|
// Assert
|
|
|
|
expect(button).toBeInTheDocument();
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('projects', () => {
|
|
|
|
it('should have a h2', () => {
|
|
|
|
// Arrange
|
2024-07-27 14:12:08 +02:00
|
|
|
// 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: {}
|
|
|
|
}
|
2024-02-19 11:33:41 +01:00
|
|
|
};
|
|
|
|
|
2024-07-27 14:12:08 +02:00
|
|
|
const context = new Map([
|
|
|
|
['modalStore', modalStore],
|
|
|
|
['storePopup', storePopup]
|
|
|
|
]);
|
|
|
|
|
2024-02-19 11:33:41 +01:00
|
|
|
// Act
|
2024-07-27 14:12:08 +02:00
|
|
|
render(Profile, { context, props });
|
2024-02-19 11:33:41 +01:00
|
|
|
const h2 = screen.getByRole('heading', {
|
|
|
|
level: 2,
|
|
|
|
name: enMessages.page.profile.projects.heading
|
|
|
|
});
|
|
|
|
|
|
|
|
// Assert
|
|
|
|
expect(h2).toBeInTheDocument();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should add a project', () => {
|
|
|
|
// Arrange
|
2024-07-27 14:12:08 +02:00
|
|
|
// 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: {}
|
|
|
|
}
|
2024-02-19 11:33:41 +01:00
|
|
|
};
|
|
|
|
|
2024-07-27 14:12:08 +02:00
|
|
|
const context = new Map([
|
|
|
|
['modalStore', modalStore],
|
|
|
|
['storePopup', storePopup]
|
|
|
|
]);
|
|
|
|
|
2024-02-19 11:33:41 +01:00
|
|
|
// Act
|
2024-07-27 14:12:08 +02:00
|
|
|
render(Profile, { context, props });
|
2024-02-19 11:33:41 +01:00
|
|
|
const a = screen.getByRole('link', { name: 'Add a project' });
|
|
|
|
|
|
|
|
// Assert
|
|
|
|
expect(a).toBeInTheDocument();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should import a project', () => {
|
|
|
|
// Arrange
|
2024-07-27 14:12:08 +02:00
|
|
|
// 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: {}
|
|
|
|
}
|
2024-02-19 11:33:41 +01:00
|
|
|
};
|
|
|
|
|
2024-07-27 14:12:08 +02:00
|
|
|
const context = new Map([
|
|
|
|
['modalStore', modalStore],
|
|
|
|
['storePopup', storePopup]
|
|
|
|
]);
|
|
|
|
|
2024-02-19 11:33:41 +01:00
|
|
|
// Act
|
2024-07-27 14:12:08 +02:00
|
|
|
render(Profile, { context, props });
|
2024-02-19 11:33:41 +01:00
|
|
|
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
|
2024-07-27 14:12:08 +02:00
|
|
|
// 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: {}
|
|
|
|
}
|
2024-02-19 11:33:41 +01:00
|
|
|
};
|
|
|
|
|
2024-07-27 14:12:08 +02:00
|
|
|
const context = new Map([
|
|
|
|
['modalStore', modalStore],
|
|
|
|
['storePopup', storePopup]
|
|
|
|
]);
|
|
|
|
|
2024-02-19 11:33:41 +01:00
|
|
|
// Act
|
2024-07-27 14:12:08 +02:00
|
|
|
render(Profile, { context, props });
|
2024-02-19 11:33:41 +01:00
|
|
|
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
|
2024-07-27 14:12:08 +02:00
|
|
|
// 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'
|
|
|
|
}
|
2024-02-19 11:33:41 +01:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2024-07-27 14:12:08 +02:00
|
|
|
const context = new Map([
|
|
|
|
['modalStore', modalStore],
|
|
|
|
['storePopup', storePopup]
|
|
|
|
]);
|
|
|
|
|
2024-02-19 11:33:41 +01:00
|
|
|
// Act
|
2024-07-27 14:12:08 +02:00
|
|
|
render(Profile, { context, props });
|
2024-02-19 11:33:41 +01:00
|
|
|
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
|
2024-07-27 14:12:08 +02:00
|
|
|
.replace('{username}', props.data.user.username)
|
|
|
|
.replace('{instance}', props.data.user.instance)
|
|
|
|
.replace('{created_with}', props.data.user.created_with)
|
2024-02-19 11:33:41 +01:00
|
|
|
)
|
|
|
|
);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|