diff --git a/.changeset/sour-horses-scream.md b/.changeset/sour-horses-scream.md new file mode 100644 index 0000000000..401aee22a7 --- /dev/null +++ b/.changeset/sour-horses-scream.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus": patch +--- + +BUGFIX - [Number Line] - Some exercises with fractions wouldn't render diff --git a/packages/perseus/src/widgets/number-line/__snapshots__/number-line.test.ts.snap b/packages/perseus/src/widgets/number-line/__snapshots__/number-line.test.ts.snap index bf6a8bbc7c..aedd38d4e0 100644 --- a/packages/perseus/src/widgets/number-line/__snapshots__/number-line.test.ts.snap +++ b/packages/perseus/src/widgets/number-line/__snapshots__/number-line.test.ts.snap @@ -564,6 +564,362 @@ exports[`number-line widget snapshots all tick labels show when "Style" is "deci `; +exports[`number-line widget snapshots can handle fractions: show fractions 1`] = ` +
+
+
+
+
+ + E=2.5 + +
+
+
+
+
+ + Move the dot to + + + + -E + + + + on the number line. + +
+
+
+
+
+
+
+
+ + + Created with Raphaël + + + + + + + Created with Raphaël + + + + + + + + + + + + + + + +
+
+ + + Created with Raphaël + + + + +
+
+
+
+ + + Created with Raphaël + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+`; + exports[`number-line widget snapshots default: first render 1`] = `
{ expect(container).toMatchSnapshot("left endpoint highlighted"); }); + it(`can handle fractions`, () => { + // Some fractions create non-integer values (i.e. 7.00001). + // This test works specifically with 1/6 to generate the value that might cause an error. + + // Arrange + const question = createNumberLineQuestionWithOptions({ + range: [0, 1.1666666666666667], + divisionRange: [1, 12], + labelRange: [null, 0.16666666666666666], + labelStyle: "improper", + tickStep: 0.16666666666666666, + }); + + // Act + const {container} = renderQuestion(question, apiOptions); + + // Assert + expect(container).toMatchSnapshot("show fractions"); + }); + it(`all tick labels show when "Style" is "decimal ticks" (deprecated option)`, () => { // Arrange const question = createNumberLineQuestionWithOptions({ diff --git a/packages/perseus/src/widgets/number-line/number-line.tsx b/packages/perseus/src/widgets/number-line/number-line.tsx index e0cd0a51fc..0d27e6450a 100644 --- a/packages/perseus/src/widgets/number-line/number-line.tsx +++ b/packages/perseus/src/widgets/number-line/number-line.tsx @@ -151,12 +151,14 @@ const TickMarks: any = Graphie.createSimpleClass((graphie, props) => { const highlightedTextStyle = {color: KhanColors.BLUE}; // Generate an array of tick numbers: - // `Array(props.numDivisions)` makes an array of null values - one for every division marker + // `Array(Math.round(numDivisions))` makes an array of null values - one for every division marker // `.keys()` gets the index values for each marker placeholder // `.map()` converts the index values into actual tick numbers - const initialTicks: number[] = [...Array(numDivisions).keys()].map( - (index) => range[0] + index * tickStep, - ); + // NOTE: 'numDivisions' can sometimes be a non-integer (i.e. 7.000001). + // Using Math.round() to ensure that an integer is used in the Array setup. + const initialTicks: number[] = [ + ...Array(Math.round(numDivisions)).keys(), + ].map((index) => range[0] + index * tickStep); // .sort() comparator const byNumericAscending = (a: number, b: number) => a - b;