@amsterdam/design-system-react/dist/src/FileList/FileListItem.test.js

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

import { jsx as _jsx } from "react/jsx-runtime";
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
import { fireEvent, render, screen } from '@testing-library/react';
import { createRef } from 'react';
import { describe, expect, it, vi } from 'vitest';
import { FileListItem } from './FileListItem';
describe('FileListItem', () => {
    const file = new File(['sample content'], 'sample.txt', { type: 'text/plain' });
    it('renders', () => {
        render(_jsx(FileListItem, { file: file }));
        const component = screen.getByRole('listitem');
        expect(component).toBeInTheDocument();
        expect(component).toBeVisible();
    });
    it('renders a design system BEM class name', () => {
        render(_jsx(FileListItem, { file: file }));
        const component = screen.getByRole('listitem');
        expect(component).toHaveClass('ams-file-list__item');
    });
    it('renders an extra class name', () => {
        render(_jsx(FileListItem, { className: "extra", file: file }));
        const component = screen.getByRole('listitem');
        expect(component).toHaveClass('ams-file-list__item extra');
    });
    it('supports ForwardRef in React', () => {
        const ref = createRef();
        render(_jsx(FileListItem, { file: file, ref: ref }));
        const component = screen.getByRole('listitem');
        expect(ref.current).toBe(component);
    });
    it('renders the file name', () => {
        render(_jsx(FileListItem, { file: file }));
        expect(screen.getByText('sample.txt')).toBeInTheDocument();
    });
    it('calls onDelete when the remove button is clicked', () => {
        const onDelete = vi.fn();
        render(_jsx(FileListItem, { file: file, onDelete: onDelete }));
        fireEvent.click(screen.getByRole('button'));
        expect(onDelete).toHaveBeenCalledTimes(1);
    });
    it('renders an image preview for image files', () => {
        const createObjectURL = vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:test');
        try {
            const imageFile = new File(['image content'], 'photo.png', { type: 'image/png' });
            render(_jsx(FileListItem, { file: imageFile }));
            const component = screen.getByRole('img', { name: 'photo.png' });
            expect(component).toBeInTheDocument();
            expect(component).toHaveAttribute('src', 'blob:test');
        }
        finally {
            createObjectURL.mockRestore();
        }
    });
    it('passes additional props', () => {
        render(_jsx(FileListItem, { "aria-hidden": "false", "data-test": "data-test", file: file, id: "id" }));
        const component = screen.getByRole('listitem');
        expect(component).toHaveAttribute('aria-hidden', 'false');
        expect(component).toHaveAttribute('id', 'id');
        expect(component).toHaveAttribute('data-test', 'data-test');
    });
});