fix(curriculum): quotes in tests (#18828)
* fix(curriculum): tests quotes * fix(curriculum): fill seed-teardown * fix(curriculum): fix tests and remove unneeded seed-teardown
This commit is contained in:
Valeriy
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
96eb124163
commit
79d9012432
@ -24,7 +24,7 @@ Give the grid container three columns that are <code>100px</code> wide each.
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?100px\s*?100px\s*?100px\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.");'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?100px\s*?100px\s*?100px\s*?;[\s\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ Use <code>grid-gap</code> to introduce a <code>10px</code> gap between the rows
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.");'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi), '<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ Add two rows to the grid that are <code>50px</code> tall each.
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.");'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi), '<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ Use this property to center all our items horizontally.
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.");'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi), '<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ Use it now to move all the items to the end of each cell.
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.");'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi), '<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ Use the <code>justify-self</code> property to center the item with the class <co
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.
|
||||
testString: 'assert(code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi), "<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.");'
|
||||
testString: assert(code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi), '<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ Align the item with the class <code>item3</code> vertically at the <code>end</co
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.
|
||||
testString: 'assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi), "<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.");'
|
||||
testString: assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi), '<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ Give the columns in the grid a <code>20px</code> gap.
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.");'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi), '<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ Create a gap for the rows that is <code>5px</code> tall.
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.");'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi), '<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@ In the first grid, use <code>auto-fill</code> with <code>repeat</code> to fill t
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fill\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.");'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fill\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ In the second grid, use <code>auto-fit</code> with <code>repeat</code> to fill t
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fit\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi), "<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.");'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fit\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi), '<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -22,9 +22,9 @@ Turn the element with the <code>item3</code> class into a grid with two columns
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.
|
||||
testString: 'assert(code.match(/.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi), "<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.");'
|
||||
testString: assert(code.match(/.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi), '<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.');
|
||||
- text: <code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.
|
||||
testString: 'assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi), "<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.");'
|
||||
testString: assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi), '<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ Change the display of the div with the <code>container</code> class to <code>gri
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.");'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi), '<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@ Place the area template so that the cell labeled <code>advert</code> becomes an
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> class should have a <code>grid-template-areas</code> property similar to the preview but has <code>.</code> instead of the <code>advert</code> area.
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?.\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-areas</code> propertiy similar to the preview but has <code>.</code> instead of the <code>advert</code> area.");'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?.\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi), '<code>container</code> class should have a <code>grid-template-areas</code> propertiy similar to the preview but has <code>.</code> instead of the <code>advert</code> area.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ Using the <code>minmax</code> function, replace the <code>1fr</code> in the <cod
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?minmax\s*?\(\s*?90px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.");'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?minmax\s*?\(\s*?90px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ Place an element with the <code>item5</code> class in the <code>footer</code> ar
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.
|
||||
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi), "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.");'
|
||||
testString: assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi), '<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ Use <code>repeat</code> to remove repetition from the <code>grid-template-column
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.");'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@ Make a grid with three columns whose widths are as follows: 1fr, 100px, and 2fr.
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.'
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.");'
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi), ''<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.'');'
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@ Using the <code>grid-area</code> property, place the element with <code>item5</c
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.
|
||||
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?3\s*?\/\s*?1\s*?\/\s*?4\s*?\/\s*?4\s*?;[\s\S]*}/gi), "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.");'
|
||||
testString: assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?3\s*?\/\s*?1\s*?\/\s*?4\s*?\/\s*?4\s*?;[\s\S]*}/gi), '<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ Make the item with the class <code>item5</code> consume the last two columns of
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.
|
||||
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-column\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi), "<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.");'
|
||||
testString: assert(code.match(/.item5\s*?{[\s\S]*grid-column\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi), '<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ Make the element with the <code>item5</code> class consume the last two rows.
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.
|
||||
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-row\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi), "<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.");'
|
||||
testString: assert(code.match(/.item5\s*?{[\s\S]*grid-row\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi), '<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -21,8 +21,8 @@ When the viewport width is <code>400px</code> or more, make the header area occu
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.'
|
||||
testString: 'assert(code.match(/@media\s*?\(\s*?min-width\s*?:\s*?400px\s*?\)[\s\S]*.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi), "When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.");'
|
||||
- text: When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.
|
||||
testString: assert(code.match(/@media\s*?\(\s*?min-width\s*?:\s*?400px\s*?\)[\s\S]*.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi), 'When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user