@playpilot/tpi 1.0.0

package/src/tests/routes/components/Editorial/EditorItem.test.js

@@ -0,0 +1,142 @@
+import { fireEvent, render } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import EditorItem from '../../../../routes/components/Editorial/EditorItem.svelte'
+import { injectLinksInDocument } from '$lib/linkInjection'
+import { title } from '$lib/fakeData'
+
+describe('EditorItem.svelte', () => {
+  const linkInjection = {
+    sid: '1',
+    title: 'an injection',
+    sentence: 'This is a sentence with an injection.',
+    playpilot_url: 'https://some-link.com/',
+    key: 'some-key',
+    title_details: title,
+  }
+
+  it('Should render the given title', () => {
+    const { getByText, getByRole } = render(EditorItem, { linkInjection })
+
+    expect(getByText(linkInjection.title_details.title)).toBeTruthy()
+    expect(/** @type {HTMLImageElement} */ (getByRole('presentation')).src).toContain(linkInjection.title_details.standing_poster)
+  })
+
+  it('Should highlight and unhighlight the matching link when component is hovered', async () => {
+    document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+    injectLinksInDocument(Array.from(document.querySelectorAll('p')), [linkInjection], () => null)
+
+    const { getAllByText, container } = render(EditorItem, { linkInjection })
+
+    await fireEvent.mouseEnter(/** @type {HTMLElement} */ (container.querySelector('.item')))
+    expect(getAllByText(linkInjection.title)[0].classList).toContain('injection-highlight')
+
+    await fireEvent.mouseLeave(/** @type {HTMLElement} */ (container.querySelector('.item')))
+    expect(getAllByText(linkInjection.title)[0].classList).not.toContain('injection-highlight')
+  })
+
+  it('Should highlight multiple elements if multiple are present', async () => {
+    document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+    const linkInjectionWithAfterArticle = { ...linkInjection, in_text: true, after_article: true }
+    injectLinksInDocument(Array.from(document.querySelectorAll('p')), [linkInjectionWithAfterArticle], () => null)
+
+    const { container } = render(EditorItem, { linkInjection })
+
+    await fireEvent.mouseEnter(/** @type {HTMLElement} */ (container.querySelector('.item')))
+    expect(document.querySelectorAll('.injection-highlight')).toHaveLength(2)
+  })
+
+  it('Should scroll matching link into view when component is clicked', async () => {
+    document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+    injectLinksInDocument(Array.from(document.querySelectorAll('p')), [linkInjection], () => null)
+
+    const { container } = render(EditorItem, { linkInjection })
+
+    await fireEvent.click(/** @type {HTMLElement} */ (container.querySelector('.item')))
+    expect(window.HTMLElement.prototype.scrollIntoView).toHaveBeenCalled()
+  })
+
+  it('Should not scroll matching link into view when component is clicked but there is no matching injection', async () => {
+    document.body.innerHTML = '<p>This has no matching injections.</p>'
+
+    injectLinksInDocument(Array.from(document.querySelectorAll('p')), [linkInjection], () => null)
+
+    const { container } = render(EditorItem, { linkInjection })
+
+    await fireEvent.click(/** @type {HTMLElement} */ (container.querySelector('.item')))
+    expect(window.HTMLElement.prototype.scrollIntoView).not.toHaveBeenCalled()
+  })
+
+  it('Should not scroll matching link into view when component is clicked on button or input', async () => {
+    document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+    injectLinksInDocument(Array.from(document.querySelectorAll('p')), [linkInjection], () => null)
+
+    const { container } = render(EditorItem, { linkInjection })
+
+    await fireEvent.click(/** @type {HTMLElement} */ (container.querySelector('.expand')))
+    expect(window.HTMLElement.prototype.scrollIntoView).not.toHaveBeenCalled()
+
+    await fireEvent.click(/** @type {HTMLElement} */ (container.querySelector('input')))
+    expect(window.HTMLElement.prototype.scrollIntoView).not.toHaveBeenCalled()
+  })
+
+  it('Should highlight element in editor when hovering element on page', async () => {
+    document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+    injectLinksInDocument(Array.from(document.querySelectorAll('p')), [linkInjection], () => null)
+
+    await new Promise(res => setTimeout(res))
+
+    const onhighlight = vi.fn()
+    const { container } = render(EditorItem, { linkInjection, onhighlight })
+
+    await fireEvent.mouseOver(/** @type {HTMLElement} */ (document.querySelector(`[data-playpilot-injection-key=${ linkInjection.key }]`)))
+    expect(container.querySelector('.highlighted')).toBeTruthy()
+    expect(onhighlight).toHaveBeenCalled()
+  })
+
+  it('Should show expanded content after clicking expand', async () => {
+    const { container, getByLabelText } = render(EditorItem, { linkInjection })
+
+    expect(container.querySelector('.expanded')).not.toBeTruthy()
+
+    await fireEvent.click(getByLabelText('Expand'))
+    expect(container.querySelector('.expanded')).toBeTruthy()
+  })
+
+  it('Should show different state when injection failed', () => {
+    const { getByText, queryByLabelText } = render(EditorItem, { linkInjection: { ...linkInjection, failed: true } })
+
+    expect(getByText('the link could not be injected', { exact: false })).toBeTruthy()
+    expect(queryByLabelText('Expand')).not.toBeTruthy()
+  })
+
+  it('Should show length of title if length is given', () => {
+    const title_details = { ...linkInjection.title_details, length: 20 }
+    const { getByTestId, getByText } = render(EditorItem, { linkInjection: { ...linkInjection, title_details } })
+
+    expect(getByTestId('length')).toBeTruthy()
+    expect(getByText('20m')).toBeTruthy()
+  })
+
+  it('Should not show length of title if no length is given', () => {
+    const title_details = { ...linkInjection.title_details, length: null }
+    const { queryByTestId } = render(EditorItem, { linkInjection: { ...linkInjection, title_details } })
+
+    expect(queryByTestId('length')).not.toBeTruthy()
+  })
+
+  it('Should call given onremove function when remove button is clicked', async () => {
+    const onremove = vi.fn()
+    const { getByLabelText, getByText } = render(EditorItem, { linkInjection, onremove })
+
+    await fireEvent.click(getByLabelText('More options'))
+    await fireEvent.click(getByText('Remove'))
+
+    expect(onremove).toHaveBeenCalled()
+  })
+})

package/src/tests/routes/components/Editorial/ManualInjection.test.js

@@ -0,0 +1,114 @@
+import { fireEvent, render, waitFor } from '@testing-library/svelte'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import TitleSearch from '../../../../routes/components/Editorial/ManualInjection.svelte'
+import { searchTitles } from '$lib/search'
+import { title } from '$lib/fakeData'
+
+vi.mock('$lib/search', () => ({
+  searchTitles: vi.fn(),
+}))
+
+describe('TitleSearch.svelte', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+
+    document.body.innerHTML = '<div>Some text in a sentence</div>'
+
+    const container = document.querySelector('div')
+
+    // @ts-ignore
+    window.getSelection = vi.fn(() => ({
+      toString: () => 'text',
+      getRangeAt: () => ({
+        commonAncestorContainer: container,
+        startContainer: container,
+        startOffset: 0,
+        endOffset: 0,
+      }),
+    }))
+  })
+
+  it('Should input selected text in selected text input and search input', async () => {
+    const { getByLabelText } = render(TitleSearch, { htmlString: document.body.innerHTML, onsave: () => null })
+
+    await fireEvent.click(window)
+
+    expect(window.getSelection).toHaveBeenCalled()
+    expect(/** @type {HTMLFormElement} */ (getByLabelText('Select text on the page')).value).toBe('text')
+    expect(/** @type {HTMLFormElement} */ (getByLabelText('Search...')).value).toBe('text')
+  })
+
+  it('Should disable save button by default', async () => {
+    const { getByText } = render(TitleSearch, { htmlString: '', onsave: () => null })
+
+    expect(getByText('Add playlink').hasAttribute('disabled')).toBeTruthy()
+  })
+
+  it('Should enable save button after selecting text and selecting title from TitleSearch', async () => {
+    vi.mocked(searchTitles).mockResolvedValueOnce([title])
+
+    const { getByText } = render(TitleSearch, { htmlString: document.body.innerHTML, onsave: () => null })
+
+    await fireEvent.click(window)
+    await waitFor(() => getByText(title.title))
+    await fireEvent.click(getByText(title.title))
+
+    expect(getByText('Add playlink').hasAttribute('disabled')).not.toBeTruthy()
+  })
+
+  it('Should call given onsave function when clicked', async () => {
+    vi.mocked(searchTitles).mockResolvedValueOnce([title])
+
+    const onsave = vi.fn()
+    const { getByText } = render(TitleSearch, { htmlString: document.body.innerHTML, onsave })
+
+    await fireEvent.click(window)
+    await fireEvent.click(getByText(title.title))
+    await fireEvent.click(getByText('Add playlink'))
+
+    expect(onsave).toHaveBeenCalledWith({
+      sid: title.sid,
+      title: 'text',
+      sentence: 'Some text in a sentence',
+      playpilot_url: `https://www.playpilot.com/show/${title.slug}`,
+      key: expect.any(String),
+      title_details: title,
+    })
+  })
+
+  it('Should select content outside of element if content is too short', async () => {
+    vi.mocked(searchTitles).mockResolvedValueOnce([title])
+
+    document.body.innerHTML = '<div>Some <strong>text</strong> in a sentence</div>'
+
+    const container = document.querySelector('strong')
+
+    // @ts-ignore
+    window.getSelection = vi.fn(() => ({
+      toString: () => 'text',
+      getRangeAt: () => ({
+        commonAncestorContainer: container,
+        startContainer: container,
+        startOffset: 0,
+        endOffset: 0,
+      }),
+    }))
+
+    const onsave = vi.fn()
+    const { getByText } = render(TitleSearch, { htmlString: document.body.innerHTML, onsave })
+
+    await fireEvent.click(window)
+    await fireEvent.click(getByText(title.title))
+    await fireEvent.click(getByText('Add playlink'))
+
+    expect(onsave).toHaveBeenCalledWith({
+      sid: title.sid,
+      title: 'text',
+      sentence: 'Some text in a sentence',
+      playpilot_url: `https://www.playpilot.com/show/${title.slug}`,
+      key: expect.any(String),
+      title_details: title,
+    })
+  })
+})

package/src/tests/routes/components/Editorial/PlaylinkTypeSelect.test.js

@@ -0,0 +1,63 @@
+import { fireEvent, render } from '@testing-library/svelte'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import PlaylinkTypeSelect from '../../../../routes/components/Editorial/PlaylinkTypeSelect.svelte'
+
+describe('PlaylinkTypeSelect.svelte', () => {
+  /** @type {LinkInjection} */
+  const linkInjection = {
+    sid: '1',
+    title: 'test',
+    sentence: 'Some sentence',
+    playpilot_url: 'https://playpilot.com/movie/example-3/',
+    key: 'some-key',
+  }
+
+  beforeEach(() => {
+    delete linkInjection.after_article
+  })
+
+  it('Should render options with default given value', () => {
+    const { getByText } = render(PlaylinkTypeSelect, { linkInjection })
+
+    expect(getByText('In-text Playlink')).toBeTruthy()
+    expect(getByText('Bottom Playlink')).toBeTruthy()
+
+    expect(/** @type {HTMLButtonElement} */ (getByText('In-text Playlink').closest('button')).classList).toContain('active')
+    expect(/** @type {HTMLButtonElement} */ (getByText('Bottom Playlink').closest('button')).classList).not.toContain('active')
+  })
+
+  it('Should change value and active state on click of each switch', async () => {
+    const { getByText } = render(PlaylinkTypeSelect, { linkInjection })
+
+    await fireEvent.click(getByText('In-text Playlink'))
+    expect(/** @type {HTMLButtonElement} */ (getByText('In-text Playlink').closest('button')).classList).not.toContain('active') // Starts as active
+
+    await fireEvent.click(getByText('Bottom Playlink'))
+    expect(/** @type {HTMLButtonElement} */ (getByText('Bottom Playlink').closest('button')).classList).toContain('active') // Starts as inactive
+  })
+
+  it('Should show after article style options after selecting bottom playlinks', async () => {
+    const { queryByText, getByText } = render(PlaylinkTypeSelect, { linkInjection })
+
+    expect(queryByText('Bottom playlinks style')).not.toBeTruthy()
+
+    await fireEvent.click(getByText('Bottom Playlink'))
+    expect(getByText('Bottom playlinks style')).toBeTruthy()
+  })
+
+  it('Should toggle after article style options on click', async () => {
+    const { getByText } = render(PlaylinkTypeSelect, { linkInjection })
+
+    await fireEvent.click(getByText('Bottom Playlink'))
+
+    expect(getByText('Playlinks sentence').classList).toContain('active')
+    expect(getByText('Modal button').classList).not.toContain('active')
+    expect(/** @type {HTMLElement} */(document.querySelector('.active-marker')).classList).not.toContain('right')
+
+    await fireEvent.click(getByText('Modal button'))
+    expect(getByText('Playlinks sentence').classList).not.toContain('active')
+    expect(getByText('Modal button').classList).toContain('active')
+    expect(/** @type {HTMLElement} */(document.querySelector('.active-marker')).classList).toContain('right')
+  })
+})

package/src/tests/routes/components/Editorial/Search/TitleSearch.test.js

@@ -0,0 +1,58 @@
+import { fireEvent, render } from '@testing-library/svelte'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import TitleSearch from '../../../../../routes/components/Editorial/Search/TitleSearch.svelte'
+import { searchTitles } from '$lib/search'
+import { title } from '$lib/fakeData'
+
+vi.mock('$lib/search', () => ({
+  searchTitles: vi.fn(),
+}))
+
+describe('TitleSearch.svelte', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  it('Should search for titles when inputting text', async () => {
+    const { getByRole } = render(TitleSearch)
+
+    await fireEvent.input(getByRole('textbox'), { target: { value: 'test' } })
+
+    expect(searchTitles).toHaveBeenCalled()
+  })
+
+  it('Should show empty state when no results are returned', async () => {
+    vi.mocked(searchTitles).mockResolvedValueOnce([])
+
+    const { getByRole, getByText } = render(TitleSearch)
+
+    await fireEvent.input(getByRole('textbox'), { target: { value: 'test' } })
+
+    expect(getByText('No results found')).toBeTruthy()
+  })
+
+  it('Should show results when given', async () => {
+    vi.mocked(searchTitles).mockResolvedValueOnce([title])
+
+    const { getByRole, getByText } = render(TitleSearch)
+
+    await fireEvent.input(getByRole('textbox'), { target: { value: 'test' } })
+
+    expect(getByText(title.title)).toBeTruthy()
+    expect(getByText(title.type)).toBeTruthy()
+  })
+
+  it('Should fire the given onselect function and close the results when a result is clicked', async () => {
+    vi.mocked(searchTitles).mockResolvedValueOnce([title])
+
+    const onselect = vi.fn()
+    const { getByRole, queryByRole } = render(TitleSearch, { onselect })
+
+    await fireEvent.input(getByRole('textbox'), { target: { value: 'test' } })
+    await fireEvent.click(getByRole('button'))
+
+    expect(onselect).toHaveBeenCalledWith(title)
+    expect(queryByRole('button')).not.toBeTruthy()
+  })
+})

package/src/tests/routes/components/Editorial/Switch.test.js

@@ -0,0 +1,60 @@
+import { fireEvent, render  } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import Switch from '../../../../routes/components/Editorial/Switch.svelte'
+import { createRawSnippet } from 'svelte'
+
+describe('Switch.svelte', () => {
+  const children = createRawSnippet(() => ({ render: () => '<div>Some snippet</div>' }))
+
+  it('Should render the given snippet', () => {
+    const { getByText } = render(Switch, { label: 'Some label', children })
+
+    expect(getByText('Some snippet')).toBeTruthy()
+  })
+
+  it('Should be inactive by default', () => {
+    const { getByRole } = render(Switch, { children })
+
+    expect(getByRole('button').classList).not.toContain('active')
+  })
+
+  it('Should be active when prop is given', () => {
+    const { getByRole } = render(Switch, { active: true, children })
+
+    expect(getByRole('button').classList).toContain('active')
+  })
+
+  it('Should not have fullwidth class by default', () => {
+    const { getByRole } = render(Switch, { children })
+
+    expect(getByRole('button').classList).not.toContain('fullwidth')
+  })
+
+  it('Should have fullwidth class when prop is given', () => {
+    const { getByRole } = render(Switch, { fullwidth: true, children })
+
+    expect(getByRole('button').classList).toContain('fullwidth')
+  })
+
+  it('Should switch the active state when clicked', async () => {
+    const { getByRole } = render(Switch, { children })
+
+    await fireEvent.click(getByRole('button'))
+    expect(getByRole('button').classList).toContain('active')
+
+    await fireEvent.click(getByRole('button'))
+    expect(getByRole('button').classList).not.toContain('active')
+
+    await fireEvent.click(getByRole('button'))
+    expect(getByRole('button').classList).toContain('active')
+  })
+
+  it('Should fire given onclick function when clicked', async () => {
+    const onclick = vi.fn()
+    const { getByRole } = render(Switch, { onclick, children })
+
+    await fireEvent.click(getByRole('button'))
+    expect(onclick).toHaveBeenCalled()
+  })
+})

package/src/tests/routes/components/Editorial/TextInput.test.js

@@ -0,0 +1,30 @@
+import { render  } from '@testing-library/svelte'
+import { describe, expect, it } from 'vitest'
+
+import LinkInput from '../../../../routes/components/Editorial/TextInput.svelte'
+
+describe('TextInput.svelte', () => {
+  it('Should render the given label', () => {
+    const { getByLabelText } = render(LinkInput, { label: 'Some label' })
+
+    expect(getByLabelText('Some label')).toBeTruthy()
+  })
+
+  it('Should use the given value', () => {
+    const { getByRole } = render(LinkInput, { value: 'Some value' })
+
+    expect(/** @type {HTMLFormElement} */ (getByRole('textbox')).value).toBe('Some value')
+  })
+
+  it('Should not be labeled as readonly by default', () => {
+    const { getByRole } = render(LinkInput, { value: 'Some value' })
+
+    expect(/** @type {HTMLFormElement} */ (getByRole('textbox')).hasAttribute('readonly')).not.toBeTruthy()
+  })
+
+  it('Should be labeled as readonly when given', () => {
+    const { getByRole } = render(LinkInput, { value: 'Some value', readonly: true })
+
+    expect(/** @type {HTMLFormElement} */ (getByRole('textbox')).hasAttribute('readonly')).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,37 @@
+import { render, fireEvent } from '@testing-library/svelte'
+import { describe, expect, it } from 'vitest'
+
+import Genres from '../../../routes/components/Genres.svelte'
+import genreData from '$lib/genres.json'
+
+describe('Genres.svelte', () => {
+  it('Should match genre slug to genres in genres.json', () => {
+    const { getByText } = render(Genres, { genres: ['101'] })
+
+    // @ts-ignore
+    expect(getByText(genreData.find(g => g.slug === '101').name)).toBeTruthy()
+  })
+
+  it('Should render only the first given genre by default', () => {
+    const { getByText, queryByText } = render(Genres, { genres: ['101', '102'] })
+
+    // @ts-ignore
+    expect(getByText(genreData.find(g => g.slug === '101').name)).toBeTruthy()
+    // @ts-ignore
+    expect(queryByText(genreData.find(g => g.slug === '102').name)).not.toBeTruthy()
+    expect(getByText('+1')).toBeTruthy()
+  })
+
+  it('Should expand and render all', async () => {
+    const { getByText, queryByText } = render(Genres, { genres: ['101', '102'] })
+
+    await fireEvent.click(getByText('+1'))
+
+    // @ts-ignore
+    expect(getByText(genreData.find(g => g.slug === '101').name)).toBeTruthy()
+    // @ts-ignore
+    expect(getByText(genreData.find(g => g.slug === '102').name)).toBeTruthy()
+
+    expect(queryByText('+1')).not.toBeTruthy()
+  })
+})

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

@@ -0,0 +1,84 @@
+import { render, fireEvent } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import Modal from '../../../routes/components/Modal.svelte'
+
+describe('Modal.svelte', () => {
+  it('Should fire given onclose function when backdrop is clicked', async () => {
+    const onclose = vi.fn()
+    const { container } = render(Modal, { children: () => null, onclose })
+
+    await fireEvent.click(/** @type {Node} */ (container.querySelector('.backdrop')))
+
+    expect(onclose).toHaveBeenCalled()
+  })
+
+  it('Should fire given onclose function when close button is clicked', async () => {
+    const onclose = vi.fn()
+    const { container } = render(Modal, { children: () => null, onclose })
+
+    await fireEvent.click(/** @type {Node} */ (container.querySelector('button')))
+
+    expect(onclose).toHaveBeenCalled()
+  })
+
+  it('Should not fire given onclose function when dialog is clicked', async () => {
+    const onclose = vi.fn()
+    const { container } = render(Modal, { children: () => null, onclose })
+
+    await fireEvent.click(/** @type {Node} */ (container.querySelector('.dialog')))
+
+    expect(onclose).not.toHaveBeenCalled()
+  })
+
+  it('Should fire given onclose function when escape key is pressed', async () => {
+    const onclose = vi.fn()
+    render(Modal, { children: () => null, onclose })
+
+    fireEvent.keyDown(window, { key: 'Escape' })
+
+    expect(onclose).toHaveBeenCalled()
+  })
+
+  it('Should not fire given onclose function when key other than escape key is pressed', async () => {
+    const onclose = vi.fn()
+    render(Modal, { children: () => null, onclose })
+
+    fireEvent.keyDown(window, { key: 'a' })
+    fireEvent.keyDown(window, { key: 'Enter' })
+    fireEvent.keyDown(window, { key: 'Space' })
+
+    expect(onclose).not.toHaveBeenCalled()
+  })
+
+  it('Should fire given onscroll function when dialog is scrolled', async () => {
+    const onscroll = vi.fn()
+    const { getByRole } = render(Modal, { children: () => null, onscroll })
+
+    await fireEvent.scroll(getByRole('dialog'))
+
+    expect(onscroll).toHaveBeenCalled()
+  })
+
+  it('Should set body overflow on mount', () => {
+    render(Modal, { children: () => null })
+
+    expect(document.body.style.overflowY).toBe('hidden')
+  })
+
+  it('Should remove body overflow when component is unmounted', () => {
+    const { unmount } = render(Modal, { children: () => null })
+    unmount()
+
+    expect(document.body.style.overflowY).toBe('')
+  })
+
+  it('Should use body overflow as it was before the component was mounted when component is unmounted', () => {
+    document.body.style.overflowY = 'some-value'
+
+    const { unmount } = render(Modal, { children: () => null })
+    unmount()
+
+    expect(document.body.style.overflowY).toBe('some-value')
+  })
+})

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

@@ -0,0 +1,33 @@
+import { render } from '@testing-library/svelte'
+import { describe, expect, it } from 'vitest'
+
+import Participants from '../../../routes/components/Participants.svelte'
+
+describe('Participants.svelte', () => {
+  it('Should render each given participant', () => {
+    const participants = [
+      { name: 'Some name', character: 'Some character' },
+      { name: 'Some second name', character: 'Second second character' },
+    ]
+    const { getByText } = render(Participants, { participants })
+
+    expect(getByText('Some name')).toBeTruthy()
+    expect(getByText('Some second name')).toBeTruthy()
+  })
+
+  it('Should limit the character name if it is too long', () => {
+    const participants = [{ name: 'Some name', character: 'Some longer character name' }]
+    const { getByText, queryByText } = render(Participants, { participants })
+
+    expect(queryByText('Some longer character name')).not.toBeTruthy()
+    expect(getByText('Some longer characte...')).toBeTruthy()
+  })
+
+  it('Should handle not being given any participants', () => {
+    /** @type {Participant[]} */
+    const participants = []
+    const { container } = render(Participants, { participants })
+
+    expect(container.querySelectorAll('.participant').length).toBe(0)
+  })
+})