diff --git a/src/services/utils/htmlIsCloseEnough.test.ts b/src/services/utils/htmlIsCloseEnough.test.ts index b340877..28ffab0 100644 --- a/src/services/utils/htmlIsCloseEnough.test.ts +++ b/src/services/utils/htmlIsCloseEnough.test.ts @@ -12,11 +12,49 @@ describe("html can be close enough", () => { const localHTML = `

the changesasdf

`; const canvasHTML = `

the changes\nasdf

\n

Local Development Environment

\n

Integrate your api

\n
    \n
  1. Set up a docker compose file for local development inside your react frontend git repo.\n
    2. \n
  2. Be sure to mount your react client code as a volume to enable hot reloading
    3. \n
  3. Configure vite to proxy /api requests to the api container
    4. \n
  4. Your api should still persist the data, even if the container gets re-created (use a volume)
    5. \n
\n

Calling Your API from React

\n

Create 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.

\n

Submission

\n

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)); + 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:

  1. Have a way for have the parent specify validation rules for the input
  2. The parent can set and read the data from the input
  3. The component looks good in any layout (e.g. looks good for any width given to it by the parent)
  4. The component informs the parent if the value is valid or invalid
  5. The component visually indicates if the value is valid or invalid after the input has been touched by the user.

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.

Extra Credit

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"; + 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:

  1. Have a way for have the parent specify validation rules for the input
  2. The parent can set and read the data from the input
  3. The component looks good in any layout (e.g. looks good for any width given to it by the parent)
  4. The component informs the parent if the value is valid or invalid
  5. The component visually indicates if the value is valid or invalid after the input has been touched by the user.

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.

Extra Credit

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)); + }); + + it("image upload scenario", () => { + const localHTML = `

Github Classroom (same repo as part 1)

+

This assignment is similar to the format that our exam will be in class. The exam will be open 1 page of handwritten notes, open VSCode (no AI extensions), and closed everything else (neighbor, internet, etc.). Attempt to complete this assignment with only your handwritten notes and VSCode.

+

Recreate this page:

+

website to recreate

+ +

Submit a screenshot of your copy of the website.

`; + + const canvasHTML = `

Github Classroom (same repo as part 1)

+

This assignment is similar to the format that our exam will be in class. The exam will be open 1 page of handwritten notes, open VSCode (no AI extensions), and closed everything else (neighbor, internet, etc.). Attempt to complete this assignment with only your handwritten notes and VSCode.

+

Recreate this page:

+

website to recreate

+ +

Submit a screenshot of your copy of the website.

+`; expect(removeHtmlDetails(localHTML)).toBe(removeHtmlDetails(canvasHTML)); }); diff --git a/src/services/utils/htmlIsCloseEnough.ts b/src/services/utils/htmlIsCloseEnough.ts index 5decd4b..33e1a6a 100644 --- a/src/services/utils/htmlIsCloseEnough.ts +++ b/src/services/utils/htmlIsCloseEnough.ts @@ -1,10 +1,26 @@ -const scriptRegex = //g; +const scriptTagRegex = //g; const linkTagRegex = /]*>/g; -const nonHrefAttribute = - /\s+(?!href\s*=)\w+="[^"]*"|\s+(?!href\s*=)\w+='[^']*'|\s+(?!href\s*=)\w+=[^\s>]+/g; +const nonHrefAttributeRegex = + /\s+(?!href\s*=)[\w-]+="[^"]*"|\s+(?!href\s*=)[\w-]+='[^']*'|\s+(?!href\s*=)[\w-]+=[^\s>]+/g; +const courseIdInImageUrlRegex = + /(]*src=")([^"]*)(\/courses\/\d+)([^"]*")/g; +const queryParametersInImageUrlRegex = /(]*src="[^"]*)\?[^"]*"/g; +const escapedQuoteRegex = /\\"/g; +const whitespaceRegex = /\s/g; +const hrTagRegex = //g; +const brTagRegex = //g; +const htmlGreaterThanRegex = />/g; +const htmlLessThanRegex = /</g; +const greaterThanRegex = />/g; +const lessThanRegex = / { + return input.replace(unicodeEscapeRegex, (match) => { // Extract the hexadecimal part and convert it to a character return String.fromCharCode(parseInt(match.slice(2), 16)); }); @@ -12,22 +28,116 @@ function replaceUnicodeEscapes(input: string) { export const removeHtmlDetails = (html: string) => { const withoutUnicode = replaceUnicodeEscapes(html); - return withoutUnicode - .replaceAll(scriptRegex, "") - .replaceAll(linkTagRegex, "") - .replaceAll(nonHrefAttribute, "") - .replaceAll(/\\"/g, '"') - .replaceAll(/\s/g, "") - .replaceAll(//g, "
") - .replaceAll(//g, "
") - .replaceAll(/>/g, "") - .replaceAll(/</g, "") - .replaceAll(/>/g, "") - .replaceAll(/") + .replaceAll(brTagRegex, "
") + .replaceAll(htmlGreaterThanRegex, "") + .replaceAll(htmlLessThanRegex, "") + .replaceAll(greaterThanRegex, "") + .replaceAll(lessThanRegex, "") + .replaceAll(htmlQuoteRegex, "") + .replaceAll(quoteRegex, "") + .replaceAll(htmlAmpersandRegex, "") + .replaceAll(ampersandRegex, ""); +}; + +const logDifferences = ( + simple1: string, + simple2: string, + original1: string, + original2: string +) => { + const len1 = simple1.length; + const len2 = simple2.length; + const maxLen = Math.max(len1, len2); + + let firstDiff = -1; + const diffs: Array<{ index: number; a: string; b: string }> = []; + + for (let i = 0; i < maxLen; i++) { + const a = simple1[i] ?? "∅"; + const b = simple2[i] ?? "∅"; + if (a !== b) { + if (firstDiff === -1) firstDiff = i; + diffs.push({ index: i, a, b }); + } + } + + // Group consecutive differences + const diffGroups: Array<{ + startIndex: number; + endIndex: number; + a: string; + b: string; + }> = []; + let currentGroup: { + startIndex: number; + endIndex: number; + a: string; + b: string; + } | null = null; + + for (const diff of diffs) { + if (currentGroup && diff.index === currentGroup.endIndex + 1) { + // Extend current group + currentGroup.endIndex = diff.index; + currentGroup.a += diff.a; + currentGroup.b += diff.b; + } else { + // Start new group + if (currentGroup) diffGroups.push(currentGroup); + currentGroup = { + startIndex: diff.index, + endIndex: diff.index, + a: diff.a, + b: diff.b, + }; + } + } + if (currentGroup) diffGroups.push(currentGroup); + + const ctx = 30; + const start = Math.max(0, (firstDiff === -1 ? 0 : firstDiff) - ctx); + const end1 = Math.min(len1, (firstDiff === -1 ? 0 : firstDiff) + ctx); + const end2 = Math.min(len2, (firstDiff === -1 ? 0 : firstDiff) + ctx); + + const mark = (s: string, sStart: number, idx: number, sEnd: number) => { + if (idx < 0) return s.slice(sStart, sEnd); + const before = s.slice(sStart, idx); + const ch = s[idx] ?? "∅"; + const after = s.slice(idx + 1, sEnd); + return `${before}[${ch}]${after}`; + }; + + console.log("htmlIsCloseEnough: differences detected"); + console.log(`len1=${len1}, len2=${len2}`); + if (firstDiff !== -1) { + console.log(`firstDiffAt=${firstDiff}`); + console.log("s1:", mark(simple1, start, firstDiff, end1)); + console.log("s2:", mark(simple2, start, firstDiff, end2)); + } + console.log( + "difference groups:", + diffGroups.slice(0, 10), + original1, + original2 + ); }; export const htmlIsCloseEnough = (html1: string, html2: string) => { @@ -35,43 +145,7 @@ export const htmlIsCloseEnough = (html1: string, html2: string) => { const simple2 = removeHtmlDetails(html2); if (simple1 !== simple2) { - const len1 = simple1.length; - const len2 = simple2.length; - const maxLen = Math.max(len1, len2); - - let firstDiff = -1; - const diffs: Array<{ index: number; a: string; b: string }> = []; - - for (let i = 0; i < maxLen && diffs.length < 10; i++) { - const a = simple1[i] ?? "∅"; - const b = simple2[i] ?? "∅"; - if (a !== b) { - if (firstDiff === -1) firstDiff = i; - diffs.push({ index: i, a, b }); - } - } - - const ctx = 30; - const start = Math.max(0, (firstDiff === -1 ? 0 : firstDiff) - ctx); - const end1 = Math.min(len1, (firstDiff === -1 ? 0 : firstDiff) + ctx); - const end2 = Math.min(len2, (firstDiff === -1 ? 0 : firstDiff) + ctx); - - const mark = (s: string, sStart: number, idx: number, sEnd: number) => { - if (idx < 0) return s.slice(sStart, sEnd); - const before = s.slice(sStart, idx); - const ch = s[idx] ?? "∅"; - const after = s.slice(idx + 1, sEnd); - return `${before}[${ch}]${after}`; - }; - - console.log("htmlIsCloseEnough: differences detected"); - console.log(`len1=${len1}, len2=${len2}`); - if (firstDiff !== -1) { - console.log(`firstDiffAt=${firstDiff}`); - console.log("s1:", mark(simple1, start, firstDiff, end1)); - console.log("s2:", mark(simple2, start, firstDiff, end2)); - } - console.log("first 10 diffs:", diffs); + logDifferences(simple1, simple2, html1, html2); } return simple1 === simple2; };