Nuxt/test/e2e/fetch.browser.test.js

import Browser from '../utils/browser'
import { loadFixture, getPort, Nuxt } from '../utils'

let port
const browser = new Browser()
const url = route => 'http://127.0.0.1:' + port + route

let nuxt = null
let page = null

describe('basic browser', () => {
  beforeAll(async () => {
    const config = await loadFixture('fetch')
    nuxt = new Nuxt(config)
    await nuxt.ready()

    port = await getPort()
    await nuxt.server.listen(port, '127.0.0.1')

    await browser.start({
      // slowMo: 50,
      // headless: false
    })
  })

  test('Open /', async () => {
    page = await browser.page(url('/'))
    expect(await page.$text('pre')).toContain('Atinux')
  })

  test('/fetch-client', async () => {
    await page.nuxt.navigate('/fetch-client')
    expect(await page.$text('p')).toContain('Fetching...')
    await page.waitForSelector('pre')
    expect(await page.$text('pre')).toContain('pi0')
  })

  test('/old-fetch', async () => {
    await page.nuxt.navigate('/old-fetch')
    const storeState = await page.nuxt.storeState()
    expect(storeState).toMatchObject({ oldFetchData: 'old-fetch' })
  })

  test('/fetch-error', async () => {
    await page.nuxt.navigate('/fetch-error')
    expect(await page.$text('p')).toContain('Fetching...')
    await page.waitForSelector('#error')
    expect(await page.$text('#error')).toContain('fetch-error')
  })

  test('/fetch-component', async () => {
    await page.nuxt.navigate('/fetch-component')
    expect(await page.$text('p')).toContain('Fetching...')
    await page.waitForSelector('pre')
    expect(await page.$text('pre')).toContain('clarkdo')
  })

  test('/fetch-delay', async () => {
    const now = Date.now()
    await page.nuxt.navigate('/fetch-delay')
    expect(await page.$text('p')).toContain('Fetching for 1 second')
    await page.waitForSelector('pre')
    const delay = Date.now() - now
    expect(await page.$text('pre')).toContain('alexchopin')
    expect(delay).toBeGreaterThanOrEqual(1000)
  })

  test('/fetch-button', async () => {
    await page.nuxt.navigate('/fetch-button')
    expect(await page.$text('p')).toContain('Fetching...')
    await page.waitForSelector('pre')
    expect(await page.$text('pre')).toContain('kevinmarrec')
    await page.click('button')
    expect(await page.$text('p')).toContain('Fetching...')
    await page.waitForSelector('pre')
    expect(await page.$text('pre')).toContain('kevinmarrec')
  })

  test('/nested', async () => {
    await page.nuxt.navigate('/nested')
    const fetchKeys = await page.evaluate(() => Object.keys(window.__NUXT__.fetch))
    expect(fetchKeys).toEqual([
      '0',
      'DefaultLayout:0'
    ])
    expect(await page.$text('div')).toContain('foo-bar-baz')
    expect(await page.$text('div')).toContain('fizz-buzz')
    expect(await page.$text('button')).toContain('fetch')
  })

  test('/nested/child', async () => {
    await page.nuxt.navigate('/nested/child')
    await page.waitForSelector('pre')
    expect(await page.$text('pre')).toContain('Atinux')
    const fetchKeys = await page.evaluate(() => Object.keys(window.__NUXT__.fetch))
    expect(fetchKeys).toEqual([
      '0',
      'DefaultLayout:0'
    ])
    expect(await page.$text('div')).toContain('foo-bar-baz')
    expect(await page.$text('div')).toContain('fizz-buzz')
    await page.close()
  })

  test('ssr: /nested', async () => {
    page = await browser.page(url('/nested'))
    expect(await page.$text('div')).toContain('foo-bar-baz')
    expect(await page.$text('div')).toContain('fizz-buzz')
    const fetchKeys = await page.evaluate(() => Object.keys(window.__NUXT__.fetch))
    expect(fetchKeys).toEqual([
      '0',
      'DefaultLayout:0',
      'ie0'
    ])
    expect(await page.$text('button')).toContain('has fetch')
    await page.close()
  })

  test('ssr: /nested/child', async () => {
    page = await browser.page(url('/nested/child'))
    expect(await page.$text('pre')).toContain('Atinux')
    const fetchKeys = await page.evaluate(() => Object.keys(window.__NUXT__.fetch))
    expect(fetchKeys).toEqual([
      '0',
      'DefaultLayout:0',
      'team:0'
    ])
    const team = await page.evaluate(() => window.__NUXT__.fetch['team:0'].team)
    expect(team.includes('Atinux'))
    expect(await page.$text('div')).toContain('foo-bar-baz')
    expect(await page.$text('div')).toContain('fizz-buzz')
    await page.close()
  })

  test('ssr: /fetch-root', async () => {
    const page = await browser.page(url('/fetch-root'))
    expect(await page.$text('button')).toContain('has fetch')
    await page.close()
  })

  test('ssr: /fetch-client', async () => {
    const page = await browser.page(url('/fetch-client'))
    expect(await page.$text('p')).toContain('Fetching...')
    await page.waitForSelector('pre')
    expect(await page.$text('pre')).toContain('pi0')
    await page.close()
  })

  test('ssr: /fetch-conditional', async () => {
    const page = await browser.page(url('/fetch-conditional'))
    expect(await page.$text('pre')).toContain('galvez')
    await page.close()
  })

  test('ssr: /fetch-conditional?fetch_client=true', async () => {
    const page = await browser.page(url('/fetch-conditional?fetch_client=true'))
    expect(await page.$text('p')).toContain('Fetching...')
    await page.waitForSelector('pre')
    expect(await page.$text('pre')).toContain('pimlie')
    await page.close()
  })

  test('ssr: /fetch-error', async () => {
    const page = await browser.page(url('/fetch-error'))
    expect(await page.$text('#error')).toContain('fetch-error')
    await page.close()
  })

  test('ssr: /fetch-deep', async () => {
    const page = await browser.page(url('/fetch-deep'))
    const expectedState = {
      foo: 'barbar',
      user: {
        name: 'Potato',
        inventory: {
          type: 'green',
          items: ['A', 'B']
        }
      },
      async: 'data',
      async2: 'data2fetch'
    }

    // Hydrated HTML
    const renderedData = await page.$text('#data').then(t => JSON.parse(t))
    expect(renderedData).toMatchObject(expectedState)

    // Fragments
    const { data, fetch } = await page.evaluate(() => window.__NUXT__)
    expect(data.length).toBe(1)
    expect(Object.keys(fetch).length).toBe(2)

    // asyncData mutations
    expect(data[0]).toMatchObject({ async: 'data', async2: 'data2' })

    // fetch mutations
    expect(fetch[0]).toMatchObject({
      user: {
        inventory: { items: ['A', 'B'] },
        name: 'Potato'
      },
      foo: 'barbar',
      async2: 'data2fetch'
    })

    await page.close()
  })

  // Close server and ask nuxt to stop listening to file changes
  afterAll(async () => {
    await nuxt.close()
  })

  // Stop browser
  afterAll(async () => {
    await browser.close()
  })
})