try using UniqueIDProvider to resolve snapshot errors

Khan · Nov 18, 2024 · 2c9d887 · 2c9d887
1 parent c9b5740
commit 2c9d887
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 16 deletions.
diff --git a/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap b/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap
@@ -350,7 +350,7 @@ exports[`renderer snapshots correct answer: correct answer 1`] = `
           >
             <label
               class="text_f1191h-o_O-LabelLarge_5s82ln"
-              for="uid-dropdown-widget-1-wb-id"
+              for="uid-dropdown-widget-1-dropdown"
             >
               Test visible label
             </label>
@@ -371,7 +371,7 @@ exports[`renderer snapshots correct answer: correct answer 1`] = `
                 aria-haspopup="listbox"
                 aria-label="Test ARIA label"
                 class="button_vr44p2-o_O-shared_u51dsh-o_O-default_3ie67y"
-                id="uid-dropdown-widget-1-wb-id"
+                id="uid-dropdown-widget-1-dropdown"
                 type="button"
               >
                 <span
@@ -427,7 +427,7 @@ exports[`renderer snapshots incorrect answer: incorrect answer 1`] = `
           >
             <label
               class="text_f1191h-o_O-LabelLarge_5s82ln"
-              for="uid-dropdown-widget-2-wb-id"
+              for="uid-dropdown-widget-2-dropdown"
             >
               Test visible label
             </label>
@@ -448,7 +448,7 @@ exports[`renderer snapshots incorrect answer: incorrect answer 1`] = `
                 aria-haspopup="listbox"
                 aria-label="Test ARIA label"
                 class="button_vr44p2-o_O-shared_u51dsh-o_O-default_3ie67y"
-                id="uid-dropdown-widget-2-wb-id"
+                id="uid-dropdown-widget-2-dropdown"
                 type="button"
               >
                 <span
@@ -504,7 +504,7 @@ exports[`renderer snapshots initial render: initial render 1`] = `
           >
             <label
               class="text_f1191h-o_O-LabelLarge_5s82ln"
-              for="uid-dropdown-widget-0-wb-id"
+              for="uid-dropdown-widget-0-dropdown"
             >
               Test visible label
             </label>
@@ -525,7 +525,7 @@ exports[`renderer snapshots initial render: initial render 1`] = `
                 aria-haspopup="listbox"
                 aria-label="Test ARIA label"
                 class="button_vr44p2-o_O-shared_u51dsh-o_O-default_3ie67y"
-                id="uid-dropdown-widget-0-wb-id"
+                id="uid-dropdown-widget-0-dropdown"
                 type="button"
               >
                 <span

diff --git a/packages/perseus/src/widgets/dropdown/__snapshots__/dropdown.test.ts.snap b/packages/perseus/src/widgets/dropdown/__snapshots__/dropdown.test.ts.snap
@@ -21,7 +21,7 @@ exports[`Dropdown widget should snapshot when opened: dropdown open 1`] = `
           >
             <label
               class="text_f1191h-o_O-LabelLarge_5s82ln"
-              for="uid-dropdown-widget-1-wb-id"
+              for="uid-dropdown-widget-1-dropdown"
             >
               Test visible label
             </label>
@@ -44,7 +44,7 @@ exports[`Dropdown widget should snapshot when opened: dropdown open 1`] = `
                 aria-haspopup="listbox"
                 aria-label="Test ARIA label"
                 class="button_vr44p2-o_O-shared_u51dsh-o_O-default_3ie67y"
-                id="uid-dropdown-widget-1-wb-id"
+                id="uid-dropdown-widget-1-dropdown"
                 type="button"
               >
                 <span
@@ -100,7 +100,7 @@ exports[`Dropdown widget should snapshot: initial render 1`] = `
           >
             <label
               class="text_f1191h-o_O-LabelLarge_5s82ln"
-              for="uid-dropdown-widget-0-wb-id"
+              for="uid-dropdown-widget-0-dropdown"
             >
               Test visible label
             </label>
@@ -121,7 +121,7 @@ exports[`Dropdown widget should snapshot: initial render 1`] = `
                 aria-haspopup="listbox"
                 aria-label="Test ARIA label"
                 class="button_vr44p2-o_O-shared_u51dsh-o_O-default_3ie67y"
-                id="uid-dropdown-widget-0-wb-id"
+                id="uid-dropdown-widget-0-dropdown"
                 type="button"
               >
                 <span

diff --git a/packages/perseus/src/widgets/dropdown/dropdown.tsx b/packages/perseus/src/widgets/dropdown/dropdown.tsx
@@ -1,4 +1,4 @@
-import {IDProvider, View} from "@khanacademy/wonder-blocks-core";
+import {UniqueIDProvider, View} from "@khanacademy/wonder-blocks-core";
 import {SingleSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
 import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import * as React from "react";
@@ -82,8 +82,8 @@ class Dropdown extends React.Component<Props> implements Widget {
         ];
 
         return (
-            <IDProvider scope={"dropdown-widget"}>
-                {(uniqueId) => (
+            <UniqueIDProvider scope="dropdown-widget" mockOnFirstRender={true}>
+                {(ids) => (
                     <View
                         // NOTE(jared): These are required to prevent weird behavior
                         // When there's a dropdown in a zoomable table.
@@ -95,12 +95,15 @@ class Dropdown extends React.Component<Props> implements Widget {
                         }}
                     >
                         {this.props.visibleLabel && (
-                            <LabelLarge tag="label" htmlFor={uniqueId}>
+                            <LabelLarge
+                                tag="label"
+                                htmlFor={ids.get("dropdown")}
+                            >
                                 {this.props.visibleLabel}
                             </LabelLarge>
                         )}
                         <SingleSelect
-                            id={uniqueId}
+                            id={ids.get("dropdown")}
                             placeholder=""
                             onChange={(value) =>
                                 this._handleChange(parseInt(value))
@@ -113,7 +116,7 @@ class Dropdown extends React.Component<Props> implements Widget {
                         </SingleSelect>
                     </View>
                 )}
-            </IDProvider>
+            </UniqueIDProvider>
         );
     }
 }