// SPDX-License-Identifier: MIT // Copyright (c) 2022 The Pybricks Authors import { cleanup } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import React from 'react'; import { testRender, uuid } from '../../test'; import Explorer from './Explorer'; import { explorerActivateFile, explorerArchiveAllFiles, explorerCreateNewFile, explorerDeleteFile, explorerExportFile, explorerImportFiles, explorerRenameFile, } from './actions'; import { ExplorerFileInfo } from './reducers'; afterEach(async () => { jest.restoreAllMocks(); cleanup(); localStorage.clear(); }); const testFile: ExplorerFileInfo = { id: uuid(0), name: 'test.file', }; describe('archive button', () => { it('should be enabled if there are files', () => { const [explorer, dispatch] = testRender(, { explorer: { files: [testFile] }, }); const button = explorer.getByTitle('Backup all files'); expect(button).toBeEnabled(); userEvent.click(button); expect(dispatch).toHaveBeenCalledWith(explorerArchiveAllFiles()); }); it('should be disabled if there are no files', () => { const [explorer, dispatch] = testRender(, { explorer: { files: [] }, }); const button = explorer.getByTitle('Backup all files'); expect(button).toBeDisabled(); userEvent.click(button); expect(dispatch).not.toHaveBeenCalled(); }); }); describe('import file button', () => { it('should dispatch action when clicked', async () => { const [explorer, dispatch] = testRender(); const button = explorer.getByTitle('Import a file'); userEvent.click(button); expect(dispatch).toHaveBeenCalledWith(explorerImportFiles()); }); }); describe('new file button', () => { it('should dispatch action when clicked', async () => { const [explorer, dispatch] = testRender(); const button = explorer.getByTitle('Create a new file'); userEvent.click(button); expect(dispatch).toHaveBeenCalledWith(explorerCreateNewFile()); }); }); describe('tree item', () => { it('should dispatch action when clicked', async () => { const [explorer, dispatch] = testRender(, { explorer: { files: [testFile] }, }); const treeItem = explorer.getByRole('treeitem', { name: 'test.file' }); userEvent.click(treeItem); expect(dispatch).toHaveBeenCalledWith(explorerActivateFile('test.file')); }); it('should dispatch action when key is pressed', async () => { const [explorer, dispatch] = testRender(, { explorer: { files: [testFile] }, }); const treeItem = explorer.getByRole('treeitem', { name: 'test.file' }); userEvent.click(treeItem); userEvent.keyboard('{enter}'); expect(dispatch).toHaveBeenCalledWith(explorerActivateFile('test.file')); }); describe('rename', () => { it('should dispatch action when button is clicked', async () => { const [explorer, dispatch] = testRender(, { explorer: { files: [testFile] }, }); // NB: this button is intentionally not accessible (by role) since // there is a keyboard shortcut. const button = explorer.getByTitle('Rename test.file'); userEvent.click(button); expect(dispatch).toHaveBeenCalledWith(explorerRenameFile('test.file')); }); it('should dispatch action when key is pressed', async () => { const [explorer, dispatch] = testRender(, { explorer: { files: [testFile] }, }); const treeItem = explorer.getByRole('treeitem', { name: 'test.file' }); userEvent.click(treeItem); userEvent.keyboard('{f2}'); expect(dispatch).toHaveBeenCalledWith(explorerRenameFile('test.file')); }); }); describe('export', () => { it('should dispatch export action when button is clicked', async () => { const [explorer, dispatch] = testRender(, { explorer: { files: [testFile] }, }); // NB: this button is intentionally not accessible (by role) since // there is a keyboard shortcut. const button = explorer.getByTitle('Export test.file'); userEvent.click(button); expect(dispatch).toHaveBeenCalledWith(explorerExportFile('test.file')); }); it('should dispatch export action when key is pressed', async () => { const [explorer, dispatch] = testRender(, { explorer: { files: [testFile] }, }); const treeItem = explorer.getByRole('treeitem', { name: 'test.file' }); userEvent.click(treeItem); userEvent.keyboard('{ctrl}e'); expect(dispatch).toHaveBeenCalledWith(explorerExportFile('test.file')); }); }); describe('delete', () => { it('should dispatch delete action when button is clicked', async () => { const [explorer, dispatch] = testRender(, { explorer: { files: [testFile] }, }); // NB: this button is intentionally not accessible (by role) since // there is a keyboard shortcut. const button = explorer.getByTitle('Delete test.file'); userEvent.click(button); expect(dispatch).toHaveBeenCalledWith(explorerDeleteFile('test.file')); }); it('should dispatch delete action when key is pressed', async () => { const [explorer, dispatch] = testRender(, { explorer: { files: [testFile] }, }); const treeItem = explorer.getByRole('treeitem', { name: 'test.file' }); userEvent.click(treeItem); userEvent.keyboard('{del}'); expect(dispatch).toHaveBeenCalledWith(explorerDeleteFile('test.file')); }); }); });