feat(client, learn): add helper functions for common validation operations (#38605)
Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
This commit is contained in:
@ -33,7 +33,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: const removeCssComments = str => str.replace(/\/\*[\s\S]+?\*\//g, ''); assert(removeCssComments(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));
|
||||
testString: assert(__helpers.removeCssComments(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));
|
||||
|
||||
```
|
||||
|
||||
|
@ -30,7 +30,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: const removeCssComments = str => str.replace(/\/\*[\s\S]+?\*\//g, '');assert(removeCssComments(code).match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi));
|
||||
testString: assert(__helpers.removeCssComments(code).match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
@ -33,7 +33,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.
|
||||
testString: assert($('style').text().replace(/\s/g, '').match(/\.item5{.*grid-column:.*}/g));
|
||||
testString: assert(__helpers.removeWhiteSpace($('style').text()).match(/\.item5{.*grid-column:.*}/g));
|
||||
- text: <code>item5</code> class should have a <code>grid-column</code> property which results in it consuming the last two columns of the grid.
|
||||
testString: "
|
||||
const colStart = getComputedStyle($('.item5')[0]).gridColumnStart;
|
||||
|
@ -22,7 +22,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.
|
||||
testString: assert($('style').text().replace(/\s/g, '').match(/\.item5{.*grid-row:.*}/g));
|
||||
testString: assert(__helpers.removeWhiteSpace($('style').text()).match(/\.item5{.*grid-row:.*}/g));
|
||||
- text: <code>item5</code> class should have a <code>grid-row</code> property which results in it consuming the last two rows of the grid.
|
||||
testString: "
|
||||
const rowStart = getComputedStyle($('.item5')[0]).gridRowStart;
|
||||
|
@ -23,7 +23,7 @@ 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 header and footer areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.
|
||||
testString: const removeCssComments = str => str.replace(/\/\*[\s\S]+?\*\//g, ''); assert(removeCssComments(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));
|
||||
testString: assert(__helpers.removeCssComments(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));
|
||||
|
||||
```
|
||||
|
||||
|
Reference in New Issue
Block a user