@quickpickle/vitest-browser 0.0.2

package/tests/react/Hello.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react'
+
+export interface HelloProps {
+  name?: string
+}
+
+export function Hello({ name = 'world' }: HelloProps) {
+  const [currentName, setCurrentName] = useState(name)
+
+  return (
+    <div>
+      <h1>Hello {currentName}!</h1>
+      <label>
+        <span>Name</span>
+        <input
+          type="text"
+          value={currentName}
+          onChange={e => setCurrentName(e.target.value)}
+        />
+      </label>
+    </div>
+  )
+}

package/tests/react/react.feature

@@ -0,0 +1,15 @@
+Feature: react__hello
+
+  Scenario: Initial rendering
+    Given I render "Hello.tsx"
+    Then I should see "Hello world!"
+
+  Scenario: Render with properties
+    Given I render "Hello.tsx" with the following properties:
+      | name | property |
+    Then I should see "Hello property!"
+
+  Scenario: Name is changed reactively
+    Given I render "Hello.tsx"
+    When for "Name" I enter "reactive variable"
+    Then I should see "Hello reactive variable!"

package/tests/svelte/Hello.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+
+  let {
+    name = 'world',
+    tag = 'h1',
+  }:{
+    name?:string
+    tag?:string
+  } = $props()
+
+</script>
+
+<div>
+  <svelte:element this={tag}>Hello {name}!</svelte:element>
+  <label>
+    <span>Name</span>
+    <input type="text" bind:value={name} />
+  </label>
+</div>
+
+<style>
+  div {
+    width: 400px;
+    margin: 2em auto;
+    padding: 1em;
+  }
+  label>span {
+    display: inline-block;
+    width: 100px;
+  }
+</style>

package/tests/svelte/svelte.feature

@@ -0,0 +1,16 @@
+Feature: svelte__hello
+
+  Scenario: Initial rendering
+    Given I render "Hello.svelte"
+    Then I should see "Hello world!"
+
+  @skip-ci
+  Scenario: Name is changed reactively
+    Given I render "Hello.svelte"
+    When for "Name" I enter "reactive variable"
+    Then I should see "Hello reactive variable!"
+
+  Scenario: Render with properties
+    Given I render "Hello.svelte" with the following properties:
+      | name | property |
+    Then I should see "Hello property!"

package/tests/vue/Hello.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <h1>Hello {{ nameValue }}!</h1>
+    <label>
+      <span>Name</span>
+      <input type="text" v-model="nameValue" />
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps<{
+  name?: string
+}>()
+
+const nameValue = ref(props.name ?? 'world')
+</script>
+
+<style>
+div {
+  width: 400px;
+  margin: 2em auto;
+  padding: 1em;
+}
+label > span {
+  display: inline-block;
+  width: 100px;
+}
+</style>

package/tests/vue/vue.feature

@@ -0,0 +1,16 @@
+Feature: vue__hello
+
+  Scenario: Initial rendering
+    Given I render "Hello.vue"
+    Then I should see "Hello world!"
+
+  Scenario: Render with properties
+    Given I render "Hello.vue" with the following properties:
+      | name | property |
+    Then I should see "Hello property!"
+
+  @skip-ci
+  Scenario: Name is changed reactively
+    Given I render "Hello.vue"
+    When for "Name" I enter "reactive variable"
+    Then I should see "Hello reactive variable!"

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "declaration": true,
+    "sourceMap": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/vite.config.ts

@@ -0,0 +1,8 @@
+import quickpickle from "quickpickle";
+
+export default {
+  plugins: [quickpickle()],
+  optimizeDeps: {
+    exclude: ['unicorn-magic'],
+  },
+}

package/vitest.workspace.ts

@@ -0,0 +1,95 @@
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import react from '@vitejs/plugin-react';
+import vue from '@vitejs/plugin-vue';
+import path from 'path'
+
+const showBrowser = process.env.SHOW_BROWSER ? true : false;
+
+export default [
+{
+  name: 'svelte',
+  extends: `vite.config.ts`,
+  plugins: [svelte()],
+  optimizeDeps: {
+    include: [
+      'vue',
+      'react',
+      'svelte',
+    ],
+  },
+  test: {
+    name: 'svelte',
+    include: [ `tests/svelte/*.feature` ],
+    setupFiles: [ `src/frameworks/svelte.ts`, 'src/actions.steps.ts', 'src/outcomes.steps.ts' ],
+    quickpickle: {
+      worldConfig: {
+        componentDir: 'tests/svelte',
+      }
+    },
+    environment: 'browser',
+    browser: {
+      enabled: true,
+      name: 'chromium',
+      provider: 'playwright',
+      ui: showBrowser,
+      headless: !showBrowser,
+      instances: [
+        { browser:'chromium' },
+      ]
+    }
+  }
+},
+{
+  name: 'react',
+  extends: 'vite.config.ts',
+  plugins: [react()],
+  test: {
+    name: 'react',
+    include: [ 'tests/react/*.feature' ],
+    setupFiles: [ 'src/frameworks/react.ts', 'src/actions.steps.ts', 'src/outcomes.steps.ts' ],
+    quickpickle: {
+      worldConfig: {
+        componentDir: 'tests/react',
+      }
+    },
+    environment: 'browser',
+    browser: {
+      enabled: true,
+      name: 'chromium',
+      provider: 'playwright',
+      ui: showBrowser,
+      headless: !showBrowser,
+      instances: [
+        { browser:'chromium' },
+      ]
+    }
+  }
+},
+{
+  name: 'vue',
+  extends: 'vite.config.ts',
+  plugins: [vue()],
+  test: {
+    name: 'vue',
+    include: [ 'tests/vue/*.feature' ],
+    setupFiles: [ 'src/frameworks/vue.ts', 'src/actions.steps.ts', 'src/outcomes.steps.ts' ],
+    quickpickle: {
+      worldConfig: {
+        componentDir: 'tests/vue',
+      }
+    },
+    environment: 'browser',
+    browser: {
+      enabled: true,
+      name: 'chromium',
+      provider: 'playwright',
+      ui: showBrowser,
+      headless: !showBrowser,
+      instances: [
+        { browser:'chromium' },
+      ]
+    }
+  }
+}
+]
+

package/world.ts

@@ -0,0 +1,7 @@
+import { setWorldConstructor } from "quickpickle";
+import { BrowserWorld } from "./BrowserWorld";
+
+
+setWorldConstructor(VitestBrowserWorld);
+
+export { VitestBrowserWorld };