@playpilot/tpi 5.32.3 → 5.33.0-beta.explore.10

package/src/tests/lib/modal.test.js

@@ -1,15 +1,25 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { closeCurrentModal, destroyAllModals, destroyCurrentModal, getAllModals, getPreviousModal, goBackToPreviousModal, openModal } from '$lib/modal'
+import { closeCurrentModal, destroyAllModals, destroyCurrentModal, getAllModals, getPreviousModal, goBackToPreviousModal, openModal, openModalForInjectedLink } from '$lib/modal'
 import { linkInjections, title } from '$lib/fakeData'
 import { mount, unmount } from 'svelte'
 import ParticipantModal from '../../routes/components/ParticipantModal.svelte'
 import TitleModal from '../../routes/components/TitleModal.svelte'
+import { isHoldingSpecialKey } from '$lib/event'
+import { destroyLinkPopover } from '$lib/popover'
 
 vi.mock('svelte', () => ({
   mount: vi.fn(),
   unmount: vi.fn(),
 }))
 
+vi.mock('$lib/event', () => ({
+  isHoldingSpecialKey: vi.fn(),
+}))
+
+vi.mock('$lib/popover', () => ({
+  destroyLinkPopover: vi.fn(),
+}))
+
 const modal = {
   injection: linkInjections[0],
   data: title,
@@ -19,7 +29,9 @@ const modal = {
 describe('modal.js', () => {
   beforeEach(() => {
     destroyAllModals()
+
     vi.resetAllMocks()
+    vi.mocked(isHoldingSpecialKey).mockReturnValue(false)
   })
 
   describe('openModal', () => {
@@ -38,6 +50,8 @@ describe('modal.js', () => {
     })
 
     it('Should not mount modal if modifier key was present in event', () => {
+      vi.mocked(isHoldingSpecialKey).mockReturnValueOnce(true)
+
       // @ts-ignore
       openModal({ ...modal, event: { ctrlKey: true } })
 
@@ -152,4 +166,53 @@ describe('modal.js', () => {
       expect(getAllModals()).toHaveLength(3)
     })
   })
+
+  describe('openModalForInjectedLink', () => {
+    beforeEach(() => {
+      document.body.innerHTML = '<span data-playpilot-injection-key="abc"><a href="/">Some link</a></span>'
+
+      vi.mocked(isHoldingSpecialKey).mockReturnValueOnce(false)
+    })
+
+    it('Should call destroyLinkPopover when opening modal for injection', () => {
+      // @ts-ignore
+      openModalForInjectedLink({ target: document.querySelector('a'), preventDefault: vi.fn() }, [{ key: 'abc' }])
+
+      expect(destroyLinkPopover).toHaveBeenCalled()
+    })
+
+    it('Should return early if special key was pressed', () => {
+      vi.mocked(isHoldingSpecialKey).mockReturnValueOnce(true)
+
+      // @ts-ignore
+      openModalForInjectedLink({}, [])
+
+      expect(destroyLinkPopover).not.toHaveBeenCalled()
+    })
+
+    it('Should return early if target was not found', () => {
+      document.body.innerHTML = '<div></div>'
+
+      // @ts-ignore
+      openModalForInjectedLink({ target: document.querySelector('a'), preventDefault: vi.fn() }, [{ key: 'abc' }])
+
+      expect(destroyLinkPopover).not.toHaveBeenCalled()
+    })
+
+    it('Should return early if target has no key', () => {
+      document.body.innerHTML = '<a href="/">Some link</a>'
+
+      // @ts-ignore
+      openModalForInjectedLink({ target: document.querySelector('a'), preventDefault: vi.fn() }, [{ key: 'abc' }])
+
+      expect(destroyLinkPopover).not.toHaveBeenCalled()
+    })
+
+    it('Should return early if injection was not valid', () => {
+      // @ts-ignore
+      openModalForInjectedLink({ target: document.querySelector('a'), preventDefault: vi.fn() }, [{ key: 'not-valid' }])
+
+      expect(destroyLinkPopover).not.toHaveBeenCalled()
+    })
+  })
 })

package/src/tests/lib/popover.test.js

@@ -0,0 +1,70 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { linkInjections } from '$lib/fakeData'
+import { mount, unmount } from 'svelte'
+import { clearCurrentlyHoveredInjection, currentlyHoveredInjection, destroyLinkPopover, isPopoverActive, openPopoverForInjectedLink } from '$lib/popover'
+import TitlePopover from '../../routes/components/TitlePopover.svelte'
+import { waitFor } from '@testing-library/svelte'
+
+vi.mock('svelte', () => ({
+  mount: vi.fn(),
+  unmount: vi.fn(),
+}))
+
+describe('popover.js', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<a>Some link</a>'
+
+    destroyLinkPopover()
+
+    vi.resetAllMocks()
+  })
+
+  describe('openPopoverForInjectedLink', () => {
+    it('Should mount popover', async () => {
+      // @ts-ignore
+      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections)
+
+      await waitFor(() => {
+        expect(mount).toHaveBeenCalledWith(TitlePopover, expect.any(Object))
+        expect(currentlyHoveredInjection).toBeTruthy()
+      })
+    })
+
+    it('Should not mount popover if user is no longer hovering after delay', async () => {
+      // @ts-ignore
+      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections)
+
+      await new Promise(res => setTimeout(res, 50))
+
+      clearCurrentlyHoveredInjection()
+
+      await new Promise(res => setTimeout(res, 100))
+
+      expect(isPopoverActive()).toBe(false)
+    })
+  })
+
+  describe('destroyLinkPopover', () => {
+    it('Should not call unmount but still remove potential popover elements if no active popover is set', async () => {
+      document.body.innerHTML = '<div data-playpilot-title-popover></div> <div data-playpilot-title-popover></div>'
+
+      destroyLinkPopover()
+
+      expect(unmount).not.toHaveBeenCalled()
+      expect(document.querySelectorAll('[data-playpilot-title-popover]')).toHaveLength(0)
+    })
+  })
+
+  describe('clearCurrentlyHoveredInjection', () => {
+    it('Should clear currentlyHoveredInjection', async () => {
+      // @ts-ignore
+      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections)
+
+      await waitFor(() => expect(currentlyHoveredInjection).toBeTruthy())
+
+      clearCurrentlyHoveredInjection()
+
+      expect(currentlyHoveredInjection).toBe(null)
+    })
+  })
+})

package/src/tests/lib/trailer.test.js

@@ -0,0 +1,56 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { closeCurrentModal, destroyAllModals, destroyCurrentModal, getAllModals, getPreviousModal, goBackToPreviousModal, openModal } from '$lib/modal'
+import { linkInjections, title } from '$lib/fakeData'
+import { mount, unmount } from 'svelte'
+import ParticipantModal from '../../routes/components/ParticipantModal.svelte'
+import TitleModal from '../../routes/components/TitleModal.svelte'
+import { closeTrailerOverlay, openTrailerOverlay } from '$lib/trailer'
+
+vi.mock('svelte', () => ({
+  mount: vi.fn(),
+  unmount: vi.fn(),
+}))
+
+const titleWithTrailer = { ...title, embeddable_url: 'abc' }
+
+describe('modal.js', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  describe('openTrailerOverlay', () => {
+    it('Should call mount with given title embeddable_url', () => {
+      openTrailerOverlay(titleWithTrailer)
+
+      expect(mount).toHaveBeenCalledWith(
+        expect.any(Function),
+        expect.objectContaining({
+          target: expect.anything(),
+          props: expect.objectContaining({
+            onclose: expect.any(Function),
+            embeddable_url: titleWithTrailer.embeddable_url,
+          }),
+        }),
+      )
+    })
+  })
+
+  describe('closeTrailerOverlay', () => {
+    it('Should call unmount if component was previously mounted', () => {
+      vi.mocked(mount).mockReturnValueOnce({})
+
+      openTrailerOverlay(titleWithTrailer)
+      closeTrailerOverlay()
+
+      expect(unmount).toHaveBeenCalled()
+    })
+
+    it('Should not call unmount if component was not previously mounted', () => {
+      vi.mocked(mount).mockReturnValueOnce({})
+
+      closeTrailerOverlay()
+
+      expect(unmount).not.toHaveBeenCalled()
+    })
+  })
+})

package/src/tests/routes/components/Button.test.js

@@ -0,0 +1,28 @@
+import { render, fireEvent } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import Button from '../../../routes/components/Button.svelte'
+
+describe('Button.svelte', () => {
+  it('Should use filled class by default', () => {
+    const { getByRole } = render(Button)
+
+    expect(getByRole('button').classList).toContain('filled')
+  })
+
+  it('Should use border class when border variant is given', () => {
+    const { getByRole } = render(Button, { variant: 'border' })
+
+    expect(getByRole('button').classList).not.toContain('filled')
+    expect(getByRole('button').classList).toContain('border')
+  })
+
+  it('Should fire given onclick function on click', async () => {
+    const onclick = vi.fn()
+    const { getByRole } = render(Button, { onclick })
+
+    await fireEvent.click(getByRole('button'))
+
+    expect(onclick).toHaveBeenCalled()
+  })
+})

package/src/tests/routes/components/Explore/Explore.test.js

@@ -0,0 +1,133 @@
+import { render, fireEvent, waitFor } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import Explore from '../../../../routes/components/Explore/Explore.svelte'
+import { fetchTitles } from '$lib/api/titles'
+import { title } from '$lib/fakeData'
+import { searchTitles } from '$lib/api/search'
+
+vi.mock('$lib/api/titles', () => ({
+  fetchTitles: vi.fn(),
+}))
+
+vi.mock('$lib/api/search', () => ({
+  searchTitles: vi.fn(),
+}))
+
+describe('Explore.svelte', () => {
+  it('Should call fetchTitles on mount', () => {
+    render(Explore)
+
+    expect(fetchTitles).toHaveBeenCalledWith({ page_size: 24, page: 1 })
+  })
+
+  it('Should render all returned titles', async () => {
+    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title, title, title], next: null, previous: null })
+
+    const { getAllByText } = render(Explore)
+
+    await waitFor(() => {
+      expect(getAllByText(title.title)).toHaveLength(3)
+    })
+  })
+
+  it('Should not render Show more button when no next value is given', async () => {
+    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title], next: null, previous: null })
+
+    const { getByText, queryByText } = render(Explore)
+
+    await waitFor(() => getByText(title.title))
+
+    expect(queryByText('Show more')).not.toBeTruthy()
+  })
+
+  it('Should render Show more button when next value is given', async () => {
+    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title], next: 'truthy', previous: null })
+
+    const { getByText } = render(Explore)
+
+    await waitFor(() => {
+      expect(getByText('Show more')).toBeTruthy()
+    })
+  })
+
+  it('Should fire fetchTitles again with incremented page number when show more is clicked and render the given titles', async () => {
+    vi.mocked(fetchTitles).mockResolvedValue({ results: [title], next: 'truthy', previous: null })
+
+    const { getByText, getAllByText } = render(Explore)
+
+    await waitFor(() => fireEvent.click(getByText('Show more')))
+
+    expect(fetchTitles).toHaveBeenCalledWith({ page_size: 24, page: 2 })
+
+    await waitFor(() => {
+      expect(getAllByText(title.title)).toHaveLength(2)
+    })
+  })
+
+  it('Should render skeletons while loading', async () => {
+    vi.mocked(fetchTitles).mockResolvedValue({ results: [title], next: 'truthy', previous: null })
+
+    const { getAllByTestId, queryByTestId, getByText } = render(Explore)
+
+    expect(getAllByTestId('skeleton')).toHaveLength(24)
+
+    await waitFor(() => fireEvent.click(getByText('Show more')))
+
+    expect(queryByTestId('skeleton')).not.toBeTruthy()
+  })
+
+  it('Should fetch using searchTitles when query is given, resetting previous titles', async () => {
+    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title, title], next: 'truthy', previous: null })
+
+    const { getByRole, getAllByTestId } = render(Explore)
+
+    vi.mocked(searchTitles).mockResolvedValueOnce([title])
+
+    fireEvent.input(getByRole('searchbox'), { target: { value: 'some query' } })
+
+    await waitFor(() => {
+      expect(searchTitles).toHaveBeenCalledWith('some query')
+      expect(getAllByTestId('title')).toHaveLength(1)
+    })
+  })
+
+  it('Should set filter with the given content type when clicked, resetting previous titles', async () => {
+    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title], next: null, previous: null })
+
+    const { getByText, getAllByTestId, getByTestId } = render(Explore)
+
+    await waitFor(() => getByTestId('title'))
+
+    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title, title], next: null, previous: null })
+
+    await fireEvent.click(getByText('Movies'))
+
+    expect(getByText('Movies').classList).toContain('active')
+    expect(fetchTitles).toHaveBeenCalledWith({ page_size: 24, page: 1, content_type: 'movie' })
+
+    await waitFor(() => {
+      expect(getAllByTestId('title')).toHaveLength(2)
+    })
+  })
+
+  it('Should reset titles but fetch without setting content_type when "all" content type is clicked', async () => {
+    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title], next: null, previous: null })
+
+    const { getByText, getAllByTestId, getByTestId } = render(Explore)
+
+    await waitFor(() => getByTestId('title'))
+
+    vi.resetAllMocks()
+    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title, title], next: null, previous: null })
+
+    await fireEvent.click(getByText('All'))
+
+    expect(getByText('All').classList).toContain('active')
+    expect(fetchTitles).toHaveBeenCalledWith({ page_size: 24, page: 1 })
+
+    await waitFor(() => {
+      expect(getAllByTestId('title')).toHaveLength(2)
+    })
+  })
+})

package/src/tests/routes/components/Explore/Filter/Dropdown.test.js

@@ -0,0 +1,16 @@
+import { render } from '@testing-library/svelte'
+import { describe, expect, it } from 'vitest'
+
+import Dropdown from '../../../../../routes/components/Explore/Filter/Dropdown.svelte'
+import { createRawSnippet } from 'svelte'
+
+describe('Dropdown.svelte', () => {
+  const button = createRawSnippet(() => ({ render: () => '<button>Button</button>' }))
+  const content = createRawSnippet(() => ({ render: () => '<div>Content</div>' }))
+
+  it('Should not show content by default', () => {
+    const { queryByText } = render(Dropdown, { button, content })
+
+    expect(queryByText('Content')).not.toBeTruthy()
+  })
+})

package/src/tests/routes/components/Explore/Filter/Filter.test.js

@@ -0,0 +1,20 @@
+import { fireEvent, render } from '@testing-library/svelte'
+import { describe, expect, it } from 'vitest'
+
+import Filter from '../../../../../routes/components/Explore/Filter/Filter.svelte'
+
+describe('Filter.svelte', () => {
+  it('Should limit the number of filter items shown by default', () => {
+    const { getAllByTestId } = render(Filter, { filter: {} })
+
+    expect(getAllByTestId('filter-item')).toHaveLength(3)
+  })
+
+  it('Should not limit the number of filter items shown after pressing expand button', async () => {
+    const { getByText, getAllByTestId } = render(Filter, { filter: {} })
+
+    await fireEvent.click(getByText('All filters'))
+
+    expect(getAllByTestId('filter-item')).toHaveLength(6)
+  })
+})

package/src/tests/routes/components/Explore/Filter/FilterItem.test.js

@@ -0,0 +1,50 @@
+import { fireEvent, render } from '@testing-library/svelte'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import FilterItem from '../../../../../routes/components/Explore/Filter/FilterItem.svelte'
+
+describe('FilterItem.svelte', () => {
+  /** @type Record<string, string> */
+  let filter = {}
+
+  beforeEach(() => {
+    filter = {}
+  })
+
+  it('Should not show active state by default', () => {
+    const { getByTestId } = render(FilterItem, { filter, label: 'Some label', param: 'some-param' })
+
+    expect(getByTestId('filter-item').classList).not.toContain('active')
+  })
+
+  it('Should show active state if param is present in filter', () => {
+    filter['some-param'] = 'some-value'
+    const { getByTestId } = render(FilterItem, { filter, label: 'Some label', param: 'some-param' })
+
+    expect(getByTestId('filter-item').classList).toContain('active')
+  })
+
+  it('Should show dropdown after click', async () => {
+    const { getByRole, getByTestId } = render(FilterItem, { filter, label: 'Some label', param: 'some-param' })
+
+    await fireEvent.click(getByRole('button'))
+
+    expect(getByTestId('content')).toBeTruthy()
+  })
+
+  it('Should show toggles with search if data is given', async () => {
+    const { getByRole, getByTestId } = render(FilterItem, { filter, label: 'Some label', param: 'some-param', data: [] })
+
+    await fireEvent.click(getByRole('button'))
+
+    expect(getByTestId('toggles-with-search')).toBeTruthy()
+  })
+
+  it('Should not show toggles with search if data is not given', async () => {
+    const { getByRole, queryByTestId } = render(FilterItem, { filter, label: 'Some label', param: 'some-param', data: null })
+
+    await fireEvent.click(getByRole('button'))
+
+    expect(queryByTestId('toggles-with-search')).not.toBeTruthy()
+  })
+})

package/src/tests/routes/components/Explore/Filter/FilterSorting.test.js

@@ -0,0 +1,34 @@
+import { fireEvent, render } from '@testing-library/svelte'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import FilterSorting from '../../../../../routes/components/Explore/Filter/FilterSorting.svelte'
+
+describe('FilterSorting.svelte', () => {
+  /** @type Record<string, string> */
+  let filter = {}
+
+  beforeEach(() => {
+    filter = {}
+  })
+
+  it('Should use default label when no value is set', () => {
+    const { getByText } = render(FilterSorting, { filter })
+
+    expect(getByText('Sort by'))
+  })
+
+  it('Should show active state if param is present in filter', () => {
+    filter['ordering'] = 'new'
+    const { getByText } = render(FilterSorting, { filter })
+
+    expect(getByText('New'))
+  })
+
+  it('Should show dropdown after click', async () => {
+    const { getByRole, getByTestId } = render(FilterSorting, { filter })
+
+    await fireEvent.click(getByRole('button'))
+
+    expect(getByTestId('content')).toBeTruthy()
+  })
+})

package/src/tests/routes/components/Explore/Filter/Search.test.js

@@ -0,0 +1,26 @@
+import { render, fireEvent } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import Search from '../../../../../routes/components/Explore/Filter/Search.svelte'
+
+describe('Search.svelte', () => {
+  it('Should fire given oninput event with the given query', async () => {
+    const oninput = vi.fn()
+
+    const { getByRole } = render(Search, { oninput })
+
+    await fireEvent.input(getByRole('searchbox'), { target: { value: 'some query' } })
+
+    expect(oninput).toHaveBeenCalledWith('some query')
+  })
+
+  it('Should fire given oninput event even if value is empty', async () => {
+    const oninput = vi.fn()
+
+    const { getByRole } = render(Search, { oninput })
+
+    await fireEvent.input(getByRole('searchbox'), { target: { value: '' } })
+
+    expect(oninput).toHaveBeenCalledWith('')
+  })
+})

package/src/tests/routes/components/Explore/Filter/TogglesWithSearch.test.js

@@ -0,0 +1,53 @@
+import { fireEvent, render } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import TogglesWithSearch from '../../../../../routes/components/Explore/Filter/TogglesWithSearch.svelte'
+
+describe('TogglesWithSearch.svelte', () => {
+  it('Should fire given onchange function with params for changed option when clicked', async () => {
+    const onchange = vi.fn()
+    const { getByText } = render(TogglesWithSearch, {
+      onchange,
+      options: [
+        { label: 'Some label', value: 'some-value' },
+        { label: 'Some second label', value: 'some-second-value' },
+      ],
+    })
+
+    await fireEvent.click(getByText('Some label'))
+    expect(onchange).toHaveBeenCalledWith(['some-value'])
+
+    await fireEvent.click(getByText('Some second label'))
+    expect(onchange).toHaveBeenCalledWith(['some-value', 'some-second-value'])
+  })
+
+  it('Should show active state for the selected items when given', () => {
+    const onchange = vi.fn()
+    const { getByText } = render(TogglesWithSearch, {
+      onchange,
+      options: [
+        { label: 'Some label', value: 'some-value' },
+        { label: 'Some second label', value: 'some-second-value' },
+      ],
+      selected: ['some-value'],
+    })
+
+    expect(getByText('Some label').classList).toContain('active')
+  })
+
+  it('Should limit shown options to the given query', async () => {
+    const onchange = vi.fn()
+    const { queryByText, getByRole } = render(TogglesWithSearch, {
+      onchange,
+      options: [
+        { label: 'Some label', value: 'some-value' },
+        { label: 'Some second label', value: 'some-second-value' },
+      ],
+    })
+
+    await fireEvent.input(getByRole('textbox'), { target: { value: 'second' } })
+
+    expect(queryByText('Some label')).not.toBeTruthy()
+    expect(queryByText('Some second label')).toBeTruthy()
+  })
+})

package/src/tests/routes/components/GridTitle.test.js

@@ -0,0 +1,42 @@
+import { fireEvent, render  } from '@testing-library/svelte'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+
+import GridTitle from '../../../routes/components/GridTitle.svelte'
+import { title } from '$lib/fakeData'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+vi.mock('svelte', async (importActual) => ({
+  ...(await importActual()),
+  getContext: vi.fn(),
+}))
+
+describe('GridTitle.svelte', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  it('Should render the given image', () => {
+    const { getByAltText } = render(GridTitle, { title })
+
+    expect(getByAltText(`Movie poster for '${title.title}'`)).toBeTruthy()
+  })
+
+  it('Should render the given info', () => {
+    const { getByText } = render(GridTitle, { title })
+
+    expect(getByText(title.title)).toBeTruthy()
+    expect(getByText(title.imdb_score)).toBeTruthy()
+  })
+
+  it('Should fire the given onclick function when clicked', async () => {
+    const onclick = vi.fn()
+    const { getByText } = render(GridTitle, { title, onclick })
+
+    await fireEvent.click(getByText(title.title))
+
+    expect(onclick).toHaveBeenCalled()
+  })
+})

package/src/tests/routes/components/ListTitle.test.js

@@ -30,7 +30,7 @@ describe('ListTitle.svelte', () => {
     expect(getByText(title.title)).toBeTruthy()
     expect(getByText(title.imdb_score)).toBeTruthy()
     expect(getByText(title.year)).toBeTruthy()
-    expect(getByText(title.description)).toBeTruthy()
+    expect(getByText(title.description || '')).toBeTruthy()
   })
 
   it('Should not have small class by default', () => {