Skip to content

[Feature]: Vue generate hooksConfig boilerplate  #31217

Open
@sand4rt

Description

@sand4rt

🚀 Feature Request

Allow create-playwright to generate the boilerplate code of the common Vue mount options. These APIs are also in Vue Test Utils and Testing Library, but it's not that obvious that this is also possible through the hooksConfig in one way or the other.

Providing those mount options directly inside the hooksConfig depends on #30269 tho and is desired for Angular as well: #27783 (comment).

Example

// playwright/index.ts
import type {
  Component,
  DefineComponent,
  Plugin,
  ComponentOptions,
  Directive,
} from 'vue';

export type HooksConfig = {
  components?: Record<string, Component | DefineComponent>;
  plugins?: (Plugin | [Plugin, ...any[]])[];
  directives?: Record<string, Directive>;
  provide?: Record<string, any>;
  mixins?: ComponentOptions[];
};

beforeMount<HooksConfig>(async ({ app, hooksConfig }) => {
  for (const [name, component] of Object.entries(hooksConfig?.components || {}))
    app.component(name, component);

  for (const plugin of hooksConfig?.plugins || []) {
    if (Array.isArray(plugin))
      app.use(plugin[0], ...plugin.slice(1))
    else 
      app.use(plugin)
  }

  for (const [name, directive] of Object.entries(hooksConfig?.directives || {}))
    app.directive(name, directive);

  for (const [key, value] of Object.entries(hooksConfig?.provide || {}))
    app.provide(key, value);

  for (const mixin of hooksConfig?.mixins || [])
    app.mixin(mixin);
});
// component.test.ts
import { router } from './router'; // note: `router` is not defined in a .vue file
import { Component } from './Component.vue';
import { Provide } from './provide'; // note: `Provide` is not defined in a .vue file
import { Directive } from './directive'; // note: `Directive` is not defined in a .vue file

await mount(App, {
  hooksConfig: { 
    plugins: [router],
    components: { Component },
    mixins: [Mixin],
    provide: { Provide },
    directives: { Directive },
  },
});

Motivation

These are not documented anywhere, even though most users needs this

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions