fix sandbox template Form components

- for Vue, Vue3, HTML, Svelte, Preact, HTML and Angular
storybookjs · Jun 19, 2023 · de35e3e · de35e3e
1 parent 91c4339
commit de35e3e
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 20 deletions.
diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts
@@ -47,7 +47,7 @@ export const Callback = {
       await fireEvent.click(canvas.getByRole('button'));
     });
 
-    await expect(args.onSuccess).toHaveBeenCalled();
+    await expect(args.onSuccess).toHaveBeenCalledWith('test');
   },
 };
 
@@ -113,7 +113,7 @@ export const UserEventSetup = {
       await user.keyboard('{enter}');
       const submitButton = await canvas.findByRole('button');
       await expect(submitButton).toHaveFocus();
-      await expect(args.onSuccess).toHaveBeenCalled();
+      await expect(args.onSuccess).toHaveBeenCalledWith('Pasting: foobar');
     });
   },
 };
diff --git a/code/frameworks/angular/template/components/form.component.ts b/code/frameworks/angular/template/components/form.component.ts
@@ -6,7 +6,7 @@ import { Component, Output, EventEmitter } from '@angular/core';
     <form id="interaction-test-form" (submit)="handleSubmit($event)">
       <label>
         Enter Value
-        <input type="text" data-testid="value" [value]="value" required />
+        <input type="text" data-testid="value" [(ngModel)]="value" required />
       </label>
       <button type="submit">Submit</button>
       <p *ngIf="complete">Completed!!</p>

diff --git a/code/renderers/html/template/components/Form.js b/code/renderers/html/template/components/Form.js
@@ -2,30 +2,32 @@
 export const Form = ({ onSuccess }) => {
   const container = document.createElement('div');
 
-  const getInnerHTML = ({ complete }) => `
+  const getInnerHTML = ({ complete, value }) => `
   <form id="interaction-test-form">
     <label>
       Enter Value
-      <input type="text" data-testid="value" required />
+      <input type="text" data-testid="value" value="${value}" required />
     </label>
     <button type="submit">Submit</button>
     ${complete ? '<p>Completed!!</p>' : ''}
   </form>
 `;
 
-  container.innerHTML = getInnerHTML({ complete: false });
+  container.innerHTML = getInnerHTML({ complete: false, value: '' });
 
   const form = container.querySelector('form');
   form.addEventListener('submit', (e) => {
     e.preventDefault();
 
+    const { value } = form.querySelector('input'); // Store the current value
+
     setTimeout(() => {
-      container.innerHTML = getInnerHTML({ complete: true });
+      container.innerHTML = getInnerHTML({ complete: true, value });
     }, 500);
     setTimeout(() => {
-      container.innerHTML = getInnerHTML({ complete: false });
+      container.innerHTML = getInnerHTML({ complete: false, value });
     }, 1500);
-    onSuccess(e);
+    onSuccess(value);
   });
 
   return container;

diff --git a/code/renderers/preact/template/components/Form.jsx b/code/renderers/preact/template/components/Form.jsx
@@ -24,7 +24,7 @@ export const Form = ({ onSuccess }) => {
           data-testid="value"
           value={value}
           required
-          onChange={(event) => setValue(event.target.value)}
+          onInput={(event) => setValue(event.target.value)}
         />
       </label>
       <button type="submit">Submit</button>

diff --git a/code/renderers/svelte/template/components/Form.svelte b/code/renderers/svelte/template/components/Form.svelte
@@ -26,8 +26,8 @@
 <form id="interaction-test-form" on:submit|preventDefault={handleSubmit}>
   <label>
     Enter Value
-    <input type="text" data-testid="value" {value} required on:click={handleClick} />
+    <input type="text" data-testid="value" bind:value required on:click={handleClick} />
   </label>
   <button type="submit">Submit</button>
   {#if complete}<p>Completed!!</p>{/if}
-</form>
+</form>
diff --git a/code/renderers/vue/template/components/Form.vue b/code/renderers/vue/template/components/Form.vue
@@ -2,7 +2,13 @@
   <form id="interaction-test-form" @submit.prevent="onSubmit">
     <label>
       Enter Value
-      <input type="text" data-testid="value" :value="value" required @click="setValue" />
+      <input
+        type="text"
+        data-testid="value"
+        :value="value"
+        @input="value = $event.target.value"
+        required
+      />
     </label>
     <button type="submit">Submit</button>
     <p v-if="complete">Completed!!</p>
@@ -27,9 +33,6 @@ export default {
   },
 
   methods: {
-    setValue(event) {
-      this.value = event.target.value;
-    },
     onSubmit() {
       this.onSuccess(this.value);
       setTimeout(() => {

diff --git a/code/renderers/vue3/template/components/Form.vue b/code/renderers/vue3/template/components/Form.vue
@@ -2,7 +2,7 @@
   <form id="interaction-test-form" @submit.prevent="onSubmit">
     <label>
       Enter Value
-      <input type="text" data-testid="value" :value="value" required @click="setValue" />
+      <input type="text" data-testid="value" v-model="value" required />
     </label>
     <button type="submit">Submit</button>
     <p v-if="complete">Completed!!</p>
@@ -27,9 +27,6 @@ export default {
   },
 
   methods: {
-    setValue(event) {
-      this.value = event.target.value;
-    },
     onSubmit() {
       this.onSuccess(this.value);
       setTimeout(() => {