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
parent
da04ebdc20
commit
85f3ecbb0a
|
@ -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;
|
||||
|
|
|
@ -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--
|
||||
|
|
|
@ -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--
|
||||
|
|
|
@ -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--
|
||||
|
|
Loading…
Reference in New Issue