/* 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 . */ 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/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 // 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) ) ); }); }); });