generated from eea/volto-addon-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
643 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| import React from 'react'; | ||
| import { render, fireEvent, screen, waitFor } from '@testing-library/react'; | ||
| import '@testing-library/jest-dom/extend-expect'; | ||
| import AttachedFileWidget from './AttachedFileWidget'; | ||
| import { Provider } from 'react-intl-redux'; | ||
| import configureStore from 'redux-mock-store'; | ||
|
|
||
| jest.mock('promise-file-reader', () => ({ | ||
| readAsDataURL: jest.fn(() => | ||
| Promise.resolve('data:text/plain;base64,SGVsbG8sIFdvcmxkIQ=='), | ||
| ), | ||
| })); | ||
|
|
||
| const mockStore = configureStore([]); | ||
| const store = mockStore({ | ||
| intl: { | ||
| locale: 'en', | ||
| messages: {}, | ||
| formatMessage: jest.fn(), | ||
| subrequests: {}, | ||
| }, | ||
| router: { | ||
| location: { pathname: '/test' }, | ||
| subrequests: {}, | ||
| }, | ||
| }); | ||
|
|
||
| describe('AttachedFileWidget', () => { | ||
| const mockOnChange = jest.fn(); | ||
| const mockOpenObjectBrowser = jest.fn(); | ||
|
|
||
| beforeEach(() => { | ||
| jest.clearAllMocks(); | ||
| }); | ||
|
|
||
| it('renders without crashing', () => { | ||
| const { container } = render( | ||
| <Provider store={store}> | ||
| <AttachedFileWidget | ||
| id="testId" | ||
| title="Test Title" | ||
| onChange={mockOnChange} | ||
| openObjectBrowser={mockOpenObjectBrowser} | ||
| /> | ||
| </Provider>, | ||
| ); | ||
| expect(container).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('calls onChange when a file is dropped', async () => { | ||
| const { container } = render( | ||
| <Provider store={store}> | ||
| <AttachedFileWidget | ||
| id="testId" | ||
| title="Test Title" | ||
| onChange={mockOnChange} | ||
| openObjectBrowser={mockOpenObjectBrowser} | ||
| /> | ||
| </Provider>, | ||
| ); | ||
|
|
||
| let dropzone; | ||
| await waitFor(() => { | ||
| dropzone = container.querySelector('.file-widget-dropzone input'); | ||
| expect(dropzone).toBeInTheDocument(); | ||
| }); | ||
| expect(dropzone).toBeInTheDocument(); | ||
|
|
||
| const file = new File(['hello'], 'hello.png', { type: 'image/png' }); | ||
| Object.defineProperty(dropzone, 'files', { | ||
| value: [file], | ||
| }); | ||
| fireEvent.drop(dropzone); | ||
|
|
||
| await waitFor(() => expect(mockOnChange).toHaveBeenCalled()); | ||
| }); | ||
|
|
||
| it('calls onChange when delete button is clicked', () => { | ||
| render( | ||
| <Provider store={store}> | ||
| <AttachedFileWidget | ||
| id="testId" | ||
| title="Test Title" | ||
| value="someValue" | ||
| onChange={mockOnChange} | ||
| openObjectBrowser={mockOpenObjectBrowser} | ||
| /> | ||
| </Provider>, | ||
| ); | ||
|
|
||
| const deleteButton = screen.getByLabelText('delete file'); | ||
| fireEvent.click(deleteButton); | ||
|
|
||
| expect(mockOnChange).toHaveBeenCalledWith('testId', null); | ||
| }); | ||
|
|
||
| it('renders without crashing', async () => { | ||
| const { container } = render( | ||
| <Provider store={store}> | ||
| <AttachedFileWidget | ||
| id="testId" | ||
| title="Test Title" | ||
| onChange={mockOnChange} | ||
| openObjectBrowser={mockOpenObjectBrowser} | ||
| /> | ||
| </Provider>, | ||
| ); | ||
|
|
||
| let dropzone; | ||
| await waitFor(() => { | ||
| dropzone = container.querySelector('.file-widget-dropzone input'); | ||
| expect(dropzone).toBeInTheDocument(); | ||
| }); | ||
| expect(dropzone).toBeInTheDocument(); | ||
| expect(container.querySelector('.file-picker-toolbar')).toBeInTheDocument(); | ||
| expect( | ||
| container.querySelector('.file-picker-toolbar button'), | ||
| ).toBeInTheDocument(); | ||
| fireEvent.change(container.querySelector('.input-toolbar input'), { | ||
| target: { value: 'test' }, | ||
| }); | ||
|
|
||
| fireEvent.click( | ||
| container.querySelector( | ||
| '.file-picker-toolbar button.ui.basic.icon.primary.button', | ||
| ), | ||
| ); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import React from 'react'; | ||
| import { render, fireEvent } from '@testing-library/react'; | ||
| import MappingWidget from './MappingWidget'; | ||
| import '@testing-library/jest-dom/extend-expect'; | ||
|
|
||
| jest.mock('@plone/volto/components', () => ({ | ||
| Field: ({ id, value, onChange }) => ( | ||
| <input | ||
| data-testid={`field-${id}`} | ||
| value={value || ''} | ||
| onChange={(e) => onChange(id, e.target.value)} | ||
| /> | ||
| ), | ||
| })); | ||
|
|
||
| describe('MappingWidget', () => { | ||
| beforeEach(() => { | ||
| jest.clearAllMocks(); | ||
| }); | ||
| const options = [ | ||
| { id: 'option1', title: 'Option 1' }, | ||
| { id: 'option2', title: 'Option 2' }, | ||
| ]; | ||
|
|
||
| it('renders without crashing', () => { | ||
| const { container } = render( | ||
| <MappingWidget id="test" title="Test Title" options={options} />, | ||
| ); | ||
| expect(container).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('renders correct number of fields', () => { | ||
| const { getAllByTestId } = render( | ||
| <MappingWidget id="test" title="Test Title" options={options} />, | ||
| ); | ||
| expect(getAllByTestId(/field-/).length).toBe(2); | ||
| }); | ||
|
|
||
| it('updates value on field change', () => { | ||
| const onChange = jest.fn(); | ||
| const { getByTestId } = render( | ||
| <MappingWidget | ||
| id="test" | ||
| title="Test Title" | ||
| options={options} | ||
| onChange={onChange} | ||
| />, | ||
| ); | ||
|
|
||
| fireEvent.change(getByTestId('field-test-option1'), { | ||
| target: { value: 'new value' }, | ||
| }); | ||
|
|
||
| expect(onChange).toHaveBeenCalledWith('test', { option1: 'new value' }); | ||
| }); | ||
| }); |
Oops, something went wrong.