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

fix(curriculum): Remove unnecessary assert message argument from English Front End Libraries challenges - 01 (#36408)

Browse Source 
* fix: removed assert msg argument

* fix: removed more assert msg args

* fix: removed assert msg missed

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: correct indentation
This commit is contained in:
Randell Dawson 2019-07-24 23:53:37 -07:00 committed by Oliver Eyton-Williams
parent a5ab6f2d5f
commit a53d992613
64 changed files with 230 additions and 230 deletions
Show Stats 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);
- 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);
- 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);
```

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);
- 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);
```

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

@ -21,9 +21,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);
- 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);
```

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()));
- 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);
- 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"));
- 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);
```

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"));
- 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"));
```

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"));
- 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"));
- 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);
```

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));
- 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"));
- 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);
```

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);
- 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);
- 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"));
- 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"));
- 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()));
```

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));
- 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"));
- 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);
- 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);
```

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);
```

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);
- 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);
- 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);
- 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);
```

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);
- 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);
- 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);
```

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"));
- 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"));
- 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));
- 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"));
- 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);
```

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);
- 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);
- 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);
- 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);
- 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);
- 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);
```

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"));
- 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);
- 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);
```

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()));
- 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()));
- 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()));
- 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()));
- 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()));
- 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()));
```

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);
- 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()));
- 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()));
- 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);
```

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);
- 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);
- 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);
- 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);
```

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);
- 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"));
- 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"));
- 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");
- 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);
```

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

@ -23,11 +23,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);
- 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);
- 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);
```

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);
- 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);
- 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);
```

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);
- 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);
```

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"));
- 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);
- 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"));
- 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);
```

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"));
- 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"));
- 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);
```

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);
- 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));
- 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"));
- 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);
```

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*<!--/));
- 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));
- 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));
- 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);
```

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"));
- 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);
- 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);
```

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);
- 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);
- 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);
- 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);
```

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()));
- 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);
- 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"));
- 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);
```

10
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()));
- 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');
- 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()));
- 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));
- 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\(/));
```

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)');
- 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));
```

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);
- 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);
- 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));
```

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));
- 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));
- 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));
- 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));
- 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);
```

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));
- 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"));
- 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));
```

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));
- 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);
```

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);
- 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));
- 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));
```

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"));
- text: Only two elements should bounce.
testString: assert($(".animated.bounce").length === 2, 'Only two elements should bounce.');
testString: assert($(".animated.bounce").length === 2);
- 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));
- 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));
```

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"));
- 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));
```

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"));
- 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));
- 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));
```

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'));
- 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));
- 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));
```

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

@ -31,7 +31,7 @@ tests:
- text: Only use jQuery to add these classes to the element.
testString: 'assert(!code.match(/class.*animated/g));'
- 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));
```

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)');
- 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));
- 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));
```

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');
- 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));
- 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));
- 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));
```

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));
- 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));
- 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));
- 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);
- 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'));
- text: Only use jQuery to add these classes to the element.
testString: 'assert(!code.match(/class.*animated/g));'
testString: assert(!code.match(/class.*animated/g));
```

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);
- 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);
- 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));
```

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'));
```

6
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; })());
- 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__'; })());
- 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'; })());
```

10
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; })());
- 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; })());
- 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 ); })());
- 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); })());
- 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'; })());
```

18
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; })());
- 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; })());
- 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 ); })());
- 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); })());
- 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'; })());
- 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; })());
- 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__''); }; '
- 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 === ''''); }; '
- 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); }; '
```

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');
- 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__'; })());
- 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');
- 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; })());
- 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'); })());
- 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); })());'
```

6
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() === '' })());
- 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'); })());
- 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; })());"
```

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

@ -23,19 +23,19 @@ 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); })());'
- 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 && updated.find(''li'').length > 0, ''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 && updated.find(''li'').length > 0); }; '
- text: <code>.map</code> was used on the <code>messages</code> array.
testString: assert(code.match(/this\.state\.messages\.map/g));
- 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); }; '
- 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__''); }; '
- 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); }; '
- 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 === ''''); }; '
```

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

@ -31,13 +31,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')); })());
- 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');
- 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');
- 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__'); })());
```

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);
- 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');
- 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');
- 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');
```

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: getUserInput => assert(/console.log\(("|')Now I know React and Redux!\1\)/.test(getUserInput('index')), 'The message <code>Now I know React and Redux!</code> should be logged to the console.');
testString: getUserInput => assert(/console.log\(("|')Now I know React and Redux!\1\)/.test(getUserInput('index')));
```

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

@ -30,13 +30,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; })());
- 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}>'); })());
- 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; })());
- 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; })());
```

12
curriculum/challenges/english/03-front-end-libraries/sass/create-reusable-css-with-mixins.english.md
View File

@ -52,17 +52,17 @@ Write a <code>mixin</code> for <code>border-radius</code> and give it a <code>$r
```yml
tests:
- text: Your code should declare a <code>mixin</code> named <code>border-radius</code> which has a parameter named <code>$radius</code>.
testString: assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi), 'Your code should declare a <code>mixin</code> named <code>border-radius</code> which has a parameter named <code>$radius</code>.');
testString: assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
- text: Your code should include the <code>-webkit-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.
testString: assert(code.match(/-webkit-border-radius:\s*?\$radius;/gi), 'Your code should include the <code>-webkit-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.');
testString: assert(code.match(/-webkit-border-radius:\s*?\$radius;/gi));
- text: Your code should include the <code>-moz-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.
testString: assert(code.match(/-moz-border-radius:\s*?\$radius;/gi), 'Your code should include the <code>-moz-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.');
testString: assert(code.match(/-moz-border-radius:\s*?\$radius;/gi));
- text: Your code should include the <code>-ms-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.
testString: assert(code.match(/-ms-border-radius:\s*?\$radius;/gi), 'Your code should include the <code>-ms-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.');
testString: assert(code.match(/-ms-border-radius:\s*?\$radius;/gi));
- text: Your code should include the general <code>border-radius</code> rule that uses the <code>$radius</code> parameter.
testString: assert(code.match(/border-radius:\s*?\$radius;/gi).length == 4, 'Your code should include the general <code>border-radius</code> rule that uses the <code>$radius</code> parameter.');
testString: assert(code.match(/border-radius:\s*?\$radius;/gi).length == 4);
- text: Your code should call the <code>border-radius mixin</code> using the <code>@include</code> keyword, setting it to 15px.
testString: assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\);/gi), 'Your code should call the <code>border-radius mixin</code> using the <code>@include</code> keyword, setting it to 15px.');
testString: assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\);/gi));
```

4
curriculum/challenges/english/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.english.md
View File

@ -43,9 +43,9 @@ Make a class <code>.info-important</code> that extends <code>.info</code> and al
```yml
tests:
- text: Your <code>info-important</code> class should have a <code>background-color</code> set to <code>magenta</code>.
testString: assert(code.match(/\.info-important\s*?{[\s\S]*background-color\s*?:\s*?magenta\s*?;[\s\S]*}/gi), 'Your <code>info-important</code> class should have a <code>background-color</code> set to <code>magenta</code>.');
testString: assert(code.match(/\.info-important\s*?{[\s\S]*background-color\s*?:\s*?magenta\s*?;[\s\S]*}/gi));
- text: Your <code>info-important</code> class should use <code>@extend</code> to inherit the styling from the <code>info</code> class.
testString: assert(code.match(/\.info-important\s*?{[\s\S]*@extend\s*?.info\s*?;[\s\S]*/gi), 'Your <code>info-important</code> class should use <code>@extend</code> to inherit the styling from the <code>info</code> class.');
testString: assert(code.match(/\.info-important\s*?{[\s\S]*@extend\s*?.info\s*?;[\s\S]*/gi));
```

2
curriculum/challenges/english/03-front-end-libraries/sass/nest-css-with-sass.english.md
View File

@ -53,7 +53,7 @@ Use the <code>nesting</code> technique shown above to re-organize the CSS rules
```yml
tests:
- text: Your code should re-organize the CSS rules so the <code>h1</code> and <code>p</code> are nested in the <code>.blog-post</code> parent element.
testString: assert(code.match(/\.blog-post\s*?{\s*?h1\s*?{\s*?text-align:\s*?center;\s*?color:\s*?blue;\s*?}\s*?p\s*?{\s*?font-size:\s*?20px;\s*?}\s*?}/gi), 'Your code should re-organize the CSS rules so the <code>h1</code> and <code>p</code> are nested in the <code>.blog-post</code> parent element.');
testString: assert(code.match(/\.blog-post\s*?{\s*?h1\s*?{\s*?text-align:\s*?center;\s*?color:\s*?blue;\s*?}\s*?p\s*?{\s*?font-size:\s*?20px;\s*?}\s*?}/gi));
```

2
curriculum/challenges/english/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.english.md
View File

@ -30,7 +30,7 @@ Write an <code>@import</code> statement to import a <code>partial</code> named <
```yml
tests:
- text: Your code should use the <code>@import</code> directive, and should not include the underscore in the file name.
testString: assert(code.match(/@import\s+?('|")variables\1/gi), 'Your code should use the <code>@import</code> directive, and should not include the underscore in the file name.');
testString: assert(code.match(/@import\s+?('|")variables\1/gi));
```

8
curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.english.md
View File

@ -35,13 +35,13 @@ Create a variable <code>$text-color</code> and set it to red. Then change the va
```yml
tests:
- text: Your code should have a Sass variable declared for <code>$text-color</code> with a value of red.
testString: assert(code.match(/\$text-color:\s*?red;/g), 'Your code should have a Sass variable declared for <code>$text-color</code> with a value of red.');
testString: assert(code.match(/\$text-color:\s*?red;/g));
- text: Your code should use the <code>$text-color</code> variable to change the <code>color</code> for the <code>.blog-post</code> and <code>h2</code> items.
testString: assert(code.match(/color:\s*?\$text-color;/g), 'Your code should use the <code>$text-color</code> variable to change the <code>color</code> for the <code>.blog-post</code> and <code>h2</code> items.');
testString: assert(code.match(/color:\s*?\$text-color;/g));
- text: Your <code>.blog-post</code> element should have a </code>color</code> of red.
testString: assert($('.blog-post').css('color') == 'rgb(255, 0, 0)', 'Your <code>.blog-post</code> element should have a </code>color</code> of red.');
testString: assert($('.blog-post').css('color') == 'rgb(255, 0, 0)');
- text: Your <code>h2</code> elements should have a </code>color</code> of red.
testString: assert($('h2').css('color') == 'rgb(255, 0, 0)', 'Your <code>h2</code> elements should have a </code>color</code> of red.');
testString: assert($('h2').css('color') == 'rgb(255, 0, 0)');
```

8
curriculum/challenges/english/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.english.md
View File

@ -58,13 +58,13 @@ Each class should set the <code>background-color</code> the respective color.
```yml
tests:
- text: Your code should use the <code>@each</code> directive.
testString: assert(code.match(/@each /g), 'Your code should use the <code>@each</code> directive.');
testString: assert(code.match(/@each /g));
- text: Your <code>.blue-bg</code> class should have a <code>background-color</code> of blue.
testString: assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)', 'Your <code>.blue-bg</code> class should have a <code>background-color</code> of blue.');
testString: assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)');
- text: Your <code>.black-bg</code> class should have a <code>background-color</code> of black.
testString: assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)', 'Your <code>.black-bg</code> class should have a <code>background-color</code> of black.');
testString: assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)');
- text: Your <code>.red-bg</code> class should have a <code>background-color</code> of red.
testString: assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)', 'Your <code>.red-bg</code> class should have a <code>background-color</code> of red.');
testString: assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)');
```

12
curriculum/challenges/english/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.english.md
View File

@ -49,17 +49,17 @@ It should create 5 classes called <code>.text-1</code> to <code>.text-5</code> w
```yml
tests:
- text: Your code should use the <code>@for</code> directive.
testString: assert(code.match(/@for /g), 'Your code should use the <code>@for</code> directive.');
testString: assert(code.match(/@for /g));
- text: Your <code>.text-1</code> class should have a <code>font-size</code> of 10px.
testString: assert($('.text-1').css('font-size') == '10px', 'Your <code>.text-1</code> class should have a <code>font-size</code> of 10px.');
testString: assert($('.text-1').css('font-size') == '10px');
- text: Your <code>.text-2</code> class should have a <code>font-size</code> of 20px.
testString: assert($('.text-2').css('font-size') == '20px', 'Your <code>.text-2</code> class should have a <code>font-size</code> of 20px.');
testString: assert($('.text-2').css('font-size') == '20px');
- text: Your <code>.text-3</code> class should have a <code>font-size</code> of 30px.
testString: assert($('.text-3').css('font-size') == '30px', 'Your <code>.text-3</code> class should have a <code>font-size</code> of 30px.');
testString: assert($('.text-3').css('font-size') == '30px');
- text: Your <code>.text-4</code> class should have a <code>font-size</code> of 40px.
testString: assert($('.text-4').css('font-size') == '40px', 'Your <code>.text-4</code> class should have a <code>font-size</code> of 40px.');
testString: assert($('.text-4').css('font-size') == '40px');
- text: Your <code>.text-5</code> class should have a <code>font-size</code> of 50px.
testString: assert($('.text-5').css('font-size') == '50px', 'Your <code>.text-5</code> class should have a <code>font-size</code> of 50px.');
testString: assert($('.text-5').css('font-size') == '50px');
```

10
curriculum/challenges/english/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.english.md
View File

@ -56,15 +56,15 @@ If <code>$val</code> is not <code>light</code>, <code>medium</code>, or <code>he
```yml
tests:
- text: Your code should declare a <code>mixin</code> named <code>border-stroke</code> which has a parameter named <code>$val</code>.
testString: assert(code.match(/@mixin\s+?border-stroke\s*?\(\s*?\$val\s*?\)\s*?{/gi), 'Your code should declare a <code>mixin</code> named <code>border-stroke</code> which has a parameter named <code>$val</code>.');
testString: assert(code.match(/@mixin\s+?border-stroke\s*?\(\s*?\$val\s*?\)\s*?{/gi));
- text: Your <code>mixin</code> should have an <code>@if</code> statement to check if <code>$val</code> is light, and to set the <code>border</code> to 1px solid black.
testString: assert(code.match(/@if\s+?\$val\s*?===?\s*?light\s*?{\s*?border\s*?:\s*?1px\s+?solid\s+?black\s*?;\s*?}/gi), 'Your <code>mixin</code> should have an <code>@if</code> statement to check if <code>$val</code> is light, and to set the <code>border</code> to 1px solid black.');
testString: assert(code.match(/@if\s+?\$val\s*?===?\s*?light\s*?{\s*?border\s*?:\s*?1px\s+?solid\s+?black\s*?;\s*?}/gi));
- text: Your <code>mixin</code> should have an <code>@else if</code> statement to check if <code>$val</code> is medium, and to set the <code>border</code> to 3px solid black.
testString: assert(code.match(/@else\s+?if\s+?\$val\s*?===?\s*?medium\s*?{\s*?border\s*?:\s*?3px\s+?solid\s+?black\s*?;\s*?}/gi), 'Your <code>mixin</code> should have an <code>@else if</code> statement to check if <code>$val</code> is medium, and to set the <code>border</code> to 3px solid black.');
testString: assert(code.match(/@else\s+?if\s+?\$val\s*?===?\s*?medium\s*?{\s*?border\s*?:\s*?3px\s+?solid\s+?black\s*?;\s*?}/gi));
- text: Your <code>mixin</code> should have an <code>@else if</code> statement to check if <code>$val</code> is heavy, and to set the <code>border</code> to 6px solid black.
testString: assert(code.match(/@else\s+?if\s+?\$val\s*?===?\s*?heavy\s*?{\s*?border\s*?:\s*?6px\s+?solid\s+?black\s*?;\s*?}/gi), 'Your <code>mixin</code> should have an <code>@else if</code> statement to check if <code>$val</code> is heavy, and to set the <code>border</code> to 6px solid black.');
testString: assert(code.match(/@else\s+?if\s+?\$val\s*?===?\s*?heavy\s*?{\s*?border\s*?:\s*?6px\s+?solid\s+?black\s*?;\s*?}/gi));
- text: Your <code>mixin</code> should have an <code>@else</code> statement to set the <code>border</code> to none.
testString: assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi), 'Your <code>mixin</code> should have an <code>@else</code> statement to set the <code>border</code> to none.');
testString: assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi));
```