Merge pull request #18231 from Tomastomaslol/issue-18143-reset-button…

…-broken-for-URL-values Controls: Fix reset button broken for !undefined URL values
storybookjs · May 17, 2022 · 82ce9de · 82ce9de
2 parents ebf9341 + 9583cea
commit 82ce9de
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 3 deletions.
diff --git a/lib/preview-web/src/Preview.tsx b/lib/preview-web/src/Preview.tsx
@@ -252,7 +252,13 @@ export class Preview<TFramework extends AnyFramework> {
     const render = this.storyRenders.find((r) => r.id === storyId);
     const story = render?.story || (await this.storyStore.loadStory({ storyId }));
 
-    const argNamesToReset = argNames || Object.keys(this.storyStore.args.get(storyId));
+    const argNamesToReset = argNames || [
+      ...new Set([
+        ...Object.keys(story.initialArgs),
+        ...Object.keys(this.storyStore.args.get(storyId)),
+      ]),
+    ];
+
     const updatedArgs = argNamesToReset.reduce((acc, argName) => {
       acc[argName] = story.initialArgs[argName];
       return acc;

diff --git a/lib/preview-web/src/PreviewWeb.test.ts b/lib/preview-web/src/PreviewWeb.test.ts
@@ -1067,7 +1067,8 @@ describe('PreviewWeb', () => {
 
     it('resets a single arg', async () => {
       document.location.search = '?id=component-one--a';
-      await createAndRenderPreview();
+      const preview = await createAndRenderPreview();
+      const onUpdateArgsSpy = jest.spyOn(preview, 'onUpdateArgs');
 
       mockChannel.emit.mockClear();
       emitter.emit(Events.UPDATE_STORY_ARGS, {
@@ -1100,11 +1101,58 @@ describe('PreviewWeb', () => {
         storyId: 'component-one--a',
         args: { foo: 'a', new: 'value' },
       });
+
+      expect(onUpdateArgsSpy).toHaveBeenCalledWith({
+        storyId: 'component-one--a',
+        updatedArgs: { foo: 'a' },
+      });
+    });
+
+    it('resets all args after one is updated', async () => {
+      document.location.search = '?id=component-one--a';
+      const preview = await createAndRenderPreview();
+      const onUpdateArgsSpy = jest.spyOn(preview, 'onUpdateArgs');
+
+      emitter.emit(Events.UPDATE_STORY_ARGS, {
+        storyId: 'component-one--a',
+        updatedArgs: { foo: 'new' },
+      });
+      await waitForEvents([Events.STORY_ARGS_UPDATED]);
+
+      mockChannel.emit.mockClear();
+      emitter.emit(Events.RESET_STORY_ARGS, {
+        storyId: 'component-one--a',
+      });
+
+      await waitForRender();
+
+      expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+        expect.objectContaining({
+          forceRemount: false,
+          storyContext: expect.objectContaining({
+            initialArgs: { foo: 'a' },
+            args: { foo: 'a' },
+          }),
+        }),
+        undefined // this is coming from view.prepareForStory, not super important
+      );
+
+      await waitForEvents([Events.STORY_ARGS_UPDATED]);
+      expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ARGS_UPDATED, {
+        storyId: 'component-one--a',
+        args: { foo: 'a' },
+      });
+
+      expect(onUpdateArgsSpy).toHaveBeenCalledWith({
+        storyId: 'component-one--a',
+        updatedArgs: { foo: 'a' },
+      });
     });
 
     it('resets all args', async () => {
       document.location.search = '?id=component-one--a';
-      await createAndRenderPreview();
+      const preview = await createAndRenderPreview();
+      const onUpdateArgsSpy = jest.spyOn(preview, 'onUpdateArgs');
 
       emitter.emit(Events.UPDATE_STORY_ARGS, {
         storyId: 'component-one--a',
@@ -1135,6 +1183,52 @@ describe('PreviewWeb', () => {
         storyId: 'component-one--a',
         args: { foo: 'a' },
       });
+
+      expect(onUpdateArgsSpy).toHaveBeenCalledWith({
+        storyId: 'component-one--a',
+        updatedArgs: { foo: 'a', new: undefined },
+      });
+    });
+
+    it('resets all args when one arg is undefined', async () => {
+      document.location.search = '?id=component-one--a';
+      const preview = await createAndRenderPreview();
+      const onUpdateArgsSpy = jest.spyOn(preview, 'onUpdateArgs');
+
+      emitter.emit(Events.UPDATE_STORY_ARGS, {
+        storyId: 'component-one--a',
+        updatedArgs: { foo: undefined },
+      });
+      await waitForEvents([Events.STORY_ARGS_UPDATED]);
+
+      mockChannel.emit.mockClear();
+      emitter.emit(Events.RESET_STORY_ARGS, {
+        storyId: 'component-one--a',
+      });
+
+      await waitForRender();
+
+      expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+        expect.objectContaining({
+          forceRemount: false,
+          storyContext: expect.objectContaining({
+            initialArgs: { foo: 'a' },
+            args: { foo: 'a' },
+          }),
+        }),
+        undefined // this is coming from view.prepareForStory, not super important
+      );
+
+      await waitForEvents([Events.STORY_ARGS_UPDATED]);
+      expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ARGS_UPDATED, {
+        storyId: 'component-one--a',
+        args: { foo: 'a' },
+      });
+
+      expect(onUpdateArgsSpy).toHaveBeenCalledWith({
+        storyId: 'component-one--a',
+        updatedArgs: { foo: 'a' },
+      });
     });
   });