test: add new tests for components

package.json

@@ -39,6 +39,8 @@
     "regenerate:screenshots:rebuild": "npm run rm:builds && node scripts/rebuild-e2e.js",
     "rm:builds": "npm run rm:builds --workspace=scripts",
     "start": "npm run start --workspace=patternhub",
+    "test:react-components": "playwright test -c output/react/playwright.config.ts --ui",
+    "test:vue-components": "playwright test -c output/vue/playwright.config.ts --ui",
     "update:dependency:playwright": "node .github/scripts/update-playwright.js",
     "update:icon-fonts": "npm run update:icon-fonts --workspace=scripts"
   },

packages/components/_templates/mitosis/new/component/spec.ejs.t

@@ -8,7 +8,7 @@ import { DB<%= h.changeCase.pascal(name) %> } from "./index";
 // @ts-ignore - vue can only find it with .ts as file ending
 import { DEFAULT_VIEWPORT } from '../../shared/constants.ts';
 
-const comp = <DB<%= h.changeCase.pascal(name) %>>Test</DB<%= h.changeCase.pascal(name) %>>;
+const comp: any = <DB<%= h.changeCase.pascal(name) %>>Test</DB<%= h.changeCase.pascal(name) %>>;
 
 const testComponent = () =>{
 	test('should contain text', async ({ mount }) => {
@@ -22,12 +22,7 @@ const testComponent = () =>{
 	});
 }
 
-test.describe('DB<%= h.changeCase.pascal(name) %>', () => {
-	test.use({ viewport: DEFAULT_VIEWPORT });
-	testComponent();
-});
-
-test.describe('DB<%= h.changeCase.pascal(name) %>', () => {
+const testA11y = () =>{
 	test('should not have any A11y issues', async ({
 		page,
 		mount
@@ -39,5 +34,11 @@ test.describe('DB<%= h.changeCase.pascal(name) %>', () => {
 
 		expect(accessibilityScanResults.violations).toEqual([]);
 	});
+}
 
+test.describe('DB<%= h.changeCase.pascal(name) %>', () => {
+	test.use({ viewport: DEFAULT_VIEWPORT });
+	testComponent();
+	testA11y();
 });
+

packages/components/_templates/mitosis/new/component/tsx.ejs.t

@@ -6,6 +6,7 @@ import { DB<%= h.changeCase.pascal(name) %>State, DB<%= h.changeCase.pascal(name
 import { cls } from "../../utils";
 <% if(formValue!=="no"){   -%>
 import {ChangeEvent, InteractionEvent} from "../../shared/model";
+import { handleFrameworkEvent } from "../../utils/form-components";
 <% } -%>
 
 useMetadata({
@@ -27,14 +28,7 @@ export default function DB<%= h.changeCase.pascal(name) %>(props: DB<%= h.change
 				props.change(event);
 			}
 
-			const target = event.target as HTMLInputElement;
-
-			// TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
-			// VUE:this.$emit("update:<%= formValue %>", target.<%= formValue %>);
-
-			// Change event to work with reactive and template driven forms
-			// ANGULAR: this.propagateChange(target.<%= formValue %>);
-			// ANGULAR: this.writeValue(target.<%= formValue %>);
+			handleFrameworkEvent(this, event, <%= formValue %>);
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {
 			if (props.onBlur) {

packages/components/scripts/post-build/angular.js

@@ -43,11 +43,6 @@ const setControlValueAccessorReplacements = (
 	// for native angular support (e.g. reactive forms) we have to implement
 	// the ControlValueAccessor interface with all impacts :/
 
-	replacements.push({
-		from: /\/\/ ANGULAR:/g,
-		to: ''
-	});
-
 	replacements.push({
 		from: '} from "@angular/core";',
 		to:
@@ -182,6 +177,12 @@ export class ${directive.name}Directive {}
 
 module.exports = (tmp) => {
 	const outputFolder = `${tmp ? 'output/tmp' : 'output'}`;
+	// Activate vue specific event handling
+	Replace.sync({
+		files: `../../${outputFolder}/angular/src/utils/form-components.ts`,
+		from: /\/\/ ANGULAR:/g,
+		to: ''
+	});
 	for (const component of components) {
 		const componentName = component.name;
 		const upperComponentName = `DB${transformToUpperComponentName(component.name)}`;

packages/components/scripts/post-build/copy-files.js

@@ -23,6 +23,11 @@ module.exports = () => {
 							from: ['{/*', '*/}'],
 							to: ''
 						});
+						Replace({
+							files: `../../output/${framework}/src/components/${name}/${name}.spec.tsx`,
+							from: /\/\/ VUE:/g,
+							to: ''
+						});
 					}
 				}
 				Fse.copySync(

packages/components/scripts/post-build/react.js

@@ -16,6 +16,10 @@ const overwriteEvents = (tmp) => {
 		'export type ChangeEvent<T> = Event;',
 		'export type ChangeEvent<T> = React.ChangeEvent<T>;'
 	);
+	modelFileContent = modelFileContent.replace(
+		'export type InputEvent<T> = Event;',
+		'export type InputEvent<T> = React.FormEvent<T>;'
+	);
 	modelFileContent = modelFileContent.replace(
 		'export type InteractionEvent<T> = FocusEvent;',
 		'export type InteractionEvent<T> = React.FocusEvent<T>;'
@@ -48,6 +52,10 @@ module.exports = (tmp) => {
 					from: /= useState/g,
 					to: '= useState<any>'
 				},
+				{
+					from: `handleFrameworkEvent(this`,
+					to: `// handleFrameworkEvent(this`
+				},
 				{
 					from: ` } from "react"`,
 					to: `, forwardRef, HTMLAttributes } from "react"`

packages/components/scripts/post-build/vue.js

@@ -25,32 +25,6 @@ const updateNestedComponents = (input, rootComponentName) => {
 		.join('\n');
 };
 
-/**
- *
- * @param input {string}
- * @param bindings {{modelValue:string, binding:string}[]}
- * @returns {*}
- */
-const updateVModelBindings = (input, bindings) => {
-	let fileContent = input;
-
-	// Add emits to component config
-
-	fileContent = fileContent.replace(
-		'props: [',
-		`emits: ${JSON.stringify(
-			bindings.map((bin) => `update:${bin.modelValue}`)
-		)},\nprops: [`
-	);
-
-	return fileContent
-		.split('\n')
-		.map((line) => {
-			return line.replace('// VUE:', '');
-		})
-		.join('\n');
-};
-
 module.exports = (tmp) => {
 	const outputFolder = `${tmp ? 'output/tmp' : 'output'}`;
 	// Rewire imports in Playwright config
@@ -59,6 +33,12 @@ module.exports = (tmp) => {
 		from: /react/g,
 		to: `vue`
 	});
+	// Activate vue specific event handling
+	Replace.sync({
+		files: `../../${outputFolder}/vue/vue3/src/utils/form-components.ts`,
+		from: `// VUE:`,
+		to: ``
+	});
 	for (const component of components) {
 		const componentName = component.name;
 		const vueFile = `../../${outputFolder}/vue/src/components/${componentName}/${componentName}.vue`;
@@ -76,6 +56,14 @@ module.exports = (tmp) => {
 				from: `./${componentName}`,
 				to: `./${componentName}.vue`
 			});
+
+			const replacements = [
+				{
+					from: /immediate: true,/g,
+					to: 'immediate: true,\nflush: "post"'
+				}
+			];
+
 			Replace.sync({
 				files: vueFile,
 				processor(input) {
@@ -84,28 +72,17 @@ module.exports = (tmp) => {
 			});
 
 			if (component?.config?.vue?.vModel) {
-				Replace.sync({
-					files: vueFile,
-					processor(input) {
-						return updateVModelBindings(
-							input,
-							component.config.vue.vModel
-						);
-					}
+				replacements.push({
+					from: 'props: [',
+					to: `emits: ${JSON.stringify(
+						component?.config?.vue?.vModel.map(
+							(bin) => `update:${bin.modelValue}`
+						)
+					)},\nprops: [`
 				});
 			}
 
-			runReplacements(
-				[
-					{
-						from: /immediate: true,/g,
-						to: 'immediate: true,\nflush: "post"'
-					}
-				],
-				component,
-				'vue',
-				vueFile
-			);
+			runReplacements(replacements, component, 'vue', vueFile);
 		} catch (error) {
 			console.error('Error occurred:', error);
 		}

packages/components/src/components/accordion-item/accordion-item.spec.tsx

@@ -5,7 +5,7 @@ import { DBAccordionItem } from './index';
 // @ts-ignore - vue can only find it with .ts as file ending
 import { DEFAULT_VIEWPORT } from '../../shared/constants.ts';
 
-const comp = <DBAccordionItem headlinePlain="Test">Test</DBAccordionItem>;
+const comp: any = <DBAccordionItem headlinePlain="Test">Test</DBAccordionItem>;
 
 const testComponent = () => {
 	test('should contain text', async ({ mount }) => {
@@ -19,12 +19,7 @@ const testComponent = () => {
 	});
 };
 
-test.describe('DBAccordionItem', () => {
-	test.use({ viewport: DEFAULT_VIEWPORT });
-	testComponent();
-});
-
-test.describe('DBAccordionItem', () => {
+const testA11y = () => {
 	test('should not have any A11y issues', async ({ page, mount }) => {
 		await mount(comp);
 		const accessibilityScanResults = await new AxeBuilder({ page })
@@ -33,4 +28,10 @@ test.describe('DBAccordionItem', () => {
 
 		expect(accessibilityScanResults.violations).toEqual([]);
 	});
+};
+
+test.describe('DBAccordionItem', () => {
+	test.use({ viewport: DEFAULT_VIEWPORT });
+	testComponent();
+	testA11y();
 });

packages/components/src/components/accordion/accordion.spec.tsx

@@ -5,15 +5,43 @@ import { DBAccordion } from './index';
 // @ts-ignore - vue can only find it with .ts as file ending
 import { DEFAULT_VIEWPORT } from '../../shared/constants.ts';
 import { DBAccordionItem } from '../accordion-item';
+import { DBButton } from '../button';
+import { DBTextarea } from '../textarea';
 
-const comp = (
+const comp: any = (
 	<DBAccordion>
 		<DBAccordionItem headlinePlain="Test" content="Content 1" />
 		<DBAccordionItem headlinePlain="Test 2" content="Content 2" />
 		<DBAccordionItem headlinePlain="Test 3" content="Content 3" />
 	</DBAccordion>
 );
 
+const openAccordion: any = (
+	<DBAccordion initOpenIndex={[1, 2]}>
+		<DBAccordionItem headlinePlain="Test" content="Content 1" />
+		<DBAccordionItem headlinePlain="Test 2">
+			<span data-testid="item2">Test2</span>
+		</DBAccordionItem>
+		<DBAccordionItem headlinePlain="Test 3">
+			<span data-testid="item3">Test3</span>
+		</DBAccordionItem>
+	</DBAccordion>
+);
+
+const actionAccordion: any = (
+	<DBAccordion behaviour="single">
+		<DBAccordionItem data-testid="item1" headline="Test">
+			<DBButton data-testid="button">Click me</DBButton>
+		</DBAccordionItem>
+		<DBAccordionItem data-testid="item2" headline="Test 2">
+			<DBTextarea data-testid="textarea" />
+		</DBAccordionItem>
+		<DBAccordionItem disabled={true} data-testid="item3" headline="Test 3">
+			<DBButton data-testid="button2">Click me</DBButton>
+		</DBAccordionItem>
+	</DBAccordion>
+);
+
 const testComponent = () => {
 	test('should contain text', async ({ mount }) => {
 		const component = await mount(comp);
@@ -26,12 +54,50 @@ const testComponent = () => {
 	});
 };
 
-test.describe('DBAccordion', () => {
-	test.use({ viewport: DEFAULT_VIEWPORT });
-	testComponent();
-});
+const testOpen = () => {
+	test('items should be visible', async ({ mount }) => {
+		const component = await mount(openAccordion);
+		await expect(component.getByTestId('item2')).toBeVisible();
+		await expect(component.getByTestId('item3')).toBeVisible();
+	});
 
-test.describe('DBAccordion', () => {
+	test('open items should match screenshot', async ({ mount }) => {
+		const component = await mount(openAccordion);
+		await expect(component).toHaveScreenshot();
+	});
+};
+
+const testAction = () => {
+	test('single behaviour should work', async ({ mount }) => {
+		const component = await mount(actionAccordion);
+		await component.getByTestId('item1').click();
+		await expect(component.getByTestId('button')).toBeVisible();
+		await component.getByTestId('item2').click();
+		await expect(component.getByTestId('button')).toBeHidden();
+		await expect(component.getByTestId('textarea')).toBeVisible();
+		await expect(component.getByTestId('item3')).toBeDisabled();
+	});
+
+	test('click inside item works', async ({ mount }) => {
+		const component = await mount(actionAccordion);
+		await component.getByTestId('item1').click();
+		const button = component.getByTestId('button');
+		await expect(button).toBeVisible();
+		await button.click();
+		await expect(button).toBeVisible();
+	});
+
+	test('textarea inside item works', async ({ mount }) => {
+		const component = await mount(actionAccordion);
+		await component.getByTestId('item2').click();
+		const textArea = component.getByRole('textbox');
+		await expect(textArea).toBeVisible();
+		await textArea.fill('Test');
+		await expect(textArea).toHaveValue('Test');
+	});
+};
+
+const testA11y = () => {
 	test('should not have any A11y issues', async ({ page, mount }) => {
 		await mount(comp);
 		const accessibilityScanResults = await new AxeBuilder({ page })
@@ -40,4 +106,12 @@ test.describe('DBAccordion', () => {
 
 		expect(accessibilityScanResults.violations).toEqual([]);
 	});
+};
+
+test.describe('DBAccordion', () => {
+	test.use({ viewport: DEFAULT_VIEWPORT });
+	testComponent();
+	testOpen();
+	testAction();
+	testA11y();
 });