@khanacademy/perseus 0.0.1 → 0.2.1

package/src/components/__tests__/sorter_test.jsx

@@ -0,0 +1,111 @@
+// @flow
+import getRenderA11yString from "katex/dist/contrib/render-a11y-string.js";
+import * as React from "react";
+import "@testing-library/jest-dom";
+
+import {testDependencies} from "../../../../../testing/test-dependencies.js";
+import {wait} from "../../../../../testing/wait.js";
+import * as Dependencies from "../../dependencies.js";
+import {renderQuestion} from "../../widgets/__tests__/renderQuestion.jsx";
+import {question1} from "../__testdata__/sorter_testdata.js";
+
+import type {APIOptions} from "../../types.js";
+
+describe("sorter widget", () => {
+    beforeEach(() => {
+        /*
+        Sortable misbehaves and sets state after the component has been
+        unmounted. This is existing behavior and its safer to leave the existing
+        implementation and swallow the warning in tests.
+        */
+        jest.spyOn(console, "warn").mockImplementation(() => {});
+        jest.spyOn(console, "error").mockImplementation(() => {});
+
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
+            ...testDependencies,
+            getKaTeX: () => {
+                return Promise.resolve({});
+            },
+            TeX: ({children}: {|children: React.Node|}) => (
+                <span className="tex-mock">{children}</span>
+            ),
+            getRenderA11yString: Promise.resolve(getRenderA11yString),
+            shouldUseFutureKaTeX: (flag: boolean) => {},
+        });
+    });
+
+    it("should snapshot", async () => {
+        // Arrange
+        jest.useRealTimers();
+
+        const apiOptions: APIOptions = {
+            isMobile: false,
+        };
+
+        // Act
+        const {container} = renderQuestion(question1, apiOptions);
+        await wait();
+
+        // Assert
+        expect(container).toMatchSnapshot("first render");
+    });
+
+    it("should snapshot on mobile", async () => {
+        // Arrange
+        jest.useRealTimers();
+
+        const apiOptions: APIOptions = {
+            isMobile: true,
+        };
+
+        // Act
+        const {container} = renderQuestion(question1, apiOptions);
+        await wait();
+
+        // Assert
+        expect(container).toMatchSnapshot("first mobile render");
+    });
+
+    it("can be answered correctly", () => {
+        // Arrange
+        const apiOptions: APIOptions = {
+            isMobile: false,
+        };
+        const {renderer} = renderQuestion(question1, apiOptions);
+        const sorter = renderer.findWidgets("sorter 1")[0];
+
+        // Put the options in the correct order
+        ["$0.005$ kilograms", "$15$ grams", "$55$ grams"].forEach(
+            (option, index) => {
+                sorter.moveOptionToIndex(option, 3);
+            },
+        );
+
+        // Act
+        renderer.guessAndScore();
+
+        // assert
+        expect(renderer).toHaveBeenAnsweredCorrectly();
+    });
+    it("can be answered incorrectly", () => {
+        // Arrange
+        const apiOptions: APIOptions = {
+            isMobile: false,
+        };
+        const {renderer} = renderQuestion(question1, apiOptions);
+        const sorter = renderer.findWidgets("sorter 1")[0];
+
+        // Put the options in the reverse order
+        ["$0.005$ kilograms", "$15$ grams", "$55$ grams"].forEach(
+            (option, index) => {
+                sorter.moveOptionToIndex(option, 0);
+            },
+        );
+
+        // Act
+        renderer.guessAndScore();
+
+        // assert
+        expect(renderer).toHaveBeenAnsweredIncorrectly();
+    });
+});

package/src/components/__tests__/zoomable_test.jsx

@@ -0,0 +1,388 @@
+// @flow
+
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+import "@testing-library/jest-dom"; // Imports custom mathers
+
+import Zoomable from "../zoomable.jsx";
+
+const mockSize = (el, size) => {
+    jest.spyOn(el, "offsetWidth", "get").mockImplementation(() => size.width);
+    jest.spyOn(el, "offsetHeight", "get").mockImplementation(() => size.height);
+};
+
+describe("Zoomable", () => {
+    it("should snapshot", () => {
+        // Arrange and Act
+        const {container} = render(
+            <Zoomable>
+                <span>Some zoomable text</span>
+            </Zoomable>,
+        );
+
+        // Assert
+        expect(container).toMatchInlineSnapshot(`
+            <div>
+              <span
+                style="display: block; width: 100%; transform: scale(1, 1)  translate(0, 8px); transform-origin: 0 0; opacity: 0;"
+              >
+                <span>
+                  Some zoomable text
+                </span>
+              </span>
+            </div>
+        `);
+    });
+
+    it("should toggle to zoomed state when clicked", () => {
+        // Arrange
+        const {container} = render(
+            <Zoomable>
+                <span>Some zoomable text</span>
+            </Zoomable>,
+        );
+
+        // Act
+        userEvent.click(screen.getByText("Some zoomable text"));
+        jest.runOnlyPendingTimers();
+
+        // Assert
+        expect(container).toMatchInlineSnapshot(`
+            <div>
+              <span
+                style="display: block; width: 100%; transform: scale(0, 0)  translate(0, 8px); transform-origin: 0 0; opacity: 0; height: 0px;"
+              >
+                <span>
+                  Some zoomable text
+                </span>
+              </span>
+            </div>
+        `);
+    });
+
+    it("should toggle to unzoomed state when clicked while zoomed", () => {
+        // Arrange
+        const {container} = render(
+            <Zoomable>
+                <span>Some zoomable text</span>
+            </Zoomable>,
+        );
+
+        userEvent.click(screen.getByText("Some zoomable text"));
+        jest.runOnlyPendingTimers();
+
+        // Act
+        userEvent.click(screen.getByText("Some zoomable text"));
+        jest.runOnlyPendingTimers();
+
+        // Assert
+        expect(container).toMatchInlineSnapshot(`
+            <div>
+              <span
+                style="display: block; width: 100%; transform: scale(1, 1); transform-origin: 0 0; opacity: 1; height: 1px; transition-property: opacity transform; transition-duration: 0.3s; transition-timing-function: ease-out;"
+              >
+                <span>
+                  Some zoomable text
+                </span>
+              </span>
+            </div>
+        `);
+    });
+
+    it("should use provided computeChildBounds function when zooming", () => {
+        // Arrange
+        const computeChildBounds = jest.fn(() => ({width: 1000, height: 1000}));
+
+        // Act
+        render(
+            <Zoomable computeChildBounds={computeChildBounds}>
+                <span>Some zoomable text</span>
+            </Zoomable>,
+        );
+        jest.runOnlyPendingTimers();
+
+        // Assert
+        expect(computeChildBounds).toHaveBeenCalled();
+    });
+
+    it("should scale if computeChildBounds is larger than root node size", () => {
+        // Arrange
+        const {container} = render(
+            <Zoomable>
+                <span>Some zoomable text</span>
+            </Zoomable>,
+        );
+
+        // Parent node bounds
+        // eslint-disable-next-line testing-library/no-node-access
+        const rootNode = container.firstElementChild;
+        mockSize(rootNode, {width: 400, height: 100});
+
+        // Child node bounds
+        mockSize(screen.getByText("Some zoomable text"), {
+            width: 800,
+            height: 200,
+        });
+
+        // Act
+        // The measure action uses a setState and setTimeout(0)
+        jest.runOnlyPendingTimers();
+        jest.runOnlyPendingTimers();
+
+        // Assert
+        expect(container).toMatchInlineSnapshot(`
+            <div>
+              <span
+                style="display: block; width: 100%; transform: scale(0.4993757802746567, 0.4993757802746567); transform-origin: 0 0; opacity: 1; height: 101px; transition-property: opacity transform; transition-duration: 0.3s; transition-timing-function: ease-out;"
+              >
+                <span>
+                  Some zoomable text
+                </span>
+              </span>
+            </div>
+        `);
+    });
+
+    it("should not scale if computeChildBounds is smaller than root node size", () => {
+        // Arrange
+        const {container} = render(
+            <Zoomable>
+                <span>Some zoomable text</span>
+            </Zoomable>,
+        );
+
+        // Parent node bounds
+        // eslint-disable-next-line testing-library/no-node-access
+        const rootNode = container.firstElementChild;
+        mockSize(rootNode, {width: 400, height: 100});
+
+        // Child node bounds
+        mockSize(screen.getByText("Some zoomable text"), {
+            width: 100,
+            height: 100,
+        });
+
+        // Act
+        jest.runOnlyPendingTimers();
+
+        // Assert
+        expect(container).toMatchInlineSnapshot(`
+            <div>
+              <span
+                style="display: block; width: 100%; transform: scale(1, 1); transform-origin: 0 0; opacity: 1; transition-property: opacity transform; transition-duration: 0.3s; transition-timing-function: ease-out;"
+              >
+                <span>
+                  Some zoomable text
+                </span>
+              </span>
+            </div>
+        `);
+    });
+
+    it("should reset to initial state on window resize", () => {
+        // Arrange
+        // Simulate window resize event
+        const resizeWindowTo = (width: number, height: number) => {
+            const resizeEvent = document.createEvent("Event");
+            resizeEvent.initEvent("resize", true, true);
+
+            window.innerWidth = width;
+            window.innerHeight = height;
+            window.dispatchEvent(resizeEvent);
+        };
+
+        render(
+            <Zoomable>
+                <span>Some zoomable text</span>
+            </Zoomable>,
+        );
+        // We need two cycles to get everything rendered and visible
+        jest.runOnlyPendingTimers();
+        jest.runOnlyPendingTimers();
+
+        // Act
+        resizeWindowTo(500, 500);
+
+        // Assert
+        // The children are initially displayed with an opacity of 0 to give
+        // the component a chance to render and measure. Once that's done, the
+        // content becomes visible. So intial state is invisible.
+        expect(screen.queryByText("Some zoomable text")).not.toBeVisible();
+    });
+
+    it("should toggle zoom if zoomed", () => {
+        // Arrange
+        const onClickHandler = jest.fn();
+        let zoomable: ?Zoomable;
+        render(
+            <Zoomable ref={(c) => (zoomable = c)}>
+                <span onClick={onClickHandler}>Some zoomable text</span>
+            </Zoomable>,
+        );
+        userEvent.click(screen.getByText("Some zoomable text"));
+        jest.runOnlyPendingTimers();
+        onClickHandler.mockClear();
+
+        // Act
+        userEvent.click(screen.getByText("Some zoomable text"));
+        jest.runOnlyPendingTimers();
+
+        // Assert
+        expect(onClickHandler).not.toHaveBeenCalled();
+        expect(zoomable?.state.zoomed).toBeTrue();
+    });
+
+    describe.each([
+        ["onTouchStartCapture", fireEvent.touchStart],
+        ["onTouchEndCapture", fireEvent.touchEnd],
+        ["onTouchCancelCapture", fireEvent.touchCancel],
+    ])("propogation of touch event: %s", (propName: string, eventFirer) => {
+        it("should not propogate event to children when zoomed", () => {
+            // Arrange
+            const props = {};
+            props[propName] = jest.fn();
+
+            render(
+                <Zoomable>
+                    <span {...props}>Some zoomable text</span>
+                </Zoomable>,
+            );
+            userEvent.click(screen.getByText("Some zoomable text"));
+
+            // Act
+            eventFirer(screen.getByText("Some zoomable text"));
+            jest.runOnlyPendingTimers();
+
+            // Assert
+            expect(props[propName]).not.toHaveBeenCalled();
+        });
+
+        it("should propogate event to children when not zoomed", () => {
+            // Arrange
+            const props = {};
+            props[propName] = jest.fn();
+
+            render(
+                <Zoomable>
+                    <span {...props}>Some zoomable text</span>
+                </Zoomable>,
+            );
+            jest.runOnlyPendingTimers();
+            userEvent.click(screen.getByText("Some zoomable text"));
+            jest.runOnlyPendingTimers();
+
+            // Act
+            eventFirer(screen.getByText("Some zoomable text"));
+
+            // Assert
+            expect(props[propName]).toHaveBeenCalled();
+        });
+    });
+
+    describe("child node mutations", () => {
+        let computeChildBounds;
+        let componentContainer;
+
+        beforeEach(() => {
+            // Arrange
+            const sizes = [
+                // First render
+                {width: 100, height: 100},
+                // Post-mutation render
+                {width: 1000, height: 1000},
+            ];
+            computeChildBounds = jest.fn(() => sizes.shift());
+
+            // eslint-disable-next-line testing-library/no-render-in-setup
+            const {container} = render(
+                <Zoomable computeChildBounds={computeChildBounds}>
+                    <span>Some zoomable text</span>
+                </Zoomable>,
+            );
+            componentContainer = container;
+
+            // eslint-disable-next-line testing-library/no-node-access
+            const rootNode = container.firstElementChild;
+            mockSize(rootNode, {width: 200, height: 200});
+
+            jest.runOnlyPendingTimers();
+        });
+
+        it("should update measurements", async () => {
+            // Act
+            screen.getByText("Some zoomable text").innerHTML =
+                "Some more zoomable text";
+            await waitFor(() => {
+                screen.getByText("Some more zoomable text");
+            });
+
+            // Assert
+            expect(computeChildBounds).toHaveBeenCalledTimes(2);
+            expect(componentContainer).toMatchInlineSnapshot(`
+                <div>
+                  <span
+                    style="display: block; width: 100%; transform: scale(1, 1); transform-origin: 0 0; opacity: 1; transition-property: opacity transform; transition-duration: 0.3s; transition-timing-function: ease-out; height: 1001px;"
+                  >
+                    <span>
+                      Some more zoomable text
+                    </span>
+                  </span>
+                </div>
+            `);
+        });
+
+        it("should remain zoomed", async () => {
+            // Arrange
+
+            // Act
+            screen.getByText("Some zoomable text").innerHTML =
+                "Some more zoomable text";
+            await waitFor(() => {
+                screen.getByText("Some more zoomable text");
+            });
+
+            // Assert
+            expect(computeChildBounds).toHaveBeenCalledTimes(2);
+            expect(componentContainer).toMatchInlineSnapshot(`
+                <div>
+                  <span
+                    style="display: block; width: 100%; transform: scale(1, 1); transform-origin: 0 0; opacity: 1; transition-property: opacity transform; transition-duration: 0.3s; transition-timing-function: ease-out; height: 1001px;"
+                  >
+                    <span>
+                      Some more zoomable text
+                    </span>
+                  </span>
+                </div>
+            `);
+        });
+
+        it("should remain unzoomed", async () => {
+            // Arrange
+            // We default to "zoomed", so this "unzooms"
+            userEvent.click(screen.getByText("Some zoomable text"));
+            jest.runOnlyPendingTimers();
+
+            // Act
+            screen.getByText("Some zoomable text").innerHTML =
+                "Some more zoomable text";
+            await waitFor(() => {
+                screen.getByText("Some more zoomable text");
+            });
+
+            // Assert
+            expect(computeChildBounds).toHaveBeenCalledTimes(2);
+            expect(componentContainer).toMatchInlineSnapshot(`
+                <div>
+                  <span
+                    style="display: block; width: 100%; transform: scale(0.1998001998001998, 0.1998001998001998); transform-origin: 0 0; opacity: 1; transition-property: opacity transform; transition-duration: 0.3s; transition-timing-function: ease-out; height: 200px;"
+                  >
+                    <span>
+                      Some more zoomable text
+                    </span>
+                  </span>
+                </div>
+            `);
+        });
+    });
+});

package/src/components/button-group.jsx

@@ -0,0 +1,131 @@
+// @flow
+import {css, StyleSheet} from "aphrodite";
+import * as React from "react";
+
+type Props = {|
+    // the initial value of the button selected, defaults to null
+    value: any,
+    buttons: $ReadOnlyArray<{|
+        // the value returned when the button is selected
+        value: any,
+        // the content shown within the button, typically a string that gets
+        // rendered as the button's display text
+        content: React.Node,
+        // the title-text shown on hover
+        title?: string,
+    |}>,
+    // a function that is provided with the updated value (which it then is
+    // responsible for updating)
+    onChange: (value: any) => mixed,
+    // if false, exactly one button _must_ be selected;
+    // defaults to true and _at most_ one button (0 or 1) may be selected.
+    allowEmpty: boolean,
+|};
+
+type DefaultProps = {|
+    allowEmpty: Props["allowEmpty"],
+    value: Props["value"],
+|};
+
+/**
+ * ButtonGroup is an aesthetically pleasing group of buttons.
+ */
+class ButtonGroup extends React.Component<Props> {
+    container: ?HTMLDivElement;
+
+    static defaultProps: DefaultProps = {
+        value: null,
+        allowEmpty: true,
+    };
+
+    componentWillUnmount() {
+        this.container = null;
+    }
+
+    focus(): void | boolean {
+        if (this.container) {
+            this.container.focus();
+            return true;
+        }
+    }
+
+    toggleSelect(newValue: any) {
+        const value = this.props.value;
+
+        if (this.props.allowEmpty) {
+            // Select the new button or unselect if it's already selected
+            this.props.onChange(value !== newValue ? newValue : null);
+        } else {
+            this.props.onChange(newValue);
+        }
+    }
+
+    render(): React.Element<"div"> {
+        const value = this.props.value;
+        const buttons = this.props.buttons.map((button, i) => {
+            return (
+                <button
+                    title={button.title}
+                    type="button"
+                    id={"" + i}
+                    ref={"button" + i}
+                    key={"" + i}
+                    className={css(
+                        styles.buttonStyle,
+                        button.value === value && styles.selectedStyle,
+                    )}
+                    onClick={() => this.toggleSelect(button.value)}
+                >
+                    {button.content || "" + button.value}
+                </button>
+            );
+        });
+
+        const outerStyle = {
+            display: "inline-block",
+        };
+        return (
+            <div style={outerStyle} ref={(node) => (this.container = node)}>
+                {buttons}
+            </div>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    buttonStyle: {
+        backgroundColor: "white",
+        border: "1px solid #ccc",
+        borderLeft: "0",
+        cursor: "pointer",
+        margin: "0",
+        padding: "5px 10px",
+        position: "relative", // for hover
+
+        ":first-child": {
+            borderLeft: "1px solid #ccc",
+            borderTopLeftRadius: "3px",
+            borderBottomLeftRadius: "3px",
+        },
+
+        ":last-child": {
+            borderRight: "1px solid #ccc",
+            borderTopRightRadius: "3px",
+            borderBottomRightRadius: "3px",
+        },
+
+        ":hover": {
+            backgroundColor: "#ccc",
+        },
+
+        ":focus": {
+            zIndex: 2,
+        },
+    },
+
+    selectedStyle: {
+        backgroundColor: "#ddd",
+    },
+});
+
+export default ButtonGroup;

package/src/components/constants.js

@@ -0,0 +1,15 @@
+// @flow
+export const devices = {
+    PHONE: ("phone": "phone"),
+    TABLET: ("tablet": "tablet"),
+    DESKTOP: ("desktop": "desktop"),
+};
+
+// How many pixels do we reserve on the right-hand side of a preview
+// for displaying lint indicators? This space needs to be reserved
+// in DeviceFramer, but it is actually allocated in PerseusFrame
+export const lintGutterWidth = 36;
+
+// How wide a border does PerseusFrame draw? We need to allocate enough
+// space for it in DeviceFramer.
+export const perseusFrameBorderWidth = 1;