Allow adding songs to multiple playlists at once. (#995)

* Add support for multiple playlists * Fix lint * Remove console log comment * Disable 'check' when loading * Fix lint * reset playlists on closeAddToPlaylist * new playlist: accomodate string type on enter * Fix lint * multiple new playlists are added correctly * use makestyle() * Add tests * Fix lint
2021-04-24 04:07:08 +05:30
parent d829a63686
commit df57cd6bb5
7 changed files with 834 additions and 56 deletions
@@ -0,0 +1,115 @@
+import * as React from 'react'
+import { TestContext } from 'ra-test'
+import { DataProviderContext } from 'react-admin'
+import { cleanup, fireEvent, render, waitFor } from '@testing-library/react'
+import { SelectPlaylistInput } from './SelectPlaylistInput'
+
+describe('SelectPlaylistInput', () => {
+  afterEach(cleanup)
+  const onChangeHandler = jest.fn()
+
+  it('should call the handler with the selections', async () => {
+    const mockData = [
+      { id: 'sample-id1', name: 'sample playlist 1', owner: 'admin' },
+      { id: 'sample-id2', name: 'sample playlist 2', owner: 'admin' },
+    ]
+    const mockIndexedData = {
+      'sample-id1': {
+        id: 'sample-id1',
+        name: 'sample playlist 1',
+        owner: 'admin',
+      },
+      'sample-id2': {
+        id: 'sample-id2',
+        name: 'sample playlist 2',
+        owner: 'admin',
+      },
+    }
+
+    const mockDataProvider = {
+      getList: jest.fn(() =>
+        Promise.resolve({ 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":{}}': {
+                        ids: ['sample-id1', 'sample-id2'],
+                        total: 2,
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          }}
+        >
+          <SelectPlaylistInput onChange={onChangeHandler} />
+        </TestContext>
+      </DataProviderContext.Provider>
+    )
+
+    await waitFor(() => {
+      expect(mockDataProvider.getList).toHaveBeenCalledWith('playlist', {
+        filter: {},
+        pagination: { page: 1, perPage: -1 },
+        sort: { field: 'name', order: 'ASC' },
+      })
+    })
+
+    fireEvent.change(document.activeElement, { target: { value: 'sample' } })
+    fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
+    fireEvent.keyDown(document.activeElement, { key: 'Enter' })
+    await waitFor(() => {
+      expect(onChangeHandler).toHaveBeenCalledWith([
+        { id: 'sample-id1', name: 'sample playlist 1', owner: 'admin' },
+      ])
+    })
+
+    fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
+    fireEvent.keyDown(document.activeElement, { key: 'Enter' })
+    await waitFor(() => {
+      expect(onChangeHandler).toHaveBeenCalledWith([
+        { id: 'sample-id1', name: 'sample playlist 1', owner: 'admin' },
+        { id: 'sample-id2', name: 'sample playlist 2', owner: 'admin' },
+      ])
+    })
+
+    fireEvent.change(document.activeElement, {
+      target: { value: 'new playlist' },
+    })
+    fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
+    fireEvent.keyDown(document.activeElement, { key: 'Enter' })
+    await waitFor(() => {
+      expect(onChangeHandler).toHaveBeenCalledWith([
+        { id: 'sample-id1', name: 'sample playlist 1', owner: 'admin' },
+        { id: 'sample-id2', name: 'sample playlist 2', owner: 'admin' },
+        { name: 'new playlist' },
+      ])
+    })
+
+    fireEvent.change(document.activeElement, {
+      target: { value: 'another new playlist' },
+    })
+    fireEvent.keyDown(document.activeElement, { key: 'Enter' })
+    await waitFor(() => {
+      expect(onChangeHandler).toHaveBeenCalledWith([
+        { id: 'sample-id1', name: 'sample playlist 1', owner: 'admin' },
+        { id: 'sample-id2', name: 'sample playlist 2', owner: 'admin' },
+        { name: 'new playlist' },
+        { name: 'another new playlist' },
+      ])
+    })
+  })
+})