re add reset of args that was not set initially. Extend tests for onR…

…esetArgs
storybookjs · May 17, 2022 · b56b1ce · b56b1ce
1 parent b318c25
commit b56b1ce
Show file tree

Hide file tree

Showing 2 changed files with 146 additions and 5 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(story.initialArgs);
+    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',
@@ -1124,7 +1172,7 @@ describe('PreviewWeb', () => {
           forceRemount: false,
           storyContext: expect.objectContaining({
             initialArgs: { foo: 'a' },
-            args: { foo: 'a', new: 'value' },
+            args: { foo: 'a' },
           }),
         }),
         undefined // this is coming from view.prepareForStory, not super important
@@ -1133,7 +1181,94 @@ describe('PreviewWeb', () => {
       await waitForEvents([Events.STORY_ARGS_UPDATED]);
       expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ARGS_UPDATED, {
         storyId: 'component-one--a',
-        args: { foo: 'a', new: 'value' },
+        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' },
+      });
+    });
+
+    it('resets all args when one arg is not set initially', 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', notSetInitially: 'exampleValue' },
+      });
+      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', notSetInnately: undefined },
       });
     });
   });