Controls: Fix reset button broken for !undefined URL values #18231

Tomastomaslol · 2022-05-15T21:51:53Z

Issue: #18143

What I did

in onResetArgs reset all args to remove any undefined values
Update supporting tests

How to test

Kapture.2022-05-16.at.07.48.48.mp4

…out argNames

nx-cloud · 2022-05-15T21:51:55Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 9583cea. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

✅ Successfully ran 1 target

nx run-many --target=prepare --all --parallel=2 --max-parallel=15 -- --optimized

Sent with 💌 from NxCloud.

yannbf · 2022-05-16T14:37:58Z

lib/preview-web/src/Preview.tsx

@@ -252,7 +252,7 @@ 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 || Object.keys(story.initialArgs);


@tmeasday could you take a look at this change? Thanks!

Hmm, this doesn't seem right.

This change ensures we always reset any arg that is initially set, but doesn't ensure we reset args that are set that weren't set initially.

I am thinking the reason this works is because if foo=!undefined we end up unsetting foo, in which case:

foo (may have been) initially set, so is in Object.keys(story.initialArgs)

foo is no longer set, so is not in Object.keys(this.storyStore.args.get(storyId)

Thus changing the code to check 1 but not 2 will reset foo.

However, it introduces a new bug, as evidenced by the test case below, that if an arg is set but wasn't set in initialArgs, it will never get reset.

Maybe we want something like [...new Set([...Object.keys(story.initialArgs), ...Object.keys(this.storyStore.args.get(storyId))])]?

Thank you for clarifying this! I will revisit this shortly. Thanks!

yannbf · 2022-05-16T14:38:41Z

Thanks @Tomastomaslol ! I'll just wait for @tmeasday to give his opinion on that change, but overall functionality wise that's 👌

Tomastomaslol · 2022-05-16T23:55:20Z

Thanks, @yannbf! 🙂

tmeasday

Thanks for looking into this @Tomastomaslol!

tmeasday · 2022-05-17T03:15:03Z

lib/preview-web/src/Preview.tsx

@@ -252,7 +252,7 @@ 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 || Object.keys(story.initialArgs);


Hmm, this doesn't seem right.

This change ensures we always reset any arg that is initially set, but doesn't ensure we reset args that are set that weren't set initially.

I am thinking the reason this works is because if foo=!undefined we end up unsetting foo, in which case:

foo (may have been) initially set, so is in Object.keys(story.initialArgs)

foo is no longer set, so is not in Object.keys(this.storyStore.args.get(storyId)

Thus changing the code to check 1 but not 2 will reset foo.

However, it introduces a new bug, as evidenced by the test case below, that if an arg is set but wasn't set in initialArgs, it will never get reset.

Maybe we want something like [...new Set([...Object.keys(story.initialArgs), ...Object.keys(this.storyStore.args.get(storyId))])]?

tmeasday · 2022-05-17T03:16:55Z

lib/preview-web/src/PreviewWeb.test.ts

@@ -1133,7 +1133,7 @@ describe('PreviewWeb', () => {
      await waitForEvents([Events.STORY_ARGS_UPDATED]);
      expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ARGS_UPDATED, {
        storyId: 'component-one--a',
-        args: { foo: 'a' },
+        args: { foo: 'a', new: 'value' },


This seems like a bug? Shouldn't we be resetting new to being unset?

Can you expand this test case (or create new test cases) to make sure we test:

An arg with changed value (i.e. foo here)

An arg which was initially set, but is unset from the URL

An arg that's set that wasn't in initialArgs (like new here).

Thanks!

…esetArgs

Tomastomaslol · 2022-05-17T09:36:02Z

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');


I added expects for the call toonUpdateArgs. To me, it made it easier to understand what was going inside of onResetArgs. Please let me know if this is appropriate and what you think of the testing in general 🙂

I guess I just check the STORY_ARGS_UPDATED event as basically the same thing as checking onUpdateArgs, as that is the only place it is emitted. Probably the spy is a little more coupled to the implementation than strictly necessary but I'm happy to leave it.

tmeasday

Great! Love the tests :)

tmeasday · 2022-05-17T12:18:10Z

lib/preview-web/src/PreviewWeb.test.ts

+      });
+    });
+
+    it('resets all args when one arg is not set initially', async () => {


Is this test essentially the same as resets all args above?

Yes, good point 🤦

reset all args to its initial value when onResetArgs is triggerd with…

b318c25

…out argNames

Tomastomaslol mentioned this pull request May 15, 2022

Controls: Reset button broken for !undefined URL values #18143

Closed

Tomastomaslol added addon: controls bug labels May 15, 2022

yannbf reviewed May 16, 2022

View reviewed changes

tmeasday requested changes May 17, 2022

View reviewed changes

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

b56b1ce

…esetArgs

Tomastomaslol commented May 17, 2022

View reviewed changes

tmeasday approved these changes May 17, 2022

View reviewed changes

remove repeated test

9583cea

shilman merged commit 82ce9de into storybookjs:next May 17, 2022

Tomastomaslol deleted the issue-18143-reset-button-broken-for-URL-values branch May 17, 2022 23:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Controls: Fix reset button broken for !undefined URL values #18231

Controls: Fix reset button broken for !undefined URL values #18231

Tomastomaslol commented May 15, 2022

nx-cloud bot commented May 15, 2022 •

edited

yannbf May 16, 2022

tmeasday May 17, 2022

Tomastomaslol May 17, 2022

yannbf commented May 16, 2022

Tomastomaslol commented May 16, 2022

tmeasday left a comment

tmeasday May 17, 2022

tmeasday May 17, 2022

Tomastomaslol May 17, 2022

tmeasday May 17, 2022

tmeasday left a comment

tmeasday May 17, 2022

Tomastomaslol May 17, 2022

Controls: Fix reset button broken for !undefined URL values #18231

Controls: Fix reset button broken for !undefined URL values #18231

Conversation

Tomastomaslol commented May 15, 2022

What I did

How to test

nx-cloud bot commented May 15, 2022 • edited

☁️ Nx Cloud Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yannbf commented May 16, 2022

Tomastomaslol commented May 16, 2022

tmeasday left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tmeasday left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nx-cloud bot commented May 15, 2022 •

edited