From 8d60aad97b2e21901b469bdf08868931171c42c9 Mon Sep 17 00:00:00 2001 From: "Luis H. Ball Jr" Date: Mon, 1 Feb 2021 10:57:36 -0500 Subject: [PATCH] feat(curriculum): add extension tests for css-flexbox curriculum modules (#40473) * feat(curriculum): add extension tests for css-flexbox curriculum modules * apply suggestions from code review Co-authored-by: Nicholas Carrigan (he/him) * fix: reorder tests Moves the test that asserts the presence of the follow button to the top of the order. Signed-off-by: nhcarrigan Co-authored-by: Nicholas Carrigan (he/him) --- .../css-flexbox/add-flex-superpowers-to-the-tweet-embed.md | 6 ++++++ ...ection-property-to-create-a-column-in-the-tweet-embed.md | 6 ++++++ ...-direction-property-to-create-rows-in-the-tweet-embed.md | 6 ++++++ .../use-the-align-items-property-in-the-tweet-embed.md | 6 ++++++ .../use-the-justify-content-property-in-the-tweet-embed.md | 6 ++++++ 5 files changed, 30 insertions(+) diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md index 8aab034b97..5884593440 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md @@ -19,6 +19,12 @@ Add the CSS property `display: flex` to all of the following items - note that t # --hints-- +Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers. + +```js +assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none'); +``` + Your `header` should have a `display` property set to `flex`. ```js diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.md index d0c5e4b101..8914b97e5d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.md @@ -17,6 +17,12 @@ Add the CSS property `flex-direction` to the header's `.profile-name` element an # --hints-- +Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers. + +```js +assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none'); +``` + The `.profile-name` element should have a `flex-direction` property set to column. ```js diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.md index 3636753955..a2c29aa568 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.md @@ -17,6 +17,12 @@ Add the CSS property `flex-direction` to both the `header` and `footer` and set # --hints-- +Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers. + +```js +assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none'); +``` + The `header` should have a `flex-direction` property set to row. ```js diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.md index d09d601dec..98b3d28d95 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.md @@ -17,6 +17,12 @@ Add the CSS property `align-items` to the header's `.follow-btn` element. Set th # --hints-- +Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers. + +```js +assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none'); +``` + The `.follow-btn` element should have the `align-items` property set to a value of `center`. ```js diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.md index c8542a6189..367ec16ba6 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.md @@ -17,6 +17,12 @@ Add the CSS property `justify-content` to the header's `.profile-name` element a # --hints-- +Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers. + +```js +assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none'); +``` + The `.profile-name` element should have the `justify-content` property set to any of these values: `center`, `flex-start`, `flex-end`, `space-between`, `space-around`, or `space-evenly`. ```js