@khanacademy/perseus 19.1.5 → 19.1.7

package/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap

@@ -1,285 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`server item renderer should snapshot: initial render 1`] = `
-<div>
-  <div>
-    <div>
-      <div
-        class="perseus-renderer perseus-renderer-responsive"
-      >
-        <div
-          class="paragraph"
-          data-perseus-paragraph-index="0"
-        >
-          <div
-            class="paragraph"
-          >
-            Enter the number 
-            <span
-              style="white-space: nowrap;"
-            >
-              <span />
-              <span
-                class="mock-TeX"
-              />
-              <span />
-            </span>
-            -42
-            <span
-              style="white-space: nowrap;"
-            >
-              <span />
-              <span
-                class="mock-TeX"
-              />
-              <span />
-            </span>
-             in the box: 
-            <div
-              class="perseus-widget-container widget-nohighlight widget-inline-block"
-            >
-              <span>
-                <div>
-                  <input
-                    autocapitalize="off"
-                    autocomplete="off"
-                    autocorrect="off"
-                    class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-default_1gznapd-o_O-leftAlign_7jg4r4"
-                    id="input-with-examples-aW5wdXQtbnVtYmVyIDE"
-                    type="text"
-                    value=""
-                  />
-                </div>
-                <div
-                  style="position: relative; height: 0px; display: none;"
-                >
-                  <div
-                    class="tooltipContainer"
-                    style="position: absolute; left: 0px;"
-                  >
-                    <div
-                      style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
-                    >
-                      <div
-                        style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
-                      />
-                      <div
-                        style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
-                      />
-                    </div>
-                    <div
-                      class="perseus-formats-tooltip preview-measure"
-                      style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
-                    >
-                      <div
-                        id="input-with-examples-aW5wdXQtbnVtYmVyIDE"
-                      >
-                        <div
-                          class="perseus-renderer perseus-renderer-responsive"
-                        >
-                          <div
-                            class="paragraph"
-                            data-perseus-paragraph-index="0"
-                          >
-                            <ul>
-                              <li>
-                                <strong>
-                                  Your answer should be
-                                </strong>
-                              </li>
-                              <li>
-                                an integer, like 
-                                <span
-                                  style="white-space: nowrap;"
-                                >
-                                  <span />
-                                  <span
-                                    class="mock-TeX"
-                                  >
-                                    6
-                                  </span>
-                                  <span />
-                                </span>
-                              </li>
-                              <li>
-                                an 
-                                <em>
-                                  exact
-                                </em>
-                                 decimal, like 
-                                <span
-                                  style="white-space: nowrap;"
-                                >
-                                  <span />
-                                  <span
-                                    class="mock-TeX"
-                                  >
-                                    0.75
-                                  </span>
-                                  <span />
-                                </span>
-                              </li>
-                              <li>
-                                a 
-                                <em>
-                                  simplified proper
-                                </em>
-                                 fraction, like 
-                                <span
-                                  style="white-space: nowrap;"
-                                >
-                                  <span />
-                                  <span
-                                    class="mock-TeX"
-                                  >
-                                    3/5
-                                  </span>
-                                  <span />
-                                </span>
-                              </li>
-                              <li>
-                                a 
-                                <em>
-                                  simplified improper
-                                </em>
-                                 fraction, like 
-                                <span
-                                  style="white-space: nowrap;"
-                                >
-                                  <span />
-                                  <span
-                                    class="mock-TeX"
-                                  >
-                                    7/4
-                                  </span>
-                                  <span />
-                                </span>
-                              </li>
-                              <li>
-                                a mixed number, like 
-                                <span
-                                  style="white-space: nowrap;"
-                                >
-                                  <span />
-                                  <span
-                                    class="mock-TeX"
-                                  >
-                                    1\\ 3/4
-                                  </span>
-                                  <span />
-                                </span>
-                              </li>
-                            </ul>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="hintsContainer_1g61p95"
-    >
-      <div
-        class=""
-      >
-        <div
-          class="hint perseus-hint-renderer"
-          tabindex="-1"
-        >
-          <span
-            class="perseus-sr-only"
-          >
-            Hint #1
-          </span>
-          <span
-            class="perseus-hint-label"
-            style="display: block;"
-          >
-            1 / 3
-          </span>
-          <div
-            class="perseus-renderer perseus-renderer-responsive"
-          >
-            <div
-              class="paragraph"
-              data-perseus-paragraph-index="0"
-            >
-              <div
-                class="paragraph"
-              >
-                Hint #1
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="hint perseus-hint-renderer"
-          tabindex="-1"
-        >
-          <span
-            class="perseus-sr-only"
-          >
-            Hint #2
-          </span>
-          <span
-            class="perseus-hint-label"
-            style="display: block;"
-          >
-            2 / 3
-          </span>
-          <div
-            class="perseus-renderer perseus-renderer-responsive"
-          >
-            <div
-              class="paragraph"
-              data-perseus-paragraph-index="0"
-            >
-              <div
-                class="paragraph"
-              >
-                Hint #2
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="hint perseus-hint-renderer last-hint last-rendered"
-          tabindex="-1"
-        >
-          <span
-            class="perseus-sr-only"
-          >
-            Hint #3
-          </span>
-          <span
-            class="perseus-hint-label"
-            style="display: block;"
-          >
-            3 / 3
-          </span>
-          <div
-            class="perseus-renderer perseus-renderer-responsive"
-          >
-            <div
-              class="paragraph"
-              data-perseus-paragraph-index="0"
-            >
-              <div
-                class="paragraph"
-              >
-                Hint #3
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/__tests__/a11y.test.ts

@@ -1,303 +0,0 @@
-import {violatingWidgets} from "../a11y";
-import {registerAllWidgetsForTesting} from "../util/register-all-widgets-for-testing";
-
-const noWidgets = {
-    question: {
-        content: "Hello, world!",
-        images: {},
-        widgets: {},
-    },
-    answerArea: {
-        calculator: false,
-    },
-    itemDataVersion: {
-        major: 0,
-        minor: 1,
-    },
-    hints: [],
-} as const;
-
-const oneAccessibleWidget = {
-    question: {
-        content: "Hello, world!\n\n[[☃ radio 1]]",
-        images: {},
-        widgets: {
-            "radio 1": {
-                type: "radio",
-                graded: true,
-                options: {
-                    choices: [
-                        {
-                            content: "hello",
-                            correct: true,
-                        },
-                        {
-                            content: "goodbye",
-                            correct: false,
-                        },
-                    ],
-                    randomize: false,
-                    multipleSelect: false,
-                    displayCount: null,
-                    hasNoneOfTheAbove: false,
-                    onePerLine: true,
-                    deselectEnabled: false,
-                },
-                version: {
-                    major: 1,
-                    minor: 0,
-                },
-            },
-        },
-    },
-    answerArea: {
-        calculator: false,
-    },
-    itemDataVersion: {
-        major: 0,
-        minor: 1,
-    },
-    hints: [],
-} as const;
-
-const oneInaccessibleWidget = {
-    question: {
-        content: "Hello, world!\n\n[[☃ radio 1]]\n\n[[☃ matrix 1]]\n\n",
-        images: {},
-        widgets: {
-            "radio 1": {
-                type: "radio",
-                graded: true,
-                options: {
-                    choices: [
-                        {
-                            content: "hello",
-                            correct: true,
-                        },
-                        {
-                            content: "goodbye",
-                            correct: false,
-                        },
-                    ],
-                    randomize: false,
-                    multipleSelect: false,
-                    displayCount: null,
-                    hasNoneOfTheAbove: false,
-                    onePerLine: true,
-                    deselectEnabled: false,
-                },
-                version: {
-                    major: 1,
-                    minor: 0,
-                },
-            },
-            "matrix 1": {
-                type: "matrix",
-                graded: true,
-                options: {
-                    matrixBoardSize: [3, 3],
-                    answers: [[]],
-                    prefix: "",
-                    suffix: "",
-                    cursorPosition: [0, 0],
-                },
-                version: {
-                    major: 0,
-                    minor: 0,
-                },
-            },
-        },
-    },
-    answerArea: {
-        calculator: false,
-    },
-    itemDataVersion: {
-        major: 0,
-        minor: 1,
-    },
-    hints: [],
-} as const;
-
-const imageWithAltText = {
-    question: {
-        content: "hello\n\n[[☃ image 1]]\n\n",
-        images: {},
-        widgets: {
-            "image 1": {
-                type: "image",
-                graded: true,
-                options: {
-                    title: "",
-                    range: [
-                        [0, 10],
-                        [0, 10],
-                    ],
-                    box: [350, 150],
-                    backgroundImage: {
-                        url: "http://placehold.it/350x150",
-                        width: 350,
-                        height: 150,
-                    },
-                    labels: [],
-                    alt: "oh cool",
-                    caption: "",
-                },
-                version: {
-                    major: 0,
-                    minor: 0,
-                },
-            },
-        },
-    },
-    answerArea: {
-        calculator: false,
-    },
-    itemDataVersion: {
-        major: 0,
-        minor: 1,
-    },
-    hints: [],
-} as const;
-
-const imageWithoutAltText = {
-    question: {
-        content: "hello\n\n[[☃ image 1]]\n\n",
-        images: {},
-        widgets: {
-            "image 1": {
-                type: "image",
-                graded: true,
-                options: {
-                    title: "",
-                    range: [
-                        [0, 10],
-                        [0, 10],
-                    ],
-                    box: [350, 150],
-                    backgroundImage: {
-                        url: "http://placehold.it/350x150",
-                        width: 350,
-                        height: 150,
-                    },
-                    labels: [],
-                    alt: "",
-                    caption: "",
-                },
-                version: {
-                    major: 0,
-                    minor: 0,
-                },
-            },
-        },
-    },
-    answerArea: {
-        calculator: false,
-    },
-    itemDataVersion: {
-        major: 0,
-        minor: 1,
-    },
-    hints: [],
-} as const;
-
-const emptyImageWithoutAltText = {
-    question: {
-        content: "hello\n\n[[☃ image 1]]\n\n",
-        images: {},
-        widgets: {
-            "image 1": {
-                type: "image",
-                graded: true,
-                options: {
-                    title: "",
-                    range: [
-                        [0, 10],
-                        [0, 10],
-                    ],
-                    box: [350, 150],
-                    labels: [],
-                    alt: "",
-                    caption: "",
-                },
-                version: {
-                    major: 0,
-                    minor: 0,
-                },
-            },
-        },
-    },
-    answerArea: {
-        calculator: false,
-    },
-    itemDataVersion: {
-        major: 0,
-        minor: 1,
-    },
-    hints: [],
-} as const;
-
-describe("a11y", () => {
-    beforeAll(() => {
-        registerAllWidgetsForTesting();
-    });
-
-    describe("violatingWidgets", () => {
-        describe("Current Perseus Version", () => {
-            it("should pass for no widgets", () => {
-                const result = violatingWidgets(noWidgets);
-                expect(result).toHaveLength(0);
-            });
-
-            it("should pass for accessible widgets", () => {
-                const result = violatingWidgets(oneAccessibleWidget);
-                expect(result).toHaveLength(0);
-            });
-
-            it("should pick out out inaccessible widgets", () => {
-                // NOTE: when the matrix widget is accessible this will fail
-                const result = violatingWidgets(oneInaccessibleWidget);
-                expect(result).toHaveLength(1);
-                expect(result[0]).toBe("matrix");
-            });
-
-            it("should pass for images with alt text", () => {
-                const result = violatingWidgets(imageWithAltText);
-                expect(result).toHaveLength(0);
-            });
-
-            it("should pick out images without alt text", () => {
-                const result = violatingWidgets(imageWithoutAltText);
-                expect(result).toHaveLength(1);
-                expect(result[0]).toBe("image");
-            });
-
-            it("should ignore blank images", () => {
-                const result = violatingWidgets(emptyImageWithoutAltText);
-                expect(result).toHaveLength(0);
-            });
-
-            it("should handle all these same cases in multi-items", () => {
-                const decorateItem = (item) => ({
-                    __type: "content",
-                    ...item.question,
-                });
-                const result = violatingWidgets({
-                    _multi: {
-                        sharedContext: decorateItem(oneInaccessibleWidget),
-                        questions: [
-                            decorateItem(noWidgets),
-                            decorateItem(oneAccessibleWidget),
-                            decorateItem(imageWithAltText),
-                            decorateItem(imageWithoutAltText),
-                            decorateItem(emptyImageWithoutAltText),
-                        ],
-                    },
-                });
-                result.sort(); // don't depend on iteration order
-                expect(result).toHaveLength(2);
-                expect(result[0]).toBe("image");
-                expect(result[1]).toBe("matrix");
-            });
-        });
-    });
-});