-
Notifications
You must be signed in to change notification settings - Fork 350
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Number Line: Extract validation out of scoring (#1901)
## Summary: To complete server-side scoring, we are separating out validation logic from scoring logic. This PR separates that logic and associated tests for the number line widget. Issue: LEMS-2608 ## Test plan: - Confirm checks pass - Confirm widget still works as expected - Confirm changing the flow of validation and scoring does not affect user experience Author: Myranae Reviewers: Myranae, handeyeco, jeremywiebe Required Reviewers: Approved By: handeyeco Checks: ✅ gerald, ✅ Publish npm snapshot (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), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1901
- Loading branch information
Showing
6 changed files
with
144 additions
and
96 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@khanacademy/perseus": minor | ||
| --- | ||
|
|
||
| Introduces a validation function for the number line widget (extracted from the scoring function). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
116 changes: 45 additions & 71 deletions
116
packages/perseus/src/widgets/number-line/score-number-line.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,109 +1,83 @@ | ||
| import scoreNumberLine from "./score-number-line"; | ||
|
|
||
| import type { | ||
| PerseusNumberLineRubric, | ||
| PerseusNumberLineScoringData, | ||
| PerseusNumberLineUserInput, | ||
| } from "../../validation.types"; | ||
|
|
||
| const baseInput: PerseusNumberLineUserInput = { | ||
| isTickCrtl: true, | ||
| numLinePosition: 1, | ||
| rel: "eq", | ||
| numDivisions: 10, | ||
| divisionRange: [-10, 10], | ||
| }; | ||
|
|
||
| const baseRubric: PerseusNumberLineRubric = { | ||
| correctRel: "eq", | ||
| correctX: -1.5, | ||
| divisionRange: [1, 12], | ||
| initialX: -1, | ||
| labelRange: [null, null], | ||
| labelStyle: "decimal", | ||
| labelTicks: true, | ||
| numDivisions: null, | ||
| range: [-1.5, 1.5], | ||
| snapDivisions: 2, | ||
| static: false, | ||
| tickStep: 0.5, | ||
| isInequality: false, | ||
| }; | ||
|
|
||
| function generateInput( | ||
| extend?: Partial<PerseusNumberLineUserInput>, | ||
| ): PerseusNumberLineUserInput { | ||
| return {...baseInput, ...extend}; | ||
| } | ||
|
|
||
| function generateRubric( | ||
| extend?: Partial<PerseusNumberLineRubric>, | ||
| ): PerseusNumberLineRubric { | ||
| return {...baseRubric, ...extend}; | ||
| } | ||
|
|
||
| describe("scoreNumberLine", () => { | ||
| it("is invalid when outside allowed range", () => { | ||
| // Arrange | ||
| const userInput = generateInput({ | ||
| divisionRange: [-1, 1], | ||
| numLinePosition: 10, | ||
| }); | ||
|
|
||
| const rubric = generateRubric(); | ||
|
|
||
| // Act | ||
| const result = scoreNumberLine(userInput, rubric); | ||
|
|
||
| // Assert | ||
| expect(result).toHaveInvalidInput( | ||
| "Number of divisions is outside the allowed range.", | ||
| ); | ||
| }); | ||
|
|
||
| it("is invalid when end state is the same as beginning state", () => { | ||
| // Arrange | ||
| const userInput = generateInput({ | ||
| const userInput: PerseusNumberLineUserInput = { | ||
| isTickCrtl: true, | ||
| rel: "eq", | ||
| numDivisions: 10, | ||
| divisionRange: [-10, 10], | ||
| numLinePosition: 0, | ||
| }); | ||
| }; | ||
|
|
||
| const rubric = generateRubric({ | ||
| const scoringData: PerseusNumberLineScoringData = { | ||
| correctRel: "eq", | ||
| correctX: -1.5, | ||
| initialX: 0, | ||
| }); | ||
| range: [-1.5, 1.5], | ||
| isInequality: false, | ||
| }; | ||
|
|
||
| // Act | ||
| const result = scoreNumberLine(userInput, rubric); | ||
| const score = scoreNumberLine(userInput, scoringData); | ||
|
|
||
| // Assert | ||
| expect(result).toHaveInvalidInput(); | ||
| expect(score).toHaveInvalidInput(); | ||
| }); | ||
|
|
||
| it("can be answered correctly", () => { | ||
| // Arrange | ||
| const userInput = generateInput({ | ||
| const userInput: PerseusNumberLineUserInput = { | ||
| isTickCrtl: true, | ||
| rel: "eq", | ||
| numDivisions: 10, | ||
| divisionRange: [-10, 10], | ||
| numLinePosition: -1.5, | ||
| }); | ||
| }; | ||
|
|
||
| const rubric = generateRubric(); | ||
| const scoringData: PerseusNumberLineScoringData = { | ||
| correctRel: "eq", | ||
| correctX: -1.5, | ||
| initialX: -1, | ||
| range: [-1.5, 1.5], | ||
| isInequality: false, | ||
| }; | ||
|
|
||
| // Act | ||
| const result = scoreNumberLine(userInput, rubric); | ||
| const score = scoreNumberLine(userInput, scoringData); | ||
|
|
||
| // Assert | ||
| expect(result).toHaveBeenAnsweredCorrectly(); | ||
| expect(score).toHaveBeenAnsweredCorrectly(); | ||
| }); | ||
|
|
||
| it("can be answered incorrectly", () => { | ||
| // Arrange | ||
| const userInput = generateInput({ | ||
| const userInput: PerseusNumberLineUserInput = { | ||
| isTickCrtl: true, | ||
| rel: "eq", | ||
| numDivisions: 10, | ||
| divisionRange: [-10, 10], | ||
| numLinePosition: 1.5, | ||
| }); | ||
| }; | ||
|
|
||
| const rubric = generateRubric(); | ||
| const scoringData: PerseusNumberLineScoringData = { | ||
| correctRel: "eq", | ||
| correctX: -1.5, | ||
| initialX: -1, | ||
| range: [-1.5, 1.5], | ||
| isInequality: false, | ||
| }; | ||
|
|
||
| // Act | ||
| const result = scoreNumberLine(userInput, rubric); | ||
| const score = scoreNumberLine(userInput, scoringData); | ||
|
|
||
| // Assert | ||
| expect(result).toHaveBeenAnsweredIncorrectly(); | ||
| expect(score).toHaveBeenAnsweredIncorrectly(); | ||
| }); | ||
| }); |
41 changes: 19 additions & 22 deletions
41
packages/perseus/src/widgets/number-line/score-number-line.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
41 changes: 41 additions & 0 deletions
41
packages/perseus/src/widgets/number-line/validate-number-line.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import validateNumberLine from "./validate-number-line"; | ||
|
|
||
| import type {PerseusNumberLineUserInput} from "../../validation.types"; | ||
|
|
||
| describe("validateNumberLine", () => { | ||
| it("is invalid when outside allowed range", () => { | ||
| // Arrange | ||
| const userInput: PerseusNumberLineUserInput = { | ||
| isTickCrtl: true, | ||
| rel: "eq", | ||
| numDivisions: 10, | ||
| divisionRange: [-1, 1], | ||
| numLinePosition: 10, | ||
| }; | ||
|
|
||
| // Act | ||
| const validationError = validateNumberLine(userInput); | ||
|
|
||
| // Assert | ||
| expect(validationError).toHaveInvalidInput( | ||
| "Number of divisions is outside the allowed range.", | ||
| ); | ||
| }); | ||
|
|
||
| it("returns null when validation passes", () => { | ||
| // Arrange | ||
| const userInput: PerseusNumberLineUserInput = { | ||
| isTickCrtl: true, | ||
| rel: "eq", | ||
| numDivisions: 10, | ||
| divisionRange: [-10, 10], | ||
| numLinePosition: -1.5, | ||
| }; | ||
|
|
||
| // Act | ||
| const validationError = validateNumberLine(userInput); | ||
|
|
||
| // Assert | ||
| expect(validationError).toBeNull(); | ||
| }); | ||
| }); |
28 changes: 28 additions & 0 deletions
28
packages/perseus/src/widgets/number-line/validate-number-line.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import type {PerseusScore} from "../../types"; | ||
| import type {PerseusNumberLineUserInput} from "../../validation.types"; | ||
|
|
||
| /** | ||
| * Checks user input is within the allowed range and not the same as the initial | ||
| * state. | ||
| * @param userInput | ||
| * @see 'scoreNumberLine' for the scoring logic. | ||
| */ | ||
| function validateNumberLine( | ||
| userInput: PerseusNumberLineUserInput, | ||
| ): Extract<PerseusScore, {type: "invalid"}> | null { | ||
| const divisionRange = userInput.divisionRange; | ||
| const outsideAllowedRange = | ||
| userInput.numDivisions > divisionRange[1] || | ||
| userInput.numDivisions < divisionRange[0]; | ||
|
|
||
| // TODO: I don't think isTickCrtl is a thing anymore | ||
| if (userInput.isTickCrtl && outsideAllowedRange) { | ||
| return { | ||
| type: "invalid", | ||
| message: "Number of divisions is outside the allowed range.", | ||
| }; | ||
| } | ||
| return null; | ||
| } | ||
|
|
||
| export default validateNumberLine; |