build(ui): migrate from CRA/Jest to Vite/Vitest (#3311)

* feat: create vite project * feat: it's alive! * feat: `make dev` working! * feat: replace custom serviceWorker with vite plugin * test: replace Jest with Vitest * fix: run prettier * fix: skip eslint for now. * chore: remove ui.old folder * refactor: replace lodash.pick with simple destructuring * fix: eslint errors (wip) * fix: eslint errors (wip) * fix: display-name eslint errors (wip) * fix: no-console eslint errors (wip) * fix: react-refresh/only-export-components eslint errors (wip) * fix: react-refresh/only-export-components eslint errors (wip) * fix: react-refresh/only-export-components eslint errors (wip) * fix: react-refresh/only-export-components eslint errors (wip) * fix: build * fix: pwa manifest * refactor: pwa manifest * refactor: simplify PORT configuration * refactor: rename simple JS files * test: cover playlistUtils * fix: react-image-lightbox * feat(ui): add sourcemaps to help debug issues
2024-09-28 11:54:36 -04:00
parent dd48a23f92
commit fcdd30ba8f
212 changed files with 6231 additions and 31060 deletions
@@ -0,0 +1,125 @@
+import * as React from 'react'
+import { TestContext } from 'ra-test'
+import { DataProviderContext } from 'react-admin'
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react'
+import { SelectPlaylistInput } from './SelectPlaylistInput'
+import { describe, beforeAll, afterEach, it, expect, vi } from 'vitest'
+
+describe('SelectPlaylistInput', () => {
+  beforeAll(() => localStorage.setItem('userId', 'admin'))
+  afterEach(cleanup)
+  const onChangeHandler = vi.fn()
+
+  it('should call the handler with the selections', async () => {
+    const mockData = [
+      { id: 'sample-id1', name: 'sample playlist 1', ownerId: 'admin' },
+      { id: 'sample-id2', name: 'sample playlist 2', ownerId: 'admin' },
+    ]
+    const mockIndexedData = {
+      'sample-id1': {
+        id: 'sample-id1',
+        name: 'sample playlist 1',
+        ownerId: 'admin',
+      },
+      'sample-id2': {
+        id: 'sample-id2',
+        name: 'sample playlist 2',
+        ownerId: 'admin',
+      },
+    }
+
+    const mockDataProvider = {
+      getList: vi
+        .fn()
+        .mockResolvedValue({ data: mockData, total: mockData.length }),
+    }
+
+    render(
+      <DataProviderContext.Provider value={mockDataProvider}>
+        <TestContext
+          initialState={{
+            addToPlaylistDialog: { open: true, duplicateSong: false },
+            admin: {
+              ui: { optimistic: false },
+              resources: {
+                playlist: {
+                  data: mockIndexedData,
+                  list: {
+                    cachedRequests: {
+                      '{"pagination":{"page":1,"perPage":-1},"sort":{"field":"name","order":"ASC"},"filter":{"smart":false}}':
+                        {
+                          ids: ['sample-id1', 'sample-id2'],
+                          total: 2,
+                        },
+                    },
+                  },
+                },
+              },
+            },
+          }}
+        >
+          <SelectPlaylistInput onChange={onChangeHandler} />
+        </TestContext>
+      </DataProviderContext.Provider>,
+    )
+
+    await waitFor(() => {
+      expect(mockDataProvider.getList).toHaveBeenCalledWith('playlist', {
+        filter: { smart: false },
+        pagination: { page: 1, perPage: -1 },
+        sort: { field: 'name', order: 'ASC' },
+      })
+    })
+
+    let textBox = screen.getByRole('textbox')
+    fireEvent.change(textBox, { target: { value: 'sample' } })
+    fireEvent.keyDown(textBox, { key: 'ArrowDown' })
+    fireEvent.keyDown(textBox, { key: 'Enter' })
+    await waitFor(() => {
+      expect(onChangeHandler).toHaveBeenCalledWith([
+        { id: 'sample-id1', name: 'sample playlist 1', ownerId: 'admin' },
+      ])
+    })
+
+    fireEvent.keyDown(textBox, { key: 'ArrowDown' })
+    fireEvent.keyDown(textBox, { key: 'Enter' })
+    await waitFor(() => {
+      expect(onChangeHandler).toHaveBeenCalledWith([
+        { id: 'sample-id1', name: 'sample playlist 1', ownerId: 'admin' },
+        { id: 'sample-id2', name: 'sample playlist 2', ownerId: 'admin' },
+      ])
+    })
+
+    fireEvent.change(textBox, {
+      target: { value: 'new playlist' },
+    })
+    fireEvent.keyDown(textBox, { key: 'ArrowDown' })
+    fireEvent.keyDown(textBox, { key: 'Enter' })
+    await waitFor(() => {
+      expect(onChangeHandler).toHaveBeenCalledWith([
+        { id: 'sample-id1', name: 'sample playlist 1', ownerId: 'admin' },
+        { id: 'sample-id2', name: 'sample playlist 2', ownerId: 'admin' },
+        { name: 'new playlist' },
+      ])
+    })
+
+    fireEvent.change(textBox, {
+      target: { value: 'another new playlist' },
+    })
+    fireEvent.keyDown(textBox, { key: 'Enter' })
+    await waitFor(() => {
+      expect(onChangeHandler).toHaveBeenCalledWith([
+        { id: 'sample-id1', name: 'sample playlist 1', ownerId: 'admin' },
+        { id: 'sample-id2', name: 'sample playlist 2', ownerId: 'admin' },
+        { name: 'new playlist' },
+        { name: 'another new playlist' },
+      ])
+    })
+  })
+})