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:
Hassaan Pasha
2020-09-17 19:08:01 +05:00
committed by GitHub
parent aecbc28798
commit 80438cac3e
54 changed files with 326 additions and 157 deletions

View File

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

View File

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

View File

@ -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;

View File

@ -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;

View File

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