diff --git a/nextjs/src/app/course/[courseName]/calendar/day/getStatus.tsx b/nextjs/src/app/course/[courseName]/calendar/day/getStatus.tsx index 86624e7..c32d3d7 100644 --- a/nextjs/src/app/course/[courseName]/calendar/day/getStatus.tsx +++ b/nextjs/src/app/course/[courseName]/calendar/day/getStatus.tsx @@ -9,6 +9,8 @@ import { dateToMarkdownString, getDateFromStringOrThrow, } from "@/models/local/timeUtils"; +import { markdownToHTMLSafe } from "@/services/htmlMarkdownUtils"; +import { htmlIsCloseEnough } from "@/services/utils/htmlIsCloseEnough"; import { ReactNode } from "react"; export const getStatus = ({ @@ -37,8 +39,7 @@ export const getStatus = ({ return { status: "published", message: "" }; } else if (type === "quiz") { const quiz = item as LocalQuiz; - const canvasQuiz = canvasItem as CanvasQuiz - + const canvasQuiz = canvasItem as CanvasQuiz; if (!canvasQuiz.due_at) return { status: "incomplete", message: "due date not in canvas" }; @@ -49,7 +50,7 @@ export const getStatus = ({ const localDueDate = dateToMarkdownString( getDateFromStringOrThrow(quiz.dueAt, "comparing due dates for day") ); - + const canvasDueDate = dateToMarkdownString( getDateFromStringOrThrow( canvasQuiz.due_at, @@ -68,7 +69,6 @@ export const getStatus = ({ ), }; } - } else if (type === "assignment") { const assignment = item as LocalAssignment; const canvasAssignment = canvasItem as CanvasAssignment; @@ -88,7 +88,8 @@ export const getStatus = ({ "comparing canvas due date for day" ) ); - if (localDueDate !== canvasDueDate) { + + if (localDueDate !== canvasDueDate) return { status: "incomplete", message: ( @@ -99,7 +100,16 @@ export const getStatus = ({ ), }; - } + + const htmlIsSame = htmlIsCloseEnough( + markdownToHTMLSafe(assignment.description), + canvasAssignment.description + ); + if (!htmlIsSame) + return { + status: "incomplete", + message: "Canvas description is different", + }; } return { status: "published", message: "" }; diff --git a/nextjs/src/services/utils/htmlIsCloseEnough.test.ts b/nextjs/src/services/utils/htmlIsCloseEnough.test.ts index a8ee444..08c2d45 100644 --- a/nextjs/src/services/utils/htmlIsCloseEnough.test.ts +++ b/nextjs/src/services/utils/htmlIsCloseEnough.test.ts @@ -6,6 +6,18 @@ describe("html can be close enough", () => { const localHTML = `
Integrate your api
:latest image for your api container/api requests to the api containerCreate an apiService.ts file to store all functions that make api calls. Have your inventory item context load your items from the api on startup. Use the api calls for all CRUD operations on your app. When modifying the list of items, ensure the item is modified on the api before you show the modified value on the client.
Submit screenshots of code relating to each rubric item. Include 1+ questions you would like to ask a the beginning of class
`; const canvasHTML = `Integrate your api
:latest image for your api container/api requests to the api containerCreate an apiService.ts file to store all functions that make api calls. Have your inventory item context load your items from the api on startup. Use the api calls for all CRUD operations on your app. When modifying the list of items, ensure the item is modified on the api before you show the modified value on the client.
Submit screenshots of code relating to each rubric item. Include 1+ questions you would like to ask a the beginning of class
`; + expect(removeHtmlDetails(localHTML)).toBe(removeHtmlDetails(canvasHTML)); + }); + it("scenario 2", () => { + const localHTML = `the changesasdf
`; + const canvasHTML = `the changes\nasdf
\nIntegrate your api
\n:latest image for your api container/api requests to the api containerCreate an apiService.ts file to store all functions that make api calls. Have your inventory item context load your items from the api on startup. Use the api calls for all CRUD operations on your app. When modifying the list of items, ensure the item is modified on the api before you show the modified value on the client.
Submit screenshots of code relating to each rubric item. Include 1+ questions you would like to ask a the beginning of class
\n"`; + + expect(removeHtmlDetails(localHTML)).not.toBe(removeHtmlDetails(canvasHTML)); + }); + it("scenario 3", () => { + const localHTML = `Create a custom component to properly style, format, and validate text input elements. Replace all text inputs in your list detail app with this new text input component. You may write addition custom hooks to add functionality. This component should include the "supporting" html elements to the input, like the label and the feedback.
Requirements:
Push your code to the same repo
Submit a text entry about how it went and a question you would like to bring up with the class. Submit a screenshot of your re-usable input component's code and your component running on your webpage.
Add debouncing to your validation. Indicate in your submission if you did this.
` + const canvasHTML = "\u003clink rel=\"stylesheet\" href=\"https://instructure-uploads-2.s3.amazonaws.com/account_20000000000010/attachments/162497727/DesignPlus%20Mobile%20%25282024%20May%2013%2529.css\"\u003e\u003cp\u003eCreate a custom component to properly style, format, and validate text input elements. Replace all text inputs in your list detail app with this new text input component. You may write addition custom hooks to add functionality. This component should include the \"supporting\" html elements to the input, like the label and the feedback.\u003c/p\u003e\n\u003cp\u003eRequirements:\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003eHave a way for have the parent specify validation rules for the input\n\u003cul\u003e\n\u003cli\u003eSupport at least required, min/max length, regex pattern\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eThe parent can set and read the data from the input\u003c/li\u003e\n\u003cli\u003eThe component looks good in any layout (e.g. looks good for any width given to it by the parent)\u003c/li\u003e\n\u003cli\u003eThe component informs the parent if the value is valid or invalid\u003c/li\u003e\n\u003cli\u003eThe component visually indicates if the value is valid or invalid after the input has been touched by the user.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003ePush your code to the same repo\u003c/p\u003e\n\u003cp\u003eSubmit a text entry about how it went and a question you would like to bring up with the class. Submit a screenshot of your re-usable input component's code and your component running on your webpage.\u003c/p\u003e\n\u003ch2 id=\"extra-credit\"\u003eExtra Credit\u003c/h2\u003e\n\u003cp\u003eAdd debouncing to your validation. Indicate in your submission if you did this.\u003c/p\u003e\n\u003cscript src=\"https://instructure-uploads-2.s3.amazonaws.com/account_20000000000010/attachments/162497726/DesignPlus%20Mobile%20Java%20%25282024%20May%2013%2529.js\"\u003e\u003c/script\u003e"; + expect(removeHtmlDetails(localHTML)).toBe(removeHtmlDetails(canvasHTML)); }); }); diff --git a/nextjs/src/services/utils/htmlIsCloseEnough.ts b/nextjs/src/services/utils/htmlIsCloseEnough.ts index 36aa402..68500df 100644 --- a/nextjs/src/services/utils/htmlIsCloseEnough.ts +++ b/nextjs/src/services/utils/htmlIsCloseEnough.ts @@ -1,10 +1,23 @@ const scriptRegex = /