fix(UI): Script displayed in preview when using specific css (#56570)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/templates/Challenges/utils/frame.ts

@@ -86,8 +86,17 @@ const DOCUMENT_NOT_FOUND_ERROR = 'misc.document-notfound';
 // of the frame.  React dom errors already appear in the console, so onerror
 // does not need to pass them on to the default error handler.
 
-export const createHeader = (id = mainPreviewId) => `
+// The "fcc-hide-header" class on line 95 is added to ensure that the CSSHelper class ignores this style element
+// during tests, preventing CSS-related test failures.
+
+export const createHeader = (id = mainPreviewId) =>
+  `
   <base href='' />
+  <style class="fcc-hide-header">
+    head *, title, meta, link, script {
+      display: none !important;
+    }
+  </style>
   <script>
     window.__frameId = '${id}';
     window.onerror = function(msg) {

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.md

@@ -28,7 +28,7 @@ Add a `height` property to the `h4` tag and set it to 25px.
 Your code should change the `h4` `height` property to a value of 25 pixels.
 
 ```js
-const spaceFreeText = document.querySelector("style")?.textContent?.replace(/\s/g, ''); 
+const spaceFreeText = document.querySelector("style:not(.fcc-hide-header)")?.textContent?.replace(/\s/g, ''); 
 const h4Element = document.querySelector('h4');
 assert.equal(Math.round(h4Element?.getBoundingClientRect()?.height),25);
 assert.match(spaceFreeText,/h4{\S*height:25px(;\S*}|})/);

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md

@@ -25,7 +25,7 @@ Your code should set the `opacity` property to 0.7 on the anchor tags by selecti
 
 ```js
 assert.match(
-  document.querySelector('style')?.textContent,
+  document.querySelector("style:not(.fcc-hide-header)")?.textContent,
   /\.links\s*{([\s\S]*?;)*\s*opacity\s*:\s*0*\.70*\s*(;[\s\S]*?|\s*)}/
   );
 ```

curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md

@@ -21,8 +21,7 @@ assert(hasH1);
 You should not add a new `style` tag. Add the new CSS rules to the existing `style` tag.
 
 ```js
-const hasManyStyleTags = document.querySelectorAll('style').length > 1;
-assert(!hasManyStyleTags);
+assert.isAtMost(document.querySelectorAll('style').length, 2);
 ```
 
 You should add a new `h2` selector.

curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md

@@ -63,7 +63,7 @@ You appear to be using a browser extension that is modifying the page. Be sure t
 
 ```js
 assert.isAtMost(document.querySelectorAll('script').length, 2);
-assert.equal(document.querySelectorAll('style').length, 0);
+assert.equal(document.querySelectorAll('style').length, 1);
 assert.equal(document.querySelectorAll('link').length, 0);
 ```
 

curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477ae9675db8bb7655b30.md

@@ -21,8 +21,7 @@ assert(hasH1);
 You should not add a new `style` tag. Add the new CSS rules to the existing `style` tag.
 
 ```js
-const hasManyStyleTags = document.querySelectorAll('style').length > 1;
-assert(!hasManyStyleTags);
+assert.isAtMost(document.querySelectorAll('style').length, 2);
 ```
 
 You should add a new `h2` selector.

curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/5dc174fcf86c76b9248c6eb2.md

@@ -51,7 +51,7 @@ You appear to be using a browser extension that is modifying the page. Be sure t
 
 ```js
 assert.isAtMost(document.querySelectorAll('script').length, 2);
-assert.equal(document.querySelectorAll('style').length, 0);
+assert.equal(document.querySelectorAll('style').length, 1);
 assert.equal(document.querySelectorAll('link').length, 0);
 ```
 

e2e/iframe-script.spec.ts

@@ -0,0 +1,43 @@
+import { expect, test } from '@playwright/test';
+import translations from '../client/i18n/locales/english/translations.json';
+import { focusEditor } from './utils/editor';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(
+    '/learn/javascript-algorithms-and-data-structures-v8/build-a-cash-register-project/build-a-cash-register'
+  );
+});
+
+test.describe('Preventing Script From Displaying in Preview', () => {
+  // this test is for inserting problematic <style> tag and checking if the preview is empty
+
+  test('should render an empty preview after inserting CSS', async ({
+    page,
+    isMobile
+  }) => {
+    await focusEditor({ page, isMobile });
+
+    //  the pain in the butt <style> tag with display: block rule into the editor
+    const styleTag = `
+  <style>
+  * {
+    margin: 0;
+    padding: 0;
+    display: block;
+  }
+  </style>`;
+    await page.keyboard.insertText(styleTag);
+
+    if (isMobile) {
+      await page
+        .getByRole('tab', { name: translations.learn['editor-tabs'].preview })
+        .click();
+    }
+
+    // Checks that the iframe preview is empty
+    const frame = page.frameLocator('#fcc-main-frame').first();
+
+    // Make sure there are no visible elements inside the iframe's body
+    await expect(frame.locator('body')).toBeEmpty();
+  });
+});