Change Link Regex Tests to DOM queries (#45890)

* Change link regex tests to DOM queries

* Keep injection of style tag

Co-authored-by: Florencia <sicref001@gmail.com>
Co-authored-by: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
pull/46681/head
Caden Parker 2022-06-27 01:37:23 -07:00 committed by GitHub
parent da04ebdc20
commit 85f3ecbb0a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 14 deletions

View File

@ -221,7 +221,10 @@ export const embedFilesInHtml = async function (challengeFiles) {
style.classList.add('fcc-injected-styles');
style.innerHTML = stylesCss?.contents;
link.parentNode.replaceChild(style, link);
link.parentNode.appendChild(style);
link.removeAttribute('href');
link.dataset.href = 'styles.css';
}
if (script) {
script.innerHTML = scriptJs?.contents;

View File

@ -14,8 +14,7 @@ Now you need to link the `styles.css` file so the styles will be applied again.
Your code should have a `link` element.
```js
// link is removed -> if exists, replaced with style
const link = document.querySelector('head > style');
const link = document.querySelector('link');
assert(link);
```
@ -34,19 +33,24 @@ assert(code.match(/<link[\w\W\s]+\/?>/i));
Your `link` element should be within your `head` element.
```js
assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i))
const link = document.querySelector('head > link');
assert(link);
```
Your `link` element should have a `rel` attribute with the value `stylesheet`.
```js
assert(code.match(/rel\s*=\s*('|")stylesheet\1/i));
const link = document.querySelector('link')
const rel = link.getAttribute('rel')
assert(rel == `stylesheet`)
```
Your `link` element should have an `href` attribute with the value `styles.css`.
```js
assert(code.match(/href\s*=\s*('|")styles.css\1/i));
const link = document.querySelector('link')
assert(link.dataset.href == 'styles.css')
```
# --seed--

View File

@ -41,7 +41,7 @@ assert.equal(title.text, 'Registration Form');
Your code should have a `link` element.
```js
assert.match(code, /<link/)
assert.exists(document.querySelector('link'));
```
You should not change your existing `head` tags. Make sure you did not delete the closing tag.
@ -60,19 +60,22 @@ assert(code.match(/<link[\w\W\s]+\/>/i));
Your `link` element should be within your `head` element.
```js
assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/>[\w\W\s]*<\/head>/i))
assert.exists(document.querySelector('head > link'));
```
Your `link` element should have a `rel` attribute with the value `stylesheet`.
```js
assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
const link_element = document.querySelector('link');
const rel = link_element.getAttribute("rel");
assert.equal(rel, "stylesheet");
```
Your `link` element should have an `href` attribute with the value `styles.css`.
```js
assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
const link = document.querySelector('link');
assert.equal(link.dataset.href, "styles.css");
```
# --seed--

View File

@ -16,21 +16,20 @@ Add a `link` element with a `rel` of `stylesheet` and an `href` of `https://use.
You should add another `link` element.
```js
// We set this to 1 because the CSS link is stripped from the code by our parser.
assert(document.querySelectorAll('link').length === 1);
assert(document.querySelectorAll('link').length === 2);
```
Your `link` element should have a `rel` of `stylesheet`.
```js
assert(document.querySelector('link')?.getAttribute('rel') === 'stylesheet');
assert(document.querySelectorAll('link')?.[1]?.getAttribute('rel') === 'stylesheet');
```
Your `link` element should have an `href` of
`https://use.fontawesome.com/releases/v5.8.2/css/all.css`.
```js
assert(document.querySelectorAll('link')?.[0]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css')
assert(document.querySelectorAll('link')?.[1]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css')
```
# --seed--