139 lines
4.7 KiB
TypeScript
139 lines
4.7 KiB
TypeScript
import { render, fireEvent, screen, within } from '@testing-library/svelte';
|
|
import { describe, it, expect, vi, test } from 'vitest';
|
|
import * as nav from '$app/navigation';
|
|
import TatortListPage from '$root/routes/(token-based)/list/[vorgang]/+page.svelte';
|
|
import { baseData } from '../fixtures';
|
|
import { tick } from 'svelte';
|
|
import { API_ROUTES } from '../../src/routes';
|
|
|
|
vi.spyOn(nav, 'invalidateAll').mockResolvedValue();
|
|
global.fetch = vi.fn().mockResolvedValue({ ok: true });
|
|
|
|
async function clickPlusButton() {
|
|
// mock animation features of the browser
|
|
|
|
window.HTMLElement.prototype.scrollIntoView = vi.fn();
|
|
window.HTMLElement.prototype.animate = vi.fn(() => ({
|
|
finished: Promise.resolve(),
|
|
cancel: vi.fn(),
|
|
}))
|
|
|
|
// button is visible
|
|
const button = screen.getByRole('button', { name: /add item/i })
|
|
expect(button).toBeInTheDocument();
|
|
|
|
await fireEvent.click(button)
|
|
}
|
|
|
|
describe('Seite: Vorgangsansicht', () => {
|
|
test.todo('Share Link disabled wenn Liste leer');
|
|
describe('Szenario: Admin + Liste gefüllt - Funktionalität', () => {
|
|
test.todo('Share Link Link generierung richtig');
|
|
|
|
it('führt PUT-Request aus und aktualisiert UI nach onSave', async () => {
|
|
const data = structuredClone(baseData);
|
|
const oldName = data.crimesList[0].name;
|
|
const newName = 'Fall-C';
|
|
|
|
render(TatortListPage, { props: { data } });
|
|
const listItem = screen.getAllByTestId('test-list-item')[0];
|
|
expect(listItem).toHaveTextContent(oldName);
|
|
|
|
await fireEvent.click(within(listItem).getByTestId('edit-button'));
|
|
const input = within(listItem).getByTestId('test-input');
|
|
await fireEvent.input(input, { target: { value: newName } });
|
|
|
|
await fireEvent.click(within(listItem).getByTestId('commit-button'));
|
|
await tick();
|
|
|
|
expect(global.fetch).toHaveBeenCalledWith(
|
|
`/api/list/${data.vorgang.vorgangToken}/${oldName}`,
|
|
expect.objectContaining({
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
vorgangToken: data.vorgang.vorgangToken,
|
|
oldName,
|
|
newName
|
|
})
|
|
})
|
|
);
|
|
|
|
expect(nav.invalidateAll).toHaveBeenCalled();
|
|
expect(within(listItem).getByText(newName)).toBeInTheDocument();
|
|
});
|
|
|
|
it('führt DELETE-Request aus und entfernt Element aus UI', async () => {
|
|
const testData = structuredClone(baseData);
|
|
const oldName = testData.crimesList[0].name;
|
|
const vorgang = testData.vorgang;
|
|
|
|
render(TatortListPage, { props: { data: testData } });
|
|
const initialItems = screen.getAllByTestId('test-list-item');
|
|
expect(initialItems).toHaveLength(testData.crimesList.length);
|
|
|
|
const listItem = screen.getAllByTestId('test-list-item')[0];
|
|
expect(listItem).toHaveTextContent(oldName);
|
|
const del = within(listItem).getByTestId('delete-button');
|
|
expect(del).toBeInTheDocument()
|
|
await fireEvent.click(within(listItem).getByTestId('delete-button'));
|
|
await tick();
|
|
|
|
let expectedPath = API_ROUTES.CRIME(vorgang.vorgangToken, oldName)
|
|
expect(global.fetch).toHaveBeenCalledWith(
|
|
expectedPath,
|
|
expect.objectContaining({
|
|
method: 'DELETE',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
vorgangToken: testData.vorgang.vorgangToken,
|
|
tatort: oldName
|
|
})
|
|
})
|
|
);
|
|
expect(nav.invalidateAll).toHaveBeenCalled();
|
|
const updatedItems = screen.queryAllByTestId('test-list-item');
|
|
expect(updatedItems).toHaveLength(testData.crimesList.length - 1);
|
|
expect(screen.queryByText(oldName)).toBeNull();
|
|
});
|
|
});
|
|
});
|
|
|
|
|
|
describe('Hinzufügen Button', () => {
|
|
it('Unexpandierter Button', () => {
|
|
const testData = { ...baseData, vorgangList: [] };
|
|
const { getByTestId } = render(TatortListPage, { props: { data: testData } });
|
|
|
|
const container = getByTestId('expand-container')
|
|
expect(container).toBeInTheDocument();
|
|
|
|
// button is visible
|
|
const button = within(container).getByRole('button')
|
|
expect(button).toBeInTheDocument();
|
|
|
|
// input fields are not visible
|
|
let label = screen.queryByText('Modellname');
|
|
expect(label).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('Expandierter Button nach Klick', async () => {
|
|
|
|
const testData = { ...baseData, vorgangList: [] };
|
|
render(TatortListPage, { props: { data: testData } });
|
|
|
|
await clickPlusButton();
|
|
|
|
// input fields are visible
|
|
let label = screen.queryByText('Modellname');
|
|
expect(label).toBeInTheDocument();
|
|
});
|
|
|
|
it.todo('Check Validation: missing name', async () => {
|
|
console.log(`test: input field validation`);
|
|
});
|
|
|
|
it.todo('Create Tatort successful', async () => {
|
|
console.log(`test: tatort upload`);
|
|
});
|
|
}); |