Refactor tests to snapshots

Story: AB#12937 Task: AB#12938
nhs-digital-gp-it-futures · Mar 23, 2021 · 5831a25 · 5831a25
1 parent 567dacd
commit 5831a25
Show file tree

Hide file tree

Showing 41 changed files with 5,969 additions and 9,837 deletions.
diff --git a/app/components/general-page-description.njk b/app/components/general-page-description.njk
@@ -1,11 +1,11 @@
 {% macro generalPageDescription(params) %}
-  <div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-row" data-test-id="general-description">
     <div class="nhsuk-grid-column-two-thirds">
       {% if params.titleText %}
-        <h1 data-test-id="general-page-title" class="nhsuk-u-margin-top-3 nhsuk-u-margin-bottom-3">{{ params.titleText }}</h1>
+        <h1 class="nhsuk-u-margin-top-3 nhsuk-u-margin-bottom-3">{{ params.titleText }}</h1>
       {% endif %}
       {% if params.descriptionText %}
-        <h2 data-test-id="general-page-description" class="nhsuk-u-font-size-22">{{ params.descriptionText }}</h2>
+        <h2 class="nhsuk-u-font-size-22">{{ params.descriptionText }}</h2>
       {% endif %}
     </div>
   </div>

diff --git a/app/components/general-page-description.test.js b/app/components/general-page-description.test.js
@@ -16,7 +16,7 @@ describe('general-page-description', () => {
     };
 
     harness.request(context, ($) => {
-      const title = $('[data-test-id="general-page-title"]');
+      const title = $('[data-test-id="general-description"] h1');
       expect(title.length).toEqual(1);
       expect(title.text().trim()).toEqual('a title');
     });
@@ -28,7 +28,7 @@ describe('general-page-description', () => {
     };
 
     harness.request(context, ($) => {
-      expect($('[data-test-id="general-page-title"]').length).toEqual(0);
+      expect($('[data-test-id="general-description"] h1').length).toEqual(0);
     });
   }));
 
@@ -40,7 +40,7 @@ describe('general-page-description', () => {
     };
 
     harness.request(context, ($) => {
-      const description = $('[data-test-id="general-page-description"]');
+      const description = $('[data-test-id="general-description"] h2');
       expect(description.length).toEqual(1);
       expect(description.text().trim()).toEqual('a description');
     });
@@ -52,7 +52,7 @@ describe('general-page-description', () => {
     };
 
     harness.request(context, ($) => {
-      expect($('[data-test-id="general-page-description"]').length).toEqual(0);
+      expect($('[data-test-id="general-description"] h2').length).toEqual(0);
     });
   }));
 });
diff --git a/app/includes/__snapshots__/footer.test.js.snap b/app/includes/__snapshots__/footer.test.js.snap
@@ -1,15 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`footer should render the footer legal panel 1`] = `
-"<div data-test-id=\\"legal-panel\\" class=\\"nhsuk-u-padding-bottom-3 nhsuk-width-container\\">
-        <span class=\\"nhsuk-u-margin-right-2\\">Legal</span>
-        <span class=\\"nhsuk-u-margin-right-2\\"><a href=\\"https://digital.nhs.uk/about-nhs-digital/privacy-and-cookies\\">Privacy and Cookies</a></span>
-        <span class=\\"nhsuk-u-margin-right-2\\"><a href=\\"/document/terms-of-use.pdf\\">Terms and Conditions</a></span>
-      </div>"
-`;
-
-exports[`footer should render the footer panel 1`] = `
-"<div data-test-id=\\"footer-component\\">
+exports[`footer should render the footer 1`] = `
+"<div data-test-id=\\"footer\\" class=\\"bc-bg--grey-4\\">
+    <div data-test-id=\\"footer-component\\">
       <footer role=\\"contentinfo\\">
   <div class=\\"nhsuk-footer\\" id=\\"nhsuk-footer\\">
     <div class=\\"nhsuk-width-container\\">
@@ -19,13 +12,22 @@ exports[`footer should render the footer panel 1`] = `
         <li class=\\"nhsuk-footer__list-item\\"><a class=\\"nhsuk-footer__list-item-link\\" href=\\"/guide#contact-us\\">NHS Digital Helpdesk</a></li>
         <li class=\\"nhsuk-footer__list-item\\"><a class=\\"nhsuk-footer__list-item-link\\" href=\\"https://digital.nhs.uk/\\">NHS Digital</a></li>
         <li class=\\"nhsuk-footer__list-item\\"><a class=\\"nhsuk-footer__list-item-link\\" href=\\"https://digital.nhs.uk/services/future-gp-it-systems-and-services\\">About GP IT Futures</a></li>
-        <li class=\\"nhsuk-footer__list-item\\"><a class=\\"nhsuk-footer__list-item-link\\" href=\\"https://gpitbjss.atlassian.net/wiki/spaces/GPITF/overview\\">Capabilities &amp; Standards Model</a></li>
+        <li class=\\"nhsuk-footer__list-item\\"><a class=\\"nhsuk-footer__list-item-link\\" href=\\"https://gpitbjss.atlassian.net/wiki/spaces/GPITF/overview\\">Capabilities and Standards Model</a></li>
       </ul>
       
       <p class=\\"nhsuk-footer__copyright\\">© Crown copyright</p>
     </div>
   </div>
 </footer>
 
-    </div>"
+    </div>
+
+    
+      <ul data-test-id=\\"legal-panel\\" class=\\"bc-lh-r bc-body-r bc-list-none nhsuk-u-padding-0 nhsuk-u-padding-bottom-3 nhsuk-width-container\\">
+        <li class=\\"bc-u-display-inline nhsuk-u-margin-0 nhsuk-u-margin-right-2\\">Legal</li>
+        <li class=\\"bc-u-display-inline nhsuk-u-margin-0 nhsuk-u-margin-right-2\\"><a href=\\"https://digital.nhs.uk/about-nhs-digital/privacy-and-cookies\\">Privacy and Cookies</a></li>
+        <li class=\\"bc-u-display-inline nhsuk-u-margin-0 nhsuk-u-margin-right-2\\"><a href=\\"/document/terms-of-use.pdf\\">Terms and Conditions</a></li>
+      </ul>
+    
+  </div>"
 `;
diff --git a/app/includes/__snapshots__/header.test.js.snap b/app/includes/__snapshots__/header.test.js.snap
@@ -1,7 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`header beta banner should render the beta banner with same snapshot 1`] = `
-"<div data-test-id=\\"beta-banner\\">
+exports[`header should render the header 1`] = `
+"<div data-test-id=\\"header-wrap\\">
+  
+
+  
+  
+    <div data-test-id=\\"beta-banner\\">
       
   <section class=\\"bc-flex-container bc-align-items-center nhsuk-width-container nhsuk-u-padding-bottom-3 nhsuk-u-padding-top-3\\" aria-labelledby=\\"beta-tag\\" role=\\"banner\\">
     <h2 class=\\"bc-c-tag-beta bc-body-r\\" data-test-id=\\"beta-tag\\" id=\\"beta-tag\\">BETA</h2>
@@ -10,11 +15,10 @@ exports[`header beta banner should render the beta banner with same snapshot 1`]
     </div>
   </section>
 
-    </div>"
-`;
+    </div>
+  
 
-exports[`header should render the header banner 1`] = `
-"<header data-test-id=\\"header-banner\\" class=\\"bc-c-header nhsuk-header nhsuk-header--organisation nhsuk-header--white nhsuk-u-padding-top-3 nhsuk-u-padding-bottom-2\\" role=\\"banner\\">
+  <header data-test-id=\\"header-banner\\" class=\\"bc-c-header nhsuk-header nhsuk-header--organisation nhsuk-header--white nhsuk-u-padding-top-3 nhsuk-u-padding-bottom-2\\" role=\\"banner\\">
     <div class=\\"nhsuk-width-container\\">
       <div class=\\"nhsuk-header__logo\\">
         <a class=\\"nhsuk-header__link\\" href=\\"/\\" aria-label=\\"Buying Catalogue Homepage\\">
@@ -38,5 +42,16 @@ exports[`header should render the header banner 1`] = `
       </div>
       
     </div>
-  </header>"
+  </header>
+
+
+  
+    <section class=\\"bc-c-global-alert\\" data-test-id=\\"covid19-global-alert\\" aria-labelledby=\\"covid-alert-heading\\" role=\\"banner\\">
+      <div class=\\"nhsuk-width-container\\">
+        <h2 id=\\"covid-alert-heading\\">Coronavirus (COVID-19)</h2>
+        <p>View Catalogue Solutions that help with coronavirus by <a data-test-id=\\"vaccinations\\" href=\\"/solutions/vaccinations\\">organising vaccinations </a>or <a data-test-id=\\"covid19\\" href=\\"/solutions/covid19\\">reducing visits to GP practices</a>.</p>
+      </div>
+    </section>
+  
+</div>"
 `;
diff --git a/app/includes/footer.test.js b/app/includes/footer.test.js
@@ -1,49 +1,16 @@
 import { componentTester, snapshotTest } from '../test-utils/componentTester';
+import manifest from './manifest.json';
 
 const setup = {
   template: {
     path: 'includes/footer.njk',
   },
 };
 
-const footerLinks = [
-  {
-    label: 'Buyer\'s Guide',
-    URL: '/guide',
-  },
-  {
-    label: 'NHS Digital Helpdesk',
-    URL: '/guide#contact-us',
-  },
-  {
-    label: 'NHS Digital',
-    URL: 'https://digital.nhs.uk/',
-  },
-  {
-    label: 'About GP IT Futures',
-    URL: 'https://digital.nhs.uk/services/future-gp-it-systems-and-services',
-  },
-  {
-    label: 'Capabilities & Standards Model',
-    URL: 'https://gpitbjss.atlassian.net/wiki/spaces/GPITF/overview',
-  },
-];
-
 describe('footer', () => {
-  it('should render the footer panel', componentTester(setup, (harness) => {
-    const context = { footerLinks };
-
-    harness.request(context, ($) => {
-      const snapshot = snapshotTest($, '[data-test-id="footer-component"]');
-      expect(snapshot).toMatchSnapshot();
-    });
-  }));
-
-  it('should render the footer legal panel', componentTester(setup, (harness) => {
-    const context = { showLegalPane: false };
-
-    harness.request(context, ($) => {
-      const snapshot = snapshotTest($, '[data-test-id="legal-panel"]');
+  it('should render the footer', componentTester(setup, (harness) => {
+    harness.request(manifest, ($) => {
+      const snapshot = snapshotTest($, '[data-test-id="footer"]');
       expect(snapshot).toMatchSnapshot();
     });
   }));

diff --git a/app/includes/header.njk b/app/includes/header.njk
@@ -2,32 +2,34 @@
 {% from 'components/login-logout/macro.njk' import loginLogout %}
 
 
-{% if loginEnabled %}
-  {% set innerComponent = loginLogout({
-      dataTestId: "login-logout-component",
-      username: username,
-      loginUrl: "/login",
-      logoutUrl: "/logout"
-    }) %}
-{% endif %}
+<div data-test-id="header-wrap">
+  {% if loginEnabled %}
+    {% set innerComponent = loginLogout({
+        dataTestId: "login-logout-component",
+        username: username,
+        loginUrl: "/login",
+        logoutUrl: "/logout"
+      }) %}
+  {% endif %}
 
-{{ bcHeader({
-  dataTestId: "header-banner",
-  innerComponent: innerComponent,
-  classes: "nhsuk-u-padding-top-3 nhsuk-u-padding-bottom-2",
-  logoLink: {
-    href: "/",
-    ariaLabel: "Buying Catalogue Homepage"
-  },
-  showBetaBanner: true,
-  termsHref: config.feedbackLinkUrl
-}) }}
+  {{ bcHeader({
+    dataTestId: "header-banner",
+    innerComponent: innerComponent,
+    classes: "nhsuk-u-padding-top-3 nhsuk-u-padding-bottom-2",
+    logoLink: {
+      href: "/",
+      ariaLabel: "Buying Catalogue Homepage"
+    },
+    showBetaBanner: true,
+    termsHref: config.feedbackLinkUrl
+  }) }}
 
-{% if config.showCovid19 === 'true' %}
-  <section class="bc-c-global-alert" data-test-id="covid19-global-alert" aria-labelledby="covid-alert-heading" role="banner">
-    <div class="nhsuk-width-container">
-      <h2 id="covid-alert-heading">Coronavirus (COVID-19)</h2>
-      <p>View Catalogue Solutions that help with coronavirus by <a data-test-id="vaccinations" href="{{ '/solutions/vaccinations' }}">organising vaccinations </a>or <a data-test-id="covid19" href="{{ '/solutions/covid19' }}">reducing visits to GP practices</a>.</p>
-    </div>
-  </section>
-{% endif %}
+  {% if config.showCovid19 %}
+    <section class="bc-c-global-alert" data-test-id="covid19-global-alert" aria-labelledby="covid-alert-heading" role="banner">
+      <div class="nhsuk-width-container">
+        <h2 id="covid-alert-heading">Coronavirus (COVID-19)</h2>
+        <p>View Catalogue Solutions that help with coronavirus by <a data-test-id="vaccinations" href="{{ solutionsVacination }}">organising vaccinations </a>or <a data-test-id="covid19" href="{{ solutionsCovid }}">reducing visits to GP practices</a>.</p>
+      </div>
+    </section>
+  {% endif %}
+</div>