[nuxt][test] Help Needed with tests for a future contribution

[angelhdzmultimedia]

I finished working on the fix for the nuxt module to rename nuxt pages ending in .vine so that nuxt can render them without having to wrap them in a .vue file https://github.com/orgs/vue-vine/discussions/191#discussioncomment-11908154 because the .vine suffix isn't being stripped from the page.path so instead of /about it ends /about.vine, because for file-based routing Nuxt uses the file name for the path, and not the name of the default exported function, so when you navigate to /about you get a 404.

Added module's options pages: boolean, default: true. If true, registered .vine pages will be added. If false, they will still be present but hidden in a /vine:excluded path (tried to splice them from the array but I got a 404 with the index route).

export interface VueVineNuxtOptions {
  /**
   * If `true`, allows registered pages with .vine suffix to be rendered.  
   * If `false`, hides the .vine registered pages behind an exclusion route.  
   * 
   * @default true
   */
  pages: boolean
}

(the module alias should be vueVineNuxt for brevity and not vueVineNuxtModule).

Added a nuxt plugin template that auto imports a useVueVine util and its type, with the options from the module.
I'm using this util in the pages playground so that I can conditionally show the pages or not, depending on if pages is enabled or disabled, and other ideas I have like getVinePages and getSFCPages utils, to keep the vision of Vine being an opt-in, so you can have SFCs and Vine Components alongside.

Now I'm working on the tests. And here is where I need help.

I replaced $fetch with createPage from @nuxt/test-utils/e2e, so that I can make more specific queries like
page.locate('button', {hasText: 'some text'})
and then expect(await page.isEnabled()).toBe(true),
but I get an error on createPage('/').
The test is for the playground, where I added vine nuxt pages.

describe('pages enabled', async () => {
  await setup({
    rootDir: fileURLToPath(new URL('../../playground', import.meta.url)),
  })
  
    const page = await createPage('/')

  it('renders the index page', () => {
    const welcome = page.locator('welcome')
    expect(welcome).toBeDefined()
  })

 FAIL  test/playground/pages.test.ts [ test/playground/pages.test.ts ]
Error: page.goto: Protocol error (Page.navigate): Cannot navigate to invalid URL
Call log:
  - navigating to "/", waiting until "load"

Tried adding host: 'http://localhost:3000' and browser: true in the setup() options.

Will appreciate any help big time, because I want to start contributing to Vine but I'm new to tests and to CI, linting and all this.

[wzc520pyfm]

Nuxt module renaming is an incompatible change, maybe it should be released as 0.3.0. (vueVineNuxtModule => vueVineNuxt)

About tests, you can create a wip pr and we can debug it together.

[ShenQingchuan]

I'm not that familiar with things about Nuxt module, maybe we can talk about this in a dedicated PR ?
Have there been any changes to show us yet? 🤗💖

---

Oh, I think I understand what you're trying to say. I went back and reviewed your previous posts, and it seems like you've already solved the actual problem with a function you wrote yourself. It looks like you are now considering embedding it as an internal feature of a Nuxt Module for Vine? We are very excited about such progress.

[angelhdzmultimedia]

I'm not that familiar with things about Nuxt module, maybe we can talk about this in a dedicated PR ? Have there been any changes to show us yet? 🤗💖

Oh, I think I understand what you're trying to say. I went back and reviewed your previous posts, and it seems like you've already solved the actual problem with a function you wrote yourself. It looks like you are now considering embedding it as an internal feature of a Nuxt Module for Vine? We are very excited about such progress.

I'm sending the pr later today. I was very ambicious to add many features, but I'll start small, just fixing the nuxt pages, then I'll add the pages playground, and then we'll discuss the tests for it. What do you think? :)

[angelhdzmultimedia]

Of course, I have pnpm installed with corepack and it works on external and integrated terminals.

OS: Windows 10
Node: 23.8.0
😭

Maybe I should just fork the repo via the Github website and add the changes to the nuxt-module there.

[angelhdzmultimedia]

#211
Done? 😳

[ShenQingchuan]

Great!!!!🥳🥳♥️ we can talk in that PR thread later.