Test(web,web-react): Update visual snapshots after demo apps redesign…

… #DS-1479

Hide site header and footer from component snapshots.

apps/demo/partials/cover.hbs

@@ -1,4 +1,4 @@
-<div class="spirit-theme-light-on-brand bg-primary mb-tablet-1200 py-1200 py-tablet-1700">
+<div class="spirit-theme-light-on-brand bg-primary mb-tablet-1200 py-1200 py-tablet-1700 {{#unless (eq page 'components')}}hide-from-visual-tests{{/unless}}">
   <div class="Container">
 
     <h1

apps/demo/partials/footer.hbs

@@ -1,4 +1,4 @@
-<footer class="bg-secondary mt-1200 mt-tablet-1700 pt-1400 pb-1200 text-center">
+<footer class="bg-secondary mt-1200 mt-tablet-1700 pt-1400 pb-1200 text-center {{#unless (eq page 'components')}}hide-from-visual-tests{{/unless}}">
   <div class="Container">
 
     © Alma Career Oy and its subsidiaries

apps/demo/partials/header.hbs

@@ -1,4 +1,4 @@
-<header class="Header spirit-theme-light-on-brand">
+<header class="Header spirit-theme-light-on-brand {{#unless (eq page 'components')}}hide-from-visual-tests{{/unless}}">
   <a href="/" aria-label="Spirit Development Preview">
     {{> web/assets/spiritLogoInverted }}
   </a>
@@ -44,8 +44,9 @@
         </a>
       </li>
       {{!-- Hide link to the Twig implementation in production. Twig demo app only runs on localhost, we don't deploy it anywhere. --}}
+      {{!-- For the same reason, we don't include the link in the visual tests. --}}
       {{#if @is_development}}
-        <li class="HeaderNavItem">
+        <li class="HeaderNavItem hide-from-visual-tests">
           <a href="https://localhost:4443" class="HeaderLink">Web Twig</a>
         </li>
       {{/if}}

apps/web-twig-demo/templates/partials/cover.html.twig

@@ -1,4 +1,4 @@
-<div class="spirit-theme-light-on-brand bg-primary mb-tablet-1200 py-1200 py-tablet-1700">
+<div class="spirit-theme-light-on-brand bg-primary mb-tablet-1200 py-1200 py-tablet-1700 hide-from-visual-tests">
   <Container>
 
     <h1

apps/web-twig-demo/templates/partials/footer.html.twig

@@ -1,4 +1,4 @@
-<footer class="bg-secondary mt-1200 mt-tablet-1700 pt-1400 pb-1200 text-center">
+<footer class="bg-secondary mt-1200 mt-tablet-1700 pt-1400 pb-1200 text-center hide-from-visual-tests">
   <Container>
 
     © Alma Career Oy and its subsidiaries

apps/web-twig-demo/templates/partials/header.html.twig

@@ -1,4 +1,4 @@
-<Header UNSAFE_className="spirit-theme-light-on-brand">
+<Header UNSAFE_className="spirit-theme-light-on-brand hide-from-visual-tests">
 
   <Link href="http://localhost:3456" aria-label="Spirit Development Preview">
     {% include 'assets/spiritLogoInverted.html.twig' %}

tests/e2e/demo-components-compare.spec.ts

@@ -2,7 +2,7 @@
 import { isTesting as isTestingEnvironment } from '@lmc-eu/spirit-common/constants/environments';
 import { test } from '@playwright/test';
 import { readdirSync } from 'fs';
-import { formatPackageName, getServerUrl, takeScreenshot, waitForPageLoad } from '../helpers';
+import { formatPackageName, getServerUrl, hideFromVisualTests, takeScreenshot, waitForPageLoad } from '../helpers';
 
 // Tests that are intentionally broken, but will be fixed in the future
 const IGNORED_TESTS: string[] = [];
@@ -37,6 +37,7 @@ const runComponentCompareTests = (testConfig: TestConfig) => {
             const url = getServerUrl(packageName);
             await page.goto(`${url}${componentsDir}/${component}/${packageName === 'web-twig' ? '?HIDE_TOOLBAR' : ''}`);
             await waitForPageLoad(page);
+            await hideFromVisualTests(page);
             await takeScreenshot(page, `${component}`, { fullPage: true });
           } catch (error) {
             // beware of the case insensitive systems; keep the prefix in the small case

tests/e2e/demo-homepages.spec.ts

@@ -1,7 +1,7 @@
 import { isTesting } from '@lmc-eu/spirit-common/constants/environments';
 import { SERVERS, getDevelopmentEndpointUri } from '@lmc-eu/spirit-common/constants/servers';
 import { test } from '@playwright/test';
-import { takeScreenshot, waitForPageLoad } from '../helpers';
+import { hideFromVisualTests, takeScreenshot, waitForPageLoad } from '../helpers';
 
 test.describe('Demo Homepages', () => {
   const demos = [
@@ -19,6 +19,7 @@ test.describe('Demo Homepages', () => {
     test(`test demo homepage ${demo.package}`, async ({ page }) => {
       await page.goto(demo.url);
       await waitForPageLoad(page);
+      await hideFromVisualTests(page);
       await takeScreenshot(page, demo.package, { fullPage: true });
     });
   }

tests/helpers/hideFromVisualTests.ts

@@ -0,0 +1,5 @@
+import { Page } from '@playwright/test';
+
+export const hideFromVisualTests = async (page: Page): Promise<void> => {
+  await page.addStyleTag({ content: '.hide-from-visual-tests { display: none !important }' });
+};

tests/helpers/index.ts

@@ -1,4 +1,5 @@
 export * from './formatPackageName';
 export * from './getServerUrl';
+export * from './hideFromVisualTests';
 export * from './takeScreenshot';
 export * from './waitForPageLoad';