From f4b0b0b1b57e21d57147a198b6fdb3d74695270a Mon Sep 17 00:00:00 2001
From: awu43 <46470763+awu43@users.noreply.github.com>
Date: Fri, 18 Jun 2021 14:05:05 -0700
Subject: [PATCH] fix(curriculum): add test for event.preventDefault (#42522)

* Added note detail and event.preventDefault() test

* Replaced lookbehinds with matches

* Reverted to using \s instead of .

Now only matches if event.preventDefault() call is the only thing in the comment. This avoids matching note comments like "need to call event.preventDefault() here"

* Added optional semicolons for both comment checks

* Added trailing whitespace for line comment check

* Switched to match length checks

This should be equivalent to the two original lookbehinds

* Removed unnecessary .length check

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
---
 .../react/create-a-controlled-form.md         | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-form.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-form.md
index 1990de794d..efb076c172 100644
--- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-form.md
+++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-form.md
@@ -16,7 +16,7 @@ The `MyForm` component is set up with an empty `form` with a submit handler. The
 
 We've added a button which submits the form. You can see it has the `type` set to `submit` indicating it is the button controlling the form. Add the `input` element in the `form` and set its `value` and `onChange()` attributes like the last challenge. You should then complete the `handleSubmit` method so that it sets the component state property `submit` to the current input value in the local `state`.
 
-**Note:** You also must call `event.preventDefault()` in the submit handler, to prevent the default form submit behavior which will refresh the web page.
+**Note:** You also must call `event.preventDefault()` in the submit handler, to prevent the default form submit behavior which will refresh the web page. For camper convenience, the default behavior has been disabled here to prevent refreshes from resetting challenge code.
 
 Finally, create an `h1` tag after the `form` which renders the `submit` value from the component's `state`. You can then type in the form and click the button (or press enter), and you should see your input rendered to the page.
 
@@ -98,6 +98,25 @@ Submitting the form should run `handleSubmit` which should set the `submit` prop
 })();
 ```
 
+`handleSubmit` should call `event.preventDefault`
+
+```js
+const handleSubmit = MyForm.prototype.handleSubmit.toString();
+const allMatches = handleSubmit.match(/\bevent\.preventDefault\(\s*?\)/g) ?? [];
+const blockCommented = handleSubmit.match(
+  /\/\*.*?\bevent\.preventDefault\(\s*?\).*?\*\//gs
+);
+const lineCommented = handleSubmit.match(
+  /\/\/.*?\bevent\.preventDefault\(\s*?\)/g
+);
+const commentedMatches = [...(blockCommented ?? []), ...(lineCommented ?? [])];
+
+assert(
+  // At least one event.preventDefault() call exists and is not commented out
+  allMatches.length > commentedMatches.length
+);
+```
+
 The `h1` header should render the value of the `submit` field from the component's state.
 
 ```js
@@ -149,7 +168,7 @@ class MyForm extends React.Component {
   }
   handleSubmit(event) {
     // Change code below this line
-    
+
     // Change code above this line
   }
   render() {