@atomic-testing/vue-3 0.77.0 → 0.78.0

package/README.md

@@ -1,9 +1,166 @@
 # @atomic-testing/vue-3
 
-Adapter for integrating Atomic Testing with [Vue 3](https://vuejs.org).
+**Vue 3 test adapter** that extends Atomic Testing's component driver pattern to Vue applications. It enables testing Vue components using the same high-level semantic APIs used across React, Playwright, and DOM environments.
+
+## Overview
+
+The `@atomic-testing/vue-3` package brings Atomic Testing's "component driver" abstraction to Vue 3, maintaining architectural consistency while respecting Vue's unique reactivity model. It provides reliable, framework-agnostic testing by automatically handling Vue's async reactivity system.
+
+### Key Features
+
+✅ **Unified API**: Vue components use identical component drivers as other frameworks  
+✅ **Reactivity Safety**: Properly handles Vue's async reactivity system using `nextTick()`  
+✅ **Cross-Framework**: Test patterns learned in React translate directly to Vue  
+✅ **E2E Ready**: Same drivers work in both DOM and Playwright environments  
+✅ **Flexible Components**: Supports both compiled Vue components and template-based definitions
 
 ## Installation
 
 ```bash
 pnpm add @atomic-testing/vue-3
 ```
+
+## Architecture
+
+### VueInteractor
+
+Extends the base DOMInteractor with Vue-specific reactivity handling:
+
+- Automatically calls `nextTick()` after each interaction
+- Ensures Vue's reactive updates complete before proceeding
+- Provides reliable, predictable testing experience
+
+### Test Engine Factory
+
+Two main functions for different testing scenarios:
+
+- **`createTestEngine()`**: Renders and tests Vue components
+- **`createRenderedTestEngine()`**: Tests already-rendered components (e.g., Storybook)
+
+### Framework Integration
+
+- Uses `@testing-library/vue` for component rendering with fallback strategies
+- Maintains the same ComponentDriver API as React adapters
+- Enables cross-framework driver reuse
+
+## Usage
+
+### Basic Example
+
+```typescript
+import { HTMLButtonDriver } from '@atomic-testing/component-driver-html';
+import { byDataTestId } from '@atomic-testing/core';
+import { createTestEngine } from '@atomic-testing/vue-3';
+
+import CounterComponent from './Counter.vue';
+
+const engine = createTestEngine(CounterComponent, {
+  incrementButton: {
+    locator: byDataTestId('increment'),
+    driver: HTMLButtonDriver,
+  },
+});
+
+// Test interaction - automatically handles Vue reactivity
+await engine.parts.incrementButton.click();
+expect(await engine.parts.incrementButton.getText()).toBe('Count: 1');
+```
+
+### SFC-Like Components
+
+For simplified testing, you can define components using template strings:
+
+```typescript
+import { createTestEngine } from '@atomic-testing/vue-3';
+
+const TestComponent = {
+  template: `
+    <div>
+      <button @click="increment" data-testid="counter">
+        Count: {{ count }}
+      </button>
+    </div>
+  `,
+  setup() {
+    const count = ref(0);
+    const increment = () => count.value++;
+    return { count, increment };
+  },
+};
+
+const engine = createTestEngine(TestComponent, {
+  button: { locator: byDataTestId('counter'), driver: HTMLButtonDriver },
+});
+```
+
+### Testing Rendered Components
+
+For components already rendered in the DOM (e.g., Storybook):
+
+```typescript
+import { createRenderedTestEngine } from '@atomic-testing/vue-3';
+
+const engine = createRenderedTestEngine({
+  button: { locator: byDataTestId('counter'), driver: HTMLButtonDriver },
+});
+
+// Test the already-rendered component
+await engine.parts.button.click();
+```
+
+## Cross-Framework Compatibility
+
+The same component drivers work across all Atomic Testing adapters:
+
+```typescript
+// Works identically in React, Vue, and Playwright
+const parts = {
+  emailInput: { locator: byDataTestId('email'), driver: TextFieldDriver },
+  submitButton: { locator: byDataTestId('submit'), driver: ButtonDriver }
+};
+
+// React
+const reactEngine = createTestEngine(<LoginForm />, parts);
+
+// Vue 3
+const vueEngine = createTestEngine(LoginFormVue, parts);
+
+// Playwright
+const playwrightEngine = createTestEngine(page, parts);
+```
+
+## Integration with Vue Ecosystem
+
+### Vue Testing Library
+
+The adapter uses `@testing-library/vue` internally with intelligent fallback strategies for component rendering.
+
+### Vue Reactivity
+
+All interactions automatically wait for Vue's reactivity cycle to complete:
+
+```typescript
+// This automatically calls nextTick() after the click
+await engine.parts.button.click();
+
+// Reactive state is guaranteed to be updated here
+const updatedText = await engine.parts.button.getText();
+```
+
+### TypeScript Support
+
+Full TypeScript support with proper Vue component typing:
+
+```typescript
+import type { Component } from 'vue';
+
+const engine = createTestEngine<Component>(MyVueComponent, sceneParts);
+```
+
+## Why Use @atomic-testing/vue-3?
+
+1. **Consistent Testing Patterns**: Learn once, test everywhere - same patterns work across React, Vue, and E2E
+2. **Reliable Vue Integration**: Proper handling of Vue's reactivity ensures tests aren't flaky
+3. **High-Level APIs**: Focus on user interactions, not DOM implementation details
+4. **Framework Agnostic Drivers**: Reuse component drivers across different frameworks and test environments
+5. **Future-Proof**: As your app grows or changes frameworks, your test patterns remain consistent

package/dist/index.d.mts

@@ -6,9 +6,18 @@ import { DOMInteractor } from "@atomic-testing/dom-core";
 interface IVueTestEngineOption extends IComponentDriverOption {
   rootElement?: Element;
 }
+interface VueSFCLikeComponent {
+  template: string;
+  setup?: () => any;
+  data?: () => any;
+  methods?: Record<string, Function>;
+  computed?: Record<string, Function>;
+  name?: string;
+  props?: any;
+}
 //#endregion
 //#region src/createTestEngine.d.ts
-declare function createTestEngine<T extends ScenePart>(component: Component, partDefinitions: T, option?: Readonly<Partial<IVueTestEngineOption>>): TestEngine<T>;
+declare function createTestEngine<T extends ScenePart>(component: Component | VueSFCLikeComponent, partDefinitions: T, option?: Readonly<Partial<IVueTestEngineOption>>): TestEngine<T>;
 declare function createRenderedTestEngine<T extends ScenePart>(rootElement: HTMLElement, partDefinitions: T, _option?: Readonly<Partial<IVueTestEngineOption>>): TestEngine<T>;
 //#endregion
 //#region src/VueInteractor.d.ts
@@ -32,5 +41,5 @@ declare class VueInteractor extends DOMInteractor {
   clone(): Interactor;
 }
 //#endregion
-export { IVueTestEngineOption, VueInteractor, createRenderedTestEngine, createTestEngine };
+export { IVueTestEngineOption, VueInteractor, VueSFCLikeComponent, createRenderedTestEngine, createTestEngine };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.d.ts

@@ -6,9 +6,18 @@ import { DOMInteractor } from "@atomic-testing/dom-core";
 interface IVueTestEngineOption extends IComponentDriverOption {
   rootElement?: Element;
 }
+interface VueSFCLikeComponent {
+  template: string;
+  setup?: () => any;
+  data?: () => any;
+  methods?: Record<string, Function>;
+  computed?: Record<string, Function>;
+  name?: string;
+  props?: any;
+}
 //#endregion
 //#region src/createTestEngine.d.ts
-declare function createTestEngine<T extends ScenePart>(component: Component, partDefinitions: T, option?: Readonly<Partial<IVueTestEngineOption>>): TestEngine<T>;
+declare function createTestEngine<T extends ScenePart>(component: Component | VueSFCLikeComponent, partDefinitions: T, option?: Readonly<Partial<IVueTestEngineOption>>): TestEngine<T>;
 declare function createRenderedTestEngine<T extends ScenePart>(rootElement: HTMLElement, partDefinitions: T, _option?: Readonly<Partial<IVueTestEngineOption>>): TestEngine<T>;
 //#endregion
 //#region src/VueInteractor.d.ts
@@ -32,5 +41,5 @@ declare class VueInteractor extends DOMInteractor {
   clone(): Interactor;
 }
 //#endregion
-export { IVueTestEngineOption, VueInteractor, createRenderedTestEngine, createTestEngine };
+export { IVueTestEngineOption, VueInteractor, VueSFCLikeComponent, createRenderedTestEngine, createTestEngine };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -104,6 +104,21 @@ function getNextRootElementId() {
 	return `${_rootId++}`;
 }
 const rootElementAttributeName = "data-atomic-testing-vue";
+function isSFCLikeObject(component) {
+	return component && typeof component === "object" && "template" in component && typeof component.template === "string";
+}
+function createComponentFromSFCLike(sfcObj) {
+	const componentOptions = {
+		name: sfcObj.name || "SFCComponent",
+		template: sfcObj.template
+	};
+	if (sfcObj.props) componentOptions.props = sfcObj.props;
+	if (sfcObj.setup) componentOptions.setup = sfcObj.setup;
+	if (sfcObj.data) componentOptions.data = sfcObj.data;
+	if (sfcObj.methods) componentOptions.methods = sfcObj.methods;
+	if (sfcObj.computed) componentOptions.computed = sfcObj.computed;
+	return (0, vue.defineComponent)(componentOptions);
+}
 function createTestEngine(component, partDefinitions, option) {
 	const rootEl = option?.rootElement ?? document.body;
 	const container = rootEl.appendChild(document.createElement("div"));
@@ -111,11 +126,12 @@ function createTestEngine(component, partDefinitions, option) {
 	container.setAttribute(rootElementAttributeName, rootId);
 	let unmount;
 	let app;
+	const compiledComponent = isSFCLikeObject(component) ? createComponentFromSFCLike(component) : component;
 	try {
-		const renderResult = (0, __testing_library_vue.render)(component, { container });
+		const renderResult = (0, __testing_library_vue.render)(compiledComponent, { container });
 		unmount = renderResult.unmount;
 	} catch (_error) {
-		app = (0, vue.createApp)(component);
+		app = (0, vue.createApp)(compiledComponent);
 		app.mount(container);
 		unmount = () => {
 			if (app) app.unmount();

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DOMInteractor","locator: PartLocator","text: string","option?: Partial<EnterTextOption>","option?: Partial<ClickOption>","option?: Partial<HoverOption>","option?: Partial<MouseMoveOption>","option?: Partial<MouseDownOption>","option?: Partial<MouseUpOption>","option?: Partial<MouseOutOption>","option?: Partial<MouseEnterOption>","option?: Partial<MouseLeaveOption>","option?: Partial<FocusOption>","values: string[]","ms: number","option: Partial<Readonly<WaitForOption>>","defaultWaitForOption","option: WaitUntilOption<T>","component: Component","partDefinitions: T","option?: Readonly<Partial<IVueTestEngineOption>>","unmount: () => void","app: App","TestEngine","rootElement: HTMLElement","_option?: Readonly<Partial<IVueTestEngineOption>>"],"sources":["../src/VueInteractor.ts","../src/createTestEngine.ts"],"sourcesContent":["import {\n  ClickOption,\n  defaultWaitForOption,\n  EnterTextOption,\n  FocusOption,\n  HoverOption,\n  Interactor,\n  MouseDownOption,\n  MouseEnterOption,\n  MouseLeaveOption,\n  MouseMoveOption,\n  MouseOutOption,\n  MouseUpOption,\n  PartLocator,\n  WaitForOption,\n  WaitUntilOption,\n} from '@atomic-testing/core';\nimport { DOMInteractor } from '@atomic-testing/dom-core';\nimport { nextTick } from 'vue';\n\nexport class VueInteractor extends DOMInteractor {\n  private async flush() {\n    await nextTick();\n  }\n\n  override async enterText(locator: PartLocator, text: string, option?: Partial<EnterTextOption>): Promise<void> {\n    await super.enterText(locator, text, option);\n    await this.flush();\n  }\n\n  override async click(locator: PartLocator, option?: Partial<ClickOption>): Promise<void> {\n    await super.click(locator, option);\n    await this.flush();\n  }\n\n  override async hover(locator: PartLocator, option?: Partial<HoverOption>): Promise<void> {\n    await super.hover(locator, option);\n    await this.flush();\n  }\n\n  async mouseMove(locator: PartLocator, option?: Partial<MouseMoveOption>): Promise<void> {\n    await super.mouseMove(locator, option);\n    await this.flush();\n  }\n\n  async mouseDown(locator: PartLocator, option?: Partial<MouseDownOption>): Promise<void> {\n    await super.mouseDown(locator, option);\n    await this.flush();\n  }\n\n  async mouseUp(locator: PartLocator, option?: Partial<MouseUpOption>): Promise<void> {\n    await super.mouseUp(locator, option);\n    await this.flush();\n  }\n\n  async mouseOver(locator: PartLocator, option?: Partial<HoverOption>): Promise<void> {\n    await super.mouseOver(locator, option);\n    await this.flush();\n  }\n\n  async mouseOut(locator: PartLocator, option?: Partial<MouseOutOption>): Promise<void> {\n    await super.mouseOut(locator, option);\n    await this.flush();\n  }\n\n  async mouseEnter(locator: PartLocator, option?: Partial<MouseEnterOption>): Promise<void> {\n    await super.mouseEnter(locator, option);\n    await this.flush();\n  }\n\n  async mouseLeave(locator: PartLocator, option?: Partial<MouseLeaveOption>): Promise<void> {\n    await super.mouseLeave(locator, option);\n    await this.flush();\n  }\n\n  async focus(locator: PartLocator, option?: Partial<FocusOption>): Promise<void> {\n    await super.focus(locator, option);\n    await this.flush();\n  }\n\n  override async selectOptionValue(locator: PartLocator, values: string[]): Promise<void> {\n    await super.selectOptionValue(locator, values);\n    await this.flush();\n  }\n\n  override async wait(ms: number): Promise<void> {\n    await super.wait(ms);\n    await this.flush();\n  }\n\n  override async waitUntilComponentState(\n    locator: PartLocator,\n    option: Partial<Readonly<WaitForOption>> = defaultWaitForOption\n  ): Promise<void> {\n    await super.waitUntilComponentState(locator, option);\n    await this.flush();\n  }\n\n  override async waitUntil<T>(option: WaitUntilOption<T>): Promise<T> {\n    const result = await super.waitUntil(option);\n    await this.flush();\n    return result;\n  }\n\n  override clone(): Interactor {\n    return new VueInteractor();\n  }\n}\n","import { byAttribute, ScenePart, TestEngine } from '@atomic-testing/core';\nimport { render } from '@testing-library/vue';\nimport { App, Component, createApp } from 'vue';\n\nimport { VueInteractor } from './VueInteractor';\nimport { IVueTestEngineOption } from './types';\n\nlet _rootId = 0;\nfunction getNextRootElementId() {\n  return `${_rootId++}`;\n}\n\nconst rootElementAttributeName = 'data-atomic-testing-vue';\n\nexport function createTestEngine<T extends ScenePart>(\n  component: Component,\n  partDefinitions: T,\n  option?: Readonly<Partial<IVueTestEngineOption>>\n): TestEngine<T> {\n  const rootEl = option?.rootElement ?? document.body;\n  const container = rootEl.appendChild(document.createElement('div'));\n  const rootId = getNextRootElementId();\n  container.setAttribute(rootElementAttributeName, rootId);\n\n  let unmount: () => void;\n  let app: App;\n\n  try {\n    const renderResult = render(component, { container });\n    unmount = renderResult.unmount;\n  } catch (_error) {\n    // Fallback to manual Vue app creation if render fails\n    app = createApp(component);\n    app.mount(container);\n    unmount = () => {\n      if (app) {\n        app.unmount();\n      }\n    };\n  }\n\n  const cleanup = () => {\n    unmount();\n    rootEl.removeChild(container);\n    return Promise.resolve();\n  };\n\n  return new TestEngine(\n    byAttribute(rootElementAttributeName, rootId),\n    new VueInteractor(),\n    {\n      parts: partDefinitions,\n    },\n    cleanup\n  );\n}\n\nexport function createRenderedTestEngine<T extends ScenePart>(\n  rootElement: HTMLElement,\n  partDefinitions: T,\n  _option?: Readonly<Partial<IVueTestEngineOption>>\n): TestEngine<T> {\n  const rootId = getNextRootElementId();\n  rootElement.setAttribute(rootElementAttributeName, rootId);\n\n  const cleanup = () => {\n    rootElement.removeAttribute(rootElementAttributeName);\n    return Promise.resolve();\n  };\n\n  return new TestEngine(\n    byAttribute(rootElementAttributeName, rootId),\n    new VueInteractor(),\n    {\n      parts: partDefinitions,\n    },\n    cleanup\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["DOMInteractor","locator: PartLocator","text: string","option?: Partial<EnterTextOption>","option?: Partial<ClickOption>","option?: Partial<HoverOption>","option?: Partial<MouseMoveOption>","option?: Partial<MouseDownOption>","option?: Partial<MouseUpOption>","option?: Partial<MouseOutOption>","option?: Partial<MouseEnterOption>","option?: Partial<MouseLeaveOption>","option?: Partial<FocusOption>","values: string[]","ms: number","option: Partial<Readonly<WaitForOption>>","defaultWaitForOption","option: WaitUntilOption<T>","component: any","sfcObj: VueSFCLikeComponent","componentOptions: any","component: Component | VueSFCLikeComponent","partDefinitions: T","option?: Readonly<Partial<IVueTestEngineOption>>","unmount: () => void","app: App","TestEngine","rootElement: HTMLElement","_option?: Readonly<Partial<IVueTestEngineOption>>"],"sources":["../src/VueInteractor.ts","../src/createTestEngine.ts"],"sourcesContent":["import {\n  ClickOption,\n  defaultWaitForOption,\n  EnterTextOption,\n  FocusOption,\n  HoverOption,\n  Interactor,\n  MouseDownOption,\n  MouseEnterOption,\n  MouseLeaveOption,\n  MouseMoveOption,\n  MouseOutOption,\n  MouseUpOption,\n  PartLocator,\n  WaitForOption,\n  WaitUntilOption,\n} from '@atomic-testing/core';\nimport { DOMInteractor } from '@atomic-testing/dom-core';\nimport { nextTick } from 'vue';\n\nexport class VueInteractor extends DOMInteractor {\n  private async flush() {\n    await nextTick();\n  }\n\n  override async enterText(locator: PartLocator, text: string, option?: Partial<EnterTextOption>): Promise<void> {\n    await super.enterText(locator, text, option);\n    await this.flush();\n  }\n\n  override async click(locator: PartLocator, option?: Partial<ClickOption>): Promise<void> {\n    await super.click(locator, option);\n    await this.flush();\n  }\n\n  override async hover(locator: PartLocator, option?: Partial<HoverOption>): Promise<void> {\n    await super.hover(locator, option);\n    await this.flush();\n  }\n\n  async mouseMove(locator: PartLocator, option?: Partial<MouseMoveOption>): Promise<void> {\n    await super.mouseMove(locator, option);\n    await this.flush();\n  }\n\n  async mouseDown(locator: PartLocator, option?: Partial<MouseDownOption>): Promise<void> {\n    await super.mouseDown(locator, option);\n    await this.flush();\n  }\n\n  async mouseUp(locator: PartLocator, option?: Partial<MouseUpOption>): Promise<void> {\n    await super.mouseUp(locator, option);\n    await this.flush();\n  }\n\n  async mouseOver(locator: PartLocator, option?: Partial<HoverOption>): Promise<void> {\n    await super.mouseOver(locator, option);\n    await this.flush();\n  }\n\n  async mouseOut(locator: PartLocator, option?: Partial<MouseOutOption>): Promise<void> {\n    await super.mouseOut(locator, option);\n    await this.flush();\n  }\n\n  async mouseEnter(locator: PartLocator, option?: Partial<MouseEnterOption>): Promise<void> {\n    await super.mouseEnter(locator, option);\n    await this.flush();\n  }\n\n  async mouseLeave(locator: PartLocator, option?: Partial<MouseLeaveOption>): Promise<void> {\n    await super.mouseLeave(locator, option);\n    await this.flush();\n  }\n\n  async focus(locator: PartLocator, option?: Partial<FocusOption>): Promise<void> {\n    await super.focus(locator, option);\n    await this.flush();\n  }\n\n  override async selectOptionValue(locator: PartLocator, values: string[]): Promise<void> {\n    await super.selectOptionValue(locator, values);\n    await this.flush();\n  }\n\n  override async wait(ms: number): Promise<void> {\n    await super.wait(ms);\n    await this.flush();\n  }\n\n  override async waitUntilComponentState(\n    locator: PartLocator,\n    option: Partial<Readonly<WaitForOption>> = defaultWaitForOption\n  ): Promise<void> {\n    await super.waitUntilComponentState(locator, option);\n    await this.flush();\n  }\n\n  override async waitUntil<T>(option: WaitUntilOption<T>): Promise<T> {\n    const result = await super.waitUntil(option);\n    await this.flush();\n    return result;\n  }\n\n  override clone(): Interactor {\n    return new VueInteractor();\n  }\n}\n","import { byAttribute, ScenePart, TestEngine } from '@atomic-testing/core';\nimport { render } from '@testing-library/vue';\nimport { App, Component, createApp, defineComponent, h } from 'vue';\n\nimport { VueInteractor } from './VueInteractor';\nimport { IVueTestEngineOption, VueSFCLikeComponent } from './types';\n\nlet _rootId = 0;\nfunction getNextRootElementId() {\n  return `${_rootId++}`;\n}\n\nconst rootElementAttributeName = 'data-atomic-testing-vue';\n\nfunction isSFCLikeObject(component: any): component is VueSFCLikeComponent {\n  return (\n    component && typeof component === 'object' && 'template' in component && typeof component.template === 'string'\n  );\n}\n\nfunction createComponentFromSFCLike(sfcObj: VueSFCLikeComponent): Component {\n  const componentOptions: any = {\n    name: sfcObj.name || 'SFCComponent',\n    template: sfcObj.template,\n  };\n\n  if (sfcObj.props) {\n    componentOptions.props = sfcObj.props;\n  }\n\n  if (sfcObj.setup) {\n    componentOptions.setup = sfcObj.setup;\n  }\n\n  if (sfcObj.data) {\n    componentOptions.data = sfcObj.data;\n  }\n\n  if (sfcObj.methods) {\n    componentOptions.methods = sfcObj.methods;\n  }\n\n  if (sfcObj.computed) {\n    componentOptions.computed = sfcObj.computed;\n  }\n\n  return defineComponent(componentOptions);\n}\n\nexport function createTestEngine<T extends ScenePart>(\n  component: Component | VueSFCLikeComponent,\n  partDefinitions: T,\n  option?: Readonly<Partial<IVueTestEngineOption>>\n): TestEngine<T> {\n  const rootEl = option?.rootElement ?? document.body;\n  const container = rootEl.appendChild(document.createElement('div'));\n  const rootId = getNextRootElementId();\n  container.setAttribute(rootElementAttributeName, rootId);\n\n  let unmount: () => void;\n  let app: App;\n\n  // Create component from SFC-like object if needed\n  const compiledComponent = isSFCLikeObject(component)\n    ? createComponentFromSFCLike(component)\n    : (component as Component);\n\n  try {\n    const renderResult = render(compiledComponent, { container });\n    unmount = renderResult.unmount;\n  } catch (_error) {\n    // Fallback to manual Vue app creation if render fails\n    app = createApp(compiledComponent);\n    app.mount(container);\n    unmount = () => {\n      if (app) {\n        app.unmount();\n      }\n    };\n  }\n\n  const cleanup = () => {\n    unmount();\n    rootEl.removeChild(container);\n    return Promise.resolve();\n  };\n\n  return new TestEngine(\n    byAttribute(rootElementAttributeName, rootId),\n    new VueInteractor(),\n    {\n      parts: partDefinitions,\n    },\n    cleanup\n  );\n}\n\nexport function createRenderedTestEngine<T extends ScenePart>(\n  rootElement: HTMLElement,\n  partDefinitions: T,\n  _option?: Readonly<Partial<IVueTestEngineOption>>\n): TestEngine<T> {\n  const rootId = getNextRootElementId();\n  rootElement.setAttribute(rootElementAttributeName, rootId);\n\n  const cleanup = () => {\n    rootElement.removeAttribute(rootElementAttributeName);\n    return Promise.resolve();\n  };\n\n  return new TestEngine(\n    byAttribute(rootElementAttributeName, rootId),\n    new VueInteractor(),\n    {\n      parts: partDefinitions,\n    },\n    cleanup\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAa,gBAAb,MAAa,sBAAsBA,wCAAc;CAC/C,MAAc,QAAQ;AACpB,QAAM,mBAAU;CACjB;CAED,MAAe,UAAUC,SAAsBC,MAAcC,QAAkD;AAC7G,QAAM,MAAM,UAAU,SAAS,MAAM,OAAO;AAC5C,QAAM,KAAK,OAAO;CACnB;CAED,MAAe,MAAMF,SAAsBG,QAA8C;AACvF,QAAM,MAAM,MAAM,SAAS,OAAO;AAClC,QAAM,KAAK,OAAO;CACnB;CAED,MAAe,MAAMH,SAAsBI,QAA8C;AACvF,QAAM,MAAM,MAAM,SAAS,OAAO;AAClC,QAAM,KAAK,OAAO;CACnB;CAED,MAAM,UAAUJ,SAAsBK,QAAkD;AACtF,QAAM,MAAM,UAAU,SAAS,OAAO;AACtC,QAAM,KAAK,OAAO;CACnB;CAED,MAAM,UAAUL,SAAsBM,QAAkD;AACtF,QAAM,MAAM,UAAU,SAAS,OAAO;AACtC,QAAM,KAAK,OAAO;CACnB;CAED,MAAM,QAAQN,SAAsBO,QAAgD;AAClF,QAAM,MAAM,QAAQ,SAAS,OAAO;AACpC,QAAM,KAAK,OAAO;CACnB;CAED,MAAM,UAAUP,SAAsBI,QAA8C;AAClF,QAAM,MAAM,UAAU,SAAS,OAAO;AACtC,QAAM,KAAK,OAAO;CACnB;CAED,MAAM,SAASJ,SAAsBQ,QAAiD;AACpF,QAAM,MAAM,SAAS,SAAS,OAAO;AACrC,QAAM,KAAK,OAAO;CACnB;CAED,MAAM,WAAWR,SAAsBS,QAAmD;AACxF,QAAM,MAAM,WAAW,SAAS,OAAO;AACvC,QAAM,KAAK,OAAO;CACnB;CAED,MAAM,WAAWT,SAAsBU,QAAmD;AACxF,QAAM,MAAM,WAAW,SAAS,OAAO;AACvC,QAAM,KAAK,OAAO;CACnB;CAED,MAAM,MAAMV,SAAsBW,QAA8C;AAC9E,QAAM,MAAM,MAAM,SAAS,OAAO;AAClC,QAAM,KAAK,OAAO;CACnB;CAED,MAAe,kBAAkBX,SAAsBY,QAAiC;AACtF,QAAM,MAAM,kBAAkB,SAAS,OAAO;AAC9C,QAAM,KAAK,OAAO;CACnB;CAED,MAAe,KAAKC,IAA2B;AAC7C,QAAM,MAAM,KAAK,GAAG;AACpB,QAAM,KAAK,OAAO;CACnB;CAED,MAAe,wBACbb,SACAc,SAA2CC,4CAC5B;AACf,QAAM,MAAM,wBAAwB,SAAS,OAAO;AACpD,QAAM,KAAK,OAAO;CACnB;CAED,MAAe,UAAaC,QAAwC;EAClE,MAAM,SAAS,MAAM,MAAM,UAAU,OAAO;AAC5C,QAAM,KAAK,OAAO;AAClB,SAAO;CACR;CAED,AAAS,QAAoB;AAC3B,SAAO,IAAI;CACZ;AACF;;;;ACpGD,IAAI,UAAU;AACd,SAAS,uBAAuB;AAC9B,WAAU;AACX;AAED,MAAM,2BAA2B;AAEjC,SAAS,gBAAgBC,WAAkD;AACzE,QACE,oBAAoB,cAAc,YAAY,cAAc,oBAAoB,UAAU,aAAa;AAE1G;AAED,SAAS,2BAA2BC,QAAwC;CAC1E,MAAMC,mBAAwB;EAC5B,MAAM,OAAO,QAAQ;EACrB,UAAU,OAAO;CAClB;AAED,KAAI,OAAO,MACT,kBAAiB,QAAQ,OAAO;AAGlC,KAAI,OAAO,MACT,kBAAiB,QAAQ,OAAO;AAGlC,KAAI,OAAO,KACT,kBAAiB,OAAO,OAAO;AAGjC,KAAI,OAAO,QACT,kBAAiB,UAAU,OAAO;AAGpC,KAAI,OAAO,SACT,kBAAiB,WAAW,OAAO;AAGrC,QAAO,yBAAgB,iBAAiB;AACzC;AAED,SAAgB,iBACdC,WACAC,iBACAC,QACe;CACf,MAAM,SAAS,QAAQ,eAAe,SAAS;CAC/C,MAAM,YAAY,OAAO,YAAY,SAAS,cAAc,MAAM,CAAC;CACnE,MAAM,SAAS,sBAAsB;AACrC,WAAU,aAAa,0BAA0B,OAAO;CAExD,IAAIC;CACJ,IAAIC;CAGJ,MAAM,oBAAoB,gBAAgB,UAAU,GAChD,2BAA2B,UAAU,GACpC;AAEL,KAAI;EACF,MAAM,eAAe,kCAAO,mBAAmB,EAAE,UAAW,EAAC;AAC7D,YAAU,aAAa;CACxB,SAAQ,QAAQ;AAEf,QAAM,mBAAU,kBAAkB;AAClC,MAAI,MAAM,UAAU;AACpB,YAAU,MAAM;AACd,OAAI,IACF,KAAI,SAAS;EAEhB;CACF;CAED,MAAM,UAAU,MAAM;AACpB,WAAS;AACT,SAAO,YAAY,UAAU;AAC7B,SAAO,QAAQ,SAAS;CACzB;AAED,QAAO,IAAIC,iCACT,uCAAY,0BAA0B,OAAO,EAC7C,IAAI,iBACJ,EACE,OAAO,gBACR,GACD;AAEH;AAED,SAAgB,yBACdC,aACAL,iBACAM,SACe;CACf,MAAM,SAAS,sBAAsB;AACrC,aAAY,aAAa,0BAA0B,OAAO;CAE1D,MAAM,UAAU,MAAM;AACpB,cAAY,gBAAgB,yBAAyB;AACrD,SAAO,QAAQ,SAAS;CACzB;AAED,QAAO,IAAIF,iCACT,uCAAY,0BAA0B,OAAO,EAC7C,IAAI,iBACJ,EACE,OAAO,gBACR,GACD;AAEH"}

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { TestEngine, byAttribute, defaultWaitForOption } from "@atomic-testing/core";
 import { render } from "@testing-library/vue";
-import { createApp, nextTick } from "vue";
+import { createApp, defineComponent, nextTick } from "vue";
 import { DOMInteractor } from "@atomic-testing/dom-core";
 
 //#region src/VueInteractor.ts
@@ -81,6 +81,21 @@ function getNextRootElementId() {
 	return `${_rootId++}`;
 }
 const rootElementAttributeName = "data-atomic-testing-vue";
+function isSFCLikeObject(component) {
+	return component && typeof component === "object" && "template" in component && typeof component.template === "string";
+}
+function createComponentFromSFCLike(sfcObj) {
+	const componentOptions = {
+		name: sfcObj.name || "SFCComponent",
+		template: sfcObj.template
+	};
+	if (sfcObj.props) componentOptions.props = sfcObj.props;
+	if (sfcObj.setup) componentOptions.setup = sfcObj.setup;
+	if (sfcObj.data) componentOptions.data = sfcObj.data;
+	if (sfcObj.methods) componentOptions.methods = sfcObj.methods;
+	if (sfcObj.computed) componentOptions.computed = sfcObj.computed;
+	return defineComponent(componentOptions);
+}
 function createTestEngine(component, partDefinitions, option) {
 	const rootEl = option?.rootElement ?? document.body;
 	const container = rootEl.appendChild(document.createElement("div"));
@@ -88,11 +103,12 @@ function createTestEngine(component, partDefinitions, option) {
 	container.setAttribute(rootElementAttributeName, rootId);
 	let unmount;
 	let app;
+	const compiledComponent = isSFCLikeObject(component) ? createComponentFromSFCLike(component) : component;
 	try {
-		const renderResult = render(component, { container });
+		const renderResult = render(compiledComponent, { container });
 		unmount = renderResult.unmount;
 	} catch (_error) {
-		app = createApp(component);
+		app = createApp(compiledComponent);
 		app.mount(container);
 		unmount = () => {
 			if (app) app.unmount();

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["locator: PartLocator","text: string","option?: Partial<EnterTextOption>","option?: Partial<ClickOption>","option?: Partial<HoverOption>","option?: Partial<MouseMoveOption>","option?: Partial<MouseDownOption>","option?: Partial<MouseUpOption>","option?: Partial<MouseOutOption>","option?: Partial<MouseEnterOption>","option?: Partial<MouseLeaveOption>","option?: Partial<FocusOption>","values: string[]","ms: number","option: Partial<Readonly<WaitForOption>>","option: WaitUntilOption<T>","component: Component","partDefinitions: T","option?: Readonly<Partial<IVueTestEngineOption>>","unmount: () => void","app: App","rootElement: HTMLElement","_option?: Readonly<Partial<IVueTestEngineOption>>"],"sources":["../src/VueInteractor.ts","../src/createTestEngine.ts"],"sourcesContent":["import {\n  ClickOption,\n  defaultWaitForOption,\n  EnterTextOption,\n  FocusOption,\n  HoverOption,\n  Interactor,\n  MouseDownOption,\n  MouseEnterOption,\n  MouseLeaveOption,\n  MouseMoveOption,\n  MouseOutOption,\n  MouseUpOption,\n  PartLocator,\n  WaitForOption,\n  WaitUntilOption,\n} from '@atomic-testing/core';\nimport { DOMInteractor } from '@atomic-testing/dom-core';\nimport { nextTick } from 'vue';\n\nexport class VueInteractor extends DOMInteractor {\n  private async flush() {\n    await nextTick();\n  }\n\n  override async enterText(locator: PartLocator, text: string, option?: Partial<EnterTextOption>): Promise<void> {\n    await super.enterText(locator, text, option);\n    await this.flush();\n  }\n\n  override async click(locator: PartLocator, option?: Partial<ClickOption>): Promise<void> {\n    await super.click(locator, option);\n    await this.flush();\n  }\n\n  override async hover(locator: PartLocator, option?: Partial<HoverOption>): Promise<void> {\n    await super.hover(locator, option);\n    await this.flush();\n  }\n\n  async mouseMove(locator: PartLocator, option?: Partial<MouseMoveOption>): Promise<void> {\n    await super.mouseMove(locator, option);\n    await this.flush();\n  }\n\n  async mouseDown(locator: PartLocator, option?: Partial<MouseDownOption>): Promise<void> {\n    await super.mouseDown(locator, option);\n    await this.flush();\n  }\n\n  async mouseUp(locator: PartLocator, option?: Partial<MouseUpOption>): Promise<void> {\n    await super.mouseUp(locator, option);\n    await this.flush();\n  }\n\n  async mouseOver(locator: PartLocator, option?: Partial<HoverOption>): Promise<void> {\n    await super.mouseOver(locator, option);\n    await this.flush();\n  }\n\n  async mouseOut(locator: PartLocator, option?: Partial<MouseOutOption>): Promise<void> {\n    await super.mouseOut(locator, option);\n    await this.flush();\n  }\n\n  async mouseEnter(locator: PartLocator, option?: Partial<MouseEnterOption>): Promise<void> {\n    await super.mouseEnter(locator, option);\n    await this.flush();\n  }\n\n  async mouseLeave(locator: PartLocator, option?: Partial<MouseLeaveOption>): Promise<void> {\n    await super.mouseLeave(locator, option);\n    await this.flush();\n  }\n\n  async focus(locator: PartLocator, option?: Partial<FocusOption>): Promise<void> {\n    await super.focus(locator, option);\n    await this.flush();\n  }\n\n  override async selectOptionValue(locator: PartLocator, values: string[]): Promise<void> {\n    await super.selectOptionValue(locator, values);\n    await this.flush();\n  }\n\n  override async wait(ms: number): Promise<void> {\n    await super.wait(ms);\n    await this.flush();\n  }\n\n  override async waitUntilComponentState(\n    locator: PartLocator,\n    option: Partial<Readonly<WaitForOption>> = defaultWaitForOption\n  ): Promise<void> {\n    await super.waitUntilComponentState(locator, option);\n    await this.flush();\n  }\n\n  override async waitUntil<T>(option: WaitUntilOption<T>): Promise<T> {\n    const result = await super.waitUntil(option);\n    await this.flush();\n    return result;\n  }\n\n  override clone(): Interactor {\n    return new VueInteractor();\n  }\n}\n","import { byAttribute, ScenePart, TestEngine } from '@atomic-testing/core';\nimport { render } from '@testing-library/vue';\nimport { App, Component, createApp } from 'vue';\n\nimport { VueInteractor } from './VueInteractor';\nimport { IVueTestEngineOption } from './types';\n\nlet _rootId = 0;\nfunction getNextRootElementId() {\n  return `${_rootId++}`;\n}\n\nconst rootElementAttributeName = 'data-atomic-testing-vue';\n\nexport function createTestEngine<T extends ScenePart>(\n  component: Component,\n  partDefinitions: T,\n  option?: Readonly<Partial<IVueTestEngineOption>>\n): TestEngine<T> {\n  const rootEl = option?.rootElement ?? document.body;\n  const container = rootEl.appendChild(document.createElement('div'));\n  const rootId = getNextRootElementId();\n  container.setAttribute(rootElementAttributeName, rootId);\n\n  let unmount: () => void;\n  let app: App;\n\n  try {\n    const renderResult = render(component, { container });\n    unmount = renderResult.unmount;\n  } catch (_error) {\n    // Fallback to manual Vue app creation if render fails\n    app = createApp(component);\n    app.mount(container);\n    unmount = () => {\n      if (app) {\n        app.unmount();\n      }\n    };\n  }\n\n  const cleanup = () => {\n    unmount();\n    rootEl.removeChild(container);\n    return Promise.resolve();\n  };\n\n  return new TestEngine(\n    byAttribute(rootElementAttributeName, rootId),\n    new VueInteractor(),\n    {\n      parts: partDefinitions,\n    },\n    cleanup\n  );\n}\n\nexport function createRenderedTestEngine<T extends ScenePart>(\n  rootElement: HTMLElement,\n  partDefinitions: T,\n  _option?: Readonly<Partial<IVueTestEngineOption>>\n): TestEngine<T> {\n  const rootId = getNextRootElementId();\n  rootElement.setAttribute(rootElementAttributeName, rootId);\n\n  const cleanup = () => {\n    rootElement.removeAttribute(rootElementAttributeName);\n    return Promise.resolve();\n  };\n\n  return new TestEngine(\n    byAttribute(rootElementAttributeName, rootId),\n    new VueInteractor(),\n    {\n      parts: partDefinitions,\n    },\n    cleanup\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["locator: PartLocator","text: string","option?: Partial<EnterTextOption>","option?: Partial<ClickOption>","option?: Partial<HoverOption>","option?: Partial<MouseMoveOption>","option?: Partial<MouseDownOption>","option?: Partial<MouseUpOption>","option?: Partial<MouseOutOption>","option?: Partial<MouseEnterOption>","option?: Partial<MouseLeaveOption>","option?: Partial<FocusOption>","values: string[]","ms: number","option: Partial<Readonly<WaitForOption>>","option: WaitUntilOption<T>","component: any","sfcObj: VueSFCLikeComponent","componentOptions: any","component: Component | VueSFCLikeComponent","partDefinitions: T","option?: Readonly<Partial<IVueTestEngineOption>>","unmount: () => void","app: App","rootElement: HTMLElement","_option?: Readonly<Partial<IVueTestEngineOption>>"],"sources":["../src/VueInteractor.ts","../src/createTestEngine.ts"],"sourcesContent":["import {\n  ClickOption,\n  defaultWaitForOption,\n  EnterTextOption,\n  FocusOption,\n  HoverOption,\n  Interactor,\n  MouseDownOption,\n  MouseEnterOption,\n  MouseLeaveOption,\n  MouseMoveOption,\n  MouseOutOption,\n  MouseUpOption,\n  PartLocator,\n  WaitForOption,\n  WaitUntilOption,\n} from '@atomic-testing/core';\nimport { DOMInteractor } from '@atomic-testing/dom-core';\nimport { nextTick } from 'vue';\n\nexport class VueInteractor extends DOMInteractor {\n  private async flush() {\n    await nextTick();\n  }\n\n  override async enterText(locator: PartLocator, text: string, option?: Partial<EnterTextOption>): Promise<void> {\n    await super.enterText(locator, text, option);\n    await this.flush();\n  }\n\n  override async click(locator: PartLocator, option?: Partial<ClickOption>): Promise<void> {\n    await super.click(locator, option);\n    await this.flush();\n  }\n\n  override async hover(locator: PartLocator, option?: Partial<HoverOption>): Promise<void> {\n    await super.hover(locator, option);\n    await this.flush();\n  }\n\n  async mouseMove(locator: PartLocator, option?: Partial<MouseMoveOption>): Promise<void> {\n    await super.mouseMove(locator, option);\n    await this.flush();\n  }\n\n  async mouseDown(locator: PartLocator, option?: Partial<MouseDownOption>): Promise<void> {\n    await super.mouseDown(locator, option);\n    await this.flush();\n  }\n\n  async mouseUp(locator: PartLocator, option?: Partial<MouseUpOption>): Promise<void> {\n    await super.mouseUp(locator, option);\n    await this.flush();\n  }\n\n  async mouseOver(locator: PartLocator, option?: Partial<HoverOption>): Promise<void> {\n    await super.mouseOver(locator, option);\n    await this.flush();\n  }\n\n  async mouseOut(locator: PartLocator, option?: Partial<MouseOutOption>): Promise<void> {\n    await super.mouseOut(locator, option);\n    await this.flush();\n  }\n\n  async mouseEnter(locator: PartLocator, option?: Partial<MouseEnterOption>): Promise<void> {\n    await super.mouseEnter(locator, option);\n    await this.flush();\n  }\n\n  async mouseLeave(locator: PartLocator, option?: Partial<MouseLeaveOption>): Promise<void> {\n    await super.mouseLeave(locator, option);\n    await this.flush();\n  }\n\n  async focus(locator: PartLocator, option?: Partial<FocusOption>): Promise<void> {\n    await super.focus(locator, option);\n    await this.flush();\n  }\n\n  override async selectOptionValue(locator: PartLocator, values: string[]): Promise<void> {\n    await super.selectOptionValue(locator, values);\n    await this.flush();\n  }\n\n  override async wait(ms: number): Promise<void> {\n    await super.wait(ms);\n    await this.flush();\n  }\n\n  override async waitUntilComponentState(\n    locator: PartLocator,\n    option: Partial<Readonly<WaitForOption>> = defaultWaitForOption\n  ): Promise<void> {\n    await super.waitUntilComponentState(locator, option);\n    await this.flush();\n  }\n\n  override async waitUntil<T>(option: WaitUntilOption<T>): Promise<T> {\n    const result = await super.waitUntil(option);\n    await this.flush();\n    return result;\n  }\n\n  override clone(): Interactor {\n    return new VueInteractor();\n  }\n}\n","import { byAttribute, ScenePart, TestEngine } from '@atomic-testing/core';\nimport { render } from '@testing-library/vue';\nimport { App, Component, createApp, defineComponent, h } from 'vue';\n\nimport { VueInteractor } from './VueInteractor';\nimport { IVueTestEngineOption, VueSFCLikeComponent } from './types';\n\nlet _rootId = 0;\nfunction getNextRootElementId() {\n  return `${_rootId++}`;\n}\n\nconst rootElementAttributeName = 'data-atomic-testing-vue';\n\nfunction isSFCLikeObject(component: any): component is VueSFCLikeComponent {\n  return (\n    component && typeof component === 'object' && 'template' in component && typeof component.template === 'string'\n  );\n}\n\nfunction createComponentFromSFCLike(sfcObj: VueSFCLikeComponent): Component {\n  const componentOptions: any = {\n    name: sfcObj.name || 'SFCComponent',\n    template: sfcObj.template,\n  };\n\n  if (sfcObj.props) {\n    componentOptions.props = sfcObj.props;\n  }\n\n  if (sfcObj.setup) {\n    componentOptions.setup = sfcObj.setup;\n  }\n\n  if (sfcObj.data) {\n    componentOptions.data = sfcObj.data;\n  }\n\n  if (sfcObj.methods) {\n    componentOptions.methods = sfcObj.methods;\n  }\n\n  if (sfcObj.computed) {\n    componentOptions.computed = sfcObj.computed;\n  }\n\n  return defineComponent(componentOptions);\n}\n\nexport function createTestEngine<T extends ScenePart>(\n  component: Component | VueSFCLikeComponent,\n  partDefinitions: T,\n  option?: Readonly<Partial<IVueTestEngineOption>>\n): TestEngine<T> {\n  const rootEl = option?.rootElement ?? document.body;\n  const container = rootEl.appendChild(document.createElement('div'));\n  const rootId = getNextRootElementId();\n  container.setAttribute(rootElementAttributeName, rootId);\n\n  let unmount: () => void;\n  let app: App;\n\n  // Create component from SFC-like object if needed\n  const compiledComponent = isSFCLikeObject(component)\n    ? createComponentFromSFCLike(component)\n    : (component as Component);\n\n  try {\n    const renderResult = render(compiledComponent, { container });\n    unmount = renderResult.unmount;\n  } catch (_error) {\n    // Fallback to manual Vue app creation if render fails\n    app = createApp(compiledComponent);\n    app.mount(container);\n    unmount = () => {\n      if (app) {\n        app.unmount();\n      }\n    };\n  }\n\n  const cleanup = () => {\n    unmount();\n    rootEl.removeChild(container);\n    return Promise.resolve();\n  };\n\n  return new TestEngine(\n    byAttribute(rootElementAttributeName, rootId),\n    new VueInteractor(),\n    {\n      parts: partDefinitions,\n    },\n    cleanup\n  );\n}\n\nexport function createRenderedTestEngine<T extends ScenePart>(\n  rootElement: HTMLElement,\n  partDefinitions: T,\n  _option?: Readonly<Partial<IVueTestEngineOption>>\n): TestEngine<T> {\n  const rootId = getNextRootElementId();\n  rootElement.setAttribute(rootElementAttributeName, rootId);\n\n  const cleanup = () => {\n    rootElement.removeAttribute(rootElementAttributeName);\n    return Promise.resolve();\n  };\n\n  return new TestEngine(\n    byAttribute(rootElementAttributeName, rootId),\n    new VueInteractor(),\n    {\n      parts: partDefinitions,\n    },\n    cleanup\n  );\n}\n"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atomic-testing/vue-3",
-  "version": "0.77.0",
-  "description": "",
+  "version": "0.78.0",
+  "description": "The @atomic-testing/vue-3 package is a Vue 3 test adapter that extends Atomic Testing's component driver pattern to Vue applications. It enables testing Vue components using the same high-level semantic APIs used across React, Playwright, and DOM environments.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -25,8 +25,9 @@
   "dependencies": {
     "@testing-library/dom": "^10.4.0",
     "@testing-library/vue": "^8.1.0",
-    "@atomic-testing/core": "0.77.0",
-    "@atomic-testing/dom-core": "0.77.0"
+    "@vue/compiler-sfc": "^3.5.0",
+    "@atomic-testing/core": "0.78.0",
+    "@atomic-testing/dom-core": "0.78.0"
   },
   "devDependencies": {
     "vue": "^3.5.0"
@@ -35,7 +36,8 @@
     "@testing-library/dom": ">=10.4.0",
     "@testing-library/vue": ">=8.1.0",
     "@testing-library/user-event": ">=14.0.0",
-    "vue": ">=3.0.0"
+    "vue": ">=3.0.0",
+    "@vue/compiler-sfc": ">=3.0.0"
   },
   "scripts": {
     "build": "tsdown",

package/src/createTestEngine.ts

@@ -1,9 +1,9 @@
 import { byAttribute, ScenePart, TestEngine } from '@atomic-testing/core';
 import { render } from '@testing-library/vue';
-import { App, Component, createApp } from 'vue';
+import { App, Component, createApp, defineComponent, h } from 'vue';
 
 import { VueInteractor } from './VueInteractor';
-import { IVueTestEngineOption } from './types';
+import { IVueTestEngineOption, VueSFCLikeComponent } from './types';
 
 let _rootId = 0;
 function getNextRootElementId() {
@@ -12,8 +12,43 @@ function getNextRootElementId() {
 
 const rootElementAttributeName = 'data-atomic-testing-vue';
 
+function isSFCLikeObject(component: any): component is VueSFCLikeComponent {
+  return (
+    component && typeof component === 'object' && 'template' in component && typeof component.template === 'string'
+  );
+}
+
+function createComponentFromSFCLike(sfcObj: VueSFCLikeComponent): Component {
+  const componentOptions: any = {
+    name: sfcObj.name || 'SFCComponent',
+    template: sfcObj.template,
+  };
+
+  if (sfcObj.props) {
+    componentOptions.props = sfcObj.props;
+  }
+
+  if (sfcObj.setup) {
+    componentOptions.setup = sfcObj.setup;
+  }
+
+  if (sfcObj.data) {
+    componentOptions.data = sfcObj.data;
+  }
+
+  if (sfcObj.methods) {
+    componentOptions.methods = sfcObj.methods;
+  }
+
+  if (sfcObj.computed) {
+    componentOptions.computed = sfcObj.computed;
+  }
+
+  return defineComponent(componentOptions);
+}
+
 export function createTestEngine<T extends ScenePart>(
-  component: Component,
+  component: Component | VueSFCLikeComponent,
   partDefinitions: T,
   option?: Readonly<Partial<IVueTestEngineOption>>
 ): TestEngine<T> {
@@ -25,12 +60,17 @@ export function createTestEngine<T extends ScenePart>(
   let unmount: () => void;
   let app: App;
 
+  // Create component from SFC-like object if needed
+  const compiledComponent = isSFCLikeObject(component)
+    ? createComponentFromSFCLike(component)
+    : (component as Component);
+
   try {
-    const renderResult = render(component, { container });
+    const renderResult = render(compiledComponent, { container });
     unmount = renderResult.unmount;
   } catch (_error) {
     // Fallback to manual Vue app creation if render fails
-    app = createApp(component);
+    app = createApp(compiledComponent);
     app.mount(container);
     unmount = () => {
       if (app) {

package/src/index.ts

@@ -1,3 +1,3 @@
 export { createRenderedTestEngine, createTestEngine } from './createTestEngine';
 export { VueInteractor } from './VueInteractor';
-export type { IVueTestEngineOption } from './types';
+export type { IVueTestEngineOption, VueSFCLikeComponent } from './types';

package/src/types.ts

@@ -3,3 +3,14 @@ import { IComponentDriverOption } from '@atomic-testing/core';
 export interface IVueTestEngineOption extends IComponentDriverOption {
   rootElement?: Element;
 }
+
+// Simple SFC-like object interface for template-based components
+export interface VueSFCLikeComponent {
+  template: string;
+  setup?: () => any;
+  data?: () => any;
+  methods?: Record<string, Function>;
+  computed?: Record<string, Function>;
+  name?: string;
+  props?: any;
+}