gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(challenge-md): Fix quotes that failed in the transform

Browse Source
This commit is contained in:
Bouncey
2018-10-08 01:01:53 +01:00
committed by mrugesh mohapatra
parent 392b28fa55
commit a859035023
1333 changed files with 5710 additions and 5710 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
curriculum/challenges/english/03-front-end-libraries/bootstrap/add-elements-within-your-bootstrap-wells.english.md
View File

@@ -21,11 +21,11 @@ Nest three <code>button</code> elements within each of your <code>well</code> <c
```yml
tests:
- text: Nest three <code>button</code> elements within each of your <code>div</code> elements with class <code>well</code>.
testString: 'assert($("div.well:eq(0)").children("button").length === 3 && $("div.well:eq(1)").children("button").length === 3, ''Nest three <code>button</code> elements within each of your <code>div</code> elements with class <code>well</code>.'');'
testString: 'assert($("div.well:eq(0)").children("button").length === 3 && $("div.well:eq(1)").children("button").length === 3, "Nest three <code>button</code> elements within each of your <code>div</code> elements with class <code>well</code>.");'
- text: You should have a total of 6 <code>button</code> elements.
testString: 'assert($("button") && $("button").length > 5, ''You should have a total of 6 <code>button</code> elements.'');'
testString: 'assert($("button") && $("button").length > 5, "You should have a total of 6 <code>button</code> elements.");'
- text: Make sure all your <code>button</code> elements have closing tags.
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, ''Make sure all your <code>button</code> elements have closing tags.'');'
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, "Make sure all your <code>button</code> elements have closing tags.");'
```

6
curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.english.md
View File

@@ -25,11 +25,11 @@ Note: The <code>span</code> element is an acceptable alternative to the <code>i<
```yml
tests:
- text: 'You should add a <code>&#60;i class="fa fa-info-circle"&#62;&#60;/i&#62;</code> within your info button element.'
testString: 'assert($(".btn-info > i").is(".fa.fa-info-circle") || $(".btn-info > span").is(".fa.fa-info-circle"), ''You should add a <code>&#60;i class="fa fa-info-circle"&#62;&#60;/i&#62;</code> within your info button element.'');'
testString: 'assert($(".btn-info > i").is(".fa.fa-info-circle") || $(".btn-info > span").is(".fa.fa-info-circle"), "You should add a <code>&#60;i class="fa fa-info-circle"&#62;&#60;/i&#62;</code> within your info button element.");'
- text: 'You should add a <code>&#60;i class="fa fa-trash"&#62;&#60;/i&#62;</code> within your delete button element.'
testString: 'assert($(".btn-danger > i").is(".fa.fa-trash") || $(".btn-danger > span").is(".fa.fa-trash"), ''You should add a <code>&#60;i class="fa fa-trash"&#62;&#60;/i&#62;</code> within your delete button element.'');'
testString: 'assert($(".btn-danger > i").is(".fa.fa-trash") || $(".btn-danger > span").is(".fa.fa-trash"), "You should add a <code>&#60;i class="fa fa-trash"&#62;&#60;/i&#62;</code> within your delete button element.");'
- text: 'Make sure each of your <code>i</code> elements has a closing tag and <code>&#60;i class="fa fa-thumbs-up"&#62;&#60;/i&#62;</code> is in your like button element.'
testString: 'assert(code.match(/<\/i>|<\/span/g) && code.match(/<\/i|<\/span>/g).length > 2 && ($(".btn-primary > i").is(".fa.fa-thumbs-up") || $(".btn-primary > span").is(".fa.fa-thumbs-up")), ''Make sure each of your <code>i</code> elements has a closing tag and <code>&#60;i class="fa fa-thumbs-up"&#62;&#60;/i&#62;</code> is in your like button element.'');'
testString: 'assert(code.match(/<\/i>|<\/span/g) && code.match(/<\/i|<\/span>/g).length > 2 && ($(".btn-primary > i").is(".fa.fa-thumbs-up") || $(".btn-primary > span").is(".fa.fa-thumbs-up")), "Make sure each of your <code>i</code> elements has a closing tag and <code>&#60;i class="fa fa-thumbs-up"&#62;&#60;/i&#62;</code> is in your like button element.");'
```

8
curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.english.md
View File

@@ -30,13 +30,13 @@ Use Font Awesome to add a <code>thumbs-up</code> icon to your like button by giv
```yml
tests:
- text: Add an <code>i</code> element with the classes <code>fa</code> and <code>fa-thumbs-up</code>.
testString: 'assert($("i").is(".fa.fa-thumbs-up") || $("span").is(".fa.fa-thumbs-up"), ''Add an <code>i</code> element with the classes <code>fa</code> and <code>fa-thumbs-up</code>.'');'
testString: 'assert($("i").is(".fa.fa-thumbs-up") || $("span").is(".fa.fa-thumbs-up"), "Add an <code>i</code> element with the classes <code>fa</code> and <code>fa-thumbs-up</code>.");'
- text: Your <code>fa-thumbs-up</code> icon should be located within the Like button.
testString: 'assert(($("i.fa-thumbs-up").parent().text().match(/Like/gi) && $(".btn-primary > i").is(".fa.fa-thumbs-up")) || ($("span.fa-thumbs-up").parent().text().match(/Like/gi) && $(".btn-primary > span").is(".fa.fa-thumbs-up")), ''Your <code>fa-thumbs-up</code> icon should be located within the Like button.'');'
testString: 'assert(($("i.fa-thumbs-up").parent().text().match(/Like/gi) && $(".btn-primary > i").is(".fa.fa-thumbs-up")) || ($("span.fa-thumbs-up").parent().text().match(/Like/gi) && $(".btn-primary > span").is(".fa.fa-thumbs-up")), "Your <code>fa-thumbs-up</code> icon should be located within the Like button.");'
- text: Nest your <code>i</code> element within your <code>button</code> element.
testString: 'assert($("button").children("i").length > 0 || $("button").children("span").length > 0, ''Nest your <code>i</code> element within your <code>button</code> element.'');'
testString: 'assert($("button").children("i").length > 0 || $("button").children("span").length > 0, "Nest your <code>i</code> element within your <code>button</code> element.");'
- text: Make sure your icon element has a closing tag.
testString: 'assert(code.match(/<\/i>|<\/span>/g), ''Make sure your icon element has a closing tag.'');'
testString: 'assert(code.match(/<\/i>|<\/span>/g), "Make sure your icon element has a closing tag.");'
```

4
curriculum/challenges/english/03-front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.english.md
View File

@@ -25,9 +25,9 @@ Give the well on the left the id of <code>left-well</code>. Give the well on the
```yml
tests:
- text: Give your left <code>well</code> the id of <code>left-well</code>.
testString: 'assert($(".col-xs-6").children("#left-well") && $(".col-xs-6").children("#left-well").length > 0, ''Give your left <code>well</code> the id of <code>left-well</code>.'');'
testString: 'assert($(".col-xs-6").children("#left-well") && $(".col-xs-6").children("#left-well").length > 0, "Give your left <code>well</code> the id of <code>left-well</code>.");'
- text: Give your right <code>well</code> the id of <code>right-well</code>.
testString: 'assert($(".col-xs-6").children("#right-well") && $(".col-xs-6").children("#right-well").length > 0, ''Give your right <code>well</code> the id of <code>right-well</code>.'');'
testString: 'assert($(".col-xs-6").children("#right-well") && $(".col-xs-6").children("#right-well").length > 0, "Give your right <code>well</code> the id of <code>right-well</code>.");'
```

4
curriculum/challenges/english/03-front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style.english.md
View File

@@ -22,9 +22,9 @@ Apply both the <code>btn</code> and <code>btn-default</code> classes to each of
```yml
tests:
- text: Apply the <code>btn</code> class to each of your <code>button</code> elements.
testString: 'assert($(".btn").length > 5, ''Apply the <code>btn</code> class to each of your <code>button</code> elements.'');'
testString: 'assert($(".btn").length > 5, "Apply the <code>btn</code> class to each of your <code>button</code> elements.");'
- text: Apply the <code>btn-default</code> class to each of your <code>button</code> elements.
testString: 'assert($(".btn-default").length > 5, ''Apply the <code>btn-default</code> class to each of your <code>button</code> elements.'');'
testString: 'assert($(".btn-default").length > 5, "Apply the <code>btn-default</code> class to each of your <code>button</code> elements.");'
```

8
curriculum/challenges/english/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.english.md
View File

@@ -22,13 +22,13 @@ Note that these buttons still need the <code>btn</code> and <code>btn-block</cod
```yml
tests:
- text: Create a new <code>button</code> element with the text "Info".
testString: 'assert(new RegExp("info","gi").test($("button").text()), ''Create a new <code>button</code> element with the text "Info".'');'
testString: 'assert(new RegExp("info","gi").test($("button").text()), "Create a new <code>button</code> element with the text "Info".");'
- text: Both of your Bootstrap buttons should have the <code>btn</code> and <code>btn-block</code> classes.
testString: 'assert($("button.btn-block.btn").length > 1, ''Both of your Bootstrap buttons should have the <code>btn</code> and <code>btn-block</code> classes.'');'
testString: 'assert($("button.btn-block.btn").length > 1, "Both of your Bootstrap buttons should have the <code>btn</code> and <code>btn-block</code> classes.");'
- text: Your new button should have the class <code>btn-info</code>.
testString: 'assert($("button").hasClass("btn-info"), ''Your new button should have the class <code>btn-info</code>.'');'
testString: 'assert($("button").hasClass("btn-info"), "Your new button should have the class <code>btn-info</code>.");'
- text: Make sure all your <code>button</code> elements have a closing tag.
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, ''Make sure all your <code>button</code> elements have a closing tag.'');'
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, "Make sure all your <code>button</code> elements have a closing tag.");'
```

4
curriculum/challenges/english/03-front-end-libraries/bootstrap/center-text-with-bootstrap.english.md
View File

@@ -22,9 +22,9 @@ Remember that you can add several classes to the same element by separating each
```yml
tests:
- text: Your <code>h2</code> element should be centered by applying the class <code>text-center</code>
testString: 'assert($("h2").hasClass("text-center"), ''Your <code>h2</code> element should be centered by applying the class <code>text-center</code>'');'
testString: 'assert($("h2").hasClass("text-center"), "Your <code>h2</code> element should be centered by applying the class <code>text-center</code>");'
- text: Your <code>h2</code> element should still have the class <code>red-text</code>
testString: 'assert($("h2").hasClass("red-text"), ''Your <code>h2</code> element should still have the class <code>red-text</code>'');'
testString: 'assert($("h2").hasClass("red-text"), "Your <code>h2</code> element should still have the class <code>red-text</code>");'
```

6
curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.english.md
View File

@@ -29,11 +29,11 @@ Add Bootstrap's <code>btn-block</code> class to your Bootstrap button.
```yml
tests:
- text: Your button should still have the <code>btn</code> and <code>btn-default</code> classes.
testString: 'assert($("button").hasClass("btn") && $("button").hasClass("btn-default"), ''Your button should still have the <code>btn</code> and <code>btn-default</code> classes.'');'
testString: 'assert($("button").hasClass("btn") && $("button").hasClass("btn-default"), "Your button should still have the <code>btn</code> and <code>btn-default</code> classes.");'
- text: Your button should have the class <code>btn-block</code>.
testString: 'assert($("button").hasClass("btn-block"), ''Your button should have the class <code>btn-block</code>.'');'
testString: 'assert($("button").hasClass("btn-block"), "Your button should have the class <code>btn-block</code>.");'
- text: Make sure all your <code>button</code> elements have a closing tag.
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, ''Make sure all your <code>button</code> elements have a closing tag.'');'
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, "Make sure all your <code>button</code> elements have a closing tag.");'
```

6
curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-button.english.md
View File

@@ -21,11 +21,11 @@ Create a new <code>button</code> element below your large kitten photo. Give it
```yml
tests:
- text: Create a new <code>button</code> element with the text "Like".
testString: 'assert(new RegExp("like","gi").test($("button").text()) && ($("img.img-responsive + button.btn").length > 0), ''Create a new <code>button</code> element with the text "Like".'');'
testString: 'assert(new RegExp("like","gi").test($("button").text()) && ($("img.img-responsive + button.btn").length > 0), "Create a new <code>button</code> element with the text "Like".");'
- text: 'Your new button should have two classes: <code>btn</code> and <code>btn-default</code>.'
testString: 'assert($("button").hasClass("btn") && $("button").hasClass("btn-default"), ''Your new button should have two classes: <code>btn</code> and <code>btn-default</code>.'');'
testString: 'assert($("button").hasClass("btn") && $("button").hasClass("btn-default"), "Your new button should have two classes: <code>btn</code> and <code>btn-default</code>.");'
- text: Make sure all your <code>button</code> elements have a closing tag.
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, ''Make sure all your <code>button</code> elements have a closing tag.'');'
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, "Make sure all your <code>button</code> elements have a closing tag.");'
```

10
curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.english.md
View File

@@ -23,15 +23,15 @@ Color your <code>h3</code> element with the <code>text-primary</code> Bootstrap
```yml
tests:
- text: Add a <code>h3</code> element to your page.
testString: 'assert($("h3") && $("h3").length > 0, ''Add a <code>h3</code> element to your page.'');'
testString: 'assert($("h3") && $("h3").length > 0, "Add a <code>h3</code> element to your page.");'
- text: Make sure your <code>h3</code> element has a closing tag.
testString: 'assert(code.match(/<\/h3>/g) && code.match(/<h3/g) && code.match(/<\/h3>/g).length === code.match(/<h3/g).length, ''Make sure your <code>h3</code> element has a closing tag.'');'
testString: 'assert(code.match(/<\/h3>/g) && code.match(/<h3/g) && code.match(/<\/h3>/g).length === code.match(/<h3/g).length, "Make sure your <code>h3</code> element has a closing tag.");'
- text: Your <code>h3</code> element should be colored by applying the class <code>text-primary</code>
testString: 'assert($("h3").hasClass("text-primary"), ''Your <code>h3</code> element should be colored by applying the class <code>text-primary</code>'');'
testString: 'assert($("h3").hasClass("text-primary"), "Your <code>h3</code> element should be colored by applying the class <code>text-primary</code>");'
- text: Your <code>h3</code> element should be centered by applying the class <code>text-center</code>
testString: 'assert($("h3").hasClass("text-center"), ''Your <code>h3</code> element should be centered by applying the class <code>text-center</code>'');'
testString: 'assert($("h3").hasClass("text-center"), "Your <code>h3</code> element should be centered by applying the class <code>text-center</code>");'
- text: Your <code>h3</code> element should have the text <code>jQuery Playground</code>.
testString: 'assert.isTrue((/jquery(\s)+playground/gi).test($("h3").text()), ''Your <code>h3</code> element should have the text <code>jQuery Playground</code>.'');'
testString: 'assert.isTrue((/jquery(\s)+playground/gi).test($("h3").text()), "Your <code>h3</code> element should have the text <code>jQuery Playground</code>.");'
```

8
curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-row.english.md
View File

@@ -21,13 +21,13 @@ Create a <code>div</code> element below the <code>h3</code> tag, with a class of
```yml
tests:
- text: Add a <code>div</code> element below your <code>h3</code> element.
testString: 'assert(($("div").length > 1) && ($("div.row h3.text-primary").length == 0) && ($("div.row + h3.text-primary").length == 0) && ($("h3.text-primary + div.row").length > 0), ''Add a <code>div</code> element below your <code>h3</code> element.'');'
testString: 'assert(($("div").length > 1) && ($("div.row h3.text-primary").length == 0) && ($("div.row + h3.text-primary").length == 0) && ($("h3.text-primary + div.row").length > 0), "Add a <code>div</code> element below your <code>h3</code> element.");'
- text: Your <code>div</code> element should have the class <code>row</code>
testString: 'assert($("div").hasClass("row"), ''Your <code>div</code> element should have the class <code>row</code>'');'
testString: 'assert($("div").hasClass("row"), "Your <code>div</code> element should have the class <code>row</code>");'
- text: Your <code>row div</code> should be nested inside the <code>container-fluid div</code>
testString: 'assert($("div.container-fluid div.row").length > 0, ''Your <code>row div</code> should be nested inside the <code>container-fluid div</code>'');'
testString: 'assert($("div.container-fluid div.row").length > 0, "Your <code>row div</code> should be nested inside the <code>container-fluid div</code>");'
- text: Make sure your <code>div</code> element has a closing tag.
testString: 'assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length, ''Make sure your <code>div</code> element has a closing tag.'');'
testString: 'assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length, "Make sure your <code>div</code> element has a closing tag.");'
```

2
curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.english.md
View File

@@ -21,7 +21,7 @@ Give each of your <code>button</code> elements the class <code>target</code>.
```yml
tests:
- text: Apply the <code>target</code> class to each of your <code>button</code> elements.
testString: 'assert($(".target").length > 5, ''Apply the <code>target</code> class to each of your <code>button</code> elements.'');'
testString: 'assert($(".target").length > 5, "Apply the <code>target</code> class to each of your <code>button</code> elements.");'
```

8
curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-custom-heading.english.md
View File

@@ -23,13 +23,13 @@ Notice how the image is now just the right size to fit along the text?
```yml
tests:
- text: Your <code>h2</code> element and topmost <code>img</code> element should both be nested together within a <code>div</code> element with the class <code>row</code>.
testString: 'assert($("div.row:has(h2)").length > 0 && $("div.row:has(img)").length > 0, ''Your <code>h2</code> element and topmost <code>img</code> element should both be nested together within a <code>div</code> element with the class <code>row</code>.'');'
testString: 'assert($("div.row:has(h2)").length > 0 && $("div.row:has(img)").length > 0, "Your <code>h2</code> element and topmost <code>img</code> element should both be nested together within a <code>div</code> element with the class <code>row</code>.");'
- text: Nest your topmost <code>img</code> element within a <code>div</code> with the class <code>col-xs-4</code>.
testString: 'assert($("div.col-xs-4:has(img)").length > 0 && $("div.col-xs-4:has(div)").length === 0, ''Nest your topmost <code>img</code> element within a <code>div</code> with the class <code>col-xs-4</code>.'');'
testString: 'assert($("div.col-xs-4:has(img)").length > 0 && $("div.col-xs-4:has(div)").length === 0, "Nest your topmost <code>img</code> element within a <code>div</code> with the class <code>col-xs-4</code>.");'
- text: Nest your <code>h2</code> element within a <code>div</code> with the class <code>col-xs-8</code>.
testString: 'assert($("div.col-xs-8:has(h2)").length > 0 && $("div.col-xs-8:has(div)").length === 0, ''Nest your <code>h2</code> element within a <code>div</code> with the class <code>col-xs-8</code>.'');'
testString: 'assert($("div.col-xs-8:has(h2)").length > 0 && $("div.col-xs-8:has(div)").length === 0, "Nest your <code>h2</code> element within a <code>div</code> with the class <code>col-xs-8</code>.");'
- text: Make sure each of your <code>div</code> elements has a closing tag.
testString: 'assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length, ''Make sure each of your <code>div</code> elements has a closing tag.'');'
testString: 'assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length, "Make sure each of your <code>div</code> elements has a closing tag.");'
```

6
curriculum/challenges/english/03-front-end-libraries/bootstrap/create-bootstrap-wells.english.md
View File

@@ -21,11 +21,11 @@ Nest one <code>div</code> element with the class <code>well</code> within each o
```yml
tests:
- text: Add a <code>div</code> element with the class <code>well</code> inside each of your <code>div</code> elements with the class <code>"col-xs-6"</code>
testString: 'assert($("div.col-xs-6").not(":has(>div.well)").length < 1, ''Add a <code>div</code> element with the class <code>well</code> inside each of your <code>div</code> elements with the class <code>"col-xs-6"</code>'');'
testString: 'assert($("div.col-xs-6").not(":has(>div.well)").length < 1, "Add a <code>div</code> element with the class <code>well</code> inside each of your <code>div</code> elements with the class <code>"col-xs-6"</code>");'
- text: Nest both of your <code>div</code> elements with the class <code>"col-xs-6"</code> within your <code>div</code> element with the class <code>"row"</code>.
testString: 'assert($("div.row > div.col-xs-6").length > 1, ''Nest both of your <code>div</code> elements with the class <code>"col-xs-6"</code> within your <code>div</code> element with the class <code>"row"</code>.'');'
testString: 'assert($("div.row > div.col-xs-6").length > 1, "Nest both of your <code>div</code> elements with the class <code>"col-xs-6"</code> within your <code>div</code> element with the class <code>"row"</code>.");'
- text: Make sure all your <code>div</code> elements have closing tags.
testString: 'assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length, ''Make sure all your <code>div</code> elements have closing tags.'');'
testString: 'assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length, "Make sure all your <code>div</code> elements have closing tags.");'
```

10
curriculum/challenges/english/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.english.md
View File

@@ -24,15 +24,15 @@ Finally, remove the "smaller-image" class from your first <code>img</code> eleme
```yml
tests:
- text: Your h2 element should no longer have the class <code>red-text</code>.
testString: 'assert(!$("h2").hasClass("red-text"), ''Your h2 element should no longer have the class <code>red-text</code>.'');'
testString: 'assert(!$("h2").hasClass("red-text"), "Your h2 element should no longer have the class <code>red-text</code>.");'
- text: Your h2 element should now have the class <code>text-primary</code>.
testString: 'assert($("h2").hasClass("text-primary"), ''Your h2 element should now have the class <code>text-primary</code>.'');'
testString: 'assert($("h2").hasClass("text-primary"), "Your h2 element should now have the class <code>text-primary</code>.");'
- text: Your paragraph elements should no longer use the font <code>Monospace</code>.
testString: 'assert(!$("p").css("font-family").match(/monospace/i), ''Your paragraph elements should no longer use the font <code>Monospace</code>.'');'
testString: 'assert(!$("p").css("font-family").match(/monospace/i), "Your paragraph elements should no longer use the font <code>Monospace</code>.");'
- text: Remove the <code>smaller-image</code> class from your top image.
testString: 'assert(!$("img").hasClass("smaller-image"), ''Remove the <code>smaller-image</code> class from your top image.'');'
testString: 'assert(!$("img").hasClass("smaller-image"), "Remove the <code>smaller-image</code> class from your top image.");'
- text: Add the <code>img-responsive</code> class to your top image.
testString: 'assert($(".img-responsive").length > 1, ''Add the <code>img-responsive</code> class to your top image.'');'
testString: 'assert($(".img-responsive").length > 1, "Add the <code>img-responsive</code> class to your top image.");'
```

12
curriculum/challenges/english/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.english.md
View File

@@ -22,17 +22,17 @@ Make sure that <code>target1</code> to <code>target3</code> are in <code>#left-w
```yml
tests:
- text: One <code>button</code> element should have the id <code>target1</code>.
testString: 'assert($("#left-well").children("#target1") && $("#left-well").children("#target1").length > 0, ''One <code>button</code> element should have the id <code>target1</code>.'');'
testString: 'assert($("#left-well").children("#target1") && $("#left-well").children("#target1").length > 0, "One <code>button</code> element should have the id <code>target1</code>.");'
- text: One <code>button</code> element should have the id <code>target2</code>.
testString: 'assert($("#left-well").children("#target2") && $("#left-well").children("#target2").length > 0, ''One <code>button</code> element should have the id <code>target2</code>.'');'
testString: 'assert($("#left-well").children("#target2") && $("#left-well").children("#target2").length > 0, "One <code>button</code> element should have the id <code>target2</code>.");'
- text: One <code>button</code> element should have the id <code>target3</code>.
testString: 'assert($("#left-well").children("#target3") && $("#left-well").children("#target3").length > 0, ''One <code>button</code> element should have the id <code>target3</code>.'');'
testString: 'assert($("#left-well").children("#target3") && $("#left-well").children("#target3").length > 0, "One <code>button</code> element should have the id <code>target3</code>.");'
- text: One <code>button</code> element should have the id <code>target4</code>.
testString: 'assert($("#right-well").children("#target4") && $("#right-well").children("#target4").length > 0, ''One <code>button</code> element should have the id <code>target4</code>.'');'
testString: 'assert($("#right-well").children("#target4") && $("#right-well").children("#target4").length > 0, "One <code>button</code> element should have the id <code>target4</code>.");'
- text: One <code>button</code> element should have the id <code>target5</code>.
testString: 'assert($("#right-well").children("#target5") && $("#right-well").children("#target5").length > 0, ''One <code>button</code> element should have the id <code>target5</code>.'');'
testString: 'assert($("#right-well").children("#target5") && $("#right-well").children("#target5").length > 0, "One <code>button</code> element should have the id <code>target5</code>.");'
- text: One <code>button</code> element should have the id <code>target6</code>.
testString: 'assert($("#right-well").children("#target6") && $("#right-well").children("#target6").length > 0, ''One <code>button</code> element should have the id <code>target6</code>.'');'
testString: 'assert($("#right-well").children("#target6") && $("#right-well").children("#target6").length > 0, "One <code>button</code> element should have the id <code>target6</code>.");'
```

6
curriculum/challenges/english/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.english.md
View File

@@ -21,11 +21,11 @@ Let's nest your <code>h3</code> element within a <code>div</code> element with t
```yml
tests:
- text: Your <code>div</code> element should have the class <code>container-fluid</code>.
testString: 'assert($("div").hasClass("container-fluid"), ''Your <code>div</code> element should have the class <code>container-fluid</code>.'');'
testString: 'assert($("div").hasClass("container-fluid"), "Your <code>div</code> element should have the class <code>container-fluid</code>.");'
- text: Make sure each of your <code>div</code> elements has a closing tag.
testString: 'assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length, ''Make sure each of your <code>div</code> elements has a closing tag.'');'
testString: 'assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length, "Make sure each of your <code>div</code> elements has a closing tag.");'
- text: Nest your <code>h3</code> element inside a <code>div</code> element.
testString: 'assert($("div").children("h3").length >0, ''Nest your <code>h3</code> element inside a <code>div</code> element.'');'
testString: 'assert($("div").children("h3").length >0, "Nest your <code>h3</code> element inside a <code>div</code> element.");'
```

12
curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-buttons.english.md
View File

@@ -21,17 +21,17 @@ Give each of your <code>button</code> elements text that corresponds to its <cod
```yml
tests:
- text: 'Give your <code>button</code> element with the id <code>target1</code> the text <code>#target1</code>.'
testString: 'assert(new RegExp("#target1","gi").test($("#target1").text()), ''Give your <code>button</code> element with the id <code>target1</code> the text <code>#target1</code>.'');'
testString: 'assert(new RegExp("#target1","gi").test($("#target1").text()), "Give your <code>button</code> element with the id <code>target1</code> the text <code>#target1</code>.");'
- text: 'Give your <code>button</code> element with the id <code>target2</code> the text <code>#target2</code>.'
testString: 'assert(new RegExp("#target2","gi").test($("#target2").text()), ''Give your <code>button</code> element with the id <code>target2</code> the text <code>#target2</code>.'');'
testString: 'assert(new RegExp("#target2","gi").test($("#target2").text()), "Give your <code>button</code> element with the id <code>target2</code> the text <code>#target2</code>.");'
- text: 'Give your <code>button</code> element with the id <code>target3</code> the text <code>#target3</code>.'
testString: 'assert(new RegExp("#target3","gi").test($("#target3").text()), ''Give your <code>button</code> element with the id <code>target3</code> the text <code>#target3</code>.'');'
testString: 'assert(new RegExp("#target3","gi").test($("#target3").text()), "Give your <code>button</code> element with the id <code>target3</code> the text <code>#target3</code>.");'
- text: 'Give your <code>button</code> element with the id <code>target4</code> the text <code>#target4</code>.'
testString: 'assert(new RegExp("#target4","gi").test($("#target4").text()), ''Give your <code>button</code> element with the id <code>target4</code> the text <code>#target4</code>.'');'
testString: 'assert(new RegExp("#target4","gi").test($("#target4").text()), "Give your <code>button</code> element with the id <code>target4</code> the text <code>#target4</code>.");'
- text: 'Give your <code>button</code> element with the id <code>target5</code> the text <code>#target5</code>.'
testString: 'assert(new RegExp("#target5","gi").test($("#target5").text()), ''Give your <code>button</code> element with the id <code>target5</code> the text <code>#target5</code>.'');'
testString: 'assert(new RegExp("#target5","gi").test($("#target5").text()), "Give your <code>button</code> element with the id <code>target5</code> the text <code>#target5</code>.");'
- text: 'Give your <code>button</code> element with the id <code>target6</code> the text <code>#target6</code>.'
testString: 'assert(new RegExp("#target6","gi").test($("#target6").text()), ''Give your <code>button</code> element with the id <code>target6</code> the text <code>#target6</code>.'');'
testString: 'assert(new RegExp("#target6","gi").test($("#target6").text()), "Give your <code>button</code> element with the id <code>target6</code> the text <code>#target6</code>.");'
```

8
curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-wells.english.md
View File

@@ -22,13 +22,13 @@ Above your right-well, inside its <code>col-xs-6</code> <code>div</code> element
```yml
tests:
- text: 'Add an <code>h4</code> element to each of your <code>&#60;div class="col-xs-6"&#62;</code> elements.'
testString: 'assert($(".col-xs-6").children("h4") && $(".col-xs-6").children("h4").length > 1, ''Add an <code>h4</code> element to each of your <code>&#60;div class="col-xs-6"&#62;</code> elements.'');'
testString: 'assert($(".col-xs-6").children("h4") && $(".col-xs-6").children("h4").length > 1, "Add an <code>h4</code> element to each of your <code>&#60;div class="col-xs-6"&#62;</code> elements.");'
- text: 'One <code>h4</code> element should have the text <code>#left-well</code>.'
testString: 'assert(new RegExp("#left-well","gi").test($("h4").text()), ''One <code>h4</code> element should have the text <code>#left-well</code>.'');'
testString: 'assert(new RegExp("#left-well","gi").test($("h4").text()), "One <code>h4</code> element should have the text <code>#left-well</code>.");'
- text: 'One <code>h4</code> element should have the text <code>#right-well</code>.'
testString: 'assert(new RegExp("#right-well","gi").test($("h4").text()), ''One <code>h4</code> element should have the text <code>#right-well</code>.'');'
testString: 'assert(new RegExp("#right-well","gi").test($("h4").text()), "One <code>h4</code> element should have the text <code>#right-well</code>.");'
- text: Make sure all your <code>h4</code> elements have closing tags.
testString: 'assert(code.match(/<\/h4>/g) && code.match(/<h4/g) && code.match(/<\/h4>/g).length === code.match(/<h4/g).length, ''Make sure all your <code>h4</code> elements have closing tags.'');'
testString: 'assert(code.match(/<\/h4>/g) && code.match(/<h4/g) && code.match(/<\/h4>/g).length === code.match(/<h4/g).length, "Make sure all your <code>h4</code> elements have closing tags.");'
```

8
curriculum/challenges/english/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.english.md
View File

@@ -25,13 +25,13 @@ This is the last challenge we'll do for our Cat Photo App for now. We hope you'v
```yml
tests:
- text: Nest your form submission button and text input in a div with class <code>row</code>.
testString: 'assert($("div.row:has(input[type=\"text\"])").length > 0 && $("div.row:has(button[type=\"submit\"])").length > 0, ''Nest your form submission button and text input in a div with class <code>row</code>.'');'
testString: 'assert($("div.row:has(input[type=\"text\"])").length > 0 && $("div.row:has(button[type=\"submit\"])").length > 0, "Nest your form submission button and text input in a div with class <code>row</code>.");'
- text: Nest your form text input in a div with the class <code>col-xs-7</code>.
testString: 'assert($("div.col-xs-7:has(input[type=\"text\"])").length > 0, ''Nest your form text input in a div with the class <code>col-xs-7</code>.'');'
testString: 'assert($("div.col-xs-7:has(input[type=\"text\"])").length > 0, "Nest your form text input in a div with the class <code>col-xs-7</code>.");'
- text: Nest your form submission button in a div with the class <code>col-xs-5</code>.
testString: 'assert($("div.col-xs-5:has(button[type=\"submit\"])").length > 0, ''Nest your form submission button in a div with the class <code>col-xs-5</code>.'');'
testString: 'assert($("div.col-xs-5:has(button[type=\"submit\"])").length > 0, "Nest your form submission button in a div with the class <code>col-xs-5</code>.");'
- text: Make sure each of your <code>div</code> elements has a closing tag.
testString: 'assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length, ''Make sure each of your <code>div</code> elements has a closing tag.'');'
testString: 'assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length, "Make sure each of your <code>div</code> elements has a closing tag.");'
```

10
curriculum/challenges/english/03-front-end-libraries/bootstrap/make-images-mobile-responsive.english.md
View File

@@ -22,15 +22,15 @@ Fortunately, with Bootstrap, all we need to do is add the <code>img-responsive</
```yml
tests:
- text: You should have a total of two images.
testString: 'assert($("img").length === 2, ''You should have a total of two images.'');'
testString: 'assert($("img").length === 2, "You should have a total of two images.");'
- text: Your new image should be below your old one and have the class <code>img-responsive</code>.
testString: 'assert($("img:eq(1)").hasClass("img-responsive"), ''Your new image should be below your old one and have the class <code>img-responsive</code>.'');'
testString: 'assert($("img:eq(1)").hasClass("img-responsive"), "Your new image should be below your old one and have the class <code>img-responsive</code>.");'
- text: Your new image should not have the class <code>smaller-image</code>.
testString: 'assert(!$("img:eq(1)").hasClass("smaller-image"), ''Your new image should not have the class <code>smaller-image</code>.'');'
testString: 'assert(!$("img:eq(1)").hasClass("smaller-image"), "Your new image should not have the class <code>smaller-image</code>.");'
- text: 'Your new image should have a <code>src</code> of <code>https&#58;//bit.ly/fcc-running-cats</code>.'
testString: 'assert($("img:eq(1)").attr("src") === "https://bit.ly/fcc-running-cats", ''Your new image should have a <code>src</code> of <code>https&#58;//bit.ly/fcc-running-cats</code>.'');'
testString: 'assert($("img:eq(1)").attr("src") === "https://bit.ly/fcc-running-cats", "Your new image should have a <code>src</code> of <code>https&#58;//bit.ly/fcc-running-cats</code>.");'
- text: Make sure your new <code>img</code> element has a closing angle bracket.
testString: 'assert(code.match(/<img/g) && code.match(/<img[^<]*>/g).length === 2 && code.match(/<img/g).length === 2, ''Make sure your new <code>img</code> element has a closing angle bracket.'');'
testString: 'assert(code.match(/<img/g) && code.match(/<img[^<]*>/g).length === 2 && code.match(/<img/g).length === 2, "Make sure your new <code>img</code> element has a closing angle bracket.");'
```

6
curriculum/challenges/english/03-front-end-libraries/bootstrap/responsively-style-checkboxes.english.md
View File

@@ -24,11 +24,11 @@ Nest all three of your checkboxes in a <code>&#60;div class="row"&#62;</code> el
```yml
tests:
- text: Nest all of your checkboxes inside one <code>div</code> with the class <code>row</code>.
testString: 'assert($("div.row:has(input[type=\"checkbox\"])").length > 0, ''Nest all of your checkboxes inside one <code>div</code> with the class <code>row</code>.'');'
testString: 'assert($("div.row:has(input[type=\"checkbox\"])").length > 0, "Nest all of your checkboxes inside one <code>div</code> with the class <code>row</code>.");'
- text: Nest each of your checkboxes inside its own <code>div</code> with the class <code>col-xs-4</code>.
testString: 'assert($("div.col-xs-4:has(input[type=\"checkbox\"])").length > 2, ''Nest each of your checkboxes inside its own <code>div</code> with the class <code>col-xs-4</code>.'');'
testString: 'assert($("div.col-xs-4:has(input[type=\"checkbox\"])").length > 2, "Nest each of your checkboxes inside its own <code>div</code> with the class <code>col-xs-4</code>.");'
- text: Make sure each of your <code>div</code> elements has a closing tag.
testString: 'assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length, ''Make sure each of your <code>div</code> elements has a closing tag.'');'
testString: 'assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length, "Make sure each of your <code>div</code> elements has a closing tag.");'
```

6
curriculum/challenges/english/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.english.md
View File

@@ -25,11 +25,11 @@ Nest both your radio buttons within a <code>&#60;div class="row"&#62;</code> ele
```yml
tests:
- text: Nest all of your radio buttons inside one <code>div</code> with the class <code>row</code>.
testString: 'assert($("div.row:has(input[type=\"radio\"])").length > 0, ''Nest all of your radio buttons inside one <code>div</code> with the class <code>row</code>.'');'
testString: 'assert($("div.row:has(input[type=\"radio\"])").length > 0, "Nest all of your radio buttons inside one <code>div</code> with the class <code>row</code>.");'
- text: Nest each of your radio buttons inside its own <code>div</code> with the class <code>col-xs-6</code>.
testString: 'assert($("div.col-xs-6:has(input[type=\"radio\"])").length > 1, ''Nest each of your radio buttons inside its own <code>div</code> with the class <code>col-xs-6</code>.'');'
testString: 'assert($("div.col-xs-6:has(input[type=\"radio\"])").length > 1, "Nest each of your radio buttons inside its own <code>div</code> with the class <code>col-xs-6</code>.");'
- text: Make sure each of your <code>div</code> elements has a closing tag.
testString: 'assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length, ''Make sure each of your <code>div</code> elements has a closing tag.'');'
testString: 'assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length, "Make sure each of your <code>div</code> elements has a closing tag.");'
```

4
curriculum/challenges/english/03-front-end-libraries/bootstrap/split-your-bootstrap-row.english.md
View File

@@ -21,9 +21,9 @@ Create two <code>div</code> elements within your row, both with the class <code>
```yml
tests:
- text: Nest two <code>div class="col-xs-6"</code> elements within your <code>div class="row"</code> element.
testString: 'assert($("div.row > div.col-xs-6").length > 1, ''Nest two <code>div class="col-xs-6"</code> elements within your <code>div class="row"</code> element.'');'
testString: 'assert($("div.row > div.col-xs-6").length > 1, "Nest two <code>div class="col-xs-6"</code> elements within your <code>div class="row"</code> element.");'
- text: Make sure all your <code>div</code> elements have closing tags.
testString: 'assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length, ''Make sure all your <code>div</code> elements have closing tags.'');'
testString: 'assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length, "Make sure all your <code>div</code> elements have closing tags.");'
```

8
curriculum/challenges/english/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.english.md
View File

@@ -25,13 +25,13 @@ All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code
```yml
tests:
- text: Give the submit button in your form the classes <code>btn btn-primary</code>.
testString: 'assert($("button[type=\"submit\"]").hasClass("btn btn-primary"), ''Give the submit button in your form the classes <code>btn btn-primary</code>.'');'
testString: 'assert($("button[type=\"submit\"]").hasClass("btn btn-primary"), "Give the submit button in your form the classes <code>btn btn-primary</code>.");'
- text: 'Add a <code>&#60;i class="fa fa-paper-plane"&#62;&#60;/i&#62;</code> within your submit <code>button</code> element.'
testString: 'assert($("button[type=\"submit\"]:has(i.fa.fa-paper-plane)").length > 0, ''Add a <code>&#60;i class="fa fa-paper-plane"&#62;&#60;/i&#62;</code> within your submit <code>button</code> element.'');'
testString: 'assert($("button[type=\"submit\"]:has(i.fa.fa-paper-plane)").length > 0, "Add a <code>&#60;i class="fa fa-paper-plane"&#62;&#60;/i&#62;</code> within your submit <code>button</code> element.");'
- text: Give the text <code>input</code> in your form the class <code>form-control</code>.
testString: 'assert($("input[type=\"text\"]").hasClass("form-control"), ''Give the text <code>input</code> in your form the class <code>form-control</code>.'');'
testString: 'assert($("input[type=\"text\"]").hasClass("form-control"), "Give the text <code>input</code> in your form the class <code>form-control</code>.");'
- text: Make sure each of your <code>i</code> elements has a closing tag.
testString: 'assert(code.match(/<\/i>/g) && code.match(/<\/i/g).length > 3, ''Make sure each of your <code>i</code> elements has a closing tag.'');'
testString: 'assert(code.match(/<\/i>/g) && code.match(/<\/i/g).length > 3, "Make sure each of your <code>i</code> elements has a closing tag.");'
```

6
curriculum/challenges/english/03-front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.english.md
View File

@@ -22,11 +22,11 @@ Note that this button will still need the <code>btn</code> and <code>btn-block</
```yml
tests:
- text: Your button should have the class <code>btn-primary</code>.
testString: 'assert($("button").hasClass("btn-primary"), ''Your button should have the class <code>btn-primary</code>.'');'
testString: 'assert($("button").hasClass("btn-primary"), "Your button should have the class <code>btn-primary</code>.");'
- text: Your button should still have the <code>btn</code> and <code>btn-block</code> classes.
testString: 'assert($("button").hasClass("btn-block") && $("button").hasClass("btn"), ''Your button should still have the <code>btn</code> and <code>btn-block</code> classes.'');'
testString: 'assert($("button").hasClass("btn-block") && $("button").hasClass("btn"), "Your button should still have the <code>btn</code> and <code>btn-block</code> classes.");'
- text: Make sure all your <code>button</code> elements have a closing tag.
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, ''Make sure all your <code>button</code> elements have a closing tag.'');'
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, "Make sure all your <code>button</code> elements have a closing tag.");'
```

8
curriculum/challenges/english/03-front-end-libraries/bootstrap/use-a-span-to-target-inline-elements.english.md
View File

@@ -27,13 +27,13 @@ Here's how you would do this with the "Top 3 things cats hate" element:
```yml
tests:
- text: Your <code>span</code> element should be inside your <code>p</code> element.
testString: 'assert($("p span") && $("p span").length > 0, ''Your <code>span</code> element should be inside your <code>p</code> element.'');'
testString: 'assert($("p span") && $("p span").length > 0, "Your <code>span</code> element should be inside your <code>p</code> element.");'
- text: Your <code>span</code> element should have just the text <code>love</code>.
testString: 'assert($("p span") && $("p span").text().match(/love/i) && !$("p span").text().match(/Things cats/i), ''Your <code>span</code> element should have just the text <code>love</code>.'');'
testString: 'assert($("p span") && $("p span").text().match(/love/i) && !$("p span").text().match(/Things cats/i), "Your <code>span</code> element should have just the text <code>love</code>.");'
- text: Your <code>span</code> element should have class <code>text-danger</code>.
testString: 'assert($("span").hasClass("text-danger"), ''Your <code>span</code> element should have class <code>text-danger</code>.'');'
testString: 'assert($("span").hasClass("text-danger"), "Your <code>span</code> element should have class <code>text-danger</code>.");'
- text: Make sure your <code>span</code> element has a closing tag.
testString: 'assert(code.match(/<\/span>/g) && code.match(/<span/g) && code.match(/<\/span>/g).length === code.match(/<span/g).length, ''Make sure your <code>span</code> element has a closing tag.'');'
testString: 'assert(code.match(/<\/span>/g) && code.match(/<span/g) && code.match(/<\/span>/g).length === code.match(/<span/g).length, "Make sure your <code>span</code> element has a closing tag.");'
```

8
curriculum/challenges/english/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.english.md
View File

@@ -23,13 +23,13 @@ Add a comment at the top of your HTML that says <code>Only change code above thi
```yml
tests:
- text: 'Start a comment with <code>&#60;!--</code> at the top of your HTML.'
testString: 'assert(code.match(/^\s*<!--/), ''Start a comment with <code>&#60;!--</code> at the top of your HTML.'');'
testString: 'assert(code.match(/^\s*<!--/), "Start a comment with <code>&#60;!--</code> at the top of your HTML.");'
- text: Your comment should have the text <code>Only change code above this line</code>.
testString: 'assert(code.match(/<!--(?!(>|->|.*-->.*this line))\s*.*this line.*\s*-->/gi), ''Your comment should have the text <code>Only change code above this line</code>.'');'
testString: 'assert(code.match(/<!--(?!(>|->|.*-->.*this line))\s*.*this line.*\s*-->/gi), "Your comment should have the text <code>Only change code above this line</code>.");'
- text: 'Be sure to close your comment with <code>--&#62;</code>.'
testString: 'assert(code.match(/-->.*\n+.+/g), ''Be sure to close your comment with <code>--&#62;</code>.'');'
testString: 'assert(code.match(/-->.*\n+.+/g), "Be sure to close your comment with <code>--&#62;</code>.");'
- text: You should have the same number of comment openers and closers.
testString: 'assert(code.match(/<!--/g).length === code.match(/-->/g).length, ''You should have the same number of comment openers and closers.'');'
testString: 'assert(code.match(/<!--/g).length === code.match(/-->/g).length, "You should have the same number of comment openers and closers.");'
```

6
curriculum/challenges/english/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.english.md
View File

@@ -26,11 +26,11 @@ To get started, we should nest all of our HTML (except the <code>link</code> tag
```yml
tests:
- text: Your <code>div</code> element should have the class <code>container-fluid</code>.
testString: 'assert($("div").hasClass("container-fluid"), ''Your <code>div</code> element should have the class <code>container-fluid</code>.'');'
testString: 'assert($("div").hasClass("container-fluid"), "Your <code>div</code> element should have the class <code>container-fluid</code>.");'
- text: Make sure your <code>div</code> element has a closing tag.
testString: 'assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length, ''Make sure your <code>div</code> element has a closing tag.'');'
testString: 'assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length, "Make sure your <code>div</code> element has a closing tag.");'
- text: Make sure you have nested all HTML elements after the closing <code>style</code> tag in <code>.container-fluid</code>.
testString: 'assert($(".container-fluid").children().length >= 8, ''Make sure you have nested all HTML elements after the closing <code>style</code> tag in <code>.container-fluid</code>.'');'
testString: 'assert($(".container-fluid").children().length >= 8, "Make sure you have nested all HTML elements after the closing <code>style</code> tag in <code>.container-fluid</code>.");'
```

8
curriculum/challenges/english/03-front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.english.md
View File

@@ -25,13 +25,13 @@ The <code>row</code> class is applied to a <code>div</code>, and the buttons the
```yml
tests:
- text: Your buttons should all be nested within the same <code>div</code> element with the class <code>row</code>.
testString: 'assert($("div.row:has(button)").length > 0, ''Your buttons should all be nested within the same <code>div</code> element with the class <code>row</code>.'');'
testString: 'assert($("div.row:has(button)").length > 0, "Your buttons should all be nested within the same <code>div</code> element with the class <code>row</code>.");'
- text: Each of your Bootstrap buttons should be nested within its own <code>div</code> element with the class <code>col-xs-4</code>.
testString: 'assert($("div.col-xs-4:has(button)").length > 2, ''Each of your Bootstrap buttons should be nested within its own <code>div</code> element with the class <code>col-xs-4</code>.'');'
testString: 'assert($("div.col-xs-4:has(button)").length > 2, "Each of your Bootstrap buttons should be nested within its own <code>div</code> element with the class <code>col-xs-4</code>.");'
- text: Make sure each of your <code>button</code> elements has a closing tag.
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, ''Make sure each of your <code>button</code> elements has a closing tag.'');'
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, "Make sure each of your <code>button</code> elements has a closing tag.");'
- text: Make sure each of your <code>div</code> elements has a closing tag.
testString: 'assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length, ''Make sure each of your <code>div</code> elements has a closing tag.'');'
testString: 'assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length, "Make sure each of your <code>div</code> elements has a closing tag.");'
```

8
curriculum/challenges/english/03-front-end-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.english.md
View File

@@ -22,13 +22,13 @@ Note that these buttons still need the <code>btn</code> and <code>btn-block</cod
```yml
tests:
- text: Create a new <code>button</code> element with the text "Delete".
testString: 'assert(new RegExp("Delete","gi").test($("button").text()), ''Create a new <code>button</code> element with the text "Delete".'');'
testString: 'assert(new RegExp("Delete","gi").test($("button").text()), "Create a new <code>button</code> element with the text "Delete".");'
- text: All of your Bootstrap buttons should have the <code>btn</code> and <code>btn-block</code> classes.
testString: 'assert($("button.btn-block.btn").length > 2, ''All of your Bootstrap buttons should have the <code>btn</code> and <code>btn-block</code> classes.'');'
testString: 'assert($("button.btn-block.btn").length > 2, "All of your Bootstrap buttons should have the <code>btn</code> and <code>btn-block</code> classes.");'
- text: Your new button should have the class <code>btn-danger</code>.
testString: 'assert($("button").hasClass("btn-danger"), ''Your new button should have the class <code>btn-danger</code>.'');'
testString: 'assert($("button").hasClass("btn-danger"), "Your new button should have the class <code>btn-danger</code>.");'
- text: Make sure all your <code>button</code> elements have a closing tag.
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, ''Make sure all your <code>button</code> elements have a closing tag.'');'
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, "Make sure all your <code>button</code> elements have a closing tag.");'
```

12
curriculum/challenges/english/03-front-end-libraries/jquery/change-text-inside-an-element-using-jquery.english.md
View File

@@ -27,15 +27,15 @@ Note that while the <code>&#60;i&#62;</code> tag has traditionally been used to
```yml
tests:
- text: Emphasize the text in your <code>target4</code> button by adding HTML tags.
testString: 'assert.isTrue((/<em>|<i>\s*#target4\s*<\/em>|<\/i>/gi).test($("#target4").html()), ''Emphasize the text in your <code>target4</code> button by adding HTML tags.'');'
testString: 'assert.isTrue((/<em>|<i>\s*#target4\s*<\/em>|<\/i>/gi).test($("#target4").html()), "Emphasize the text in your <code>target4</code> button by adding HTML tags.");'
- text: Make sure the text is otherwise unchanged.
testString: 'assert($("#target4") && $("#target4").text().trim() === ''#target4'', ''Make sure the text is otherwise unchanged.'');'
testString: 'assert($("#target4") && $("#target4").text().trim() === "#target4", "Make sure the text is otherwise unchanged.");'
- text: Do not alter any other text.
testString: 'assert.isFalse((/<em>|<i>/gi).test($("h3").html()), ''Do not alter any other text.'');'
testString: 'assert.isFalse((/<em>|<i>/gi).test($("h3").html()), "Do not alter any other text.");'
- text: Make sure you are using <code>.html()</code> and not <code>.text()</code>.
testString: 'assert(code.match(/\.html\(/g), ''Make sure you are using <code>.html()</code> and not <code>.text()</code>.'');'
testString: 'assert(code.match(/\.html\(/g), "Make sure you are using <code>.html()</code> and not <code>.text()</code>.");'
- text: Make sure to select <code>button id="target4"</code> with jQuery.
testString: 'assert(code.match(/\$\(\s*?(\"|\'')#target4(\"|\'')\s*?\)\.html\(/), ''Make sure to select <code>button id="target4"</code> with jQuery.'');'
testString: 'assert(code.match(/\$\(\s*?(\"|\")#target4(\"|\")\s*?\)\.html\(/), "Make sure to select <code>button id="target4"</code> with jQuery.");'
```
@@ -50,7 +50,7 @@ tests:
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
});
</script>

4
curriculum/challenges/english/03-front-end-libraries/jquery/change-the-css-of-an-element-using-jquery.english.md
View File

@@ -28,9 +28,9 @@ Select <code>target1</code> and change its color to red.
```yml
tests:
- text: Your <code>target1</code> element should have red text.
testString: 'assert($("#target1").css("color") === ''rgb(255, 0, 0)'', ''Your <code>target1</code> element should have red text.'');'
testString: 'assert($("#target1").css("color") === "rgb(255, 0, 0)", "Your <code>target1</code> element should have red text.");'
- text: Only use jQuery to add these classes to the element.
testString: 'assert(!code.match(/class.*animated/g), ''Only use jQuery to add these classes to the element.'');'
testString: 'assert(!code.match(/class.*animated/g), "Only use jQuery to add these classes to the element.");'
```

6
curriculum/challenges/english/03-front-end-libraries/jquery/clone-an-element-using-jquery.english.md
View File

@@ -25,11 +25,11 @@ Clone your <code>target5</code> element and append it to your <code>left-well</c
```yml
tests:
- text: Your <code>target5</code> element should be inside your <code>right-well</code>.
testString: 'assert($("#right-well").children("#target5").length > 0, ''Your <code>target5</code> element should be inside your <code>right-well</code>.'');'
testString: 'assert($("#right-well").children("#target5").length > 0, "Your <code>target5</code> element should be inside your <code>right-well</code>.");'
- text: A copy of your <code>target5</code> element should also be inside your <code>left-well</code>.
testString: 'assert($("#left-well").children("#target5").length > 0, ''A copy of your <code>target5</code> element should also be inside your <code>left-well</code>.'');'
testString: 'assert($("#left-well").children("#target5").length > 0, "A copy of your <code>target5</code> element should also be inside your <code>left-well</code>.");'
- text: Only use jQuery to move these elements.
testString: 'assert(!code.match(/class.*animated/g), ''Only use jQuery to move these elements.'');'
testString: 'assert(!code.match(/class.*animated/g), "Only use jQuery to move these elements.");'
```

10
curriculum/challenges/english/03-front-end-libraries/jquery/delete-your-jquery-functions.english.md
View File

@@ -23,15 +23,15 @@ Delete all three of these jQuery functions from your <code>document ready functi
```yml
tests:
- text: Delete all three of your jQuery functions from your <code>document ready function</code>.
testString: 'assert(code.match(/\{\s*\}\);/g), ''Delete all three of your jQuery functions from your <code>document ready function</code>.'');'
testString: 'assert(code.match(/\{\s*\}\);/g), "Delete all three of your jQuery functions from your <code>document ready function</code>.");'
- text: Leave your <code>script</code> element intact.
testString: 'assert(code.match(/<script>/g), ''Leave your <code>script</code> element intact.'');'
testString: 'assert(code.match(/<script>/g), "Leave your <code>script</code> element intact.");'
- text: 'Leave your <code>$&#40document&#41.ready&#40function&#40&#41 {</code> to the beginning of your <code>script</code> element.'
testString: 'assert(code.match(/\$\(document\)\.ready\(function\(\)\s?\{/g), ''Leave your <code>$&#40document&#41.ready&#40function&#40&#41 {</code> to the beginning of your <code>script</code> element.'');'
testString: 'assert(code.match(/\$\(document\)\.ready\(function\(\)\s?\{/g), "Leave your <code>$&#40document&#41.ready&#40function&#40&#41 {</code> to the beginning of your <code>script</code> element.");'
- text: 'Leave your "document ready function" closing <code>&#125;&#41;</code> intact.'
testString: 'assert(code.match(/.*\s*\}\);/g), ''Leave your "document ready function" closing <code>&#125;&#41;</code> intact.'');'
testString: 'assert(code.match(/.*\s*\}\);/g), "Leave your "document ready function" closing <code>&#125;&#41;</code> intact.");'
- text: Leave your <code>script</code> element closing tag intact.
testString: 'assert(code.match(/<\/script>/g) && code.match(/<script/g) && code.match(/<\/script>/g).length === code.match(/<script/g).length, ''Leave your <code>script</code> element closing tag intact.'');'
testString: 'assert(code.match(/<\/script>/g) && code.match(/<script/g) && code.match(/<\/script>/g).length === code.match(/<script/g).length, "Leave your <code>script</code> element closing tag intact.");'
```

6
curriculum/challenges/english/03-front-end-libraries/jquery/disable-an-element-using-jquery.english.md
View File

@@ -25,11 +25,11 @@ Disable only the <code>target1</code> button.
```yml
tests:
- text: Disable your <code>target1</code> button.
testString: 'assert($("#target1") && $("#target1").prop("disabled") && code.match(/["'']disabled["''],( true|true)/g), ''Disable your <code>target1</code> button.'');'
testString: 'assert($("#target1") && $("#target1").prop("disabled") && code.match(/[""]disabled[""],( true|true)/g), "Disable your <code>target1</code> button.");'
- text: Do not disable any other buttons.
testString: 'assert($("#target2") && !$("#target2").prop("disabled"), ''Do not disable any other buttons.'');'
testString: 'assert($("#target2") && !$("#target2").prop("disabled"), "Do not disable any other buttons.");'
- text: Only use jQuery to add these classes to the element.
testString: 'assert(!code.match(/disabled[^<]*>/g), ''Only use jQuery to add these classes to the element.'');'
testString: 'assert(!code.match(/disabled[^<]*>/g), "Only use jQuery to add these classes to the element.");'
```

6
curriculum/challenges/english/03-front-end-libraries/jquery/learn-how-script-tags-and-document-ready-work.english.md
View File

@@ -26,11 +26,11 @@ This is important because without your <code>document ready function</code>, you
```yml
tests:
- text: Create a <code>script</code> element making sure it is valid and has a closing tag.
testString: 'assert(code.match(/<\/script\s*>/g) && code.match(/<script(\sasync|\sdefer)*(\s(charset|src|type)\s*=\s*["\'']+[^"\'']*["\'']+)*(\sasync|\sdefer)*\s*>/g) && code.match(/<\/script\s*>/g).length === code.match(/<script(\sasync|\sdefer)*(\s(charset|src|type)\s*=\s*["\'']+[^"\'']*["\'']+)*(\sasync|\sdefer)*\s*>/g).length, ''Create a <code>script</code> element making sure it is valid and has a closing tag.'');'
testString: 'assert(code.match(/<\/script\s*>/g) && code.match(/<script(\sasync|\sdefer)*(\s(charset|src|type)\s*=\s*["\"]+[^"\"]*["\"]+)*(\sasync|\sdefer)*\s*>/g) && code.match(/<\/script\s*>/g).length === code.match(/<script(\sasync|\sdefer)*(\s(charset|src|type)\s*=\s*["\"]+[^"\"]*["\"]+)*(\sasync|\sdefer)*\s*>/g).length, "Create a <code>script</code> element making sure it is valid and has a closing tag.");'
- text: 'You should add <code>$&#40;document&#41;.ready<wbr>&#40;function&#40;&#41; {</code> to the beginning of your <code>script</code> element.'
testString: 'assert(code.match(/\$\s*?\(\s*?document\s*?\)\.ready\s*?\(\s*?function\s*?\(\s*?\)\s*?\{/g), ''You should add <code>$&#40;document&#41;.ready<wbr>&#40;function&#40;&#41; {</code> to the beginning of your <code>script</code> element.'');'
testString: 'assert(code.match(/\$\s*?\(\s*?document\s*?\)\.ready\s*?\(\s*?function\s*?\(\s*?\)\s*?\{/g), "You should add <code>$&#40;document&#41;.ready<wbr>&#40;function&#40;&#41; {</code> to the beginning of your <code>script</code> element.");'
- text: 'Close your <code>$&#40;document&#41;.ready<wbr>&#40;function&#40;&#41; {</code> function with <code>}&#41;;</code>'
testString: 'assert(code.match(/\n*?\s*?\}\s*?\);/g), ''Close your <code>$&#40;document&#41;.ready<wbr>&#40;function&#40;&#41; {</code> function with <code>}&#41;;</code>'');'
testString: 'assert(code.match(/\n*?\s*?\}\s*?\);/g), "Close your <code>$&#40;document&#41;.ready<wbr>&#40;function&#40;&#41; {</code> function with <code>}&#41;;</code>");'
```

4
curriculum/challenges/english/03-front-end-libraries/jquery/remove-an-element-using-jquery.english.md
View File

@@ -22,9 +22,9 @@ Remove element <code>target4</code> from the page by using the <code>.remove()</
```yml
tests:
- text: Use jQuery to remove your <code>target4</code> element from your page.
testString: 'assert($("#target4").length === 0 && code.match(/\$\(["'']#target4["'']\).remove\(\)/g), ''Use jQuery to remove your <code>target4</code> element from your page.'');'
testString: 'assert($("#target4").length === 0 && code.match(/\$\([""]#target4[""]\).remove\(\)/g), "Use jQuery to remove your <code>target4</code> element from your page.");'
- text: Only use jQuery to remove this element.
testString: 'assert(code.match(/id="target4/g) && !code.match(/<!--.*id="target4".*-->/g) && $("#right-well").length > 0, ''Only use jQuery to remove this element.'');'
testString: 'assert(code.match(/id="target4/g) && !code.match(/<!--.*id="target4".*-->/g) && $("#right-well").length > 0, "Only use jQuery to remove this element.");'
```

6
curriculum/challenges/english/03-front-end-libraries/jquery/remove-classes-from-an-element-with-jquery.english.md
View File

@@ -25,11 +25,11 @@ Let's remove the <code>btn-default</code> class from all of our <code>button</co
```yml
tests:
- text: Remove the <code>btn-default</code> class from all of your <code>button</code> elements.
testString: 'assert($(".btn-default").length === 0, ''Remove the <code>btn-default</code> class from all of your <code>button</code> elements.'');'
testString: 'assert($(".btn-default").length === 0, "Remove the <code>btn-default</code> class from all of your <code>button</code> elements.");'
- text: Only use jQuery to remove this class from the element.
testString: 'assert(code.match(/btn btn-default/g), ''Only use jQuery to remove this class from the element.'');'
testString: 'assert(code.match(/btn btn-default/g), "Only use jQuery to remove this class from the element.");'
- text: Only remove the <code>btn-default</code> class.
testString: 'assert(code.match(/\.[\v\s]*removeClass[\s\v]*\([\s\v]*(''|")\s*btn-default\s*(''|")[\s\v]*\)/gm), ''Only remove the <code>btn-default</code> class.'');'
testString: 'assert(code.match(/\.[\v\s]*removeClass[\s\v]*\([\s\v]*("|")\s*btn-default\s*("|")[\s\v]*\)/gm), "Only remove the <code>btn-default</code> class.");'
```

8
curriculum/challenges/english/03-front-end-libraries/jquery/target-a-specific-child-of-an-element-using-jquery.english.md
View File

@@ -27,13 +27,13 @@ Make the second child in each of your well elements bounce. You must select the
```yml
tests:
- text: The second element in your <code>target</code> elements should bounce.
testString: 'assert($(".target:nth-child(2)").hasClass("animated") && $(".target:nth-child(2)").hasClass("bounce"), ''The second element in your <code>target</code> elements should bounce.'');'
testString: 'assert($(".target:nth-child(2)").hasClass("animated") && $(".target:nth-child(2)").hasClass("bounce"), "The second element in your <code>target</code> elements should bounce.");'
- text: Only two elements should bounce.
testString: 'assert($(".animated.bounce").length === 2, ''Only two elements should bounce.'');'
testString: 'assert($(".animated.bounce").length === 2, "Only two elements should bounce.");'
- text: 'You should use the <code>&#58;nth-child&#40&#41</code> selector to modify these elements.'
testString: 'assert(code.match(/\:nth-child\(/g), ''You should use the <code>&#58;nth-child&#40&#41</code> selector to modify these elements.'');'
testString: 'assert(code.match(/\:nth-child\(/g), "You should use the <code>&#58;nth-child&#40&#41</code> selector to modify these elements.");'
- text: Only use jQuery to add these classes to the element.
testString: 'assert(code.match(/\$\(".target:nth-child\(2\)"\)/g) || code.match(/\$\(''.target:nth-child\(2\)''\)/g) || code.match(/\$\(".target"\).filter\(":nth-child\(2\)"\)/g) || code.match(/\$\(''.target''\).filter\('':nth-child\(2\)''\)/g), ''Only use jQuery to add these classes to the element.'');'
testString: 'assert(code.match(/\$\(".target:nth-child\(2\)"\)/g) || code.match(/\$\(".target:nth-child\(2\)"\)/g) || code.match(/\$\(".target"\).filter\(":nth-child\(2\)"\)/g) || code.match(/\$\(".target"\).filter\(":nth-child\(2\)"\)/g), "Only use jQuery to add these classes to the element.");'
```

4
curriculum/challenges/english/03-front-end-libraries/jquery/target-elements-by-class-using-jquery.english.md
View File

@@ -28,9 +28,9 @@ For example, you could make all the elements with the class <code>text-primary</
```yml
tests:
- text: 'Use the jQuery <code>addClass&#40&#41</code> function to give the classes <code>animated</code> and <code>shake</code> to all your elements with the class <code>well</code>.'
testString: 'assert($(".well").hasClass("animated") && $(".well").hasClass("shake"), ''Use the jQuery <code>addClass&#40&#41</code> function to give the classes <code>animated</code> and <code>shake</code> to all your elements with the class <code>well</code>.'');'
testString: 'assert($(".well").hasClass("animated") && $(".well").hasClass("shake"), "Use the jQuery <code>addClass&#40&#41</code> function to give the classes <code>animated</code> and <code>shake</code> to all your elements with the class <code>well</code>.");'
- text: Only use jQuery to add these classes to the element.
testString: 'assert(!code.match(/class\.\*animated/g), ''Only use jQuery to add these classes to the element.'');'
testString: 'assert(!code.match(/class\.\*animated/g), "Only use jQuery to add these classes to the element.");'
```

6
curriculum/challenges/english/03-front-end-libraries/jquery/target-elements-by-id-using-jquery.english.md
View File

@@ -27,11 +27,11 @@ Here's how you'd make the <code>button</code> element with the id <code>target6<
```yml
tests:
- text: 'Select the <code>button</code> element with the <code>id</code> of <code>target3</code> and use the jQuery <code>addClass&#40&#41</code> function to give it the class of <code>animated</code>.'
testString: 'assert($("#target3").hasClass("animated"), ''Select the <code>button</code> element with the <code>id</code> of <code>target3</code> and use the jQuery <code>addClass&#40&#41</code> function to give it the class of <code>animated</code>.'');'
testString: 'assert($("#target3").hasClass("animated"), "Select the <code>button</code> element with the <code>id</code> of <code>target3</code> and use the jQuery <code>addClass&#40&#41</code> function to give it the class of <code>animated</code>.");'
- text: 'Target the element with the id <code>target3</code> and use the jQuery <code>addClass&#40&#41</code> function to give it the class <code>fadeOut</code>.'
testString: 'assert(($("#target3").hasClass("fadeOut") || $("#target3").hasClass("fadeout")) && code.match(/\$\(\s*.#target3.\s*\)/g), ''Target the element with the id <code>target3</code> and use the jQuery <code>addClass&#40&#41</code> function to give it the class <code>fadeOut</code>.'');'
testString: 'assert(($("#target3").hasClass("fadeOut") || $("#target3").hasClass("fadeout")) && code.match(/\$\(\s*.#target3.\s*\)/g), "Target the element with the id <code>target3</code> and use the jQuery <code>addClass&#40&#41</code> function to give it the class <code>fadeOut</code>.");'
- text: Only use jQuery to add these classes to the element.
testString: 'assert(!code.match(/class.*animated/g), ''Only use jQuery to add these classes to the element.'');'
testString: 'assert(!code.match(/class.*animated/g), "Only use jQuery to add these classes to the element.");'
```

6
curriculum/challenges/english/03-front-end-libraries/jquery/target-even-elements-using-jquery.english.md
View File

@@ -26,11 +26,11 @@ Try selecting all the even <code>target</code> elements and giving them the clas
```yml
tests:
- text: All of the <code>target</code> elements that jQuery considers to be even should shake.
testString: 'assert($(''.target:even'').hasClass(''animated'') && $(''.target:even'').hasClass(''shake''), ''All of the <code>target</code> elements that jQuery considers to be even should shake.'');'
testString: 'assert($(".target:even").hasClass("animated") && $(".target:even").hasClass("shake"), "All of the <code>target</code> elements that jQuery considers to be even should shake.");'
- text: 'You should use the <code>&#58;even</code> selector to modify these elements.'
testString: 'assert(code.match(/\:even/g), ''You should use the <code>&#58;even</code> selector to modify these elements.'');'
testString: 'assert(code.match(/\:even/g), "You should use the <code>&#58;even</code> selector to modify these elements.");'
- text: Only use jQuery to add these classes to the element.
testString: 'assert(code.match(/\$\(".target:even"\)/g) || code.match(/\$\(''.target:even''\)/g) || code.match(/\$\(".target"\).filter\(":even"\)/g) || code.match(/\$\(''.target''\).filter\('':even''\)/g), ''Only use jQuery to add these classes to the element.'');'
testString: 'assert(code.match(/\$\(".target:even"\)/g) || code.match(/\$\(".target:even"\)/g) || code.match(/\$\(".target"\).filter\(":even"\)/g) || code.match(/\$\(".target"\).filter\(":even"\)/g), "Only use jQuery to add these classes to the element.");'
```

6
curriculum/challenges/english/03-front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery.english.md
View File

@@ -27,11 +27,11 @@ Note that we've already included both the jQuery library and the Animate.css lib
```yml
tests:
- text: 'Use the jQuery <code>addClass&#40&#41</code> function to give the classes <code>animated</code> and <code>bounce</code> to your <code>button</code> elements.'
testString: 'assert($("button").hasClass("animated") && $("button").hasClass("bounce"), ''Use the jQuery <code>addClass&#40&#41</code> function to give the classes <code>animated</code> and <code>bounce</code> to your <code>button</code> elements.'');'
testString: 'assert($("button").hasClass("animated") && $("button").hasClass("bounce"), "Use the jQuery <code>addClass&#40&#41</code> function to give the classes <code>animated</code> and <code>bounce</code> to your <code>button</code> elements.");'
- text: Only use jQuery to add these colors to the element.
testString: 'assert(!code.match(/class.*animated/g), ''Only use jQuery to add these colors to the element.'');'
testString: 'assert(!code.match(/class.*animated/g), "Only use jQuery to add these colors to the element.");'
- text: Your jQuery code should be within the <code>$(document).ready();</code> function.
testString: 'assert(code.match(/\$\(document\)\.ready\(function.*(\s|\n)*.*button.*.addClass.*\);/g), ''Your jQuery code should be within the <code>$(document).ready();</code> function.'');'
testString: 'assert(code.match(/\$\(document\)\.ready\(function.*(\s|\n)*.*button.*.addClass.*\);/g), "Your jQuery code should be within the <code>$(document).ready();</code> function.");'
```

6
curriculum/challenges/english/03-front-end-libraries/jquery/target-the-children-of-an-element-using-jquery.english.md
View File

@@ -23,11 +23,11 @@ Give all the children of your <code>right-well</code> element the color orange.
```yml
tests:
- text: 'All children of <code>#right-well</code> should have orange text.'
testString: 'assert($("#right-well").children().css("color") === ''rgb(255, 165, 0)'', ''All children of <code>#right-well</code> should have orange text.'');'
testString: 'assert($("#right-well").children().css("color") === "rgb(255, 165, 0)", "All children of <code>#right-well</code> should have orange text.");'
- text: 'You should use the <code>children&#40&#41</code> function to modify these elements.'
testString: 'assert(code.match(/\.children\(\)\.css/g), ''You should use the <code>children&#40&#41</code> function to modify these elements.'');'
testString: 'assert(code.match(/\.children\(\)\.css/g), "You should use the <code>children&#40&#41</code> function to modify these elements.");'
- text: Only use jQuery to add these classes to the element.
testString: 'assert(code.match(/<div class="well" id="right-well">/g), ''Only use jQuery to add these classes to the element.'');'
testString: 'assert(code.match(/<div class="well" id="right-well">/g), "Only use jQuery to add these classes to the element.");'
```

8
curriculum/challenges/english/03-front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery.english.md
View File

@@ -25,13 +25,13 @@ Give the parent of the <code>#target1</code> element a background-color of red.
```yml
tests:
- text: Your <code>left-well</code> element should have a red background.
testString: 'assert($("#left-well").css("background-color") === ''red'' || $("#left-well").css("background-color") === ''rgb(255, 0, 0)'' || $("#left-well").css("background-color").toLowerCase() === ''#ff0000'' || $("#left-well").css("background-color").toLowerCase() === ''#f00'', ''Your <code>left-well</code> element should have a red background.'');'
testString: 'assert($("#left-well").css("background-color") === "red" || $("#left-well").css("background-color") === "rgb(255, 0, 0)" || $("#left-well").css("background-color").toLowerCase() === "#ff0000" || $("#left-well").css("background-color").toLowerCase() === "#f00", "Your <code>left-well</code> element should have a red background.");'
- text: 'You should use the <code>&#46;parent&#40;&#41;</code> function to modify this element.'
testString: 'assert(code.match(/\.parent\s*\(\s*\)\s*\.css/g), ''You should use the <code>&#46;parent&#40;&#41;</code> function to modify this element.'');'
testString: 'assert(code.match(/\.parent\s*\(\s*\)\s*\.css/g), "You should use the <code>&#46;parent&#40;&#41;</code> function to modify this element.");'
- text: 'The <code>&#46;parent&#40;&#41;</code> method should be called on the <code>&#35;target1</code> element.'
testString: 'assert(code.match(/\$\s*?\(\s*?(?:''|")\s*?#target1\s*?(?:''|")\s*?\)\s*?\.parent/gi), ''The <code>&#46;parent&#40;&#41;</code> method should be called on the <code>&#35;target1</code> element.'');'
testString: 'assert(code.match(/\$\s*?\(\s*?(?:"|")\s*?#target1\s*?(?:"|")\s*?\)\s*?\.parent/gi), "The <code>&#46;parent&#40;&#41;</code> method should be called on the <code>&#35;target1</code> element.");'
- text: Only use jQuery to add these classes to the element.
testString: 'assert(code.match(/<div class="well" id="left-well">/g), ''Only use jQuery to add these classes to the element.'');'
testString: 'assert(code.match(/<div class="well" id="left-well">/g), "Only use jQuery to add these classes to the element.");'
```

12
curriculum/challenges/english/03-front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.english.md
View File

@@ -28,17 +28,17 @@ Add the <code>btn-primary</code> class to the button with id <code>#target1</cod
```yml
tests:
- text: 'Use the <code>$&#40"button"&#41</code> selector.'
testString: 'assert(code.match(/\$\s*?\(\s*?(?:''|")\s*?button\s*?(?:''|")/gi), ''Use the <code>$&#40"button"&#41</code> selector.'');'
testString: 'assert(code.match(/\$\s*?\(\s*?(?:"|")\s*?button\s*?(?:"|")/gi), "Use the <code>$&#40"button"&#41</code> selector.");'
- text: 'Use the <code>$&#40".btn"&#41</code> selector.'
testString: 'assert(code.match(/\$\s*?\(\s*?(?:''|")\s*?\.btn\s*?(?:''|")/gi), ''Use the <code>$&#40".btn"&#41</code> selector.'');'
testString: 'assert(code.match(/\$\s*?\(\s*?(?:"|")\s*?\.btn\s*?(?:"|")/gi), "Use the <code>$&#40".btn"&#41</code> selector.");'
- text: 'Use the <code>$&#40"#target1"&#41</code> selector.'
testString: 'assert(code.match(/\$\s*?\(\s*?(?:''|")\s*?#target1\s*?(?:''|")/gi), ''Use the <code>$&#40"#target1"&#41</code> selector.'');'
testString: 'assert(code.match(/\$\s*?\(\s*?(?:"|")\s*?#target1\s*?(?:"|")/gi), "Use the <code>$&#40"#target1"&#41</code> selector.");'
- text: Only add one class with each of your three selectors.
testString: 'assert(code.match(/addClass/g) && code.match(/addClass\s*?\(\s*?(''|")\s*?[\w-]+\s*?\1\s*?\)/g).length > 2, ''Only add one class with each of your three selectors.'');'
testString: 'assert(code.match(/addClass/g) && code.match(/addClass\s*?\(\s*?("|")\s*?[\w-]+\s*?\1\s*?\)/g).length > 2, "Only add one class with each of your three selectors.");'
- text: 'Your <code>#target1</code> element should have the classes <code>animated</code>&#130; <code>shake</code> and <code>btn-primary</code>.'
testString: 'assert($("#target1").hasClass("animated") && $("#target1").hasClass("shake") && $("#target1").hasClass("btn-primary"), ''Your <code>#target1</code> element should have the classes <code>animated</code>&#130; <code>shake</code> and <code>btn-primary</code>.'');'
testString: 'assert($("#target1").hasClass("animated") && $("#target1").hasClass("shake") && $("#target1").hasClass("btn-primary"), "Your <code>#target1</code> element should have the classes <code>animated</code>&#130; <code>shake</code> and <code>btn-primary</code>.");'
- text: Only use jQuery to add these classes to the element.
testString: 'assert(!code.match(/class.*animated/g), ''Only use jQuery to add these classes to the element.'');'
testString: 'assert(!code.match(/class.*animated/g), "Only use jQuery to add these classes to the element.");'
```

6
curriculum/challenges/english/03-front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery.english.md
View File

@@ -24,11 +24,11 @@ Move your <code>target2</code> element from your <code>left-well</code> to your
```yml
tests:
- text: Your <code>target2</code> element should not be inside your <code>left-well</code>.
testString: 'assert($("#left-well").children("#target2").length === 0, ''Your <code>target2</code> element should not be inside your <code>left-well</code>.'');'
testString: 'assert($("#left-well").children("#target2").length === 0, "Your <code>target2</code> element should not be inside your <code>left-well</code>.");'
- text: Your <code>target2</code> element should be inside your <code>right-well</code>.
testString: 'assert($("#right-well").children("#target2").length > 0, ''Your <code>target2</code> element should be inside your <code>right-well</code>.'');'
testString: 'assert($("#right-well").children("#target2").length > 0, "Your <code>target2</code> element should be inside your <code>right-well</code>.");'
- text: Only use jQuery to move these elements.
testString: 'assert(!code.match(/class.*animated/g), ''Only use jQuery to move these elements.'');'
testString: 'assert(!code.match(/class.*animated/g), "Only use jQuery to move these elements.");'
```

2
curriculum/challenges/english/03-front-end-libraries/jquery/use-jquery-to-modify-the-entire-page.english.md
View File

@@ -25,7 +25,7 @@ But let's do something more dramatic. Add the classes <code>animated</code> and
```yml
tests:
- text: Add the classes <code>animated</code> and <code>hinge</code> to your <code>body</code> element.
testString: 'assert($(''body'').hasClass(''animated'') && $(''body'').hasClass(''hinge''), ''Add the classes <code>animated</code> and <code>hinge</code> to your <code>body</code> element.'');'
testString: 'assert($("body").hasClass("animated") && $("body").hasClass("hinge"), "Add the classes <code>animated</code> and <code>hinge</code> to your <code>body</code> element.");'
```

8
curriculum/challenges/english/03-front-end-libraries/react-and-redux/connect-redux-to-react.english.md
View File

@@ -24,11 +24,11 @@ The code editor has the <code>mapStateToProps()</code> and <code>mapDispatchToPr
```yml
tests:
- text: The <code>Presentational</code> component should render.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find(''Presentational'').length === 1; })(), ''The <code>Presentational</code> component should render.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("Presentational").length === 1; })(), "The <code>Presentational</code> component should render.");'
- text: The <code>Presentational</code> component should receive a prop <code>messages</code> via <code>connect</code>.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find(''Presentational'').props(); return props.messages === ''__INITIAL__STATE__''; })(), ''The <code>Presentational</code> component should receive a prop <code>messages</code> via <code>connect</code>.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find("Presentational").props(); return props.messages === "__INITIAL__STATE__"; })(), "The <code>Presentational</code> component should receive a prop <code>messages</code> via <code>connect</code>.");'
- text: The <code>Presentational</code> component should receive a prop <code>submitNewMessage</code> via <code>connect</code>.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find(''Presentational'').props(); return typeof props.submitNewMessage === ''function''; })(), ''The <code>Presentational</code> component should receive a prop <code>submitNewMessage</code> via <code>connect</code>.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find("Presentational").props(); return typeof props.submitNewMessage === "function"; })(), "The <code>Presentational</code> component should receive a prop <code>submitNewMessage</code> via <code>connect</code>.");'
```
@@ -127,7 +127,7 @@ class Presentational extends React.Component {
const connect = ReactRedux.connect;
// change code below this line
const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(Presentational);
const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(Presentational);
```

22
curriculum/challenges/english/03-front-end-libraries/react-and-redux/connect-redux-to-the-messages-app.english.md
View File

@@ -22,15 +22,15 @@ The code editor has all the code you've written in this section so far. The only
```yml
tests:
- text: The <code>AppWrapper</code> should render to the page.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find(''AppWrapper'').length === 1; })(), ''The <code>AppWrapper</code> should render to the page.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("AppWrapper").length === 1; })(), "The <code>AppWrapper</code> should render to the page.");'
- text: 'The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find(''Presentational'').length === 1; })(), ''The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("Presentational").length === 1; })(), "The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.");'
- text: 'The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find(''Presentational''); return ( PresentationalComponent.find(''div'').length === 1 && PresentationalComponent.find(''h2'').length === 1 && PresentationalComponent.find(''button'').length === 1 && PresentationalComponent.find(''ul'').length === 1 ); })(), ''The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); return ( PresentationalComponent.find("div").length === 1 && PresentationalComponent.find("h2").length === 1 && PresentationalComponent.find("button").length === 1 && PresentationalComponent.find("ul").length === 1 ); })(), "The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.");'
- text: The <code>Presentational</code> component should receive <code>messages</code> from the Redux store as a prop.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find(''Presentational''); const props = PresentationalComponent.props(); return Array.isArray(props.messages); })(), ''The <code>Presentational</code> component should receive <code>messages</code> from the Redux store as a prop.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); const props = PresentationalComponent.props(); return Array.isArray(props.messages); })(), "The <code>Presentational</code> component should receive <code>messages</code> from the Redux store as a prop.");'
- text: The <code>Presentational</code> component should receive the <code>submitMessage</code> action creator as a prop.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find(''Presentational''); const props = PresentationalComponent.props(); return typeof props.submitNewMessage === ''function''; })(), ''The <code>Presentational</code> component should receive the <code>submitMessage</code> action creator as a prop.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); const props = PresentationalComponent.props(); return typeof props.submitNewMessage === "function"; })(), "The <code>Presentational</code> component should receive the <code>submitMessage</code> action creator as a prop.");'
```
@@ -71,7 +71,7 @@ class Presentational extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
input: ",
messages: []
}
this.handleChange = this.handleChange.bind(this);
@@ -85,7 +85,7 @@ class Presentational extends React.Component {
submitMessage() {
const currentMessage = this.state.input;
this.setState({
input: '',
input: ",
messages: this.state.messages.concat(currentMessage)
});
}
@@ -188,11 +188,11 @@ class Presentational extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
input: ",
messages: []
}
this.handleChange = this.handleChange.bind(this);
this.submitMessage = this.submitMessage.bind(this);
this.handleChange = this.handleChange.bind(this);
this.submitMessage = this.submitMessage.bind(this);
}
handleChange(event) {
this.setState({
@@ -202,7 +202,7 @@ class Presentational extends React.Component {
submitMessage() {
const currentMessage = this.state.input;
this.setState({
input: '',
input: ",
messages: this.state.messages.concat(currentMessage)
});
}

30
curriculum/challenges/english/03-front-end-libraries/react-and-redux/extract-local-state-into-redux.english.md
View File

@@ -22,23 +22,23 @@ Once these changes are made, the app will continue to function the same, except
```yml
tests:
- text: The <code>AppWrapper</code> should render to the page.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find(''AppWrapper'').length === 1; })(), ''The <code>AppWrapper</code> should render to the page.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("AppWrapper").length === 1; })(), "The <code>AppWrapper</code> should render to the page.");'
- text: 'The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find(''Presentational'').length === 1; })(), ''The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("Presentational").length === 1; })(), "The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.");'
- text: 'The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find(''Presentational''); return ( PresentationalComponent.find(''div'').length === 1 && PresentationalComponent.find(''h2'').length === 1 && PresentationalComponent.find(''button'').length === 1 && PresentationalComponent.find(''ul'').length === 1 ); })(), ''The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); return ( PresentationalComponent.find("div").length === 1 && PresentationalComponent.find("h2").length === 1 && PresentationalComponent.find("button").length === 1 && PresentationalComponent.find("ul").length === 1 ); })(), "The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.");'
- text: The <code>Presentational</code> component should receive <code>messages</code> from the Redux store as a prop.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find(''Presentational''); const props = PresentationalComponent.props(); return Array.isArray(props.messages); })(), ''The <code>Presentational</code> component should receive <code>messages</code> from the Redux store as a prop.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); const props = PresentationalComponent.props(); return Array.isArray(props.messages); })(), "The <code>Presentational</code> component should receive <code>messages</code> from the Redux store as a prop.");'
- text: The <code>Presentational</code> component should receive the <code>submitMessage</code> action creator as a prop.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find(''Presentational''); const props = PresentationalComponent.props(); return typeof props.submitNewMessage === ''function''; })(), ''The <code>Presentational</code> component should receive the <code>submitMessage</code> action creator as a prop.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); const props = PresentationalComponent.props(); return typeof props.submitNewMessage === "function"; })(), "The <code>Presentational</code> component should receive the <code>submitMessage</code> action creator as a prop.");'
- text: 'The state of the <code>Presentational</code> component should contain one property, <code>input</code>, which is initialized to an empty string.'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalState = mockedComponent.find(''Presentational'').instance().state; return typeof PresentationalState.input === ''string'' && Object.keys(PresentationalState).length === 1; })(), ''The state of the <code>Presentational</code> component should contain one property, <code>input</code>, which is initialized to an empty string.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalState = mockedComponent.find("Presentational").instance().state; return typeof PresentationalState.input === "string" && Object.keys(PresentationalState).length === 1; })(), "The state of the <code>Presentational</code> component should contain one property, <code>input</code>, which is initialized to an empty string.");'
- text: Typing in the <code>input</code> element should update the state of the <code>Presentational</code> component.
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const testValue = ''__MOCK__INPUT__''; const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find(''input'').simulate(''change'', { target: { value: v }}); let initialInput = mockedComponent.find(''Presentational'').find(''input''); const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const updated = await changed(); const updatedInput = updated.find(''Presentational'').find(''input''); assert(initialInput.props().value === '''' && updatedInput.props().value === ''__MOCK__INPUT__'', ''Typing in the <code>input</code> element should update the state of the <code>Presentational</code> component.''); }; '
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const testValue = "__MOCK__INPUT__"; const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find("input").simulate("change", { target: { value: v }}); let initialInput = mockedComponent.find("Presentational").find("input"); const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const updated = await changed(); const updatedInput = updated.find("Presentational").find("input"); assert(initialInput.props().value === "" && updatedInput.props().value === "__MOCK__INPUT__", "Typing in the <code>input</code> element should update the state of the <code>Presentational</code> component."); }; '
- text: Dispatching the <code>submitMessage</code> on the <code>Presentational</code> component should update Redux store and clear the input in local state.
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); let beforeProps = mockedComponent.find(''Presentational'').props(); const testValue = ''__TEST__EVENT__INPUT__''; const causeChange = (c, v) => c.find(''input'').simulate(''change'', { target: { value: v }}); const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const clickButton = () => { mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => mockedComponent )}; const afterChange = await changed(); const afterChangeInput = afterChange.find(''input'').props().value; const afterClick = await clickButton(); const afterProps = mockedComponent.find(''Presentational'').props(); assert(beforeProps.messages.length === 0 && afterChangeInput === testValue && afterProps.messages.pop() === testValue && afterClick.find(''input'').props().value === '''', ''Dispatching the <code>submitMessage</code> on the <code>Presentational</code> component should update Redux store and clear the input in local state.''); }; '
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); let beforeProps = mockedComponent.find("Presentational").props(); const testValue = "__TEST__EVENT__INPUT__"; const causeChange = (c, v) => c.find("input").simulate("change", { target: { value: v }}); const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const clickButton = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent )}; const afterChange = await changed(); const afterChangeInput = afterChange.find("input").props().value; const afterClick = await clickButton(); const afterProps = mockedComponent.find("Presentational").props(); assert(beforeProps.messages.length === 0 && afterChangeInput === testValue && afterProps.messages.pop() === testValue && afterClick.find("input").props().value === "", "Dispatching the <code>submitMessage</code> on the <code>Presentational</code> component should update Redux store and clear the input in local state."); }; '
- text: The <code>Presentational</code> component should render the <code>messages</code> from the Redux store.
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); let beforeProps = mockedComponent.find(''Presentational'').props(); const testValue = ''__TEST__EVENT__INPUT__''; const causeChange = (c, v) => c.find(''input'').simulate(''change'', { target: { value: v }}); const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const clickButton = () => { mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => mockedComponent )}; const afterChange = await changed(); const afterChangeInput = afterChange.find(''input'').props().value; const afterClick = await clickButton(); const afterProps = mockedComponent.find(''Presentational'').props(); assert(beforeProps.messages.length === 0 && afterChangeInput === testValue && afterProps.messages.pop() === testValue && afterClick.find(''input'').props().value === '''' && afterClick.find(''ul'').childAt(0).text() === testValue, ''The <code>Presentational</code> component should render the <code>messages</code> from the Redux store.''); }; '
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); let beforeProps = mockedComponent.find("Presentational").props(); const testValue = "__TEST__EVENT__INPUT__"; const causeChange = (c, v) => c.find("input").simulate("change", { target: { value: v }}); const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const clickButton = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent )}; const afterChange = await changed(); const afterChangeInput = afterChange.find("input").props().value; const afterClick = await clickButton(); const afterProps = mockedComponent.find("Presentational").props(); assert(beforeProps.messages.length === 0 && afterChangeInput === testValue && afterProps.messages.pop() === testValue && afterClick.find("input").props().value === "" && afterClick.find("ul").childAt(0).text() === testValue, "The <code>Presentational</code> component should render the <code>messages</code> from the Redux store."); }; '
```
@@ -83,7 +83,7 @@ class Presentational extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
input: ",
messages: []
}
this.handleChange = this.handleChange.bind(this);
@@ -96,7 +96,7 @@ class Presentational extends React.Component {
}
submitMessage() {
this.setState({
input: '',
input: ",
messages: this.state.messages.concat(this.state.input)
});
}
@@ -199,10 +199,10 @@ class Presentational extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ''
input: "
}
this.handleChange = this.handleChange.bind(this);
this.submitMessage = this.submitMessage.bind(this);
this.handleChange = this.handleChange.bind(this);
this.submitMessage = this.submitMessage.bind(this);
}
handleChange(event) {
this.setState({
@@ -212,7 +212,7 @@ class Presentational extends React.Component {
submitMessage() {
this.props.submitNewMessage(this.state.input);
this.setState({
input: ''
input: "
});
}
render() {

12
curriculum/challenges/english/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.english.md
View File

@@ -22,17 +22,17 @@ Then create a reducer called <code>messageReducer()</code> that handles the stat
```yml
tests:
- text: The const <code>ADD</code> should exist and hold a value equal to the string <code>ADD</code>
testString: 'assert(ADD === ''ADD'', ''The const <code>ADD</code> should exist and hold a value equal to the string <code>ADD</code>'');'
testString: 'assert(ADD === "ADD", "The const <code>ADD</code> should exist and hold a value equal to the string <code>ADD</code>");'
- text: The action creator <code>addMessage</code> should return an object with <code>type</code> equal to <code>ADD</code> and message equal to the message that is passed in.
testString: 'assert((function() { const addAction = addMessage(''__TEST__MESSAGE__''); return addAction.type === ADD && addAction.message === ''__TEST__MESSAGE__''; })(), ''The action creator <code>addMessage</code> should return an object with <code>type</code> equal to <code>ADD</code> and message equal to the message that is passed in.'');'
testString: 'assert((function() { const addAction = addMessage("__TEST__MESSAGE__"); return addAction.type === ADD && addAction.message === "__TEST__MESSAGE__"; })(), "The action creator <code>addMessage</code> should return an object with <code>type</code> equal to <code>ADD</code> and message equal to the message that is passed in.");'
- text: <code>messageReducer</code> should be a function.
testString: 'assert(typeof messageReducer === ''function'', ''<code>messageReducer</code> should be a function.'');'
testString: 'assert(typeof messageReducer === "function", "<code>messageReducer</code> should be a function.");'
- text: The store should exist and have an initial state set to an empty array.
testString: 'assert((function() { const initialState = store.getState(); return typeof store === ''object'' && initialState.length === 0; })(), ''The store should exist and have an initial state set to an empty array.'');'
testString: 'assert((function() { const initialState = store.getState(); return typeof store === "object" && initialState.length === 0; })(), "The store should exist and have an initial state set to an empty array.");'
- text: Dispatching <code>addMessage</code> against the store should immutably add a new message to the array of messages held in state.
testString: 'assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(addMessage(''__A__TEST__MESSAGE'')); const addState = store.getState(); return (isFrozen && addState[0] === ''__A__TEST__MESSAGE''); })(), ''Dispatching <code>addMessage</code> against the store should immutably add a new message to the array of messages held in state.'');'
testString: 'assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(addMessage("__A__TEST__MESSAGE")); const addState = store.getState(); return (isFrozen && addState[0] === "__A__TEST__MESSAGE"); })(), "Dispatching <code>addMessage</code> against the store should immutably add a new message to the array of messages held in state.");'
- text: The <code>messageReducer</code> should return the current state if called with any other actions.
testString: 'assert((function() { const addState = store.getState(); store.dispatch({type: ''FAKE_ACTION''}); const testState = store.getState(); return (addState === testState); })(), ''The <code>messageReducer</code> should return the current state if called with any other actions.'');'
testString: 'assert((function() { const addState = store.getState(); store.dispatch({type: "FAKE_ACTION"}); const testState = store.getState(); return (addState === testState); })(), "The <code>messageReducer</code> should return the current state if called with any other actions.");'
```

8
curriculum/challenges/english/03-front-end-libraries/react-and-redux/getting-started-with-react-redux.english.md
View File

@@ -23,11 +23,11 @@ Start with a <code>DisplayMessages</code> component. Add a constructor to this c
```yml
tests:
- text: The <code>DisplayMessages</code> component should render an empty <code>div</code> element.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); return mockedComponent.find(''div'').text() === '''' })(), ''The <code>DisplayMessages</code> component should render an empty <code>div</code> element.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); return mockedComponent.find("div").text() === "" })(), "The <code>DisplayMessages</code> component should render an empty <code>div</code> element.");'
- text: 'The <code>DisplayMessages</code> constructor should be called properly with <code>super</code>, passing in <code>props</code>.'
testString: 'getUserInput => assert((function() { const noWhiteSpace = getUserInput(''index'').replace(/\s/g,''''); return noWhiteSpace.includes(''constructor(props)'') && noWhiteSpace.includes(''super(props''); })(), ''The <code>DisplayMessages</code> constructor should be called properly with <code>super</code>, passing in <code>props</code>.'');'
testString: 'getUserInput => assert((function() { const noWhiteSpace = getUserInput("index").replace(/\s/g,""); return noWhiteSpace.includes("constructor(props)") && noWhiteSpace.includes("super(props"); })(), "The <code>DisplayMessages</code> constructor should be called properly with <code>super</code>, passing in <code>props</code>.");'
- text: 'The <code>DisplayMessages</code> component should have an initial state equal to <code>{input: "", messages: []}</code>.'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const initialState = mockedComponent.state(); return typeof initialState === ''object'' && initialState.input === '''' && Array.isArray(initialState.messages) && initialState.messages.length === 0; })(), ''The <code>DisplayMessages</code> component should have an initial state equal to <code>{input: "", messages: []}</code>.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const initialState = mockedComponent.state(); return typeof initialState === "object" && initialState.input === "" && Array.isArray(initialState.messages) && initialState.messages.length === 0; })(), "The <code>DisplayMessages</code> component should have an initial state equal to <code>{input: "", messages: []}</code>.");'
```
@@ -72,7 +72,7 @@ class DisplayMessages extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
input: ",
messages: []
}
}

22
curriculum/challenges/english/03-front-end-libraries/react-and-redux/manage-state-locally-first.english.md
View File

@@ -23,17 +23,17 @@ Finally, use the <code>ul</code> to map over the array of <code>messages</code>
```yml
tests:
- text: 'The <code>DisplayMessages</code> component should initialize with a state equal to <code>{ input: "", messages: [] }</code>.'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const initialState = mockedComponent.state(); return ( typeof initialState === ''object'' && initialState.input === '''' && initialState.messages.length === 0); })(), ''The <code>DisplayMessages</code> component should initialize with a state equal to <code>{ input: "", messages: [] }</code>.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const initialState = mockedComponent.state(); return ( typeof initialState === "object" && initialState.input === "" && initialState.messages.length === 0); })(), "The <code>DisplayMessages</code> component should initialize with a state equal to <code>{ input: "", messages: [] }</code>.");'
- text: 'The <code>DisplayMessages</code> component should render a <code>div</code> containing an <code>h2</code> element, a <code>button</code> element, a <code>ul</code> element, and <code>li</code> elements as children.'
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const state = () => { mockedComponent.setState({messages: [''__TEST__MESSAGE'']}); return waitForIt(() => mockedComponent )}; const updated = await state(); assert(updated.find(''div'').length === 1 && updated.find(''h2'').length === 1 && updated.find(''button'').length === 1 && updated.find(''ul'').length === 1, ''The <code>DisplayMessages</code> component should render a <code>div</code> containing an <code>h2</code> element, a <code>button</code> element, a <code>ul</code> element, and <code>li</code> elements as children.''); }; '
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const state = () => { mockedComponent.setState({messages: ["__TEST__MESSAGE"]}); return waitForIt(() => mockedComponent )}; const updated = await state(); assert(updated.find("div").length === 1 && updated.find("h2").length === 1 && updated.find("button").length === 1 && updated.find("ul").length === 1, "The <code>DisplayMessages</code> component should render a <code>div</code> containing an <code>h2</code> element, a <code>button</code> element, a <code>ul</code> element, and <code>li</code> elements as children."); }; '
- text: The <code>input</code> element should render the value of <code>input</code> in local state.
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find(''input'').simulate(''change'', { target: { value: v }}); const testValue = ''__TEST__EVENT__INPUT''; const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const updated = await changed(); assert(updated.find(''input'').props().value === testValue, ''The <code>input</code> element should render the value of <code>input</code> in local state.''); }; '
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find("input").simulate("change", { target: { value: v }}); const testValue = "__TEST__EVENT__INPUT"; const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const updated = await changed(); assert(updated.find("input").props().value === testValue, "The <code>input</code> element should render the value of <code>input</code> in local state."); }; '
- text: Calling the method <code>handleChange</code> should update the <code>input</code> value in state to the current input.
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find(''input'').simulate(''change'', { target: { value: v }}); const initialState = mockedComponent.state(); const testMessage = ''__TEST__EVENT__MESSAGE__''; const changed = () => { causeChange(mockedComponent, testMessage); return waitForIt(() => mockedComponent )}; const afterInput = await changed(); assert(initialState.input === '''' && afterInput.state().input === ''__TEST__EVENT__MESSAGE__'', ''Calling the method <code>handleChange</code> should update the <code>input</code> value in state to the current input.''); }; '
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find("input").simulate("change", { target: { value: v }}); const initialState = mockedComponent.state(); const testMessage = "__TEST__EVENT__MESSAGE__"; const changed = () => { causeChange(mockedComponent, testMessage); return waitForIt(() => mockedComponent )}; const afterInput = await changed(); assert(initialState.input === "" && afterInput.state().input === "__TEST__EVENT__MESSAGE__", "Calling the method <code>handleChange</code> should update the <code>input</code> value in state to the current input."); }; '
- text: Clicking the <code>Add message</code> button should call the method <code>submitMessage</code> which should add the current <code>input</code> to the <code>messages</code> array in state.
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find(''input'').simulate(''change'', { target: { value: v }}); const initialState = mockedComponent.state(); const testMessage_1 = ''__FIRST__MESSAGE__''; const firstChange = () => { causeChange(mockedComponent, testMessage_1); return waitForIt(() => mockedComponent )}; const firstResult = await firstChange(); const firstSubmit = () => { mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => mockedComponent )}; const afterSubmit_1 = await firstSubmit(); const submitState_1 = afterSubmit_1.state(); const testMessage_2 = ''__SECOND__MESSAGE__''; const secondChange = () => { causeChange(mockedComponent, testMessage_2); return waitForIt(() => mockedComponent )}; const secondResult = await secondChange(); const secondSubmit = () => { mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => mockedComponent )}; const afterSubmit_2 = await secondSubmit(); const submitState_2 = afterSubmit_2.state(); assert(initialState.messages.length === 0 && submitState_1.messages.length === 1 && submitState_2.messages.length === 2 && submitState_2.messages[1] === testMessage_2, ''Clicking the <code>Add message</code> button should call the method <code>submitMessage</code> which should add the current <code>input</code> to the <code>messages</code> array in state.''); }; '
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find("input").simulate("change", { target: { value: v }}); const initialState = mockedComponent.state(); const testMessage_1 = "__FIRST__MESSAGE__"; const firstChange = () => { causeChange(mockedComponent, testMessage_1); return waitForIt(() => mockedComponent )}; const firstResult = await firstChange(); const firstSubmit = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent )}; const afterSubmit_1 = await firstSubmit(); const submitState_1 = afterSubmit_1.state(); const testMessage_2 = "__SECOND__MESSAGE__"; const secondChange = () => { causeChange(mockedComponent, testMessage_2); return waitForIt(() => mockedComponent )}; const secondResult = await secondChange(); const secondSubmit = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent )}; const afterSubmit_2 = await secondSubmit(); const submitState_2 = afterSubmit_2.state(); assert(initialState.messages.length === 0 && submitState_1.messages.length === 1 && submitState_2.messages.length === 2 && submitState_2.messages[1] === testMessage_2, "Clicking the <code>Add message</code> button should call the method <code>submitMessage</code> which should add the current <code>input</code> to the <code>messages</code> array in state."); }; '
- text: The <code>submitMessage</code> method should clear the current input.
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find(''input'').simulate(''change'', { target: { value: v }}); const initialState = mockedComponent.state(); const testMessage = ''__FIRST__MESSAGE__''; const firstChange = () => { causeChange(mockedComponent, testMessage); return waitForIt(() => mockedComponent )}; const firstResult = await firstChange(); const firstState = firstResult.state(); const firstSubmit = () => { mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => mockedComponent )}; const afterSubmit = await firstSubmit(); const submitState = afterSubmit.state(); assert(firstState.input === testMessage && submitState.input === '''', ''The <code>submitMessage</code> method should clear the current input.''); }; '
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find("input").simulate("change", { target: { value: v }}); const initialState = mockedComponent.state(); const testMessage = "__FIRST__MESSAGE__"; const firstChange = () => { causeChange(mockedComponent, testMessage); return waitForIt(() => mockedComponent )}; const firstResult = await firstChange(); const firstState = firstResult.state(); const firstSubmit = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent )}; const afterSubmit = await firstSubmit(); const submitState = afterSubmit.state(); assert(firstState.input === testMessage && submitState.input === "", "The <code>submitMessage</code> method should clear the current input."); }; '
```
@@ -49,7 +49,7 @@ class DisplayMessages extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
input: ",
messages: []
}
}
@@ -91,11 +91,11 @@ class DisplayMessages extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
input: ",
messages: []
}
this.handleChange = this.handleChange.bind(this);
this.submitMessage = this.submitMessage.bind(this);
this.handleChange = this.handleChange.bind(this);
this.submitMessage = this.submitMessage.bind(this);
}
handleChange(event) {
this.setState({
@@ -105,7 +105,7 @@ class DisplayMessages extends React.Component {
submitMessage() {
const currentMessage = this.state.input;
this.setState({
input: '',
input: ",
messages: this.state.messages.concat(currentMessage)
});
}

8
curriculum/challenges/english/03-front-end-libraries/react-and-redux/map-dispatch-to-props.english.md
View File

@@ -23,13 +23,13 @@ The code editor provides an action creator called <code>addMessage()</code>. Wri
```yml
tests:
- text: <code>addMessage</code> should return an object with keys <code>type</code> and <code>message</code>.
testString: 'assert((function() { const addMessageTest = addMessage(); return ( addMessageTest.hasOwnProperty(''type'') && addMessageTest.hasOwnProperty(''message'')); })(), ''<code>addMessage</code> should return an object with keys <code>type</code> and <code>message</code>.'');'
testString: 'assert((function() { const addMessageTest = addMessage(); return ( addMessageTest.hasOwnProperty("type") && addMessageTest.hasOwnProperty("message")); })(), "<code>addMessage</code> should return an object with keys <code>type</code> and <code>message</code>.");'
- text: <code>mapDispatchToProps</code> should be a function.
testString: 'assert(typeof mapDispatchToProps === ''function'', ''<code>mapDispatchToProps</code> should be a function.'');'
testString: 'assert(typeof mapDispatchToProps === "function", "<code>mapDispatchToProps</code> should be a function.");'
- text: <code>mapDispatchToProps</code> should return an object.
testString: 'assert(typeof mapDispatchToProps() === ''object'', ''<code>mapDispatchToProps</code> should return an object.'');'
testString: 'assert(typeof mapDispatchToProps() === "object", "<code>mapDispatchToProps</code> should return an object.");'
- text: Dispatching <code>addMessage</code> with <code>submitNewMessage</code> from <code>mapDispatchToProps</code> should return a message to the dispatch function.
testString: 'assert((function() { let testAction; const dispatch = (fn) => { testAction = fn; }; let dispatchFn = mapDispatchToProps(dispatch); dispatchFn.submitNewMessage(''__TEST__MESSAGE__''); return (testAction.type === ''ADD'' && testAction.message === ''__TEST__MESSAGE__''); })(), ''Dispatching <code>addMessage</code> with <code>submitNewMessage</code> from <code>mapDispatchToProps</code> should return a message to the dispatch function.'');'
testString: 'assert((function() { let testAction; const dispatch = (fn) => { testAction = fn; }; let dispatchFn = mapDispatchToProps(dispatch); dispatchFn.submitNewMessage("__TEST__MESSAGE__"); return (testAction.type === "ADD" && testAction.message === "__TEST__MESSAGE__"); })(), "Dispatching <code>addMessage</code> with <code>submitNewMessage</code> from <code>mapDispatchToProps</code> should return a message to the dispatch function.");'
```

8
curriculum/challenges/english/03-front-end-libraries/react-and-redux/map-state-to-props.english.md
View File

@@ -23,13 +23,13 @@ Create a function <code>mapStateToProps()</code>. This function should take <cod
```yml
tests:
- text: The const <code>state</code> should be an empty array.
testString: 'assert(Array.isArray(state) && state.length === 0, ''The const <code>state</code> should be an empty array.'');'
testString: 'assert(Array.isArray(state) && state.length === 0, "The const <code>state</code> should be an empty array.");'
- text: <code>mapStateToProps</code> should be a function.
testString: 'assert(typeof mapStateToProps === ''function'', ''<code>mapStateToProps</code> should be a function.'');'
testString: 'assert(typeof mapStateToProps === "function", "<code>mapStateToProps</code> should be a function.");'
- text: <code>mapStateToProps</code> should return an object.
testString: 'assert(typeof mapStateToProps() === ''object'', ''<code>mapStateToProps</code> should return an object.'');'
testString: 'assert(typeof mapStateToProps() === "object", "<code>mapStateToProps</code> should return an object.");'
- text: Passing an array as state to <code>mapStateToProps</code> should return this array assigned to a key of <code>messages</code>.
testString: 'assert(mapStateToProps([''messages'']).messages.pop() === ''messages'', ''Passing an array as state to <code>mapStateToProps</code> should return this array assigned to a key of <code>messages</code>.'');'
testString: 'assert(mapStateToProps(["messages"]).messages.pop() === "messages", "Passing an array as state to <code>mapStateToProps</code> should return this array assigned to a key of <code>messages</code>.");'
```

2
curriculum/challenges/english/03-front-end-libraries/react-and-redux/moving-forward-from-here.english.md
View File

@@ -24,7 +24,7 @@ Log the message <code>'Now I know React and Redux!'</code> to the console.
```yml
tests:
- text: The message <code>Now I know React and Redux!</code> should be logged to the console.
testString: 'assert(editor.getValue().includes(''console.log("Now I know React and Redux!")'') || editor.getValue().includes(''console.log(\''Now I know React and Redux!\'')''), ''The message <code>Now I know React and Redux!</code> should be logged to the console.'');'
testString: 'assert(editor.getValue().includes("console.log("Now I know React and Redux!")") || editor.getValue().includes("console.log(\"Now I know React and Redux!\")"), "The message <code>Now I know React and Redux!</code> should be logged to the console.");'
```

20
curriculum/challenges/english/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.english.md
View File

@@ -24,13 +24,13 @@ The code editor now shows all your Redux and React code from the past several ch
```yml
tests:
- text: The <code>AppWrapper</code> should render.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find(''AppWrapper'').length === 1; })(), ''The <code>AppWrapper</code> should render.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("AppWrapper").length === 1; })(), "The <code>AppWrapper</code> should render.");'
- text: 'The <code>Provider</code> wrapper component should have a prop of <code>store</code> passed to it, equal to the Redux store.'
testString: 'getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return getUserInput(''index'').replace(/\s/g,'''').includes(''<Providerstore={store}>''); })(), ''The <code>Provider</code> wrapper component should have a prop of <code>store</code> passed to it, equal to the Redux store.'');'
testString: 'getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return getUserInput("index").replace(/\s/g,"").includes("<Providerstore={store}>"); })(), "The <code>Provider</code> wrapper component should have a prop of <code>store</code> passed to it, equal to the Redux store.");'
- text: <code>DisplayMessages</code> should render as a child of <code>AppWrapper</code>.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find(''AppWrapper'').find(''DisplayMessages'').length === 1; })(), ''<code>DisplayMessages</code> should render as a child of <code>AppWrapper</code>.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("AppWrapper").find("DisplayMessages").length === 1; })(), "<code>DisplayMessages</code> should render as a child of <code>AppWrapper</code>.");'
- text: 'The <code>DisplayMessages</code> component should render an h2, input, button, and <code>ul</code> element.'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find(''div'').length === 1 && mockedComponent.find(''h2'').length === 1 && mockedComponent.find(''button'').length === 1 && mockedComponent.find(''ul'').length === 1; })(), ''The <code>DisplayMessages</code> component should render an h2, input, button, and <code>ul</code> element.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("div").length === 1 && mockedComponent.find("h2").length === 1 && mockedComponent.find("button").length === 1 && mockedComponent.find("ul").length === 1; })(), "The <code>DisplayMessages</code> component should render an h2, input, button, and <code>ul</code> element.");'
```
@@ -74,7 +74,7 @@ class DisplayMessages extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
input: ",
messages: []
}
this.handleChange = this.handleChange.bind(this);
@@ -88,7 +88,7 @@ class DisplayMessages extends React.Component {
submitMessage() {
const currentMessage = this.state.input;
this.setState({
input: '',
input: ",
messages: this.state.messages.concat(currentMessage)
});
}
@@ -171,11 +171,11 @@ class DisplayMessages extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
input: ",
messages: []
}
this.handleChange = this.handleChange.bind(this);
this.submitMessage = this.submitMessage.bind(this);
this.handleChange = this.handleChange.bind(this);
this.submitMessage = this.submitMessage.bind(this);
}
handleChange(event) {
this.setState({
@@ -185,7 +185,7 @@ class DisplayMessages extends React.Component {
submitMessage() {
const currentMessage = this.state.input;
this.setState({
input: '',
input: ",
messages: this.state.messages.concat(currentMessage)
});
}

10
curriculum/challenges/english/03-front-end-libraries/react/access-props-using-this.props.english.md
View File

@@ -22,15 +22,15 @@ Render an instance of the <code>ReturnTempPassword</code> component in the paren
```yml
tests:
- text: The <code>ResetPassword</code> component should return a single <code>div</code> element.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().type() === ''div''; })(), ''The <code>ResetPassword</code> component should return a single <code>div</code> element.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().type() === "div"; })(), "The <code>ResetPassword</code> component should return a single <code>div</code> element.");'
- text: The fourth child of <code>ResetPassword</code> should be the <code>ReturnTempPassword</code> component.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().childAt(3).name() === ''ReturnTempPassword''; })(), ''The fourth child of <code>ResetPassword</code> should be the <code>ReturnTempPassword</code> component.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().childAt(3).name() === "ReturnTempPassword"; })(), "The fourth child of <code>ResetPassword</code> should be the <code>ReturnTempPassword</code> component.");'
- text: The <code>ReturnTempPassword</code> component should have a prop called <code>tempPassword</code>.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find(''ReturnTempPassword'').props().tempPassword; })(), ''The <code>ReturnTempPassword</code> component should have a prop called <code>tempPassword</code>.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find("ReturnTempPassword").props().tempPassword; })(), "The <code>ReturnTempPassword</code> component should have a prop called <code>tempPassword</code>.");'
- text: The <code>tempPassword</code> prop of <code>ReturnTempPassword</code> should be equal to a string of at least <code>8</code> characters.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); const temp = mockedComponent.find(''ReturnTempPassword'').props().tempPassword; return typeof temp === ''string'' && temp.length >= 8; })(), ''The <code>tempPassword</code> prop of <code>ReturnTempPassword</code> should be equal to a string of at least <code>8</code> characters.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); const temp = mockedComponent.find("ReturnTempPassword").props().tempPassword; return typeof temp === "string" && temp.length >= 8; })(), "The <code>tempPassword</code> prop of <code>ReturnTempPassword</code> should be equal to a string of at least <code>8</code> characters.");'
- text: The <code>ReturnTempPassword</code> component should display the password you create as the <code>tempPassword</code> prop within <code>strong</code> tags.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find(''strong'').text() === mockedComponent.find(''ReturnTempPassword'').props().tempPassword; })(), ''The <code>ReturnTempPassword</code> component should display the password you create as the <code>tempPassword</code> prop within <code>strong</code> tags.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find("strong").text() === mockedComponent.find("ReturnTempPassword").props().tempPassword; })(), "The <code>ReturnTempPassword</code> component should display the password you create as the <code>tempPassword</code> prop within <code>strong</code> tags.");'
```

8
curriculum/challenges/english/03-front-end-libraries/react/add-comments-in-jsx.english.md
View File

@@ -22,13 +22,13 @@ The code editor has a JSX element similar to what you created in the last challe
```yml
tests:
- text: The constant <code>JSX</code> should return a <code>div</code> element.
testString: 'assert(JSX.type === ''div'', ''The constant <code>JSX</code> should return a <code>div</code> element.'');'
testString: 'assert(JSX.type === "div", "The constant <code>JSX</code> should return a <code>div</code> element.");'
- text: The <code>div</code> should contain an <code>h1</code> tag as the first element.
testString: 'assert(JSX.props.children[0].type === ''h1'', ''The <code>div</code> should contain an <code>h1</code> tag as the first element.'');'
testString: 'assert(JSX.props.children[0].type === "h1", "The <code>div</code> should contain an <code>h1</code> tag as the first element.");'
- text: The <code>div</code> should contain a <code>p</code> tag as the second element.
testString: 'assert(JSX.props.children[1].type === ''p'', ''The <code>div</code> should contain a <code>p</code> tag as the second element.'');'
testString: 'assert(JSX.props.children[1].type === "p", "The <code>div</code> should contain a <code>p</code> tag as the second element.");'
- text: The <code>JSX</code> should include a comment.
testString: 'getUserInput => assert(getUserInput(''index'').includes(''/*'') && getUserInput(''index'').includes(''*/''), ''The <code>JSX</code> should include a comment.'');'
testString: 'getUserInput => assert(getUserInput("index").includes("/*") && getUserInput("index").includes("*/"), "The <code>JSX</code> should include a comment.");'
```

12
curriculum/challenges/english/03-front-end-libraries/react/add-event-listeners.english.md
View File

@@ -23,13 +23,13 @@ Then, in <code>componentWillUnmount()</code>, remove this same event listener. Y
```yml
tests:
- text: <code>MyComponent</code> should render a <code>div</code> element which wraps an <code>h1</code> tag.
testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find(''div'').children().find(''h1'').length === 1; })(), ''<code>MyComponent</code> should render a <code>div</code> element which wraps an <code>h1</code> tag.'');'
testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("div").children().find("h1").length === 1; })(), "<code>MyComponent</code> should render a <code>div</code> element which wraps an <code>h1</code> tag.");'
- text: A keydown listener should be attached to the document in <code>componentDidMount</code>.
testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const didMountString = mockedComponent.instance().componentDidMount.toString(); return new RegExp(''document\.addEventListener(.|\n|\r)+keydown(.|\n|\r)+this\.handleKeyPress'').test(didMountString); })(), ''A keydown listener should be attached to the document in <code>componentDidMount</code>.'');'
testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const didMountString = mockedComponent.instance().componentDidMount.toString(); return new RegExp("document\.addEventListener(.|\n|\r)+keydown(.|\n|\r)+this\.handleKeyPress").test(didMountString); })(), "A keydown listener should be attached to the document in <code>componentDidMount</code>.");'
- text: The keydown listener should be removed from the document in <code>componentWillUnmount</code>.
testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const willUnmountString = mockedComponent.instance().componentWillUnmount.toString(); return new RegExp(''document\.removeEventListener(.|\n|\r)+keydown(.|\n|\r)+this\.handleKeyPress'').test(willUnmountString); })(), ''The keydown listener should be removed from the document in <code>componentWillUnmount</code>.'');'
testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const willUnmountString = mockedComponent.instance().componentWillUnmount.toString(); return new RegExp("document\.removeEventListener(.|\n|\r)+keydown(.|\n|\r)+this\.handleKeyPress").test(willUnmountString); })(), "The keydown listener should be removed from the document in <code>componentWillUnmount</code>.");'
- text: 'Once the component has mounted, pressing <code>enter</code> should update its state and the rendered <code>h1</code> tag.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const beforeState = mockedComponent.state(''message''); const beforeText = mockedComponent.find(''h1'').text(); const pressEnterKey = () => { mockedComponent.instance().handleKeyPress({ keyCode: 13 }); return waitForIt(() => { mockedComponent.update(); return { state: mockedComponent.state(''message''), text: mockedComponent.find(''h1'').text()}; });}; const afterKeyPress = await pressEnterKey(); assert(beforeState !== afterKeyPress.state && beforeText !== afterKeyPress.text, ''Once the component has mounted, pressing <code>enter</code> should update its state and the rendered <code>h1</code> tag.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const beforeState = mockedComponent.state("message"); const beforeText = mockedComponent.find("h1").text(); const pressEnterKey = () => { mockedComponent.instance().handleKeyPress({ keyCode: 13 }); return waitForIt(() => { mockedComponent.update(); return { state: mockedComponent.state("message"), text: mockedComponent.find("h1").text()}; });}; const afterKeyPress = await pressEnterKey(); assert(beforeState !== afterKeyPress.state && beforeText !== afterKeyPress.text, "Once the component has mounted, pressing <code>enter</code> should update its state and the rendered <code>h1</code> tag."); }; '
```
@@ -45,7 +45,7 @@ class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
message: ''
message: "
};
this.handleEnter = this.handleEnter.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);
@@ -101,7 +101,7 @@ class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
message: ''
message: "
};
this.handleKeyPress = this.handleKeyPress.bind(this);
this.handleEnter = this.handleEnter.bind(this); }

12
curriculum/challenges/english/03-front-end-libraries/react/add-inline-styles-in-react.english.md
View File

@@ -22,17 +22,17 @@ If you have a large set of styles, you can assign a style <code>object</code> to
```yml
tests:
- text: The <code>styles</code> variable should be an <code>object</code> with three properties.
testString: 'assert(Object.keys(styles).length === 3, ''The <code>styles</code> variable should be an <code>object</code> with three properties.'');'
testString: 'assert(Object.keys(styles).length === 3, "The <code>styles</code> variable should be an <code>object</code> with three properties.");'
- text: The <code>styles</code> variable should have a <code>color</code> property set to a value of <code>purple</code>.
testString: 'assert(styles.color === ''purple'', ''The <code>styles</code> variable should have a <code>color</code> property set to a value of <code>purple</code>.'');'
testString: 'assert(styles.color === "purple", "The <code>styles</code> variable should have a <code>color</code> property set to a value of <code>purple</code>.");'
- text: The <code>styles</code> variable should have a <code>fontSize</code> property set to a value of <code>40</code>.
testString: 'assert(styles.fontSize === 40, ''The <code>styles</code> variable should have a <code>fontSize</code> property set to a value of <code>40</code>.'');'
testString: 'assert(styles.fontSize === 40, "The <code>styles</code> variable should have a <code>fontSize</code> property set to a value of <code>40</code>.");'
- text: The <code>styles</code> variable should have a <code>border</code> property set to a value of <code>2px solid purple</code>.
testString: 'assert(styles.border === "2px solid purple", ''The <code>styles</code> variable should have a <code>border</code> property set to a value of <code>2px solid purple</code>.'');'
testString: 'assert(styles.border === "2px solid purple", "The <code>styles</code> variable should have a <code>border</code> property set to a value of <code>2px solid purple</code>.");'
- text: The component should render a <code>div</code> element.
testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === ''div''; })(), ''The component should render a <code>div</code> element.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === "div"; })(), "The component should render a <code>div</code> element.");'
- text: The <code>div</code> element should have its styles defined by the <code>styles</code> object.
testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return (mockedComponent.props().style.color === "purple" && mockedComponent.props().style.fontSize === 40 && mockedComponent.props().style.border === "2px solid purple"); })(), ''The <code>div</code> element should have its styles defined by the <code>styles</code> object.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return (mockedComponent.props().style.color === "purple" && mockedComponent.props().style.fontSize === 40 && mockedComponent.props().style.border === "2px solid purple"); })(), "The <code>div</code> element should have its styles defined by the <code>styles</code> object.");'
```

6
curriculum/challenges/english/03-front-end-libraries/react/bind-this-to-a-class-method.english.md
View File

@@ -25,11 +25,11 @@ Once you complete the above steps you should be able to click the button and see
```yml
tests:
- text: '<code>MyComponent</code> should return a <code>div</code> element which wraps two elements, a button and an <code>h1</code> element, in that order.'
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).find(''div'').length === 1 && Enzyme.mount(React.createElement(MyComponent)).find(''div'').childAt(0).type() === ''button'' && Enzyme.mount(React.createElement(MyComponent)).find(''div'').childAt(1).type() === ''h1'', ''<code>MyComponent</code> should return a <code>div</code> element which wraps two elements, a button and an <code>h1</code> element, in that order.'');'
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).find("div").length === 1 && Enzyme.mount(React.createElement(MyComponent)).find("div").childAt(0).type() === "button" && Enzyme.mount(React.createElement(MyComponent)).find("div").childAt(1).type() === "h1", "<code>MyComponent</code> should return a <code>div</code> element which wraps two elements, a button and an <code>h1</code> element, in that order.");'
- text: 'The state of <code>MyComponent</code> should initialize with the key value pair <code>{ itemCount: 0 }</code>.'
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state(''itemCount'') === 0, ''The state of <code>MyComponent</code> should initialize with the key value pair <code>{ itemCount: 0 }</code>.'');'
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("itemCount") === 0, "The state of <code>MyComponent</code> should initialize with the key value pair <code>{ itemCount: 0 }</code>.");'
- text: Clicking the <code>button</code> element should run the <code>addItem</code> method and increment the state <code>itemCount</code> by <code>1</code>.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ itemCount: 0 }); return waitForIt(() => mockedComponent.state(''itemCount'')); }; const second = () => { mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => mockedComponent.state(''itemCount'')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === 1, ''Clicking the <code>button</code> element should run the <code>addItem</code> method and increment the state <code>itemCount</code> by <code>1</code>.''); };'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ itemCount: 0 }); return waitForIt(() => mockedComponent.state("itemCount")); }; const second = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent.state("itemCount")); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === 1, "Clicking the <code>button</code> element should run the <code>addItem</code> method and increment the state <code>itemCount</code> by <code>1</code>."); };'
```

14
curriculum/challenges/english/03-front-end-libraries/react/change-inline-css-conditionally-based-on-component-state.english.md
View File

@@ -22,15 +22,15 @@ The code editor has a simple controlled input component with a styled border. Yo
```yml
tests:
- text: The <code>GateKeeper</code> component should render a <code>div</code> element.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find(''div'').length === 1; })(), ''The <code>GateKeeper</code> component should render a <code>div</code> element.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find("div").length === 1; })(), "The <code>GateKeeper</code> component should render a <code>div</code> element.");'
- text: The <code>GateKeeper</code> component should be initialized with a state key <code>input</code> set to an empty string.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.state().input === ''''; })(), ''The <code>GateKeeper</code> component should be initialized with a state key <code>input</code> set to an empty string.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.state().input === ""; })(), "The <code>GateKeeper</code> component should be initialized with a state key <code>input</code> set to an empty string.");'
- text: The <code>GateKeeper</code> component should render an <code>h3</code> tag and an <code>input</code> tag.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find(''h3'').length === 1 && mockedComponent.find(''input'').length === 1; })(), ''The <code>GateKeeper</code> component should render an <code>h3</code> tag and an <code>input</code> tag.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find("h3").length === 1 && mockedComponent.find("input").length === 1; })(), "The <code>GateKeeper</code> component should render an <code>h3</code> tag and an <code>input</code> tag.");'
- text: The <code>input</code> tag should initially have a style of <code>1px solid black</code> for the <code>border</code> property.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find(''input'').props().style.border === ''1px solid black''; })(), ''The <code>input</code> tag should initially have a style of <code>1px solid black</code> for the <code>border</code> property.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find("input").props().style.border === "1px solid black"; })(), "The <code>input</code> tag should initially have a style of <code>1px solid black</code> for the <code>border</code> property.");'
- text: The <code>input</code> tag should be styled with a border of <code>3px solid red</code> if the input value in state is longer than 15 characters.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); const simulateChange = (el, value) => el.simulate(''change'', {target: {value}}); let initialStyle = mockedComponent.find(''input'').props().style.border; const state_1 = () => { mockedComponent.setState({input: ''this is 15 char'' }); return waitForIt(() => mockedComponent.find(''input'').props().style.border )}; const state_2 = () => { mockedComponent.setState({input: ''A very long string longer than 15 characters.'' }); return waitForIt(() => mockedComponent.find(''input'').props().style.border )}; const style_1 = await state_1(); const style_2 = await state_2(); assert(initialStyle === ''1px solid black'' && style_1 === ''1px solid black'' && style_2 === ''3px solid red'', ''The <code>input</code> tag should be styled with a border of <code>3px solid red</code> if the input value in state is longer than 15 characters.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); const simulateChange = (el, value) => el.simulate("change", {target: {value}}); let initialStyle = mockedComponent.find("input").props().style.border; const state_1 = () => { mockedComponent.setState({input: "this is 15 char" }); return waitForIt(() => mockedComponent.find("input").props().style.border )}; const state_2 = () => { mockedComponent.setState({input: "A very long string longer than 15 characters." }); return waitForIt(() => mockedComponent.find("input").props().style.border )}; const style_1 = await state_1(); const style_2 = await state_2(); assert(initialStyle === "1px solid black" && style_1 === "1px solid black" && style_2 === "3px solid red", "The <code>input</code> tag should be styled with a border of <code>3px solid red</code> if the input value in state is longer than 15 characters."); }; '
```
@@ -47,7 +47,7 @@ class GateKeeper extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ''
input: "
};
this.handleChange = this.handleChange.bind(this);
}
@@ -98,7 +98,7 @@ class GateKeeper extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ''
input: "
};
this.handleChange = this.handleChange.bind(this);
}

8
curriculum/challenges/english/03-front-end-libraries/react/compose-react-components.english.md
View File

@@ -22,13 +22,13 @@ Nest two components inside of <code>Fruits</code> &mdash; first <code>NonCitrus<
```yml
tests:
- text: The <code>TypesOfFood</code> component should return a single <code>div</code> element.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === ''div''; })(), ''The <code>TypesOfFood</code> component should return a single <code>div</code> element.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === "div"; })(), "The <code>TypesOfFood</code> component should return a single <code>div</code> element.");'
- text: The <code>TypesOfFood</code> component should return the <code>Fruits</code> component.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === ''Fruits''; })(), ''The <code>TypesOfFood</code> component should return the <code>Fruits</code> component.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === "Fruits"; })(), "The <code>TypesOfFood</code> component should return the <code>Fruits</code> component.");'
- text: The <code>Fruits</code> component should return the <code>NonCitrus</code> component and the <code>Citrus</code> component.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return (mockedComponent.find(''Fruits'').children().find(''NonCitrus'').length === 1 && mockedComponent.find(''Fruits'').children().find(''Citrus'').length === 1); })(), ''The <code>Fruits</code> component should return the <code>NonCitrus</code> component and the <code>Citrus</code> component.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return (mockedComponent.find("Fruits").children().find("NonCitrus").length === 1 && mockedComponent.find("Fruits").children().find("Citrus").length === 1); })(), "The <code>Fruits</code> component should return the <code>NonCitrus</code> component and the <code>Citrus</code> component.");'
- text: The <code>TypesOfFood</code> component should return the <code>Vegetables</code> component below the <code>Fruits</code> component.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === ''Vegetables''; })(), ''The <code>TypesOfFood</code> component should return the <code>Vegetables</code> component below the <code>Fruits</code> component.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === "Vegetables"; })(), "The <code>TypesOfFood</code> component should return the <code>Vegetables</code> component below the <code>Fruits</code> component.");'
```

10
curriculum/challenges/english/03-front-end-libraries/react/create-a-complex-jsx-element.english.md
View File

@@ -31,15 +31,15 @@ An <code>h1</code>, a <code>p</code>, and an unordered list that contains three
```yml
tests:
- text: The constant <code>JSX</code> should return a <code>div</code> element.
testString: 'assert(JSX.type === ''div'', ''The constant <code>JSX</code> should return a <code>div</code> element.'');'
testString: 'assert(JSX.type === "div", "The constant <code>JSX</code> should return a <code>div</code> element.");'
- text: The <code>div</code> should contain a <code>p</code> tag as the second element.
testString: 'assert(JSX.props.children[1].type === ''p'', ''The <code>div</code> should contain a <code>p</code> tag as the second element.'');'
testString: 'assert(JSX.props.children[1].type === "p", "The <code>div</code> should contain a <code>p</code> tag as the second element.");'
- text: The <code>div</code> should contain a <code>ul</code> tag as the third element.
testString: 'assert(JSX.props.children[2].type === ''ul'', ''The <code>div</code> should contain a <code>ul</code> tag as the third element.'');'
testString: 'assert(JSX.props.children[2].type === "ul", "The <code>div</code> should contain a <code>ul</code> tag as the third element.");'
- text: The <code>div</code> should contain an <code>h1</code> tag as the first element.
testString: 'assert(JSX.props.children[0].type === ''h1'', ''The <code>div</code> should contain an <code>h1</code> tag as the first element.'');'
testString: 'assert(JSX.props.children[0].type === "h1", "The <code>div</code> should contain an <code>h1</code> tag as the first element.");'
- text: The <code>ul</code> should contain three <code>li</code> elements.
testString: 'assert(JSX.props.children[2].props.children.length === 3, ''The <code>ul</code> should contain three <code>li</code> elements.'');'
testString: 'assert(JSX.props.children[2].props.children.length === 3, "The <code>ul</code> should contain three <code>li</code> elements.");'
```

6
curriculum/challenges/english/03-front-end-libraries/react/create-a-component-with-composition.english.md
View File

@@ -25,11 +25,11 @@ In the code editor, there is a simple functional component called <code>ChildCom
```yml
tests:
- text: The React component should return a single <code>div</code> element.
testString: 'assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.type() === ''div''; })(), ''The React component should return a single <code>div</code> element.'');'
testString: 'assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.type() === "div"; })(), "The React component should return a single <code>div</code> element.");'
- text: The component should return two nested elements.
testString: 'assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.children().length === 2; })(), ''The component should return two nested elements.'');'
testString: 'assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.children().length === 2; })(), "The component should return two nested elements.");'
- text: The component should return the ChildComponent as its second child.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ParentComponent)); return mockedComponent.find(''ParentComponent'').find(''ChildComponent'').length === 1; })(), ''The component should return the ChildComponent as its second child.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ParentComponent)); return mockedComponent.find("ParentComponent").find("ChildComponent").length === 1; })(), "The component should return the ChildComponent as its second child.");'
```

18
curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-form.english.md
View File

@@ -24,15 +24,15 @@ Finally, create an <code>h1</code> tag after the <code>form</code> which renders
```yml
tests:
- text: <code>MyForm</code> should return a <code>div</code> element which contains a <code>form</code> and an <code>h1</code> tag. The form should include an <code>input</code> and a <code>button</code>.
testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyForm)); return (mockedComponent.find(''div'').children().find(''form'').length === 1 && mockedComponent.find(''div'').children().find(''h1'').length === 1 && mockedComponent.find(''form'').children().find(''input'').length === 1 && mockedComponent.find(''form'').children().find(''button'').length === 1) })(), ''<code>MyForm</code> should return a <code>div</code> element which contains a <code>form</code> and an <code>h1</code> tag. The form should include an <code>input</code> and a <code>button</code>.'');'
testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyForm)); return (mockedComponent.find("div").children().find("form").length === 1 && mockedComponent.find("div").children().find("h1").length === 1 && mockedComponent.find("form").children().find("input").length === 1 && mockedComponent.find("form").children().find("button").length === 1) })(), "<code>MyForm</code> should return a <code>div</code> element which contains a <code>form</code> and an <code>h1</code> tag. The form should include an <code>input</code> and a <code>button</code>.");'
- text: 'The state of <code>MyForm</code> should initialize with <code>input</code> and <code>submit</code> properties, both set to empty strings.'
testString: 'assert(Enzyme.mount(React.createElement(MyForm)).state(''input'') === '''' && Enzyme.mount(React.createElement(MyForm)).state(''submit'') === '''', ''The state of <code>MyForm</code> should initialize with <code>input</code> and <code>submit</code> properties, both set to empty strings.'');'
testString: 'assert(Enzyme.mount(React.createElement(MyForm)).state("input") === "" && Enzyme.mount(React.createElement(MyForm)).state("submit") === "", "The state of <code>MyForm</code> should initialize with <code>input</code> and <code>submit</code> properties, both set to empty strings.");'
- text: Typing in the <code>input</code> element should update the <code>input</code> property of the component&apos;s state.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: '''' }); return waitForIt(() => mockedComponent.state(''input''))}; const _2 = () => { mockedComponent.find(''input'').simulate(''change'', { target: { value: ''TestInput'' }}); return waitForIt(() => ({ state: mockedComponent.state(''input''), inputVal: mockedComponent.find(''input'').props().value }))}; const before = await _1(); const after = await _2(); assert(before === '''' && after.state === ''TestInput'' && after.inputVal === ''TestInput'', ''Typing in the <code>input</code> element should update the <code>input</code> property of the component&apos;s state.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: "" }); return waitForIt(() => mockedComponent.state("input"))}; const _2 = () => { mockedComponent.find("input").simulate("change", { target: { value: "TestInput" }}); return waitForIt(() => ({ state: mockedComponent.state("input"), inputVal: mockedComponent.find("input").props().value }))}; const before = await _1(); const after = await _2(); assert(before === "" && after.state === "TestInput" && after.inputVal === "TestInput", "Typing in the <code>input</code> element should update the <code>input</code> property of the component&apos;s state."); }; '
- text: Submitting the form should run <code>handleSubmit</code> which should set the <code>submit</code> property in state equal to the current input.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: '''' }); mockedComponent.setState({submit: ''''}); mockedComponent.find(''input'').simulate(''change'', {target: {value: ''SubmitInput''}}); return waitForIt(() => mockedComponent.state(''submit''))}; const _2 = () => { mockedComponent.find(''form'').simulate(''submit''); return waitForIt(() => mockedComponent.state(''submit''))}; const before = await _1(); const after = await _2(); assert(before === '''' && after === ''SubmitInput'', ''Submitting the form should run <code>handleSubmit</code> which should set the <code>submit</code> property in state equal to the current input.''); };'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: "" }); mockedComponent.setState({submit: ""}); mockedComponent.find("input").simulate("change", {target: {value: "SubmitInput"}}); return waitForIt(() => mockedComponent.state("submit"))}; const _2 = () => { mockedComponent.find("form").simulate("submit"); return waitForIt(() => mockedComponent.state("submit"))}; const before = await _1(); const after = await _2(); assert(before === "" && after === "SubmitInput", "Submitting the form should run <code>handleSubmit</code> which should set the <code>submit</code> property in state equal to the current input."); };'
- text: The <code>h1</code> header should render the value of the <code>submit</code> field from the component&apos;s state.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: '''' }); mockedComponent.setState({submit: ''''}); mockedComponent.find(''input'').simulate(''change'', {target: {value: ''TestInput''}}); return waitForIt(() => mockedComponent.find(''h1'').text())}; const _2 = () => { mockedComponent.find(''form'').simulate(''submit''); return waitForIt(() => mockedComponent.find(''h1'').text())}; const before = await _1(); const after = await _2(); assert(before === '''' && after === ''TestInput'', ''The <code>h1</code> header should render the value of the <code>submit</code> field from the component&apos;s state.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: "" }); mockedComponent.setState({submit: ""}); mockedComponent.find("input").simulate("change", {target: {value: "TestInput"}}); return waitForIt(() => mockedComponent.find("h1").text())}; const _2 = () => { mockedComponent.find("form").simulate("submit"); return waitForIt(() => mockedComponent.find("h1").text())}; const before = await _1(); const after = await _2(); assert(before === "" && after === "TestInput", "The <code>h1</code> header should render the value of the <code>submit</code> field from the component&apos;s state."); }; '
```
@@ -48,8 +48,8 @@ class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
submit: ''
input: ",
submit: "
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
@@ -105,8 +105,8 @@ class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
submit: ''
input: ",
submit: "
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);

10
curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-input.english.md
View File

@@ -25,11 +25,11 @@ Last but not least, don't forget to add the necessary bindings in the constructo
```yml
tests:
- text: <code>ControlledInput</code> should return a <code>div</code> element which contains an <code>input</code> and a <code>p</code> tag.
testString: 'assert(Enzyme.mount(React.createElement(ControlledInput)).find(''div'').children().find(''input'').length === 1 && Enzyme.mount(React.createElement(ControlledInput)).find(''div'').children().find(''p'').length === 1, ''<code>ControlledInput</code> should return a <code>div</code> element which contains an <code>input</code> and a <code>p</code> tag.'');'
testString: 'assert(Enzyme.mount(React.createElement(ControlledInput)).find("div").children().find("input").length === 1 && Enzyme.mount(React.createElement(ControlledInput)).find("div").children().find("p").length === 1, "<code>ControlledInput</code> should return a <code>div</code> element which contains an <code>input</code> and a <code>p</code> tag.");'
- text: The state of <code>ControlledInput</code> should initialize with an <code>input</code> property set to an empty string.
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(ControlledInput)).state(''input''), '''', ''The state of <code>ControlledInput</code> should initialize with an <code>input</code> property set to an empty string.'');'
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(ControlledInput)).state("input"), "", "The state of <code>ControlledInput</code> should initialize with an <code>input</code> property set to an empty string.");'
- text: 'Typing in the input element should update the state and the value of the input, and the <code>p</code> element should render this state as you type.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(ControlledInput)); const _1 = () => { mockedComponent.setState({ input: '''' }); return waitForIt(() => mockedComponent.state(''input''))}; const _2 = () => { mockedComponent.find(''input'').simulate(''change'', { target: { value: ''TestInput'' }}); return waitForIt(() => ({ state: mockedComponent.state(''input''), text: mockedComponent.find(''p'').text(), inputVal: mockedComponent.find(''input'').props().value }))}; const before = await _1(); const after = await _2(); assert(before === '''' && after.state === ''TestInput'' && after.text === ''TestInput'' && after.inputVal === ''TestInput'', ''Typing in the input element should update the state and the value of the input, and the <code>p</code> element should render this state as you type.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(ControlledInput)); const _1 = () => { mockedComponent.setState({ input: "" }); return waitForIt(() => mockedComponent.state("input"))}; const _2 = () => { mockedComponent.find("input").simulate("change", { target: { value: "TestInput" }}); return waitForIt(() => ({ state: mockedComponent.state("input"), text: mockedComponent.find("p").text(), inputVal: mockedComponent.find("input").props().value }))}; const before = await _1(); const after = await _2(); assert(before === "" && after.state === "TestInput" && after.text === "TestInput" && after.inputVal === "TestInput", "Typing in the input element should update the state and the value of the input, and the <code>p</code> element should render this state as you type."); }; '
```
@@ -45,7 +45,7 @@ class ControlledInput extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ''
input: "
};
// change code below this line
@@ -91,7 +91,7 @@ class ControlledInput extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ''
input: "
};
this.handleChange = this.handleChange.bind(this);
}

6
curriculum/challenges/english/03-front-end-libraries/react/create-a-react-component.english.md
View File

@@ -24,11 +24,11 @@ Also notice the <code>Kitten</code> class has a <code>constructor</code> defined
```yml
tests:
- text: The React component should return a <code>div</code> element.
testString: 'assert(Enzyme.shallow(React.createElement(MyComponent)).type() === ''div'', ''The React component should return a <code>div</code> element.'');'
testString: 'assert(Enzyme.shallow(React.createElement(MyComponent)).type() === "div", "The React component should return a <code>div</code> element.");'
- text: The returned <code>div</code> should render an <code>h1</code> header within it.
testString: 'assert(/<div><h1>.*<\/h1><\/div>/.test(Enzyme.shallow(React.createElement(MyComponent)).html()), ''The returned <code>div</code> should render an <code>h1</code> header within it.'');'
testString: 'assert(/<div><h1>.*<\/h1><\/div>/.test(Enzyme.shallow(React.createElement(MyComponent)).html()), "The returned <code>div</code> should render an <code>h1</code> header within it.");'
- text: The <code>h1</code> header should contain the string <code>Hello React!</code>.
testString: 'assert(Enzyme.shallow(React.createElement(MyComponent)).html() === ''<div><h1>Hello React!</h1></div>'', ''The <code>h1</code> header should contain the string <code>Hello React!</code>.'');'
testString: 'assert(Enzyme.shallow(React.createElement(MyComponent)).html() === "<div><h1>Hello React!</h1></div>", "The <code>h1</code> header should contain the string <code>Hello React!</code>.");'
```

4
curriculum/challenges/english/03-front-end-libraries/react/create-a-simple-jsx-element.english.md
View File

@@ -25,9 +25,9 @@ It's worth noting that under the hood the challenges are calling <code>ReactDOM.
```yml
tests:
- text: The constant <code>JSX</code> should return an <code>h1</code> element.
testString: 'assert(JSX.type === ''h1'', ''The constant <code>JSX</code> should return an <code>h1</code> element.'');'
testString: 'assert(JSX.type === "h1", "The constant <code>JSX</code> should return an <code>h1</code> element.");'
- text: The <code>h1</code> tag should include the text <code>Hello JSX!</code>
testString: 'assert(Enzyme.shallow(JSX).contains(''Hello JSX!''), ''The <code>h1</code> tag should include the text <code>Hello JSX!</code>'');'
testString: 'assert(Enzyme.shallow(JSX).contains("Hello JSX!"), "The <code>h1</code> tag should include the text <code>Hello JSX!</code>");'
```

8
curriculum/challenges/english/03-front-end-libraries/react/create-a-stateful-component.english.md
View File

@@ -24,13 +24,13 @@ There is a component in the code editor that is trying to render a <code>name</c
```yml
tests:
- text: <code>StatefulComponent</code> should exist and render.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find(''StatefulComponent'').length === 1; })(), ''<code>StatefulComponent</code> should exist and render.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find("StatefulComponent").length === 1; })(), "<code>StatefulComponent</code> should exist and render.");'
- text: <code>StatefulComponent</code> should render a <code>div</code> and an <code>h1</code> element.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find(''div'').length === 1 && mockedComponent.find(''h1'').length === 1; })(), ''<code>StatefulComponent</code> should render a <code>div</code> and an <code>h1</code> element.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find("div").length === 1 && mockedComponent.find("h1").length === 1; })(), "<code>StatefulComponent</code> should render a <code>div</code> and an <code>h1</code> element.");'
- text: The state of <code>StatefulComponent</code> should be initialized with a property <code>name</code> set to a string.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return ( typeof initialState === ''object'' && typeof initialState.name === ''string''); })(), ''The state of <code>StatefulComponent</code> should be initialized with a property <code>name</code> set to a string.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return ( typeof initialState === "object" && typeof initialState.name === "string"); })(), "The state of <code>StatefulComponent</code> should be initialized with a property <code>name</code> set to a string.");'
- text: The property <code>name</code> in the state of <code>StatefulComponent</code> should render in the <code>h1</code> element.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return mockedComponent.find(''h1'').text() === initialState.name; })(), ''The property <code>name</code> in the state of <code>StatefulComponent</code> should render in the <code>h1</code> element.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return mockedComponent.find("h1").text() === initialState.name; })(), "The property <code>name</code> in the state of <code>StatefulComponent</code> should render in the <code>h1</code> element.");'
```

6
curriculum/challenges/english/03-front-end-libraries/react/create-a-stateless-functional-component.english.md
View File

@@ -26,11 +26,11 @@ The code editor has a function called <code>MyComponent</code>. Complete this fu
```yml
tests:
- text: <code>MyComponent</code> should return JSX.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.length === 1; })(), ''<code>MyComponent</code> should return JSX.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.length === 1; })(), "<code>MyComponent</code> should return JSX.");'
- text: <code>MyComponent</code> should return a <code>div</code> element.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.children().type() === ''div'' })(), ''<code>MyComponent</code> should return a <code>div</code> element.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.children().type() === "div" })(), "<code>MyComponent</code> should return a <code>div</code> element.");'
- text: The <code>div</code> element should contain a string of text.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find(''div'').text() !== ''''; })(), ''The <code>div</code> element should contain a string of text.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("div").text() !== ""; })(), "The <code>div</code> element should contain a string of text.");'
```

4
curriculum/challenges/english/03-front-end-libraries/react/define-an-html-class-in-jsx.english.md
View File

@@ -24,9 +24,9 @@ Apply a class of <code>myDiv</code> to the <code>div</code> provided in the JSX
```yml
tests:
- text: The constant <code>JSX</code> should return a <code>div</code> element.
testString: 'assert.strictEqual(JSX.type, ''div'', ''The constant <code>JSX</code> should return a <code>div</code> element.'');'
testString: 'assert.strictEqual(JSX.type, "div", "The constant <code>JSX</code> should return a <code>div</code> element.");'
- text: The <code>div</code> has a class of <code>myDiv</code>.
testString: 'assert.strictEqual(JSX.props.className, ''myDiv'', ''The <code>div</code> has a class of <code>myDiv</code>.'');'
testString: 'assert.strictEqual(JSX.props.className, "myDiv", "The <code>div</code> has a class of <code>myDiv</code>.");'
```

10
curriculum/challenges/english/03-front-end-libraries/react/give-sibling-elements-a-unique-key-attribute.english.md
View File

@@ -22,15 +22,15 @@ Normally, you want to make the key something that uniquely identifies the elemen
```yml
tests:
- text: The <code>Frameworks</code> component should exist and render to the page.
testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find(''Frameworks'').length === 1, ''The <code>Frameworks</code> component should exist and render to the page.'');'
testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find("Frameworks").length === 1, "The <code>Frameworks</code> component should exist and render to the page.");'
- text: <code>Frameworks</code> should render an <code>h1</code> element.
testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find(''h1'').length === 1, ''<code>Frameworks</code> should render an <code>h1</code> element.'');'
testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find("h1").length === 1, "<code>Frameworks</code> should render an <code>h1</code> element.");'
- text: <code>Frameworks</code> should render a <code>ul</code> element.
testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find(''ul'').length === 1, ''<code>Frameworks</code> should render a <code>ul</code> element.'');'
testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find("ul").length === 1, "<code>Frameworks</code> should render a <code>ul</code> element.");'
- text: The <code>ul</code> tag should render 6 child <code>li</code> elements.
testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find(''ul'').children().length === 6 && Enzyme.mount(React.createElement(Frameworks)).find(''ul'').childAt(0).name() === ''li'' && Enzyme.mount(React.createElement(Frameworks)).find(''li'').length === 6, ''The <code>ul</code> tag should render 6 child <code>li</code> elements.'');'
testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find("ul").children().length === 6 && Enzyme.mount(React.createElement(Frameworks)).find("ul").childAt(0).name() === "li" && Enzyme.mount(React.createElement(Frameworks)).find("li").length === 6, "The <code>ul</code> tag should render 6 child <code>li</code> elements.");'
- text: Each list item element should have a unique <code>key</code> attribute.
testString: 'assert((() => { const ul = Enzyme.mount(React.createElement(Frameworks)).find(''ul''); const keys = new Set([ ul.childAt(0).key(), ul.childAt(1).key(), ul.childAt(2).key(), ul.childAt(3).key(), ul.childAt(4).key(), ul.childAt(5).key(), ]); return keys.size === 6; })(), ''Each list item element should have a unique <code>key</code> attribute.'');'
testString: 'assert((() => { const ul = Enzyme.mount(React.createElement(Frameworks)).find("ul"); const keys = new Set([ ul.childAt(0).key(), ul.childAt(1).key(), ul.childAt(2).key(), ul.childAt(3).key(), ul.childAt(4).key(), ul.childAt(5).key(), ]); return keys.size === 6; })(), "Each list item element should have a unique <code>key</code> attribute.");'
```

6
curriculum/challenges/english/03-front-end-libraries/react/introducing-inline-styles.english.md
View File

@@ -28,11 +28,11 @@ Note that you can optionally set the font size to be a number, omitting the unit
```yml
tests:
- text: The component should render a <code>div</code> element.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().type() === ''div''; })(), ''The component should render a <code>div</code> element.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().type() === "div"; })(), "The component should render a <code>div</code> element.");'
- text: The <code>div</code> element should have a color of <code>red</code>.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().props().style.color === ''red''; })(), ''The <code>div</code> element should have a color of <code>red</code>.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().props().style.color === "red"; })(), "The <code>div</code> element should have a color of <code>red</code>.");'
- text: The <code>div</code> element should have a font size of <code>72px</code>.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return (mockedComponent.children().props().style.fontSize === 72 || mockedComponent.children().props().style.fontSize === ''72'' || mockedComponent.children().props().style.fontSize === ''72px''); })(), ''The <code>div</code> element should have a font size of <code>72px</code>.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return (mockedComponent.children().props().style.fontSize === 72 || mockedComponent.children().props().style.fontSize === "72" || mockedComponent.children().props().style.fontSize === "72px"); })(), "The <code>div</code> element should have a font size of <code>72px</code>.");'
```

6
curriculum/challenges/english/03-front-end-libraries/react/learn-about-self-closing-jsx-tags.english.md
View File

@@ -25,11 +25,11 @@ Fix the errors in the code editor so that it is valid JSX and successfully trans
```yml
tests:
- text: The constant <code>JSX</code> should return a <code>div</code> element.
testString: 'assert.strictEqual(JSX.type, ''div'', ''The constant <code>JSX</code> should return a <code>div</code> element.'');'
testString: 'assert.strictEqual(JSX.type, "div", "The constant <code>JSX</code> should return a <code>div</code> element.");'
- text: The <code>div</code> should contain a <code>br</code> tag.
testString: 'assert(Enzyme.shallow(JSX).find(''br'').length === 1, ''The <code>div</code> should contain a <code>br</code> tag.'');'
testString: 'assert(Enzyme.shallow(JSX).find("br").length === 1, "The <code>div</code> should contain a <code>br</code> tag.");'
- text: The <code>div</code> should contain an <code>hr</code> tag.
testString: 'assert(Enzyme.shallow(JSX).find(''hr'').length === 1, ''The <code>div</code> should contain an <code>hr</code> tag.'');'
testString: 'assert(Enzyme.shallow(JSX).find("hr").length === 1, "The <code>div</code> should contain an <code>hr</code> tag.");'
```

10
curriculum/challenges/english/03-front-end-libraries/react/manage-updates-with-lifecycle-methods.english.md
View File

@@ -24,13 +24,13 @@ Next, add <code>componentDidUpdate()</code> in the <code>Dialog</code> component
```yml
tests:
- text: The <code>Controller</code> component should render the <code>Dialog</code> component as a child.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Controller)); return mockedComponent.find(''Controller'').length === 1 && mockedComponent.find(''Dialog'').length === 1; })(), ''The <code>Controller</code> component should render the <code>Dialog</code> component as a child.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Controller)); return mockedComponent.find("Controller").length === 1 && mockedComponent.find("Dialog").length === 1; })(), "The <code>Controller</code> component should render the <code>Dialog</code> component as a child.");'
- text: The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>this.props</code> to the console.
testString: 'assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,''''); return lifecycleChild.includes(''console.log'') && lifecycleChild.includes(''this.props'') })(), ''The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>this.props</code> to the console.'');'
testString: 'assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,""); return lifecycleChild.includes("console.log") && lifecycleChild.includes("this.props") })(), "The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>this.props</code> to the console.");'
- text: The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>nextProps</code> to the console.
testString: 'assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,''''); const nextPropsAsParameterTest = /componentWillReceiveProps(| *?= *?)(\(|)nextProps(\)|)( *?=> *?{| *?{|{)/; const nextPropsInConsoleLogTest = /console\.log\(.*?nextProps\b.*?\)/; return ( lifecycleChild.includes(''console.log'') && nextPropsInConsoleLogTest.test(lifecycleChild) && nextPropsAsParameterTest.test(lifecycleChild) ); })(), ''The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>nextProps</code> to the console.'');'
testString: 'assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,""); const nextPropsAsParameterTest = /componentWillReceiveProps(| *?= *?)(\(|)nextProps(\)|)( *?=> *?{| *?{|{)/; const nextPropsInConsoleLogTest = /console\.log\(.*?nextProps\b.*?\)/; return ( lifecycleChild.includes("console.log") && nextPropsInConsoleLogTest.test(lifecycleChild) && nextPropsAsParameterTest.test(lifecycleChild) ); })(), "The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>nextProps</code> to the console.");'
- text: The <code>Dialog</code> component should call the <code>componentDidUpdate</code> method and log a message to the console.
testString: 'assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentDidUpdate.toString().replace(/ /g,''''); return lifecycleChild.length !== ''undefined'' && lifecycleChild.includes(''console.log''); })(), ''The <code>Dialog</code> component should call the <code>componentDidUpdate</code> method and log a message to the console.'');'
testString: 'assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentDidUpdate.toString().replace(/ /g,""); return lifecycleChild.length !== "undefined" && lifecycleChild.includes("console.log"); })(), "The <code>Dialog</code> component should call the <code>componentDidUpdate</code> method and log a message to the console.");'
```
@@ -126,7 +126,7 @@ class Controller extends React.Component {
this.state = {
message: 'First Message'
};
this.changeMessage = this.changeMessage.bind(this);
this.changeMessage = this.changeMessage.bind(this);
}
changeMessage() {
this.setState({

8
curriculum/challenges/english/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.english.md
View File

@@ -22,13 +22,13 @@ The <code>shouldComponentUpdate()</code> method is added in a component called <
```yml
tests:
- text: The <code>Controller</code> component should render the <code>OnlyEvens</code> component as a child.
testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(Controller)); return mockedComponent.find(''Controller'').length === 1 && mockedComponent.find(''OnlyEvens'').length === 1; })(), ''The <code>Controller</code> component should render the <code>OnlyEvens</code> component as a child.'');'
testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(Controller)); return mockedComponent.find("Controller").length === 1 && mockedComponent.find("OnlyEvens").length === 1; })(), "The <code>Controller</code> component should render the <code>OnlyEvens</code> component as a child.");'
- text: The <code>shouldComponentUpdate</code> method should be defined on the <code>OnlyEvens</code> component.
testString: 'assert((() => { const child = React.createElement(OnlyEvens).type.prototype.shouldComponentUpdate.toString().replace(/s/g,''''); return child !== ''undefined''; })(), ''The <code>shouldComponentUpdate</code> method should be defined on the <code>OnlyEvens</code> component.'');'
testString: 'assert((() => { const child = React.createElement(OnlyEvens).type.prototype.shouldComponentUpdate.toString().replace(/s/g,""); return child !== "undefined"; })(), "The <code>shouldComponentUpdate</code> method should be defined on the <code>OnlyEvens</code> component.");'
- text: The <code>OnlyEvens</code> component should return an <code>h1</code> tag which renders the value of <code>this.props.value</code>.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Controller)); const first = () => { mockedComponent.setState({ value: 1000 }); return waitForIt(() => mockedComponent.find(''h1'').html()); }; const second = () => { mockedComponent.setState({ value: 10 }); return waitForIt(() => mockedComponent.find(''h1'').html()); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === ''<h1>1000</h1>'' && secondValue === ''<h1>10</h1>'', ''The <code>OnlyEvens</code> component should return an <code>h1</code> tag which renders the value of <code>this.props.value</code>.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Controller)); const first = () => { mockedComponent.setState({ value: 1000 }); return waitForIt(() => mockedComponent.find("h1").html()); }; const second = () => { mockedComponent.setState({ value: 10 }); return waitForIt(() => mockedComponent.find("h1").html()); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === "<h1>1000</h1>" && secondValue === "<h1>10</h1>", "The <code>OnlyEvens</code> component should return an <code>h1</code> tag which renders the value of <code>this.props.value</code>."); }; '
- text: <code>OnlyEvens</code> should re-render only when <code>nextProps.value</code> is even.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Controller)); const first = () => { mockedComponent.setState({ value: 8 }); return waitForIt(() => mockedComponent.find(''h1'').text()); }; const second = () => { mockedComponent.setState({ value: 7 }); return waitForIt(() => mockedComponent.find(''h1'').text()); }; const third = () => { mockedComponent.setState({ value: 42 }); return waitForIt(() => mockedComponent.find(''h1'').text()); }; const firstValue = await first(); const secondValue = await second(); const thirdValue = await third(); assert(firstValue === ''8'' && secondValue === ''8'' && thirdValue === ''42'', ''<code>OnlyEvens</code> should re-render only when <code>nextProps.value</code> is even.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Controller)); const first = () => { mockedComponent.setState({ value: 8 }); return waitForIt(() => mockedComponent.find("h1").text()); }; const second = () => { mockedComponent.setState({ value: 7 }); return waitForIt(() => mockedComponent.find("h1").text()); }; const third = () => { mockedComponent.setState({ value: 42 }); return waitForIt(() => mockedComponent.find("h1").text()); }; const firstValue = await first(); const secondValue = await second(); const thirdValue = await third(); assert(firstValue === "8" && secondValue === "8" && thirdValue === "42", "<code>OnlyEvens</code> should re-render only when <code>nextProps.value</code> is even."); }; '
```

6
curriculum/challenges/english/03-front-end-libraries/react/override-default-props.english.md
View File

@@ -22,11 +22,11 @@ The <code>ShoppingCart</code> component now renders a child component <code>Item
```yml
tests:
- text: The component <code>ShoppingCart</code> should render.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find(''ShoppingCart'').length === 1; })(), ''The component <code>ShoppingCart</code> should render.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find("ShoppingCart").length === 1; })(), "The component <code>ShoppingCart</code> should render.");'
- text: The component <code>Items</code> should render.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find(''Items'').length === 1; })(), ''The component <code>Items</code> should render.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find("Items").length === 1; })(), "The component <code>Items</code> should render.");'
- text: 'The <code>Items</code> component should have a prop of <code>{ quantity: 10 }</code> passed from the <code>ShoppingCart</code> component.'
testString: 'getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find(''Items'').props().quantity == 10 && getUserInput(''index'').replace(/ /g,'''').includes(''<Itemsquantity={10}/>''); })(), ''The <code>Items</code> component should have a prop of <code>{ quantity: 10 }</code> passed from the <code>ShoppingCart</code> component.'');'
testString: 'getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find("Items").props().quantity == 10 && getUserInput("index").replace(/ /g,"").includes("<Itemsquantity={10}/>"); })(), "The <code>Items</code> component should have a prop of <code>{ quantity: 10 }</code> passed from the <code>ShoppingCart</code> component.");'
```

16
curriculum/challenges/english/03-front-end-libraries/react/pass-a-callback-as-props.english.md
View File

@@ -22,15 +22,15 @@ Next, add <code>RenderInput</code> to the render method in <code>MyApp</code>, t
```yml
tests:
- text: The <code>MyApp</code> component should render.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find(''MyApp'').length === 1; })(), ''The <code>MyApp</code> component should render.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find("MyApp").length === 1; })(), "The <code>MyApp</code> component should render.");'
- text: The <code>GetInput</code> component should render.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find(''GetInput'').length === 1; })(), ''The <code>GetInput</code> component should render.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find("GetInput").length === 1; })(), "The <code>GetInput</code> component should render.");'
- text: The <code>RenderInput</code> component should render.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find(''RenderInput'').length === 1; })(), ''The <code>RenderInput</code> component should render.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find("RenderInput").length === 1; })(), "The <code>RenderInput</code> component should render.");'
- text: The <code>GetInput</code> component should receive the <code>MyApp</code> state property <code>inputValue</code> as props and contain an <code>input</code> element which modifies <code>MyApp</code> state.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({inputValue: ''''}); return waitForIt(() => mockedComponent.state() )}; const state_2 = () => { mockedComponent.find(''input'').simulate(''change'', {target: {value: ''TestInput''}}); return waitForIt(() => mockedComponent.state() )}; const updated_1 = await state_1(); const updated_2 = await state_2(); assert(updated_1.inputValue === '''' && updated_2.inputValue === ''TestInput'', ''The <code>GetInput</code> component should receive the <code>MyApp</code> state property <code>inputValue</code> as props and contain an <code>input</code> element which modifies <code>MyApp</code> state.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({inputValue: ""}); return waitForIt(() => mockedComponent.state() )}; const state_2 = () => { mockedComponent.find("input").simulate("change", {target: {value: "TestInput"}}); return waitForIt(() => mockedComponent.state() )}; const updated_1 = await state_1(); const updated_2 = await state_2(); assert(updated_1.inputValue === "" && updated_2.inputValue === "TestInput", "The <code>GetInput</code> component should receive the <code>MyApp</code> state property <code>inputValue</code> as props and contain an <code>input</code> element which modifies <code>MyApp</code> state."); }; '
- text: The <code>RenderInput</code> component should receive the <code>MyApp</code> state property <code>inputValue</code> as props.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({inputValue: ''TestName''}); return waitForIt(() => mockedComponent )}; const updated_1 = await state_1(); assert(updated_1.find(''p'').text().includes(''TestName''), ''The <code>RenderInput</code> component should receive the <code>MyApp</code> state property <code>inputValue</code> as props.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({inputValue: "TestName"}); return waitForIt(() => mockedComponent )}; const updated_1 = await state_1(); assert(updated_1.find("p").text().includes("TestName"), "The <code>RenderInput</code> component should receive the <code>MyApp</code> state property <code>inputValue</code> as props."); }; '
```
@@ -46,7 +46,7 @@ class MyApp extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: ''
inputValue: "
}
this.handleChange = this.handleChange.bind(this);
}
@@ -120,9 +120,9 @@ class MyApp extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: ''
inputValue: "
}
this.handleChange = this.handleChange.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({

14
curriculum/challenges/english/03-front-end-libraries/react/pass-an-array-as-props.english.md
View File

@@ -27,19 +27,19 @@ There are <code>List</code> and <code>ToDo</code> components in the code editor.
```yml
tests:
- text: The <code>ToDo</code> component should return a single outer <code>div</code>.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().type() === ''div''; })(), ''The <code>ToDo</code> component should return a single outer <code>div</code>.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().type() === "div"; })(), "The <code>ToDo</code> component should return a single outer <code>div</code>.");'
- text: The third child of the <code>ToDo</code> component should be an instance of the <code>List</code> component.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(2).name() === ''List''; })(), ''The third child of the <code>ToDo</code> component should be an instance of the <code>List</code> component.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(2).name() === "List"; })(), "The third child of the <code>ToDo</code> component should be an instance of the <code>List</code> component.");'
- text: The fifth child of the <code>ToDo</code> component should be an instance of the <code>List</code> component.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(4).name() === ''List''; })(), ''The fifth child of the <code>ToDo</code> component should be an instance of the <code>List</code> component.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(4).name() === "List"; })(), "The fifth child of the <code>ToDo</code> component should be an instance of the <code>List</code> component.");'
- text: Both instances of the <code>List</code> component should have a property called <code>tasks</code> and <code>tasks</code> should be of type array.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return Array.isArray(mockedComponent.find(''List'').get(0).props.tasks) && Array.isArray(mockedComponent.find(''List'').get(1).props.tasks); })(), ''Both instances of the <code>List</code> component should have a property called <code>tasks</code> and <code>tasks</code> should be of type array.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return Array.isArray(mockedComponent.find("List").get(0).props.tasks) && Array.isArray(mockedComponent.find("List").get(1).props.tasks); })(), "Both instances of the <code>List</code> component should have a property called <code>tasks</code> and <code>tasks</code> should be of type array.");'
- text: The first <code>List</code> component representing the tasks for today should have 2 or more items.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find(''List'').get(0).props.tasks.length >= 2; })(), ''The first <code>List</code> component representing the tasks for today should have 2 or more items.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find("List").get(0).props.tasks.length >= 2; })(), "The first <code>List</code> component representing the tasks for today should have 2 or more items.");'
- text: The second <code>List</code> component representing the tasks for tomorrow should have 3 or more items.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find(''List'').get(1).props.tasks.length >= 3; })(), ''The second <code>List</code> component representing the tasks for tomorrow should have 3 or more items.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find("List").get(1).props.tasks.length >= 3; })(), "The second <code>List</code> component representing the tasks for tomorrow should have 3 or more items.");'
- text: The <code>List</code> component should render the value from the <code>tasks</code> prop in the <code>p</code> tag.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find(''p'').get(0).props.children === mockedComponent.find(''List'').get(0).props.tasks.join('', '') && mockedComponent.find(''p'').get(1).props.children === mockedComponent.find(''List'').get(1).props.tasks.join('', ''); })(), ''The <code>List</code> component should render the value from the <code>tasks</code> prop in the <code>p</code> tag.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find("p").get(0).props.children === mockedComponent.find("List").get(0).props.tasks.join(", ") && mockedComponent.find("p").get(1).props.children === mockedComponent.find("List").get(1).props.tasks.join(", "); })(), "The <code>List</code> component should render the value from the <code>tasks</code> prop in the <code>p</code> tag.");'
```

10
curriculum/challenges/english/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.english.md
View File

@@ -25,15 +25,15 @@ There are <code>Calendar</code> and <code>CurrentDate</code> components in the c
```yml
tests:
- text: The <code>Calendar</code> component should return a single <code>div</code> element.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().type() === ''div''; })(), ''The <code>Calendar</code> component should return a single <code>div</code> element.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().type() === "div"; })(), "The <code>Calendar</code> component should return a single <code>div</code> element.");'
- text: The second child of the <code>Calendar</code> component should be the <code>CurrentDate</code> component.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).name() === ''CurrentDate''; })(), ''The second child of the <code>Calendar</code> component should be the <code>CurrentDate</code> component.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).name() === "CurrentDate"; })(), "The second child of the <code>Calendar</code> component should be the <code>CurrentDate</code> component.");'
- text: The <code>CurrentDate</code> component should have a prop called <code>date</code>.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).props().date })(), ''The <code>CurrentDate</code> component should have a prop called <code>date</code>.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).props().date })(), "The <code>CurrentDate</code> component should have a prop called <code>date</code>.");'
- text: The <code>date</code> prop of the <code>CurrentDate</code> should contain a string of text.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); const prop = mockedComponent.children().childAt(1).props().date; return( typeof prop === ''string'' && prop.length > 0 ); })(), ''The <code>date</code> prop of the <code>CurrentDate</code> should contain a string of text.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); const prop = mockedComponent.children().childAt(1).props().date; return( typeof prop === "string" && prop.length > 0 ); })(), "The <code>date</code> prop of the <code>CurrentDate</code> should contain a string of text.");'
- text: The <code>CurrentDate</code> component should render the value from the <code>date</code> prop in the <code>p</code> tag.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.find(''p'').html().includes(Date().substr(3)); })(), ''The <code>CurrentDate</code> component should render the value from the <code>date</code> prop in the <code>p</code> tag.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.find("p").html().includes(Date().substr(3)); })(), "The <code>CurrentDate</code> component should render the value from the <code>date</code> prop in the <code>p</code> tag.");'
```

6
curriculum/challenges/english/03-front-end-libraries/react/pass-state-as-props-to-child-components.english.md
View File

@@ -23,11 +23,11 @@ The <code>MyApp</code> component is stateful and renders a <code>Navbar</code> c
```yml
tests:
- text: The <code>MyApp</code> component should render with a <code>Navbar</code> component inside.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find(''MyApp'').length === 1 && mockedComponent.find(''Navbar'').length === 1; })(), ''The <code>MyApp</code> component should render with a <code>Navbar</code> component inside.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find("MyApp").length === 1 && mockedComponent.find("Navbar").length === 1; })(), "The <code>MyApp</code> component should render with a <code>Navbar</code> component inside.");'
- text: The <code>Navbar</code> component should receive the <code>MyApp</code> state property <code>name</code> as props.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const setState = () => { mockedComponent.setState({name: ''TestName''}); return waitForIt(() => mockedComponent.find(''Navbar'').props() )}; const navProps = await setState(); assert(navProps.name === ''TestName'', ''The <code>Navbar</code> component should receive the <code>MyApp</code> state property <code>name</code> as props.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const setState = () => { mockedComponent.setState({name: "TestName"}); return waitForIt(() => mockedComponent.find("Navbar").props() )}; const navProps = await setState(); assert(navProps.name === "TestName", "The <code>Navbar</code> component should receive the <code>MyApp</code> state property <code>name</code> as props."); }; '
- text: The <code>h1</code> element in <code>Navbar</code> should render the <code>name</code> prop.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const navH1Before = mockedComponent.find(''Navbar'').find(''h1'').text(); const setState = () => { mockedComponent.setState({name: ''TestName''}); return waitForIt(() => mockedComponent.find(''Navbar'').find(''h1'').text() )}; const navH1After = await setState(); assert(new RegExp(''TestName'').test(navH1After) && navH1After !== navH1Before, ''The <code>h1</code> element in <code>Navbar</code> should render the <code>name</code> prop.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const navH1Before = mockedComponent.find("Navbar").find("h1").text(); const setState = () => { mockedComponent.setState({name: "TestName"}); return waitForIt(() => mockedComponent.find("Navbar").find("h1").text() )}; const navH1After = await setState(); assert(new RegExp("TestName").test(navH1After) && navH1After !== navH1Before, "The <code>h1</code> element in <code>Navbar</code> should render the <code>name</code> prop."); }; '
```

8
curriculum/challenges/english/03-front-end-libraries/react/render-a-class-component-to-the-dom.english.md
View File

@@ -23,13 +23,13 @@ Both the <code>Fruits</code> and <code>Vegetables</code> components are defined
```yml
tests:
- text: The <code>TypesOfFood</code> component should return a single <code>div</code> element.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === ''div''; })(), ''The <code>TypesOfFood</code> component should return a single <code>div</code> element.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === "div"; })(), "The <code>TypesOfFood</code> component should return a single <code>div</code> element.");'
- text: The <code>TypesOfFood</code> component should render the <code>Fruits</code> component after the <code>h1</code> element.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === ''Fruits''; })(), ''The <code>TypesOfFood</code> component should render the <code>Fruits</code> component after the <code>h1</code> element.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === "Fruits"; })(), "The <code>TypesOfFood</code> component should render the <code>Fruits</code> component after the <code>h1</code> element.");'
- text: The <code>TypesOfFood</code> component should render the <code>Vegetables</code> component after <code>Fruits</code>.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === ''Vegetables''; })(), ''The <code>TypesOfFood</code> component should render the <code>Vegetables</code> component after <code>Fruits</code>.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === "Vegetables"; })(), "The <code>TypesOfFood</code> component should render the <code>Vegetables</code> component after <code>Fruits</code>.");'
- text: The <code>TypesOfFood</code> component should render to the DOM within the <code>div</code> with the id <code>challenge-node</code>.
testString: 'assert((function() { const html = document.getElementById(''challenge-node'').childNodes[0].innerHTML; return (html === ''<h1>Types of Food:</h1><div><h2>Fruits:</h2><h4>Non-Citrus:</h4><ul><li>Apples</li><li>Blueberries</li><li>Strawberries</li><li>Bananas</li></ul><h4>Citrus:</h4><ul><li>Lemon</li><li>Lime</li><li>Orange</li><li>Grapefruit</li></ul></div><div><h2>Vegetables:</h2><ul><li>Brussel Sprouts</li><li>Broccoli</li><li>Squash</li></ul></div>''); })(), ''The <code>TypesOfFood</code> component should render to the DOM within the <code>div</code> with the id <code>challenge-node</code>.'');'
testString: 'assert((function() { const html = document.getElementById("challenge-node").childNodes[0].innerHTML; return (html === "<h1>Types of Food:</h1><div><h2>Fruits:</h2><h4>Non-Citrus:</h4><ul><li>Apples</li><li>Blueberries</li><li>Strawberries</li><li>Bananas</li></ul><h4>Citrus:</h4><ul><li>Lemon</li><li>Lime</li><li>Orange</li><li>Grapefruit</li></ul></div><div><h2>Vegetables:</h2><ul><li>Brussel Sprouts</li><li>Broccoli</li><li>Squash</li></ul></div>"); })(), "The <code>TypesOfFood</code> component should render to the DOM within the <code>div</code> with the id <code>challenge-node</code>.");'
```

14
curriculum/challenges/english/03-front-end-libraries/react/render-conditionally-from-props.english.md
View File

@@ -24,19 +24,19 @@ Now you have an expression that you can use to make a randomized decision in the
```yml
tests:
- text: The <code>GameOfChance</code> component should exist and render to the page.
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find(''GameOfChance'').length, 1, ''The <code>GameOfChance</code> component should exist and render to the page.'');'
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find("GameOfChance").length, 1, "The <code>GameOfChance</code> component should exist and render to the page.");'
- text: <code>GameOfChance</code> should return a single <code>button</code> element.
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find(''button'').length, 1, ''<code>GameOfChance</code> should return a single <code>button</code> element.'');'
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find("button").length, 1, "<code>GameOfChance</code> should return a single <code>button</code> element.");'
- text: '<code>GameOfChance</code> should return a single instance of the <code>Results</code> component, which has a prop called <code>fiftyFifty</code>.'
testString: 'assert(Enzyme.mount(React.createElement(GameOfChance)).find(''Results'').length === 1 && Enzyme.mount(React.createElement(GameOfChance)).find(''Results'').props().hasOwnProperty(''fiftyFifty'') === true, ''<code>GameOfChance</code> should return a single instance of the <code>Results</code> component, which has a prop called <code>fiftyFifty</code>.'');'
testString: 'assert(Enzyme.mount(React.createElement(GameOfChance)).find("Results").length === 1 && Enzyme.mount(React.createElement(GameOfChance)).find("Results").props().hasOwnProperty("fiftyFifty") === true, "<code>GameOfChance</code> should return a single instance of the <code>Results</code> component, which has a prop called <code>fiftyFifty</code>.");'
- text: <code>GameOfChance</code> state should be initialized with a property of <code>counter</code> set to a value of <code>1</code>.
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).state().counter, 1, ''<code>GameOfChance</code> state should be initialized with a property of <code>counter</code> set to a value of <code>1</code>.'');'
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).state().counter, 1, "<code>GameOfChance</code> state should be initialized with a property of <code>counter</code> set to a value of <code>1</code>.");'
- text: 'When the <code>GameOfChance</code> component is first rendered to the DOM, a <code>p</code> element should be returned with the inner text of <code>Turn: 1</code>.'
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find(''p'').text(), ''Turn: 1'', ''When the <code>GameOfChance</code> component is first rendered to the DOM, a <code>p</code> element should be returned with the inner text of <code>Turn: 1</code>.'');'
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find("p").text(), "Turn: 1", "When the <code>GameOfChance</code> component is first rendered to the DOM, a <code>p</code> element should be returned with the inner text of <code>Turn: 1</code>.");'
- text: 'Each time the button is clicked, the counter state should be incremented by a value of 1, and a single <code>p</code> element should be rendered to the DOM that contains the text "Turn: N", where N is the value of the counter state.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(GameOfChance)); const simulate = () => { comp.find(''button'').simulate(''click''); };const result = () => ({ count: comp.state(''counter''), text: comp.find(''p'').text() });const _1 = () => { simulate(); return waitForIt(() => result())}; const _2 = () => { simulate(); return waitForIt(() => result())}; const _3 = () => { simulate(); return waitForIt(() => result())}; const _4 = () => { simulate(); return waitForIt(() => result())}; const _5 = () => { simulate(); return waitForIt(() => result())}; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); assert(_1_val.count === 2 && _1_val.text === ''Turn: 2'' && _2_val.count === 3 && _2_val.text === ''Turn: 3'' && _3_val.count === 4 && _3_val.text === ''Turn: 4'' && _4_val.count === 5 && _4_val.text === ''Turn: 5'' && _5_val.count === 6 && _5_val.text === ''Turn: 6'', ''Each time the button is clicked, the counter state should be incremented by a value of 1, and a single <code>p</code> element should be rendered to the DOM that contains the text "Turn: N", where N is the value of the counter state.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(GameOfChance)); const simulate = () => { comp.find("button").simulate("click"); };const result = () => ({ count: comp.state("counter"), text: comp.find("p").text() });const _1 = () => { simulate(); return waitForIt(() => result())}; const _2 = () => { simulate(); return waitForIt(() => result())}; const _3 = () => { simulate(); return waitForIt(() => result())}; const _4 = () => { simulate(); return waitForIt(() => result())}; const _5 = () => { simulate(); return waitForIt(() => result())}; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); assert(_1_val.count === 2 && _1_val.text === "Turn: 2" && _2_val.count === 3 && _2_val.text === "Turn: 3" && _3_val.count === 4 && _3_val.text === "Turn: 4" && _4_val.count === 5 && _4_val.text === "Turn: 5" && _5_val.count === 6 && _5_val.text === "Turn: 6", "Each time the button is clicked, the counter state should be incremented by a value of 1, and a single <code>p</code> element should be rendered to the DOM that contains the text "Turn: N", where N is the value of the counter state."); }; '
- text: 'When the <code>GameOfChance</code> component is first mounted to the DOM and each time the button is clicked thereafter, a single <code>h1</code> element should be returned that randomly renders either <code>You Win!</code> or <code>You Lose!</code>.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(GameOfChance)); const simulate = () => { comp.find(''button'').simulate(''click''); };const result = () => ({ h1: comp.find(''h1'').length, text: comp.find(''h1'').text() });const _1 = result(); const _2 = () => { simulate(); return waitForIt(() => result())}; const _3 = () => { simulate(); return waitForIt(() => result())}; const _4 = () => { simulate(); return waitForIt(() => result())}; const _5 = () => { simulate(); return waitForIt(() => result())}; const _6 = () => { simulate(); return waitForIt(() => result())}; const _7 = () => { simulate(); return waitForIt(() => result())}; const _8 = () => { simulate(); return waitForIt(() => result())}; const _9 = () => { simulate(); return waitForIt(() => result())}; const _10 = () => { simulate(); return waitForIt(() => result())}; const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const __text = new Set([_1.text, _2_val.text, _3_val.text, _4_val.text, _5_val.text, _6_val.text, _7_val.text, _8_val.text, _9_val.text, _10_val.text]); const __h1 = new Set([_1.h1, _2_val.h1, _3_val.h1, _4_val.h1, _5_val.h1, _6_val.h1, _7_val.h1, _8_val.h1, _9_val.h1, _10_val.h1]); assert(__text.size === 2 && __h1.size === 1, ''When the <code>GameOfChance</code> component is first mounted to the DOM and each time the button is clicked thereafter, a single <code>h1</code> element should be returned that randomly renders either <code>You Win!</code> or <code>You Lose!</code>.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(GameOfChance)); const simulate = () => { comp.find("button").simulate("click"); };const result = () => ({ h1: comp.find("h1").length, text: comp.find("h1").text() });const _1 = result(); const _2 = () => { simulate(); return waitForIt(() => result())}; const _3 = () => { simulate(); return waitForIt(() => result())}; const _4 = () => { simulate(); return waitForIt(() => result())}; const _5 = () => { simulate(); return waitForIt(() => result())}; const _6 = () => { simulate(); return waitForIt(() => result())}; const _7 = () => { simulate(); return waitForIt(() => result())}; const _8 = () => { simulate(); return waitForIt(() => result())}; const _9 = () => { simulate(); return waitForIt(() => result())}; const _10 = () => { simulate(); return waitForIt(() => result())}; const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const __text = new Set([_1.text, _2_val.text, _3_val.text, _4_val.text, _5_val.text, _6_val.text, _7_val.text, _8_val.text, _9_val.text, _10_val.text]); const __h1 = new Set([_1.h1, _2_val.h1, _3_val.h1, _4_val.h1, _5_val.h1, _6_val.h1, _7_val.h1, _8_val.h1, _9_val.h1, _10_val.h1]); assert(__text.size === 2 && __h1.size === 1, "When the <code>GameOfChance</code> component is first mounted to the DOM and each time the button is clicked thereafter, a single <code>h1</code> element should be returned that randomly renders either <code>You Win!</code> or <code>You Lose!</code>."); }; '
```

8
curriculum/challenges/english/03-front-end-libraries/react/render-html-elements-to-the-dom.english.md
View File

@@ -23,13 +23,13 @@ The code editor has a simple JSX component. Use the <code>ReactDOM.render()</cod
```yml
tests:
- text: The constant <code>JSX</code> should return a <code>div</code> element.
testString: 'assert(JSX.type === ''div'', ''The constant <code>JSX</code> should return a <code>div</code> element.'');'
testString: 'assert(JSX.type === "div", "The constant <code>JSX</code> should return a <code>div</code> element.");'
- text: The <code>div</code> should contain an <code>h1</code> tag as the first element.
testString: 'assert(JSX.props.children[0].type === ''h1'', ''The <code>div</code> should contain an <code>h1</code> tag as the first element.'');'
testString: 'assert(JSX.props.children[0].type === "h1", "The <code>div</code> should contain an <code>h1</code> tag as the first element.");'
- text: The <code>div</code> should contain a <code>p</code> tag as the second element.
testString: 'assert(JSX.props.children[1].type === ''p'', ''The <code>div</code> should contain a <code>p</code> tag as the second element.'');'
testString: 'assert(JSX.props.children[1].type === "p", "The <code>div</code> should contain a <code>p</code> tag as the second element.");'
- text: The provided JSX element should render to the DOM node with id <code>challenge-node</code>.
testString: 'assert(document.getElementById(''challenge-node'').childNodes[0].innerHTML === ''<h1>Hello World</h1><p>Lets render this to the DOM</p>'', ''The provided JSX element should render to the DOM node with id <code>challenge-node</code>.'');'
testString: 'assert(document.getElementById("challenge-node").childNodes[0].innerHTML === "<h1>Hello World</h1><p>Lets render this to the DOM</p>", "The provided JSX element should render to the DOM node with id <code>challenge-node</code>.");'
```

2
curriculum/challenges/english/03-front-end-libraries/react/render-react-on-the-server-with-rendertostring.english.md
View File

@@ -22,7 +22,7 @@ The <code>renderToString()</code> method is provided on <code>ReactDOMServer</co
```yml
tests:
- text: The <code>App</code> component should render to a string using <code>ReactDOMServer.renderToString</code>.
testString: 'getUserInput => assert(getUserInput(''index'').replace(/ /g,'''').includes(''ReactDOMServer.renderToString(<App/>)'') && Enzyme.mount(React.createElement(App)).children().name() === ''div'', ''The <code>App</code> component should render to a string using <code>ReactDOMServer.renderToString</code>.'');'
testString: 'getUserInput => assert(getUserInput("index").replace(/ /g,"").includes("ReactDOMServer.renderToString(<App/>)") && Enzyme.mount(React.createElement(App)).children().name() === "div", "The <code>App</code> component should render to a string using <code>ReactDOMServer.renderToString</code>.");'
```

8
curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface-another-way.english.md
View File

@@ -22,13 +22,13 @@ Next, in the return statement, render this value in an <code>h1</code> tag using
```yml
tests:
- text: <code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state(''name'') === ''freeCodeCamp'', ''<code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.'');'
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("name") === "freeCodeCamp", "<code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.");'
- text: <code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.
testString: 'assert(/<div><h1>.*<\/h1><\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()), ''<code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.'');'
testString: 'assert(/<div><h1>.*<\/h1><\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()), "<code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.");'
- text: 'The rendered <code>h1</code> tag should include a reference to <code>{name}</code>.'
testString: 'getUserInput => assert(/<h1>\n*\s*\{\s*name\s*\}\s*\n*<\/h1>/.test(getUserInput(''index'')), ''The rendered <code>h1</code> tag should include a reference to <code>{name}</code>.'');'
testString: 'getUserInput => assert(/<h1>\n*\s*\{\s*name\s*\}\s*\n*<\/h1>/.test(getUserInput("index")), "The rendered <code>h1</code> tag should include a reference to <code>{name}</code>.");'
- text: The rendered <code>h1</code> header should contain text rendered from the component&apos;s state.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: ''TestName'' }); return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === ''<div><h1>TestName</h1></div>'', ''The rendered <code>h1</code> header should contain text rendered from the component&apos;s state.''); };'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: "TestName" }); return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === "<div><h1>TestName</h1></div>", "The rendered <code>h1</code> header should contain text rendered from the component&apos;s state."); };'
```

6
curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface.english.md
View File

@@ -25,11 +25,11 @@ In the code editor, <code>MyComponent</code> is already stateful. Define an <cod
```yml
tests:
- text: <code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state(''name'') === ''freeCodeCamp'', ''<code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.'');'
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("name") === "freeCodeCamp", "<code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.");'
- text: <code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.
testString: 'assert(/<div><h1>.*<\/h1><\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()), ''<code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.'');'
testString: 'assert(/<div><h1>.*<\/h1><\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()), "<code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.");'
- text: The rendered <code>h1</code> header should contain text rendered from the component&apos;s state.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: ''TestName'' }); return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === ''<div><h1>TestName</h1></div>'', ''The rendered <code>h1</code> header should contain text rendered from the component&apos;s state.'');};'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: "TestName" }); return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === "<div><h1>TestName</h1></div>", "The rendered <code>h1</code> header should contain text rendered from the component&apos;s state.");};'
```

10
curriculum/challenges/english/03-front-end-libraries/react/render-with-an-if-else-condition.english.md
View File

@@ -22,13 +22,13 @@ MyComponent contains a <code>boolean</code> in its state which tracks whether yo
```yml
tests:
- text: <code>MyComponent</code> should exist and render.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find(''MyComponent'').length === 1; })(), ''<code>MyComponent</code> should exist and render.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("MyComponent").length === 1; })(), "<code>MyComponent</code> should exist and render.");'
- text: 'When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> should render.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: true}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(mockedComponent.find(''div'').length === 1 && mockedComponent.find(''div'').children().length === 2 && mockedComponent.find(''button'').length === 1 && mockedComponent.find(''h1'').length === 1, ''When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> should render.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: true}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(mockedComponent.find("div").length === 1 && mockedComponent.find("div").children().length === 2 && mockedComponent.find("button").length === 1 && mockedComponent.find("h1").length === 1, "When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> should render."); }; '
- text: 'When <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> should render.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: false}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(mockedComponent.find(''div'').length === 1 && mockedComponent.find(''div'').children().length === 1 && mockedComponent.find(''button'').length === 1 && mockedComponent.find(''h1'').length === 0, ''When <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> should render.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: false}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(mockedComponent.find("div").length === 1 && mockedComponent.find("div").children().length === 1 && mockedComponent.find("button").length === 1 && mockedComponent.find("h1").length === 0, "When <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> should render."); }; '
- text: The render method should use an <code>if/else</code> statement to check the condition of <code>this.state.display</code>.
testString: 'getUserInput => assert(getUserInput(''index'').includes(''if'') && getUserInput(''index'').includes(''else''), ''The render method should use an <code>if/else</code> statement to check the condition of <code>this.state.display</code>.'');'
testString: 'getUserInput => assert(getUserInput("index").includes("if") && getUserInput("index").includes("else"), "The render method should use an <code>if/else</code> statement to check the condition of <code>this.state.display</code>.");'
```
@@ -91,7 +91,7 @@ class MyComponent extends React.Component {
this.state = {
display: true
}
this.toggleDisplay = this.toggleDisplay.bind(this);
this.toggleDisplay = this.toggleDisplay.bind(this);
}
toggleDisplay() {
this.setState({

10
curriculum/challenges/english/03-front-end-libraries/react/review-using-props-with-stateless-functional-components.english.md
View File

@@ -23,15 +23,15 @@ The code editor has a <code>CampSite</code> component that renders a <code>Campe
```yml
tests:
- text: The <code>CampSite</code> component should render.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find(''CampSite'').length === 1; })(), ''The <code>CampSite</code> component should render.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find("CampSite").length === 1; })(), "The <code>CampSite</code> component should render.");'
- text: The <code>Camper</code> component should render.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find(''Camper'').length === 1; })(), ''The <code>Camper</code> component should render.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find("Camper").length === 1; })(), "The <code>Camper</code> component should render.");'
- text: The <code>Camper</code> component should include default props which assign the string <code>CamperBot</code> to the key <code>name</code>.
testString: 'getUserInput => assert((function() { const noWhiteSpace = getUserInput(''index'').replace(/\s/g, ''''); const verify1 = ''Camper.defaultProps={name:\''CamperBot\''}''; const verify2 = ''Camper.defaultProps={name:"CamperBot"}''; return (noWhiteSpace.includes(verify1) || noWhiteSpace.includes(verify2)); })(), ''The <code>Camper</code> component should include default props which assign the string <code>CamperBot</code> to the key <code>name</code>.'');'
testString: 'getUserInput => assert((function() { const noWhiteSpace = getUserInput("index").replace(/\s/g, ""); const verify1 = "Camper.defaultProps={name:\"CamperBot\"}"; const verify2 = "Camper.defaultProps={name:"CamperBot"}"; return (noWhiteSpace.includes(verify1) || noWhiteSpace.includes(verify2)); })(), "The <code>Camper</code> component should include default props which assign the string <code>CamperBot</code> to the key <code>name</code>.");'
- text: The <code>Camper</code> component should include prop types which require the <code>name</code> prop to be of type <code>string</code>.
testString: 'getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); const noWhiteSpace = getUserInput(''index'').replace(/\s/g, ''''); const verifyDefaultProps = ''Camper.propTypes={name:PropTypes.string.isRequired}''; return noWhiteSpace.includes(verifyDefaultProps); })(), ''The <code>Camper</code> component should include prop types which require the <code>name</code> prop to be of type <code>string</code>.'');'
testString: 'getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); const noWhiteSpace = getUserInput("index").replace(/\s/g, ""); const verifyDefaultProps = "Camper.propTypes={name:PropTypes.string.isRequired}"; return noWhiteSpace.includes(verifyDefaultProps); })(), "The <code>Camper</code> component should include prop types which require the <code>name</code> prop to be of type <code>string</code>.");'
- text: The <code>Camper</code> component should contain a <code>p</code> element with only the text from the <code>name</code> prop.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find(''p'').text() === mockedComponent.find(''Camper'').props().name; })(), ''The <code>Camper</code> component should contain a <code>p</code> element with only the text from the <code>name</code> prop.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find("p").text() === mockedComponent.find("Camper").props().name; })(), "The <code>Camper</code> component should contain a <code>p</code> element with only the text from the <code>name</code> prop.");'
```

8
curriculum/challenges/english/03-front-end-libraries/react/set-state-with-this.setstate.english.md
View File

@@ -24,13 +24,13 @@ Click the button and watch the rendered state update. Don't worry if you don't f
```yml
tests:
- text: 'The state of <code>MyComponent</code> should initialize with the key value pair <code>{ name: Initial State }</code>.'
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state(''name'') === ''Initial State'', ''The state of <code>MyComponent</code> should initialize with the key value pair <code>{ name: Initial State }</code>.'');'
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("name") === "Initial State", "The state of <code>MyComponent</code> should initialize with the key value pair <code>{ name: Initial State }</code>.");'
- text: <code>MyComponent</code> should render an <code>h1</code> header.
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).find(''h1'').length === 1, ''<code>MyComponent</code> should render an <code>h1</code> header.'');'
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).find("h1").length === 1, "<code>MyComponent</code> should render an <code>h1</code> header.");'
- text: The rendered <code>h1</code> header should contain text rendered from the component&apos;s state.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: ''TestName'' }); return waitForIt(() => mockedComponent.html()); }; const firstValue = await first(); assert(/<h1>TestName<\/h1>/.test(firstValue), ''The rendered <code>h1</code> header should contain text rendered from the component&apos;s state.''); };'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: "TestName" }); return waitForIt(() => mockedComponent.html()); }; const firstValue = await first(); assert(/<h1>TestName<\/h1>/.test(firstValue), "The rendered <code>h1</code> header should contain text rendered from the component&apos;s state."); };'
- text: Calling the <code>handleClick</code> method on <code>MyComponent</code> should set the name property in state to equal <code>React Rocks!</code>.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: ''Before'' }); return waitForIt(() => mockedComponent.state(''name'')); }; const second = () => { mockedComponent.instance().handleClick(); return waitForIt(() => mockedComponent.state(''name'')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === ''Before'' && secondValue === ''React Rocks!'', ''Calling the <code>handleClick</code> method on <code>MyComponent</code> should set the name property in state to equal <code>React Rocks!</code>.''); };'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: "Before" }); return waitForIt(() => mockedComponent.state("name")); }; const second = () => { mockedComponent.instance().handleClick(); return waitForIt(() => mockedComponent.state("name")); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === "Before" && secondValue === "React Rocks!", "Calling the <code>handleClick</code> method on <code>MyComponent</code> should set the name property in state to equal <code>React Rocks!</code>."); };'
```

10
curriculum/challenges/english/03-front-end-libraries/react/use--for-a-more-concise-conditional.english.md
View File

@@ -23,13 +23,13 @@ Solve the previous example again, so the <code>h1</code> only renders if <code>d
```yml
tests:
- text: <code>MyComponent</code> should exist and render.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find(''MyComponent'').length; })(), ''<code>MyComponent</code> should exist and render.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("MyComponent").length; })(), "<code>MyComponent</code> should exist and render.");'
- text: 'When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> should render.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: true}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(updated.find(''div'').length === 1 && updated.find(''div'').children().length === 2 && updated.find(''button'').length === 1 && updated.find(''h1'').length === 1, ''When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> should render.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: true}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(updated.find("div").length === 1 && updated.find("div").children().length === 2 && updated.find("button").length === 1 && updated.find("h1").length === 1, "When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> should render."); }; '
- text: 'When <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> should render.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: false}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(updated.find(''div'').length === 1 && updated.find(''div'').children().length === 1 && updated.find(''button'').length === 1 && updated.find(''h1'').length === 0, ''When <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> should render.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: false}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(updated.find("div").length === 1 && updated.find("div").children().length === 1 && updated.find("button").length === 1 && updated.find("h1").length === 0, "When <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> should render."); }; '
- text: The render method should use the && logical operator to check the condition of this.state.display.
testString: 'getUserInput => assert(getUserInput(''index'').includes(''&&''), ''The render method should use the && logical operator to check the condition of this.state.display.'');'
testString: 'getUserInput => assert(getUserInput("index").includes("&&"), "The render method should use the && logical operator to check the condition of this.state.display.");'
```
@@ -91,7 +91,7 @@ class MyComponent extends React.Component {
this.state = {
display: true
}
this.toggleDisplay = this.toggleDisplay.bind(this);
this.toggleDisplay = this.toggleDisplay.bind(this);
}
toggleDisplay() {
this.setState({

24
curriculum/challenges/english/03-front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering.english.md
View File

@@ -23,19 +23,19 @@ Once the component is rendering information to the page, users should have a way
```yml
tests:
- text: The <code>CheckUserAge</code> component should render with a single <code>input</code> element and a single <code>button</code> element.
testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).find(''div'').find(''input'').length === 1 && Enzyme.mount(React.createElement(CheckUserAge)).find(''div'').find(''button'').length === 1, ''The <code>CheckUserAge</code> component should render with a single <code>input</code> element and a single <code>button</code> element.'');'
testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).find("div").find("input").length === 1 && Enzyme.mount(React.createElement(CheckUserAge)).find("div").find("button").length === 1, "The <code>CheckUserAge</code> component should render with a single <code>input</code> element and a single <code>button</code> element.");'
- text: 'The <code>CheckUserAge</code> component&apos;s state should be initialized with a property of <code>userAge</code> and a property of <code>input</code>, both set to a value of an empty string.'
testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).state().input === '''' && Enzyme.mount(React.createElement(CheckUserAge)).state().userAge === '''', ''The <code>CheckUserAge</code> component&apos;s state should be initialized with a property of <code>userAge</code> and a property of <code>input</code>, both set to a value of an empty string.'');'
testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).state().input === "" && Enzyme.mount(React.createElement(CheckUserAge)).state().userAge === "", "The <code>CheckUserAge</code> component&apos;s state should be initialized with a property of <code>userAge</code> and a property of <code>input</code>, both set to a value of an empty string.");'
- text: 'When the <code>CheckUserAge</code> component is first rendered to the DOM, the <code>button</code>&apos;s inner text should be Submit.'
testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).find(''button'').text() === ''Submit'', ''When the <code>CheckUserAge</code> component is first rendered to the DOM, the <code>button</code>&apos;s inner text should be Submit.'');'
testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).find("button").text() === "Submit", "When the <code>CheckUserAge</code> component is first rendered to the DOM, the <code>button</code>&apos;s inner text should be Submit.");'
- text: 'When a number of less than 18 is entered into the <code>input</code> element and the <code>button</code> is clicked, the <code>button</code>&apos;s inner text should read <code>You Shall Not Pass</code>.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find(''button'').text(); const enter3AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''3'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const enter17AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''17'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const userAge3 = await enter3AndClickButton(); const userAge17 = await enter17AndClickButton(); assert(initialButton === ''Submit'' && userAge3 === ''You Shall Not Pass'' && userAge17 === ''You Shall Not Pass'', ''When a number of less than 18 is entered into the <code>input</code> element and the <code>button</code> is clicked, the <code>button</code>&apos;s inner text should read <code>You Shall Not Pass</code>.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find("button").text(); const enter3AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "3" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const enter17AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "17" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const userAge3 = await enter3AndClickButton(); const userAge17 = await enter17AndClickButton(); assert(initialButton === "Submit" && userAge3 === "You Shall Not Pass" && userAge17 === "You Shall Not Pass", "When a number of less than 18 is entered into the <code>input</code> element and the <code>button</code> is clicked, the <code>button</code>&apos;s inner text should read <code>You Shall Not Pass</code>."); }; '
- text: 'When a number greater than or equal to 18 is entered into the <code>input</code> element and the <code>button</code> is clicked, the <code>button</code>&apos;s inner text should read <code>You May Enter</code>.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find(''button'').text(); const enter18AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''18'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const enter35AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''35'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const userAge18 = await enter18AndClickButton(); const userAge35 = await enter35AndClickButton(); assert(initialButton === ''Submit'' && userAge18 === ''You May Enter'' && userAge35 === ''You May Enter'', ''When a number greater than or equal to 18 is entered into the <code>input</code> element and the <code>button</code> is clicked, the <code>button</code>&apos;s inner text should read <code>You May Enter</code>.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find("button").text(); const enter18AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "18" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const enter35AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "35" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const userAge18 = await enter18AndClickButton(); const userAge35 = await enter35AndClickButton(); assert(initialButton === "Submit" && userAge18 === "You May Enter" && userAge35 === "You May Enter", "When a number greater than or equal to 18 is entered into the <code>input</code> element and the <code>button</code> is clicked, the <code>button</code>&apos;s inner text should read <code>You May Enter</code>."); }; '
- text: 'Once a number has been submitted, and the value of the <code>input</code> is once again changed, the <code>button</code> should return to reading <code>Submit</code>.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const enter18AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''18'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const changeInputDontClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''5'' }}); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const enter10AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''10'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const userAge18 = await enter18AndClickButton(); const changeInput1 = await changeInputDontClickButton(); const userAge10 = await enter10AndClickButton(); const changeInput2 = await changeInputDontClickButton(); assert(userAge18 === ''You May Enter'' && changeInput1 === ''Submit'' && userAge10 === ''You Shall Not Pass'' && changeInput2 === ''Submit'', ''Once a number has been submitted, and the value of the <code>input</code> is once again changed, the <code>button</code> should return to reading <code>Submit</code>.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const enter18AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "18" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const changeInputDontClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "5" }}); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const enter10AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "10" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const userAge18 = await enter18AndClickButton(); const changeInput1 = await changeInputDontClickButton(); const userAge10 = await enter10AndClickButton(); const changeInput2 = await changeInputDontClickButton(); assert(userAge18 === "You May Enter" && changeInput1 === "Submit" && userAge10 === "You Shall Not Pass" && changeInput2 === "Submit", "Once a number has been submitted, and the value of the <code>input</code> is once again changed, the <code>button</code> should return to reading <code>Submit</code>."); }; '
- text: Your code should not contain any <code>if/else</code> statements.
testString: 'assert(new RegExp(/(\s|;)if(\s|\()/).test(Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()) === false, ''Your code should not contain any <code>if/else</code> statements.'');'
testString: 'assert(new RegExp(/(\s|;)if(\s|\()/).test(Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()) === false, "Your code should not contain any <code>if/else</code> statements.");'
```
@@ -65,7 +65,7 @@ class CheckUserAge extends React.Component {
handleChange(e) {
this.setState({
input: e.target.value,
userAge: ''
userAge: "
});
}
submit() {
@@ -122,8 +122,8 @@ class CheckUserAge extends React.Component {
constructor(props) {
super(props);
this.state = {
userAge: '',
input: ''
userAge: ",
input: "
}
this.submit = this.submit.bind(this);
this.handleChange = this.handleChange.bind(this);
@@ -131,7 +131,7 @@ class CheckUserAge extends React.Component {
handleChange(e) {
this.setState({
input: e.target.value,
userAge: ''
userAge: "
});
}
submit() {
@@ -152,7 +152,7 @@ class CheckUserAge extends React.Component {
value={this.state.input}
onChange={this.handleChange} /><br />
{
this.state.userAge === '' ?
this.state.userAge === " ?
buttonOne :
this.state.userAge >= 18 ?
buttonTwo :

28
curriculum/challenges/english/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.english.md
View File

@@ -22,17 +22,17 @@ In the code provided, the <code>render</code> method has an array that contains
```yml
tests:
- text: The <code>MagicEightBall</code> component should exist and should render to the page.
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).find(''MagicEightBall'').length, 1, ''The <code>MagicEightBall</code> component should exist and should render to the page.'');'
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).find("MagicEightBall").length, 1, "The <code>MagicEightBall</code> component should exist and should render to the page.");'
- text: <code>MagicEightBall</code>&apos;s first child should be an <code>input</code> element.
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(0).name(), ''input'', ''<code>MagicEightBall</code>&apos;s first child should be an <code>input</code> element.'');'
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(0).name(), "input", "<code>MagicEightBall</code>&apos;s first child should be an <code>input</code> element.");'
- text: <code>MagicEightBall</code>&apos;s third child should be a <code>button</code> element.
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(2).name(), ''button'', ''<code>MagicEightBall</code>&apos;s third child should be a <code>button</code> element.'');'
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(2).name(), "button", "<code>MagicEightBall</code>&apos;s third child should be a <code>button</code> element.");'
- text: <code>MagicEightBall</code>&apos;s state should be initialized with a property of <code>userInput</code> and a property of <code>randomIndex</code> both set to a value of an empty string.
testString: 'assert(Enzyme.mount(React.createElement(MagicEightBall)).state(''randomIndex'') === '''' && Enzyme.mount(React.createElement(MagicEightBall)).state(''userInput'') === '''', ''<code>MagicEightBall</code>&apos;s state should be initialized with a property of <code>userInput</code> and a property of <code>randomIndex</code> both set to a value of an empty string.'');'
testString: 'assert(Enzyme.mount(React.createElement(MagicEightBall)).state("randomIndex") === "" && Enzyme.mount(React.createElement(MagicEightBall)).state("userInput") === "", "<code>MagicEightBall</code>&apos;s state should be initialized with a property of <code>userInput</code> and a property of <code>randomIndex</code> both set to a value of an empty string.");'
- text: 'When <code>MagicEightBall</code> is first mounted to the DOM, it should return an empty <code>p</code> element.'
testString: 'assert(Enzyme.mount(React.createElement(MagicEightBall)).find(''p'').length === 1 && Enzyme.mount(React.createElement(MagicEightBall)).find(''p'').text() === '''', ''When <code>MagicEightBall</code> is first mounted to the DOM, it should return an empty <code>p</code> element.'');'
testString: 'assert(Enzyme.mount(React.createElement(MagicEightBall)).find("p").length === 1 && Enzyme.mount(React.createElement(MagicEightBall)).find("p").text() === "", "When <code>MagicEightBall</code> is first mounted to the DOM, it should return an empty <code>p</code> element.");'
- text: 'When text is entered into the <code>input</code> element and the button is clicked, the <code>MagicEightBall</code> component should return a <code>p</code> element that contains a random element from the <code>possibleAnswers</code> array.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MagicEightBall)); const simulate = () => { comp.find(''input'').simulate(''change'', { target: { value: ''test?'' }}); comp.find(''button'').simulate(''click''); }; const result = () => comp.find(''p'').text(); const _1 = () => { simulate(); return waitForIt(() => result()) }; const _2 = () => { simulate(); return waitForIt(() => result()) }; const _3 = () => { simulate(); return waitForIt(() => result()) }; const _4 = () => { simulate(); return waitForIt(() => result()) }; const _5 = () => { simulate(); return waitForIt(() => result()) }; const _6 = () => { simulate(); return waitForIt(() => result()) }; const _7 = () => { simulate(); return waitForIt(() => result()) }; const _8 = () => { simulate(); return waitForIt(() => result()) }; const _9 = () => { simulate(); return waitForIt(() => result()) }; const _10 = () => { simulate(); return waitForIt(() => result()) }; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const actualAnswers = [_1_val, _2_val, _3_val, _4_val, _5_val, _6_val, _7_val, _8_val, _9_val, _10_val]; const hasIndex = actualAnswers.filter((answer, i) => possibleAnswers.indexOf(answer) !== -1); const notAllEqual = new Set(actualAnswers); assert(notAllEqual.size > 1 && hasIndex.length === 10, ''When text is entered into the <code>input</code> element and the button is clicked, the <code>MagicEightBall</code> component should return a <code>p</code> element that contains a random element from the <code>possibleAnswers</code> array.'');}'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MagicEightBall)); const simulate = () => { comp.find("input").simulate("change", { target: { value: "test?" }}); comp.find("button").simulate("click"); }; const result = () => comp.find("p").text(); const _1 = () => { simulate(); return waitForIt(() => result()) }; const _2 = () => { simulate(); return waitForIt(() => result()) }; const _3 = () => { simulate(); return waitForIt(() => result()) }; const _4 = () => { simulate(); return waitForIt(() => result()) }; const _5 = () => { simulate(); return waitForIt(() => result()) }; const _6 = () => { simulate(); return waitForIt(() => result()) }; const _7 = () => { simulate(); return waitForIt(() => result()) }; const _8 = () => { simulate(); return waitForIt(() => result()) }; const _9 = () => { simulate(); return waitForIt(() => result()) }; const _10 = () => { simulate(); return waitForIt(() => result()) }; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const actualAnswers = [_1_val, _2_val, _3_val, _4_val, _5_val, _6_val, _7_val, _8_val, _9_val, _10_val]; const hasIndex = actualAnswers.filter((answer, i) => possibleAnswers.indexOf(answer) !== -1); const notAllEqual = new Set(actualAnswers); assert(notAllEqual.size > 1 && hasIndex.length === 10, "When text is entered into the <code>input</code> element and the button is clicked, the <code>MagicEightBall</code> component should return a <code>p</code> element that contains a random element from the <code>possibleAnswers</code> array.");}'
```
@@ -53,8 +53,8 @@ class MagicEightBall extends React.Component {
constructor(props) {
super(props);
this.state = {
userInput: '',
randomIndex: ''
userInput: ",
randomIndex: "
}
this.ask = this.ask.bind(this);
this.handleChange = this.handleChange.bind(this);
@@ -63,7 +63,7 @@ class MagicEightBall extends React.Component {
if (this.state.userInput) {
this.setState({
randomIndex: Math.floor(Math.random() * 20),
userInput: ''
userInput: "
});
}
}
@@ -76,7 +76,7 @@ class MagicEightBall extends React.Component {
const possibleAnswers = [
'It is certain',
'It is decidedly so',
'Without a doubt',
'Without a doubt',
'Yes, definitely',
'You may rely on it',
'As I see it, yes',
@@ -88,7 +88,7 @@ class MagicEightBall extends React.Component {
'Better not tell you now',
'Cannot predict now',
'Concentrate and ask again',
'Don\'t count on it',
'Don\'t count on it',
'My reply is no',
'My sources say no',
'Most likely',
@@ -146,8 +146,8 @@ class MagicEightBall extends React.Component {
constructor(props) {
super(props);
this.state = {
userInput: '',
randomIndex: ''
userInput: ",
randomIndex: "
}
this.ask = this.ask.bind(this);
this.handleChange = this.handleChange.bind(this);
@@ -156,7 +156,7 @@ class MagicEightBall extends React.Component {
if (this.state.userInput) {
this.setState({
randomIndex: Math.floor(Math.random() * 20),
userInput: ''
userInput: "
});
}
}

10
curriculum/challenges/english/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.english.md
View File

@@ -22,15 +22,15 @@ In the code editor, <code>MyComponent</code>&apos;s <code>state</code> is initia
```yml
tests:
- text: <code>MyComponent</code> should exist and render to the page.
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).find(''MyComponent'').length, 1, ''<code>MyComponent</code> should exist and render to the page.'');'
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).find("MyComponent").length, 1, "<code>MyComponent</code> should exist and render to the page.");'
- text: <code>MyComponent</code>&apos;s state should be initialized to an array of six users.")
testString: 'assert(Array.isArray(Enzyme.mount(React.createElement(MyComponent)).state(''users'')) === true && Enzyme.mount(React.createElement(MyComponent)).state(''users'').length === 6, "<code>MyComponent</code>&apos;s state should be initialized to an array of six users.");'
testString: 'assert(Array.isArray(Enzyme.mount(React.createElement(MyComponent)).state("users")) === true && Enzyme.mount(React.createElement(MyComponent)).state("users").length === 6, "<code>MyComponent</code>&apos;s state should be initialized to an array of six users.");'
- text: '<code>MyComponent</code> should return a <code>div</code>, an <code>h1</code>, and then an unordered list containing <code>li</code> elements for every user whose online status is set to <code>true</code>.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MyComponent)); const users = (bool) => ({users:[ { username: ''Jeff'', online: bool }, { username: ''Alan'', online: bool }, { username: ''Mary'', online: bool }, { username: ''Jim'', online: bool }, { username: ''Laura'', online: bool } ]}); const result = () => comp.find(''li'').length; const _1 = result(); const _2 = () => { comp.setState(users(true)); return waitForIt(() => result()) }; const _3 = () => { comp.setState(users(false)); return waitForIt(() => result()) }; const _4 = () => { comp.setState({ users: [] }); return waitForIt(() => result()) }; const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); assert(comp.find(''div'').length === 1 && comp.find(''h1'').length === 1 && comp.find(''ul'').length === 1 && _1 === 4 && _2_val === 5 && _3_val === 0 && _4_val === 0, ''<code>MyComponent</code> should return a <code>div</code>, an <code>h1</code>, and then an unordered list containing <code>li</code> elements for every user whose online status is set to <code>true</code>.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MyComponent)); const users = (bool) => ({users:[ { username: "Jeff", online: bool }, { username: "Alan", online: bool }, { username: "Mary", online: bool }, { username: "Jim", online: bool }, { username: "Laura", online: bool } ]}); const result = () => comp.find("li").length; const _1 = result(); const _2 = () => { comp.setState(users(true)); return waitForIt(() => result()) }; const _3 = () => { comp.setState(users(false)); return waitForIt(() => result()) }; const _4 = () => { comp.setState({ users: [] }); return waitForIt(() => result()) }; const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); assert(comp.find("div").length === 1 && comp.find("h1").length === 1 && comp.find("ul").length === 1 && _1 === 4 && _2_val === 5 && _3_val === 0 && _4_val === 0, "<code>MyComponent</code> should return a <code>div</code>, an <code>h1</code>, and then an unordered list containing <code>li</code> elements for every user whose online status is set to <code>true</code>."); }; '
- text: <code>MyComponent</code> should render <code>li</code> elements that contain the username of each online user.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MyComponent)); const users = (bool) => ({users:[ { username: ''Jeff'', online: bool }, { username: ''Alan'', online: bool }, { username: ''Mary'', online: bool }, { username: ''Jim'', online: bool }, { username: ''Laura'', online: bool } ]}); const ul = () => { comp.setState(users(true)); return waitForIt(() => comp.find(''ul'').html()) }; const html = await ul(); assert(html === ''<ul><li>Jeff</li><li>Alan</li><li>Mary</li><li>Jim</li><li>Laura</li></ul>'', ''<code>MyComponent</code> should render <code>li</code> elements that contain the username of each online user.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MyComponent)); const users = (bool) => ({users:[ { username: "Jeff", online: bool }, { username: "Alan", online: bool }, { username: "Mary", online: bool }, { username: "Jim", online: bool }, { username: "Laura", online: bool } ]}); const ul = () => { comp.setState(users(true)); return waitForIt(() => comp.find("ul").html()) }; const html = await ul(); assert(html === "<ul><li>Jeff</li><li>Alan</li><li>Mary</li><li>Jim</li><li>Laura</li></ul>", "<code>MyComponent</code> should render <code>li</code> elements that contain the username of each online user."); }; '
- text: Each list item element should have a unique <code>key</code> attribute.
testString: 'assert((() => { const ul = Enzyme.mount(React.createElement(MyComponent)).find(''ul''); console.log(ul.debug()); const keys = new Set([ ul.childAt(0).key(), ul.childAt(1).key(), ul.childAt(2).key(), ul.childAt(3).key() ]); return keys.size === 4; })(), ''Each list item element should have a unique <code>key</code> attribute.'');'
testString: 'assert((() => { const ul = Enzyme.mount(React.createElement(MyComponent)).find("ul"); console.log(ul.debug()); const keys = new Set([ ul.childAt(0).key(), ul.childAt(1).key(), ul.childAt(2).key(), ul.childAt(3).key() ]); return keys.size === 4; })(), "Each list item element should have a unique <code>key</code> attribute.");'
```

16
curriculum/challenges/english/03-front-end-libraries/react/use-array.map-to-dynamically-render-elements.english.md
View File

@@ -8,7 +8,7 @@ isRequired: false
## Description
<section id='description'>
Conditional rendering is useful, but you may need your components to render an unknown number of elements. Often in reactive programming, a programmer has no way to know what the state of an application is until runtime, because so much depends on a user's interaction with that program. Programmers need to write their code to correctly handle that unknown state ahead of time. Using <code>Array.map()</code> in React illustrates this concept.
For example, you create a simple "To Do List" app. As the programmer, you have no way of knowing how many items a user might have on their list. You need to set up your component to <em><strong>dynamically render</strong></em> the correct number of list elements long before someone using the program decides that today is laundry day.
For example, you create a simple "To Do List" app. As the programmer, you have no way of knowing how many items a user might have on their list. You need to set up your component to <em><strong>dynamically render</strong></em> the correct number of list elements long before someone using the program decides that today is laundry day.
</section>
## Instructions
@@ -24,17 +24,17 @@ Inside the <code>constructor</code>, create a <code>this.state</code> object and
```yml
tests:
- text: The MyToDoList component should exist and render to the page.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find(''MyToDoList'').length === 1; })(), ''The MyToDoList component should exist and render to the page.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find("MyToDoList").length === 1; })(), "The MyToDoList component should exist and render to the page.");'
- text: The first child of <code>MyToDoList</code> should be a <code>textarea</code> element.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find(''MyToDoList'').children().childAt(0).type() === ''textarea''; })(), ''The first child of <code>MyToDoList</code> should be a <code>textarea</code> element.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find("MyToDoList").children().childAt(0).type() === "textarea"; })(), "The first child of <code>MyToDoList</code> should be a <code>textarea</code> element.");'
- text: The third child of <code>MyToDoList</code> should be a <code>button</code> element.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find(''MyToDoList'').children().childAt(2).type() === ''button''; })(), ''The third child of <code>MyToDoList</code> should be a <code>button</code> element.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find("MyToDoList").children().childAt(2).type() === "button"; })(), "The third child of <code>MyToDoList</code> should be a <code>button</code> element.");'
- text: The state of <code>MyToDoList</code> should be initialized with <code>toDoList</code> as an empty array.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return Array.isArray(initialState.toDoList) === true && initialState.toDoList.length === 0; })(), ''The state of <code>MyToDoList</code> should be initialized with <code>toDoList</code> as an empty array.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return Array.isArray(initialState.toDoList) === true && initialState.toDoList.length === 0; })(), "The state of <code>MyToDoList</code> should be initialized with <code>toDoList</code> as an empty array.");'
- text: The state of <code>MyToDoList</code> should be initialized with <code>userInput</code> as an empty string.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return typeof initialState.userInput === ''string'' && initialState.userInput.length === 0; })(), ''The state of <code>MyToDoList</code> should be initialized with <code>userInput</code> as an empty string.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return typeof initialState.userInput === "string" && initialState.userInput.length === 0; })(), "The state of <code>MyToDoList</code> should be initialized with <code>userInput</code> as an empty string.");'
- text: 'When the <code>Create List</code> button is clicked, the <code>MyToDoList</code> component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the <code>textarea</code> element.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const simulateChange = (el, value) => el.simulate(''change'', {target: {value}}); const state_1 = () => { return waitForIt(() => mockedComponent.find(''ul'').find(''li''))}; const setInput = () => { return waitForIt(() => simulateChange(mockedComponent.find(''textarea''), "testA, testB, testC"))}; const click = () => { return waitForIt(() => mockedComponent.find(''button'').simulate(''click''))}; const state_2 = () => { return waitForIt(() => { const nodes = mockedComponent.find(''ul'').find(''li''); return { nodes, text: nodes.reduce((t, n) => t + n.text(), '''') }; })}; const setInput_2 = () => { return waitForIt(() => simulateChange(mockedComponent.find(''textarea''), "t1, t2, t3, t4, t5, t6"))}; const click_1 = () => { return waitForIt(() => mockedComponent.find(''button'').simulate(''click''))}; const state_3 = () => { return waitForIt(() => { const nodes = mockedComponent.find(''ul'').find(''li''); return { nodes, text: nodes.reduce((t, n) => t + n.text(), '''') }; })}; const awaited_state_1 = await state_1(); const awaited_setInput = await setInput(); const awaited_click = await click(); const awaited_state_2 = await state_2(); const awaited_setInput_2 = await setInput_2(); const awaited_click_1 = await click_1(); const awaited_state_3 = await state_3(); assert(awaited_state_1.length === 0 && awaited_state_2.nodes.length === 3 && awaited_state_3.nodes.length === 6 && awaited_state_2.text === ''testA testB testC'' && awaited_state_3.text === ''t1 t2 t3 t4 t5 t6'', ''When the <code>Create List</code> button is clicked, the <code>MyToDoList</code> component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the <code>textarea</code> element.''); }; '
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const simulateChange = (el, value) => el.simulate("change", {target: {value}}); const state_1 = () => { return waitForIt(() => mockedComponent.find("ul").find("li"))}; const setInput = () => { return waitForIt(() => simulateChange(mockedComponent.find("textarea"), "testA, testB, testC"))}; const click = () => { return waitForIt(() => mockedComponent.find("button").simulate("click"))}; const state_2 = () => { return waitForIt(() => { const nodes = mockedComponent.find("ul").find("li"); return { nodes, text: nodes.reduce((t, n) => t + n.text(), "") }; })}; const setInput_2 = () => { return waitForIt(() => simulateChange(mockedComponent.find("textarea"), "t1, t2, t3, t4, t5, t6"))}; const click_1 = () => { return waitForIt(() => mockedComponent.find("button").simulate("click"))}; const state_3 = () => { return waitForIt(() => { const nodes = mockedComponent.find("ul").find("li"); return { nodes, text: nodes.reduce((t, n) => t + n.text(), "") }; })}; const awaited_state_1 = await state_1(); const awaited_setInput = await setInput(); const awaited_click = await click(); const awaited_state_2 = await state_2(); const awaited_setInput_2 = await setInput_2(); const awaited_click_1 = await click_1(); const awaited_state_3 = await state_3(); assert(awaited_state_1.length === 0 && awaited_state_2.nodes.length === 3 && awaited_state_3.nodes.length === 6 && awaited_state_2.text === "testA testB testC" && awaited_state_3.text === "t1 t2 t3 t4 t5 t6", "When the <code>Create List</code> button is clicked, the <code>MyToDoList</code> component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the <code>textarea</code> element."); }; '
```
@@ -120,7 +120,7 @@ class MyToDoList extends React.Component {
super(props);
this.state = {
toDoList: [],
userInput: ''
userInput: "
}
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);

4
curriculum/challenges/english/03-front-end-libraries/react/use-default-props.english.md
View File

@@ -21,9 +21,9 @@ The code editor shows a <code>ShoppingCart</code> component. Define default prop
```yml
tests:
- text: The <code>ShoppingCart</code> component should render.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find(''ShoppingCart'').length === 1; })(), ''The <code>ShoppingCart</code> component should render.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find("ShoppingCart").length === 1; })(), "The <code>ShoppingCart</code> component should render.");'
- text: 'The <code>ShoppingCart</code> component should have a default prop of <code>{ items: 0 }</code>.'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); mockedComponent.setProps({items: undefined}); return mockedComponent.find(''ShoppingCart'').props().items === 0; })(), ''The <code>ShoppingCart</code> component should have a default prop of <code>{ items: 0 }</code>.'');'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); mockedComponent.setProps({items: undefined}); return mockedComponent.find("ShoppingCart").props().items === 0; })(), "The <code>ShoppingCart</code> component should have a default prop of <code>{ items: 0 }</code>.");'
```

Some files were not shown because too many files have changed in this diff Show More