Fixture typing

Hi guys,

I am implementing E2E tests in my Nuxt app and I would like to use the Page Object Model (POM) and fixtures patterns.

In my POM, I have this code :

import type { NuxtPage } from '@nuxt/test-utils'

export class ListArticlesPage {

  readonly page: NuxtPage

  constructor(page: NuxtPage) {
    this.page = page
  }

  async goto() {
    await this.page.goto('/annonces/creer', { waitUntil: 'hydration' })
  }

}

import type { NuxtPage } from '@nuxt/test-utils'

export class ListArticlesPage {

  readonly page: NuxtPage

  constructor(page: NuxtPage) {
    this.page = page
  }

  async goto() {
    await this.page.goto('/annonces/creer', { waitUntil: 'hydration' })
  }

}

Note how I have imported
NuxtPage
NuxtPage
from
@nuxt/test-utils
@nuxt/test-utils
so I can pass 'hydration' as an option to
goto
goto
.

Now in my fixtures, I have this code:

import type { NuxtPage } from '@nuxt/test-utils'
import { test as base } from '@nuxt/test-utils/playwright'

interface ListArticlesFixtures {
  listArticles: ListArticlesPage
}

export const test = base.extend<ListArticlesFixtures>({
  listArticles: async ({ page }, use) => {
    const listArticlesPage = new ListArticlesPage(page as NuxtPage)
    await use(listArticlesPage)
  },
})

import type { NuxtPage } from '@nuxt/test-utils'
import { test as base } from '@nuxt/test-utils/playwright'

interface ListArticlesFixtures {
  listArticles: ListArticlesPage
}

export const test = base.extend<ListArticlesFixtures>({
  listArticles: async ({ page }, use) => {
    const listArticlesPage = new ListArticlesPage(page as NuxtPage)
    await use(listArticlesPage)
  },
})

Here I have to cast

page

page

NuxtPage

NuxtPage

or else, typescript will complain.

Is it the expected way to do it ? Or is there a better way to handle this ?

Nuxt•8mo ago•

9 replies

tlafarge

Fixture typing

Hi guys,

I am implementing E2E tests in my Nuxt app and I would like to use the Page Object Model (POM) and fixtures patterns.

In my POM, I have this code :

import type { NuxtPage } from '@nuxt/test-utils'

export class ListArticlesPage {

  readonly page: NuxtPage

  constructor(page: NuxtPage) {
    this.page = page
  }

  async goto() {
    await this.page.goto('/annonces/creer', { waitUntil: 'hydration' })
  }

}

import type { NuxtPage } from '@nuxt/test-utils'

export class ListArticlesPage {

  readonly page: NuxtPage

  constructor(page: NuxtPage) {
    this.page = page
  }

  async goto() {
    await this.page.goto('/annonces/creer', { waitUntil: 'hydration' })
  }

}

Note how I have imported
NuxtPage
NuxtPage
from
@nuxt/test-utils
@nuxt/test-utils
so I can pass 'hydration' as an option to
goto
goto
.

Now in my fixtures, I have this code:

import type { NuxtPage } from '@nuxt/test-utils'
import { test as base } from '@nuxt/test-utils/playwright'

interface ListArticlesFixtures {
  listArticles: ListArticlesPage
}

export const test = base.extend<ListArticlesFixtures>({
  listArticles: async ({ page }, use) => {
    const listArticlesPage = new ListArticlesPage(page as NuxtPage)
    await use(listArticlesPage)
  },
})

import type { NuxtPage } from '@nuxt/test-utils'
import { test as base } from '@nuxt/test-utils/playwright'

interface ListArticlesFixtures {
  listArticles: ListArticlesPage
}

export const test = base.extend<ListArticlesFixtures>({
  listArticles: async ({ page }, use) => {
    const listArticlesPage = new ListArticlesPage(page as NuxtPage)
    await use(listArticlesPage)
  },
})

Here I have to cast

page

page

NuxtPage

NuxtPage

or else, typescript will complain.

Is it the expected way to do it ? Or is there a better way to handle this ?

Fixture typing

Similar Threads

Fixture typing

Similar Threads

Similar Threads

Similar Threads