.testRun.ts

import { run, page, test, expect, getServerUrl, fetchHtml, autoRetry, expectError, sleep } from '@brillout/test-e2e'

export { testRun }

function testRun(viewFramework: 'vue' | 'react', cmd: 'npm run dev' | 'npm run preview') {
  run(cmd)

  const isDev = cmd === 'npm run dev'
  const isPreview = cmd === 'npm run preview'

  test('page content is rendered to HTML', async () => {
    const html = await fetchHtml('/')
    expect(html).toContain('<h1>Welcome to <code>vite-plugin-ssr</code></h1>')
  })

  test('page is rendered to the DOM and interactive', async () => {
    await page.goto(getServerUrl() + '/')
    expect(await page.textContent('h1')).toBe('Welcome to vite-plugin-ssr')

    // Interactive button
    expect(await page.textContent('button')).toBe('Counter 0')
    // `autoRetry` because browser-side code may not be loaded yet
    await autoRetry(async () => {
      await page.click('button')
      expect(await page.textContent('button')).toContain('Counter 1')
    })

    // Client-side routing
    await page.click('a[href="/star-wars"]')
    await autoRetry(async () => {
      expect(await page.textContent('h1')).toBe('Star Wars Movies')
    })
    expect(await page.textContent('body')).toContain('The Phantom Menace')

    // Page was Client-side Routed; we check whether the HTML is from the first page before Client-side Routing
    const html = await page.content()
    // `page.content()` doesn't return the original HTML (it dumps the DOM to HTML).
    // Therefore only the serialized `pageContext` tell us the original HTML.
    expect(html.split('_pageId').length).toBe(2)
    expect(html).toContain('"_pageId":"/pages/index"')
  })

  test('supports route functions', async () => {
    await page.goto(getServerUrl() + '/hello/alice')
    expect(await page.textContent('h1')).toContain('Hello')
    expect(await page.textContent('body')).toContain('Hi alice')

    await page.goto(getServerUrl() + '/hello/evan')
    expect(await page.textContent('h1')).toContain('Hello')
    expect(await page.textContent('body')).toContain('Hi evan')

    if (!isPreview) {
      await page.goto(getServerUrl() + '/hello')
      expect(await page.textContent('body')).toContain('Hi anonymous')
      await page.goto(getServerUrl() + '/hello/')
      expect(await page.textContent('body')).toContain('Hi anonymous')
    }
  })

  test('data fetching page, HTML', async () => {
    const html = await fetchHtml('/star-wars')
    expect(html).toContain('<a href="/star-wars/6">Revenge of the Sith</a>')
    expect(html).toContain('<a href="/star-wars/4">The Phantom Menace</a>')
  })

  test('data fetching page, DOM', async () => {
    await page.goto(getServerUrl() + '/star-wars')
    const text = await page.textContent('body')
    expect(text).toContain('Revenge of the Sith')
    expect(text).toContain('The Phantom Menace')

    if (viewFramework === 'vue') {
      // Attempt to make `examples/vue-full/.dev.test.ts` less flaky: it some times throws a "Hydration Mismatch" error (I don't know why).
      await sleep(1000)
    }
    await page.click('a[href="/star-wars/4"]')
    await autoRetry(async () => {
      expect(await page.textContent('h1')).toBe('The Phantom Menace')
    })
    const pageContent =
      viewFramework === 'vue'
        ? 'The Phantom Menace Release Date: 1999-05-19  Director: George Lucas  Producer: Rick McCallum'
        : 'The Phantom MenaceRelease Date: 1999-05-19Director: George LucasProducer: Rick McCallum'
    expect(await page.textContent('body')).toContain(pageContent)
  })

  test('markdown page HTML', async () => {
    const html = await fetchHtml('/markdown')
    expect(html).toContain('<title>Some Markdown Page</title>')
    expect(html).toContain('This page is written in <em>Markdown</em>')
    if (viewFramework === 'react') {
      expect(html).toContain('<button>Counter <!-- -->0</button>')
    } else {
      expect(html).toContain('<button>Counter 0</button>')
    }
  })

  test('markdown page DOM', async () => {
    await page.goto(getServerUrl() + '/markdown')
    expect(await page.textContent('body')).toContain('This page is written in Markdown')
    expect(await page.textContent('button')).toBe('Counter 0')
    // `autoRetry` because browser-side code may not be loaded yet
    await autoRetry(async () => {
      await page.click('button')
      expect(await page.textContent('button')).toContain('Counter 1')
    })
  })

  test('test 404 page', async () => {
    const html = await fetchHtml('/doesNotExist')
    expect(html).toContain('<h1>404 Page Not Found</h1>')
    expect(html).toContain('This page could not be found.')
  })

  if (viewFramework === 'react') {
    test('async pageContext', async () => {
      const html = await fetchHtml('/')
      expect(html).toContain('"someAsyncProps":42')
    })
  }

  // In production, we pre-render all pages and thus `throw RenderErrorPage()` will never be called.
  if (viewFramework === 'react' && isDev) {
    test('throw RenderErrorPage', async () => {
      await page.goto(getServerUrl() + '/hello/bob')
      expect(await page.textContent('h1')).toBe('404 Page Not Found')
      expectError(
        (log) =>
          log.logSource === 'Browser Error' &&
          log.logText.includes('http://localhost:3000/hello/bob') &&
          log.logText.includes('Failed to load resource: the server responded with a status of 404 (Not Found)')
      )
      const txt = 'Unknown name: bob.'
      expect(await page.textContent('body')).toContain(txt)
      const html = await fetchHtml('/hello/bob')
      expect(html).toContain(txt)
    })
  }
}