Sandbox: Attempt to fix interactions stories for web-components

storybookjs · Oct 2, 2022 · e03ecbe · e03ecbe
1 parent 1dd908a
commit e03ecbe
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts
@@ -16,9 +16,14 @@ export default {
   },
 };
 
+const safeWithin = (canvasElement) =>
+  globalThis.storybookRenderer === 'web-components'
+    ? within(canvasElement.querySelector(globalThis.Components.Form).shadowRoot)
+    : within(canvasElement);
+
 export const Type = {
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
+    const canvas = safeWithin(canvasElement);
     await userEvent.type(canvas.getByTestId('value'), 'test');
   },
 };
@@ -31,7 +36,7 @@ export const Step = {
 
 export const Callback = {
   play: async ({ args, canvasElement, step }) => {
-    const canvas = within(canvasElement);
+    const canvas = safeWithin(canvasElement);
     await step('Enter value', Type.play);
 
     await step('Submit', async () => {
@@ -46,23 +51,30 @@ export const Callback = {
 // an explicit test here
 export const SyncWaitFor = {
   play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
+    const canvas = safeWithin(canvasElement);
     await step('Setup', Callback.play);
-    await waitFor(() => canvas.getByText('Completed!!'));
+
+    // FIXME: why doesn't this work?
+    // await waitFor(() => {
+    //   canvas.getByText('Completed!!');
+    // });
+
+    const completed = await canvas.findByText('Completed!!');
+    await expect(completed).toBeInTheDocument();
   },
 };
 
 export const AsyncWaitFor = {
   play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
+    const canvas = safeWithin(canvasElement);
     await step('Setup', Callback.play);
     await waitFor(async () => canvas.getByText('Completed!!'));
   },
 };
 
 export const WaitForElementToBeRemoved = {
   play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
+    const canvas = safeWithin(canvasElement);
     await step('Setup', SyncWaitFor.play);
     await waitForElementToBeRemoved(() => canvas.queryByText('Completed!!'), {
       timeout: 2000,
@@ -80,7 +92,7 @@ export const WithLoaders = {
 export const Validation = {
   play: async (context) => {
     const { args, canvasElement, step } = context;
-    const canvas = within(canvasElement);
+    const canvas = safeWithin(canvasElement);
 
     await step('Submit', async () => fireEvent.click(canvas.getByRole('button')));
 

diff --git a/code/renderers/web-components/template/components/Form.js b/code/renderers/web-components/template/components/Form.js
@@ -16,13 +16,15 @@ export class SbForm extends LitElement {
     return {
       value: { type: String },
       complete: { type: Boolean },
+      onSuccess: { type: Function },
     };
   }
 
   constructor() {
     super();
     this.value = '';
     this.complete = false;
+    this.onSuccess = undefined;
   }
 
   onSubmit(event) {
@@ -33,6 +35,9 @@ export class SbForm extends LitElement {
     };
 
     this.dispatchEvent(new CustomEvent('sb-form:success', options));
+    if (this.onSuccess) {
+      this.onSuccess(this.value);
+    }
 
     setTimeout(() => {
       this.complete = true;

diff --git a/code/renderers/web-components/template/components/index.js b/code/renderers/web-components/template/components/index.js
@@ -11,3 +11,4 @@ globalThis.Components = {
   Html: HtmlTag,
   Pre: PreTag,
 };
+globalThis.storybookRenderer = 'web-components';