@playpilot/tpi 5.32.0 → 5.33.0-beta.explore.1

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(12)
+
+    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/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/Search.svelte'
+
+describe('Search.svelte', () => {
+  it('Should fire given oninput event with the given query', () => {
+    const oninput = vi.fn()
+
+    const { getByRole } = render(Search, { oninput })
+
+    fireEvent.input(getByRole('searchbox'), { target: { value: 'some query' } })
+
+    expect(oninput).toHaveBeenCalledWith('some query')
+  })
+
+  it('Should fire given oninput event even if value is empty', () => {
+    const oninput = vi.fn()
+
+    const { getByRole } = render(Search, { oninput })
+
+    fireEvent.input(getByRole('searchbox'), { target: { value: '' } })
+
+    expect(oninput).toHaveBeenCalledWith('')
+  })
+})

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

@@ -16,57 +16,57 @@ vi.mock('$lib/tracking', () => ({
 
 describe('Share.svelte', () => {
   it('Should open context menu on click', async () => {
-    const { getByLabelText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
     expect(queryByText('Copy URL')).not.toBeTruthy()
     expect(queryByText('Email')).not.toBeTruthy()
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
 
     expect(queryByText('Copy URL')).toBeTruthy()
     expect(queryByText('Email')).toBeTruthy()
   })
 
   it('Should close context menu on click of items', async () => {
-    const { getByLabelText, getByText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
     await fireEvent.click(getByText('Copy URL'))
 
     expect(queryByText('Copy URL')).not.toBeTruthy()
   })
 
   it('Should close context menu on click of body', async () => {
-    const { getByLabelText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
     await fireEvent.click(document.body)
 
     expect(queryByText('Copy URL')).not.toBeTruthy()
   })
 
   it('Should fire copyToClipboard on click of button', async () => {
-    const { getByLabelText, getByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
     await fireEvent.click(getByText('Copy URL'))
 
     expect(copyToClipboard).toHaveBeenCalledWith('some-url?utm_source=tpi')
   })
 
   it('Should fire track function on click of copy URL button', async () => {
-    const { getByLabelText, getByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
     await fireEvent.click(getByText('Copy URL'))
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.ShareTitle, null, { title: 'Some title', url: 'http://localhost:3000/', method: 'copy' })
   })
 
   it('Should fire track function on click of email button', async () => {
-    const { getByLabelText, getByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
     await fireEvent.click(getByText('Email'))
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.ShareTitle, null, { title: 'Some title', url: 'http://localhost:3000/', method: 'email' })

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

@@ -91,4 +91,17 @@ describe('Title.svelte', () => {
     expect(fetchParticipantsForTitle).toHaveBeenCalled()
     expect(fetchSimilarTitles).toHaveBeenCalled()
   })
+
+  it('Should show trailer button when embeddable_url is given', () => {
+    const { getByText } = render(Title, { title: { ...title, embeddable_url: 'some-url' } })
+
+    expect(getByText('Watch trailer')).toBeTruthy()
+  })
+
+  // Temporarily disabled while button is always visible
+  // it('Should not show trailer button when embeddable_url is not given', () => {
+  //   const { queryByText } = render(Title, { title })
+
+  //   expect(queryByText('Watch Trailer')).not.toBeTruthy()
+  // })
 })

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

@@ -0,0 +1,20 @@
+import { render, fireEvent } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import Trailer from '../../../routes/components/Trailer.svelte'
+import { title } from '$lib/fakeData'
+import { openTrailerOverlay } from '$lib/trailer'
+
+vi.mock('$lib/trailer', () => ({
+  openTrailerOverlay: vi.fn(),
+}))
+
+describe('Trailer.svelte', () => {
+  it('Should fire given onclick function with given title on click', async () => {
+    const { getByRole } = render(Trailer, { title })
+
+    await fireEvent.click(getByRole('button'))
+
+    expect(openTrailerOverlay).toHaveBeenCalledWith(title)
+  })
+})

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

@@ -0,0 +1,31 @@
+import { fireEvent, render } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import YouTubeEmbedOverlay from '../../../routes/components/YouTubeEmbedOverlay.svelte'
+
+describe('YouTubeEmbedOverlay.svelte', () => {
+  it('Should render embed iframe with given video url', () => {
+    const { container } = render(YouTubeEmbedOverlay, { embeddable_url: 'youtube.com/watch?v=abc', onclose: () => null })
+
+    // @ts-ignore
+    expect(container.querySelector('iframe').src).toBe('https://www.youtube.com/embed/abc?autoplay=true')
+  })
+
+  it('Should render error message if embeddable_url is invalid', () => {
+    const { container, getByText } = render(YouTubeEmbedOverlay, { embeddable_url: '-', onclose: () => null })
+
+    expect(container.querySelector('iframe')).not.toBeTruthy()
+    expect(getByText('Something went wrong')).toBeTruthy()
+  })
+
+  it('Should fire given onclose function on click of close button and backdrop', async () => {
+    const onclose = vi.fn()
+    const { getByLabelText, getByTestId } = render(YouTubeEmbedOverlay, { embeddable_url: '-', onclose })
+
+    await fireEvent.click(getByLabelText('Close'))
+    expect(onclose).toHaveBeenCalledTimes(1)
+
+    await fireEvent.click(getByTestId('backdrop'))
+    expect(onclose).toHaveBeenCalledTimes(2)
+  })
+})