@khanacademy/perseus 5.0.0 → 6.0.0

package/src/widgets/__tests__/__snapshots__/cs-program.test.ts.snap

@@ -2,74 +2,66 @@
 
 exports[`cs-program widget should snapshot on mobile: first mobile render 1`] = `
 <div>
-  <span
-    class="mock-KatexProvider"
+  <div
+    class="perseus-renderer perseus-renderer-responsive"
   >
     <div
-      class="perseus-renderer perseus-renderer-responsive"
+      class="paragraph"
+      data-perseus-paragraph-index="0"
     >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="0"
       >
         <div
-          class="paragraph"
+          class="perseus-widget-container widget-nohighlight widget-block"
         >
           <div
-            class="perseus-widget-container widget-nohighlight widget-block"
+            class="widthOverride_1vdzrqd-o_O-container_1v2yujs"
           >
-            <div
-              class="widthOverride_1vdzrqd-o_O-container_1v2yujs"
-            >
-              <iframe
-                allowfullscreen=""
-                class="perseus-scratchpad"
-                sandbox="allow-popups allow-same-origin allow-scripts allow-top-navigation"
-                src="http://localhost:8081/computer-programming/program/6293105639817216/embedded?embed=yes&author=no&editor=no&width=688&buttons=no&settings=%7B%7D"
-                style="height: 540px; width: 100%;"
-              />
-            </div>
+            <iframe
+              allowfullscreen=""
+              class="perseus-scratchpad"
+              sandbox="allow-popups allow-same-origin allow-scripts allow-top-navigation"
+              src="http://localhost:8081/computer-programming/program/6293105639817216/embedded?embed=yes&author=no&editor=no&width=688&buttons=no&settings=%7B%7D"
+              style="height: 540px; width: 100%;"
+            />
           </div>
         </div>
       </div>
     </div>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`cs-program widget should snapshot: first render 1`] = `
 <div>
-  <span
-    class="mock-KatexProvider"
+  <div
+    class="perseus-renderer perseus-renderer-responsive"
   >
     <div
-      class="perseus-renderer perseus-renderer-responsive"
+      class="paragraph"
+      data-perseus-paragraph-index="0"
     >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="0"
       >
         <div
-          class="paragraph"
+          class="perseus-widget-container widget-nohighlight widget-block"
         >
           <div
-            class="perseus-widget-container widget-nohighlight widget-block"
+            class="widthOverride_1vdzrqd-o_O-container_1v2yujs"
           >
-            <div
-              class="widthOverride_1vdzrqd-o_O-container_1v2yujs"
-            >
-              <iframe
-                allowfullscreen=""
-                class="perseus-scratchpad"
-                sandbox="allow-popups allow-same-origin allow-scripts allow-top-navigation"
-                src="http://localhost:8081/computer-programming/program/6293105639817216/embedded?embed=yes&author=no&editor=no&width=688&buttons=no&settings=%7B%7D"
-                style="height: 540px; width: 100%;"
-              />
-            </div>
+            <iframe
+              allowfullscreen=""
+              class="perseus-scratchpad"
+              sandbox="allow-popups allow-same-origin allow-scripts allow-top-navigation"
+              src="http://localhost:8081/computer-programming/program/6293105639817216/embedded?embed=yes&author=no&editor=no&width=688&buttons=no&settings=%7B%7D"
+              style="height: 540px; width: 100%;"
+            />
           </div>
         </div>
       </div>
     </div>
-  </span>
+  </div>
 </div>
 `;

package/src/widgets/__tests__/__snapshots__/definition.test.ts.snap

@@ -2,104 +2,96 @@
 
 exports[`Definition widget should have a default snapshot: first render 1`] = `
 <div>
-  <span
-    class="mock-KatexProvider"
+  <div
+    class="perseus-renderer perseus-renderer-responsive"
   >
     <div
-      class="perseus-renderer perseus-renderer-responsive"
+      class="paragraph"
+      data-perseus-paragraph-index="0"
     >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="0"
       >
-        <div
-          class="paragraph"
-        >
-          Read the excerpt and answer the question below. 
-        </div>
+        Read the excerpt and answer the question below. 
       </div>
+    </div>
+    <div
+      class="paragraph"
+      data-perseus-paragraph-index="1"
+    >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="1"
       >
+        The Governor and Council of the Massachusetts had much conference many days; and at last . . . . concluded a peace and friendship with 
         <div
-          class="paragraph"
+          class="perseus-widget-container widget-nohighlight perseus-widget__definition widget-inline"
         >
-          The Governor and Council of the Massachusetts had much conference many days; and at last . . . . concluded a peace and friendship with 
-          <div
-            class="perseus-widget-container widget-nohighlight perseus-widget__definition widget-inline"
+          <button
+            aria-controls="uid-popover-0-wb-id"
+            aria-disabled="false"
+            aria-expanded="false"
+            class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4"
+            id="uid-popover-0-wb-id-anchor"
+            type="button"
           >
-            <button
-              aria-controls="uid-popover-0-wb-id"
-              aria-disabled="false"
-              aria-expanded="false"
-              class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4"
-              id="uid-popover-0-wb-id-anchor"
-              type="button"
+            <span
+              style="color: rgb(24, 101, 242);"
             >
-              <span
-                style="color: rgb(24, 101, 242);"
-              >
-                the Pequots
-              </span>
-            </button>
-          </div>
-          , upon these conditions.
+              the Pequots
+            </span>
+          </button>
         </div>
+        , upon these conditions.
       </div>
     </div>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`Definition widget should have an open state snapshot: open state 1`] = `
 <div>
-  <span
-    class="mock-KatexProvider"
+  <div
+    class="perseus-renderer perseus-renderer-responsive"
   >
     <div
-      class="perseus-renderer perseus-renderer-responsive"
+      class="paragraph"
+      data-perseus-paragraph-index="0"
     >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="0"
       >
-        <div
-          class="paragraph"
-        >
-          Read the excerpt and answer the question below. 
-        </div>
+        Read the excerpt and answer the question below. 
       </div>
+    </div>
+    <div
+      class="paragraph"
+      data-perseus-paragraph-index="1"
+    >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="1"
       >
+        The Governor and Council of the Massachusetts had much conference many days; and at last . . . . concluded a peace and friendship with 
         <div
-          class="paragraph"
+          class="perseus-widget-container widget-nohighlight perseus-widget__definition widget-inline"
         >
-          The Governor and Council of the Massachusetts had much conference many days; and at last . . . . concluded a peace and friendship with 
-          <div
-            class="perseus-widget-container widget-nohighlight perseus-widget__definition widget-inline"
+          <button
+            aria-controls="uid-popover-1-wb-id"
+            aria-disabled="false"
+            aria-expanded="true"
+            class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4"
+            id="uid-popover-1-wb-id-anchor"
+            type="button"
           >
-            <button
-              aria-controls="uid-popover-1-wb-id"
-              aria-disabled="false"
-              aria-expanded="true"
-              class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4"
-              id="uid-popover-1-wb-id-anchor"
-              type="button"
+            <span
+              style="color: rgb(24, 101, 242); border-bottom: 2px solid #1865f2;"
             >
-              <span
-                style="color: rgb(24, 101, 242); border-bottom: 2px solid #1865f2;"
-              >
-                the Pequots
-              </span>
-            </button>
-          </div>
-          , upon these conditions.
+              the Pequots
+            </span>
+          </button>
         </div>
+        , upon these conditions.
       </div>
     </div>
-  </span>
+  </div>
 </div>
 `;

package/src/widgets/__tests__/__snapshots__/dropdown.test.ts.snap

@@ -2,156 +2,148 @@
 
 exports[`Dropdown widget should snapshot when opened: dropdown open 1`] = `
 <div>
-  <span
-    class="mock-KatexProvider"
+  <div
+    class="perseus-renderer perseus-renderer-responsive"
   >
     <div
-      class="perseus-renderer perseus-renderer-responsive"
+      class="paragraph"
+      data-perseus-paragraph-index="0"
     >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="0"
       >
+        The total number of boxes the forklift can carry is 
         <div
-          class="paragraph"
+          class="perseus-widget-container widget-nohighlight widget-inline-block"
         >
-          The total number of boxes the forklift can carry is 
-          <div
-            class="perseus-widget-container widget-nohighlight widget-inline-block"
-          >
-            <div>
-              <div
-                class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
+          <div>
+            <div
+              class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
+            >
+              <span
+                aria-atomic="true"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="srOnly_19bpjuy"
+                data-test-id="dropdown-live-region"
+              >
+                3 items
+              </span>
+              <button
+                aria-expanded="true"
+                aria-haspopup="listbox"
+                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1-o_O-focus_1qpi544"
+                type="button"
               >
                 <span
-                  aria-atomic="true"
-                  aria-live="polite"
-                  aria-relevant="additions text"
-                  class="srOnly_19bpjuy"
-                  data-test-id="dropdown-live-region"
+                  class="text_f1191h-o_O-LabelMedium_1rew30o-o_O-text_16ujc3c"
                 >
-                  3 items
+                  greater/less than or equal to
                 </span>
-                <button
-                  aria-expanded="true"
-                  aria-haspopup="listbox"
-                  class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1-o_O-focus_1qpi544"
-                  type="button"
+                <svg
+                  aria-hidden="true"
+                  class="svg_aeiopc-o_O-caret_ntkmq"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
                 >
-                  <span
-                    class="text_f1191h-o_O-LabelMedium_1rew30o-o_O-text_16ujc3c"
-                  >
-                    greater/less than or equal to
-                  </span>
-                  <svg
-                    aria-hidden="true"
-                    class="svg_aeiopc-o_O-caret_ntkmq"
-                    height="16"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
-                      fill="rgba(33,36,44,0.64)"
-                    />
-                  </svg>
-                </button>
-              </div>
+                  <path
+                    d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
+                    fill="rgba(33,36,44,0.64)"
+                  />
+                </svg>
+              </button>
             </div>
           </div>
-           
+        </div>
+         
+        <span
+          style="white-space: nowrap;"
+        >
+          <span />
           <span
-            style="white-space: nowrap;"
+            class="mock-TeX"
           >
-            <span />
-            <span
-              class="mock-TeX"
-            >
-              60
-            </span>
-            <span />
+            60
           </span>
-          .
-        </div>
+          <span />
+        </span>
+        .
       </div>
     </div>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`Dropdown widget should snapshot: initial render 1`] = `
 <div>
-  <span
-    class="mock-KatexProvider"
+  <div
+    class="perseus-renderer perseus-renderer-responsive"
   >
     <div
-      class="perseus-renderer perseus-renderer-responsive"
+      class="paragraph"
+      data-perseus-paragraph-index="0"
     >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="0"
       >
+        The total number of boxes the forklift can carry is 
         <div
-          class="paragraph"
+          class="perseus-widget-container widget-nohighlight widget-inline-block"
         >
-          The total number of boxes the forklift can carry is 
-          <div
-            class="perseus-widget-container widget-nohighlight widget-inline-block"
-          >
-            <div>
-              <div
-                class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
+          <div>
+            <div
+              class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
+            >
+              <span
+                aria-atomic="true"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="srOnly_19bpjuy"
+                data-test-id="dropdown-live-region"
+              />
+              <button
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1"
+                type="button"
               >
                 <span
-                  aria-atomic="true"
-                  aria-live="polite"
-                  aria-relevant="additions text"
-                  class="srOnly_19bpjuy"
-                  data-test-id="dropdown-live-region"
-                />
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="listbox"
-                  class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1"
-                  type="button"
+                  class="text_f1191h-o_O-LabelMedium_1rew30o-o_O-text_16ujc3c"
+                >
+                  greater/less than or equal to
+                </span>
+                <svg
+                  aria-hidden="true"
+                  class="svg_aeiopc-o_O-caret_ntkmq"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
                 >
-                  <span
-                    class="text_f1191h-o_O-LabelMedium_1rew30o-o_O-text_16ujc3c"
-                  >
-                    greater/less than or equal to
-                  </span>
-                  <svg
-                    aria-hidden="true"
-                    class="svg_aeiopc-o_O-caret_ntkmq"
-                    height="16"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
-                      fill="rgba(33,36,44,0.64)"
-                    />
-                  </svg>
-                </button>
-              </div>
+                  <path
+                    d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
+                    fill="rgba(33,36,44,0.64)"
+                  />
+                </svg>
+              </button>
             </div>
           </div>
-           
+        </div>
+         
+        <span
+          style="white-space: nowrap;"
+        >
+          <span />
           <span
-            style="white-space: nowrap;"
+            class="mock-TeX"
           >
-            <span />
-            <span
-              class="mock-TeX"
-            >
-              60
-            </span>
-            <span />
+            60
           </span>
-          .
-        </div>
+          <span />
+        </span>
+        .
       </div>
     </div>
-  </span>
+  </div>
 </div>
 `;