From 35651e09710f47d978be03270ba4011ff2dbe591 Mon Sep 17 00:00:00 2001 From: Tamara <60857422+Myranae@users.noreply.github.com> Date: Tue, 25 Jun 2024 08:33:37 -0500 Subject: [PATCH] Reset interactive graph state when Polygon's options change (#1364) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary: The right-side preview in the exercise editor did not reflect changes to the number of sides in a polygon. Here we reinitialize graph state when the props for number of sides changes as that was not happening previously. Manual Testing in the ZND: https://github.com/Khan/perseus/assets/60857422/c4f42f42-fbc4-4805-b5f7-5059408253c2 Issue: LEMS-2106 ## Test plan: - In a [ZND](https://prod-znd-240624-tamara-b.khanacademy.org/devadmin/content/courses/x6df8cbb5b9ebc9c6?lang=en), navigate to the exercise editor. Add an interactive graph widget. Change the graph type to Polygon. Confirm changing the number of sides changes the preview on the right. - Confirm all tests pass - Confirm all checks pass Author: Myranae Reviewers: nishasy, benchristel Required Reviewers: Approved By: nishasy, benchristel Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), 🚫 Upload Coverage, ✅ gerald, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), 🚫 Check builds for changes in size (ubuntu-latest, 20.x), 🚫 Jest Coverage (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: https://github.com/Khan/perseus/pull/1364 --- .changeset/calm-llamas-grab.md | 5 +++++ .../interactive-graph.testdata.ts | 1 + .../interactive-graphs/mafs-graph.test.tsx | 20 +++++++++++++++++++ .../widgets/interactive-graphs/mafs-graph.tsx | 15 +++++++++++++- 4 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 .changeset/calm-llamas-grab.md diff --git a/.changeset/calm-llamas-grab.md b/.changeset/calm-llamas-grab.md new file mode 100644 index 0000000000..b2b197e813 --- /dev/null +++ b/.changeset/calm-llamas-grab.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus": patch +--- + +Fix a bug in the exercise editor where the preview did not update after a change to the number of sides in polygon graphs diff --git a/packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts b/packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts index eef3e1a1ae..266563f2ce 100644 --- a/packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts +++ b/packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts @@ -899,6 +899,7 @@ export const polygonQuestionDefaultCorrect: PerseusRenderer = { showProtractor: false, graph: { showSides: true, + showAngles: false, snapTo: "grid", type: "polygon", }, diff --git a/packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx b/packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx index 11d8f876de..50678bae0c 100644 --- a/packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx +++ b/packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx @@ -150,6 +150,26 @@ describe("StatefulMafsGraph", () => { // means we are still rendering a single segment. expect(screen.getAllByTestId("movable-point").length).toBe(4); }); + + it("re-renders when the number of sides on a polygon graph changes", () => { + // Arrange: render a polygon graph with three sides + const threeSidesProps: StatefulMafsGraphProps = { + ...getBaseStatefulMafsGraphProps(), + graph: {type: "polygon", numSides: 3}, + }; + const {rerender} = render(); + + // Act: rerender with four sides + const fourSidesProps: StatefulMafsGraphProps = { + ...getBaseStatefulMafsGraphProps(), + graph: {type: "polygon", numSides: 4}, + }; + rerender(); + + // Assert: there should be 4 movable points. If there are 3 points, it + // means we are still rendering only 3 sides. + expect(screen.getAllByTestId("movable-point").length).toBe(4); + }); }); function graphToPixel( diff --git a/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx b/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx index 6458714a83..28a3fd2b50 100644 --- a/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx +++ b/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx @@ -152,6 +152,11 @@ export const StatefulMafsGraph = React.forwardRef< }, [dispatch, xMinRange, xMaxRange, yMinRange, yMaxRange]); const numSegments = graph.type === "segment" ? graph.numSegments : null; + const numSides = graph.type === "polygon" ? graph.numSides : null; + const snapTo = graph.type === "polygon" ? graph.snapTo : null; + const showAngles = graph.type === "polygon" ? graph.showAngles : null; + const showSides = graph.type === "polygon" ? graph.showSides : null; + const originalPropsRef = useRef(props); const latestPropsRef = useLatestRef(props); useEffect(() => { @@ -162,7 +167,15 @@ export const StatefulMafsGraph = React.forwardRef< if (latestPropsRef.current !== originalPropsRef.current) { dispatch(reinitialize(latestPropsRef.current)); } - }, [graph.type, numSegments, latestPropsRef]); + }, [ + graph.type, + numSegments, + numSides, + snapTo, + showAngles, + showSides, + latestPropsRef, + ]); return ; });