feat: add more tests, simplify some regex tests, fix wording

This commit is contained in:
Kris Koishigawa
2021-12-17 16:05:53 +09:00
parent b9ed936fab
commit 6ef6960da9
14 changed files with 67 additions and 28 deletions

View File

@@ -24,7 +24,9 @@ First, in the `.red` CSS rule, set the `background` property to `linear-gradient
Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg)`. Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg)`.
```js ```js
assert(code.match(/background\s*:\s*linear-gradient\(\s*90deg\s*\);?/g)); assert(
__helpers.removeWhiteSpace($('style').text()).match(/\.red{.*background:linear-gradient\(90deg\).*}/g)
);
``` ```
# --seed-- # --seed--

View File

@@ -16,7 +16,9 @@ In the `linear-gradient` function, use the `rgb` function to set the first color
Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg, rgb(255, 0, 0))`. Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg, rgb(255, 0, 0))`.
```js ```js
assert(code.match(/background\s*:\s*linear-gradient\(\s*90deg\,\s*rgb\(255\,?\s*0\,\s*0\)\s*\);?/g)); assert(
__helpers.removeWhiteSpace($('style').text()).match(/\.red{.*background:linear-gradient\(90deg,rgb\(255,0,0\)\).*}/g)
);
``` ```
# --seed-- # --seed--

View File

@@ -13,10 +13,9 @@ In the `.green` CSS rule, change the `background-color` property to `background`
# --hints-- # --hints--
Your `.green` CSS rule should have a `background` property with the value `rgb(0, 127, 0)`. Your `.green` CSS rule should have a `background` property with the value `#007F00`.
```js ```js
console.log(new __helpers.CSSHelp(document).getStyle('.green').cssText);
assert(new __helpers.CSSHelp(document).getStyle('.green').cssText === 'background: rgb(0, 127, 0);'); assert(new __helpers.CSSHelp(document).getStyle('.green').cssText === 'background: rgb(0, 127, 0);');
``` ```

View File

@@ -13,10 +13,12 @@ Use the `linear-gradient` function and set `gradientDirection` to `180deg`. And
# --hints-- # --hints--
Test 1 Your `.green` CSS rule should have a `background` property with the value `linear-gradient(180deg, #55680D)`.
```js ```js
assert(
__helpers.removeWhiteSpace($('style').text()).match(/\.green{.*background:linear-gradient\(180deg,#55680D\).*}/g)
);
``` ```
# --seed-- # --seed--

View File

@@ -11,10 +11,10 @@ For the second color argument, use a hex color code with the values `71` for red
# --hints-- # --hints--
Test 1 Your `.green` CSS rule should have a `background` property set to `linear-gradient(180deg, #55680D, #71F53E)`.
```js ```js
assert(new __helpers.CSSHelp(document).getStyle('.green')?.background === 'linear-gradient(rgb(85, 104, 13), rgb(113, 245, 62))');
``` ```
# --seed-- # --seed--

View File

@@ -13,10 +13,10 @@ In the same `linear-gradient` function, add a hex color code with the values `11
# --hints-- # --hints--
Test 1 Your `.green` CSS rule should have a `background` property set to `linear-gradient(180deg, #55680D, #71F53E, #116C31)`.
```js ```js
assert(new __helpers.CSSHelp(document).getStyle('.green')?.background === 'linear-gradient(rgb(85, 104, 13), rgb(113, 245, 62), rgb(17, 108, 49))');
``` ```
# --seed-- # --seed--

View File

@@ -11,14 +11,14 @@ Even without the color-stops, you might have noticed that the colors for the gre
The `linear-gradient` function automatically calculates these values for you, and places colors evenly along the gradient line by default. The `linear-gradient` function automatically calculates these values for you, and places colors evenly along the gradient line by default.
In the `red` CSS rule, remove the three color stops from the `linear-gradient` function to clean up your code a bit. In the `.red` CSS rule, remove the three color stops from the `linear-gradient` function to clean up your code a bit.
# --hints-- # --hints--
Test 1 Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`.
```js ```js
assert(new __helpers.CSSHelp(document).getStyle('.red')?.background === 'linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))');
``` ```
# --seed-- # --seed--

View File

@@ -13,10 +13,22 @@ Clean up your code a little more by removing the `gradientDirection` argument fr
# --hints-- # --hints--
Test 1 You should remove the `gradientDirection` arguments from the `linear-gradient` functions in your `.red` and `.green` CSS rules.
```js ```js
assert(!code.match(/linear-gradient\s*\(\s*180deg/gi));
```
Your `.red` CSS rule should have a `background` property set to `linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.red')?.background === 'linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))');
```
Your `.green` CSS rule should have a `background` property set to `linear-gradient(#55680D, #71F53E, #116C31)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.green')?.background === 'linear-gradient(rgb(85, 104, 13), rgb(113, 245, 62), rgb(17, 108, 49))');
``` ```
# --seed-- # --seed--

View File

@@ -9,14 +9,14 @@ dashedName: step-66
Now you'll apply a gradient to the blue marker, this time using the `hsl` function as color arguments. Now you'll apply a gradient to the blue marker, this time using the `hsl` function as color arguments.
In the `blue` CSS rule, change the `background-color` property to `background`. In the `.blue` CSS rule, change the `background-color` property to `background`.
# --hints-- # --hints--
Test 1 Your `.blue` CSS rule should have a `background` property with the value `hsl(240, 100%, 50%)`.
```js ```js
assert(new __helpers.CSSHelp(document).getStyle('.blue').cssText === 'background: rgb(0, 0, 255);');
``` ```
# --seed-- # --seed--

View File

@@ -11,10 +11,12 @@ Use the `linear-gradient` function, and pass in the `hsl` function with the valu
# --hints-- # --hints--
Test 1 Your `.blue` CSS rule should have a `background` property with the value `linear-gradient(hsl(186, 76%, 16%))`.
```js ```js
assert(
__helpers.removeWhiteSpace($('style').text()).match(/\.blue{.*linear-gradient\(hsl\(186,76%,16%\)\).*}/g)
);
``` ```
# --seed-- # --seed--

View File

@@ -11,10 +11,10 @@ As the second color argument, pass in the `hsl` function with the values `223` f
# --hints-- # --hints--
Test 1 Your `.blue` CSS rule should have a `background` property set to `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%))`.
```js ```js
assert(new __helpers.CSSHelp(document).getStyle('.blue')?.background === 'linear-gradient(rgb(10, 66, 72), rgb(61, 113, 245))');
``` ```
# --seed-- # --seed--

View File

@@ -11,10 +11,10 @@ And as the third color argument, pass in the `hsl` function with the values `240
# --hints-- # --hints--
Test 1 Your `.blue` CSS rule should have a `background` property set to `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%))`.
```js ```js
assert(new __helpers.CSSHelp(document).getStyle('.blue')?.background === 'linear-gradient(rgb(10, 66, 72), rgb(61, 113, 245), rgb(47, 47, 167))');
``` ```
# --seed-- # --seed--

View File

@@ -9,14 +9,22 @@ dashedName: step-70
Now that the markers have the correct colors, it's time to build the marker sleeves. Start with the red marker. Now that the markers have the correct colors, it's time to build the marker sleeves. Start with the red marker.
Inside the red marker `div` element, create a new `div` with the `class` `sleeve`. Inside the `div.red` element, create a new `div` with the `class` attribute set to `sleeve`.
# --hints-- # --hints--
Test 1 Your new `div` element should be within the `div.red` element.
```js ```js
const redMarkerChildren = [...document.querySelector('.red')?.children];
assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 1);
```
Your new `div` element should have a `class` attribute set to `sleeve`.
```js
const redMarkerChild = [...document.querySelector('.red')?.children][0];
assert(redMarkerChild?.classList?.contains('sleeve'));
``` ```
# --seed-- # --seed--

View File

@@ -7,16 +7,28 @@ dashedName: step-71
# --description-- # --description--
Create a new CSS rule that targets the `sleeve` `class`. Create a new CSS rule that targets the `class` attribute, `sleeve`.
Inside the `sleeve` rule, set the `width` property to `110px`, and the `height` property to `25px`. Inside the new rule, set the `width` property to `110px`, and the `height` property to `25px`.
# --hints-- # --hints--
Test 1 You should use a class selector to target the `class` attribute, `sleeve`.
```js ```js
assert(new __helpers.CSSHelp(document).getStyle('.sleeve'));
```
Your `.sleeve` CSS rule should have a `width` property set to `110px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.width === '110px');
```
Your `.sleeve` CSS rule should have a `height` property set to `25px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.height === '25px');
``` ```
# --seed-- # --seed--