|
1 | 1 | /** |
2 | 2 | * @jest-environment jsdom |
3 | 3 | */ |
4 | | -import React, { PropsWithChildren } from 'react' |
5 | | -import { screen, render, LOCALE_EN, userEvent, t } from 'rtl' |
6 | | -import { Provider } from 'mobx-react' |
| 4 | +import React from 'react' |
| 5 | +import { screen, setup, render, t, waitFor } from 'rtl' |
7 | 6 | import { Statusbar } from '../Statusbar' |
| 7 | +import { filterFiles, filterDirs } from '$src/utils/fileUtils' |
| 8 | +import { File } from '$src/services/Fs' |
| 9 | +import { ViewState } from '$src/state/viewState' |
| 10 | +import { FileState } from '$src/state/fileState' |
| 11 | +import { action, makeObservable, observable, runInAction } from 'mobx' |
8 | 12 |
|
9 | 13 | describe('Statusbar', () => { |
10 | | - const appState = { |
11 | | - clipboard: { |
12 | | - setClipboard: jest.fn(), |
| 14 | + const cache = makeObservable( |
| 15 | + { |
| 16 | + status: 'ok', |
| 17 | + files: observable<File>([]), |
| 18 | + setShowHiddenFiles: jest.fn((show: boolean) => { |
| 19 | + cache.showHiddenFiles = show |
| 20 | + }), |
| 21 | + showHiddenFiles: false, |
| 22 | + path: '/tmp', |
| 23 | + } as unknown as FileState, |
| 24 | + { |
| 25 | + path: observable, |
| 26 | + showHiddenFiles: observable, |
| 27 | + setShowHiddenFiles: action, |
13 | 28 | }, |
14 | | - } |
15 | | - |
16 | | - const cache = { |
17 | | - selected: [], |
18 | | - getFS: (): undefined => undefined, |
19 | | - files: [], |
20 | | - } as { [x: string]: any } |
| 29 | + ) |
21 | 30 |
|
22 | | - const viewState = { |
23 | | - getVisibleCache: () => cache, |
| 31 | + const options = { |
| 32 | + providerProps: { |
| 33 | + viewState: { |
| 34 | + getVisibleCache: () => cache, |
| 35 | + } as unknown as ViewState, |
| 36 | + }, |
24 | 37 | } |
25 | 38 |
|
26 | | - const Wrapper = () => ( |
27 | | - <Provider appState={appState} viewState={viewState}> |
28 | | - <Statusbar /> |
29 | | - </Provider> |
30 | | - ) |
| 39 | + const buildStatusBarText = () => { |
| 40 | + const files = filterFiles(cache.files, cache.showHiddenFiles).length |
| 41 | + const folders = filterDirs(cache.files, cache.showHiddenFiles).length |
| 42 | + return `${t('STATUS.FILES', { count: files })}, ${t('STATUS.FOLDERS', { |
| 43 | + count: folders, |
| 44 | + })}` |
| 45 | + } |
31 | 46 |
|
32 | 47 | beforeEach(() => { |
33 | | - cache.selected = [] |
34 | | - cache.files = [] |
35 | | - jest.resetAllMocks() |
36 | | - }) |
| 48 | + cache.status = 'ok' |
| 49 | + cache.showHiddenFiles = false |
| 50 | + cache.files.replace([ |
| 51 | + { |
| 52 | + fullname: 'dir1', |
| 53 | + isDir: true, |
| 54 | + } as unknown as File, |
| 55 | + { |
| 56 | + fullname: 'foo1', |
| 57 | + isDir: false, |
| 58 | + } as unknown as File, |
| 59 | + { |
| 60 | + fullname: '.foo2', |
| 61 | + isDir: false, |
| 62 | + } as unknown as File, |
| 63 | + ]) |
37 | 64 |
|
38 | | - it('should display statusbar', () => { |
39 | | - render(<Wrapper />) |
40 | | - expect(screen.getByRole('textbox')).toHaveValue( |
41 | | - `${t('STATUS.FILES', { count: 0 })}, ${t('STATUS.FOLDERS', { |
42 | | - count: 0, |
43 | | - })}`, |
44 | | - ) |
| 65 | + jest.clearAllMocks() |
45 | 66 | }) |
46 | 67 |
|
47 | | - it('should display the number of files & folders', () => { |
48 | | - const files = 10, |
49 | | - folders = 5 |
| 68 | + it('should display statusbar text and toggle hidden files button', () => { |
| 69 | + render(<Statusbar />, options) |
50 | 70 |
|
51 | | - cache.files = Array(files + folders) |
52 | | - .fill({ isDir: false }) |
53 | | - .fill({ isDir: true }, files) |
54 | | - render(<Wrapper />) |
55 | | - expect(screen.getByRole('textbox')).toHaveValue( |
56 | | - `${t('STATUS.FILES', { count: files })}, ${t('STATUS.FOLDERS', { |
57 | | - count: folders, |
58 | | - })}`, |
59 | | - ) |
| 71 | + expect(screen.getByRole('textbox')).toHaveValue(buildStatusBarText()) |
| 72 | + expect(screen.getByRole('button')).toBeInTheDocument() |
60 | 73 | }) |
61 | 74 |
|
62 | | - it('clipboard button should be disabled if selection is empty', () => { |
63 | | - render(<Wrapper />) |
64 | | - expect(screen.getByRole('button')).toBeDisabled() |
| 75 | + it('should show hidden files when clicking on toggle hidden files button', async () => { |
| 76 | + const { user } = setup(<Statusbar />, options) |
| 77 | + |
| 78 | + await user.click(screen.getByRole('button')) |
| 79 | + |
| 80 | + expect(screen.getByRole('textbox')).toHaveValue(buildStatusBarText()) |
65 | 81 | }) |
66 | 82 |
|
67 | | - it('clicking on clipboard button should set clipboard', async () => { |
68 | | - // add a fake file to the selcted files |
69 | | - cache.selected = [undefined] |
70 | | - render(<Wrapper />) |
71 | | - await userEvent.click(screen.getByRole('button')) |
72 | | - expect(appState.clipboard.setClipboard).toHaveBeenCalledWith(cache) |
73 | | - expect(appState.clipboard.setClipboard).toHaveBeenCalledTimes(1) |
| 83 | + it('toggle hidden files button should be hidden if file cache is not valid', () => { |
| 84 | + cache.status = 'busy' |
| 85 | + render(<Statusbar />, options) |
| 86 | + |
| 87 | + expect(screen.queryByRole('button')).not.toBeInTheDocument() |
74 | 88 | }) |
75 | 89 | }) |
0 commit comments