@amsterdam/design-system-react/dist/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 '@testing-library/jest-dom';
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 = jest.fn();
        render(_jsx(FileListItem, { file: file, onDelete: onDelete }));
        fireEvent.click(screen.getByRole('button'));
        expect(onDelete).toHaveBeenCalledTimes(1);
    });
});