import { screen, waitFor } from '@testing-library/vue'
import { describe, expect, it } from 'vite-plus/test'
import { createHarness } from '@/__tests__/TestHarness'
import { playlistFolderStore } from '@/stores/playlistFolderStore'
import Component from './EditPlaylistFolderForm.vue'

describe('editPlaylistFolderForm.vue', () => {
  const h = createHarness()

  it('submits', async () => {
    const folder = h.factory('playlist-folder').make({ name: 'My folder' })
    const renameMock = h.mock(playlistFolderStore, 'rename')
    h.render(Component, {
      props: {
        folder,
      },
    })

    await h.type(screen.getByPlaceholderText('Folder name'), 'Your folder')
    await h.user.click(screen.getByRole('button', { name: 'Save' }))

    await waitFor(() => {
      expect(renameMock).toHaveBeenCalledWith(folder, 'Your folder')
    })
  })
})