WS-1945 Migrate Integration tests (Topic Page)

src/integration/pages/topicPage/crossPlatformTests.js → ws-nextjs-app/integration/pages/topicPage/crossPlatformTests.ts

@@ -1,5 +1,7 @@
 import { runCommonCrossPlatformTests } from '../../common';
+import pageContentTests from './pageContentTests';
 
 export default service => {
   runCommonCrossPlatformTests(service);
+  pageContentTests();
 };

ws-nextjs-app/integration/pages/topicPage/mundo/__snapshots__/canonical.test.ts.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Topic page with badge image, description and multiple curations with h2 headings Page content First item in the first curation is the correct headline 1`] = `"Edited New 1226 El conflictivo pasado con Venezuela de Rex Tillerson, nuevo secretario de Estado de EEUU"`;
+
+exports[`Topic page with badge image, description and multiple curations with h2 headings Page content First item in the first curation is the correct image 1`] = `
+<img
+  alt="ExxonMobil Chairman and CEO Rex Tillerson speaks during the IHS CERAWeek 2015 energy conference in Houston, Texas April 21, 2015"
+  class="css-1seqhu9"
+  fetchpriority="high"
+  loading="eager"
+  sizes="(min-width: 63rem) 800px, (min-width: 37.5rem) 66vw, 100vw"
+  src="https://ichef.test.bbci.co.uk/ace/standard/240/cpsdevpb/167B2/test/_63528029_036820129-1.jpg"
+  srcset="https://ichef.test.bbci.co.uk/ace/standard/85/cpsdevpb/167B2/test/_63528029_036820129-1.jpg.webp 85w, https://ichef.test.bbci.co.uk/ace/standard/120/cpsdevpb/167B2/test/_63528029_036820129-1.jpg.webp 120w, https://ichef.test.bbci.co.uk/ace/standard/170/cpsdevpb/167B2/test/_63528029_036820129-1.jpg.webp 170w, https://ichef.test.bbci.co.uk/ace/standard/232/cpsdevpb/167B2/test/_63528029_036820129-1.jpg.webp 232w, https://ichef.test.bbci.co.uk/ace/standard/325/cpsdevpb/167B2/test/_63528029_036820129-1.jpg.webp 325w, https://ichef.test.bbci.co.uk/ace/standard/450/cpsdevpb/167B2/test/_63528029_036820129-1.jpg.webp 450w, https://ichef.test.bbci.co.uk/ace/standard/660/cpsdevpb/167B2/test/_63528029_036820129-1.jpg.webp 660w, https://ichef.test.bbci.co.uk/ace/standard/800/cpsdevpb/167B2/test/_63528029_036820129-1.jpg.webp 800w"
+  style="aspect-ratio:16 / 9"
+/>
+`;
+
+exports[`Topic page with badge image, description and multiple curations with h2 headings should display the topic badge image 1`] = `
+<img
+  alt=""
+  class="css-u2xnxo e1vorejc0"
+  data-testid="topic-badge"
+  src="https://ichef.bbci.co.uk/ace/standard/128/cpsdevpb/f407/test/75380e10-4f96-11ed-9488-854f10e82c4c.jpg"
+/>
+`;
+
+exports[`Topic page with badge image, description and multiple curations with h2 headings should display the topic description under the title 1`] = `"Peace agreement between the Colombian government and FARC"`;

ws-nextjs-app/integration/pages/topicPage/mundo/canonical.test.ts

@@ -0,0 +1,48 @@
+/**
+ * @service mundo
+ * @pathname /mundo/topics/c1en6xwmpkvt
+ */
+
+import pageContentTests from '../../homePage/pageContentTests';
+
+describe('Topic page with badge image, description and multiple curations with h2 headings', () => {
+  pageContentTests();
+  it('should display the topic badge image', () => {
+    const topicBadge = document.querySelector('img[data-testid="topic-badge"]');
+    expect(topicBadge).toBeInTheDocument();
+    expect(topicBadge).toMatchSnapshot();
+  });
+  it('should display the topic description under the title', () => {
+    const title = document.querySelector('h1#content');
+    expect(title).toBeInTheDocument();
+
+    const parent = title?.parentElement;
+    const description = parent?.nextElementSibling;
+    expect(description).toBeInTheDocument();
+    expect(description?.textContent).toMatchSnapshot();
+  });
+
+  it('should display multiple curations each with a curation title', () => {
+    const curationTitles = Array.from(document.querySelectorAll('h2'));
+    const curationGrids = Array.from(
+      document.querySelectorAll(
+        '[data-testid="curation-grid-normal"], [data-testid="hierarchical-grid"]',
+      ),
+    );
+
+    // There should be at least two curations with titles
+    expect(curationTitles.length).toBeGreaterThan(1);
+    expect(curationGrids.length).toBeGreaterThan(1);
+
+    // Each curation grid should be preceded by a curation title (h2)
+    curationGrids.forEach(grid => {
+      let previous = grid.previousElementSibling;
+      // Traverse back to find the h2 (skip over any non-h2 elements)
+      while (previous && previous.tagName !== 'H2') {
+        previous = previous.previousElementSibling;
+      }
+      expect(previous).not.toBeNull();
+      expect(previous?.tagName).toBe('H2');
+    });
+  });
+});

ws-nextjs-app/integration/pages/topicPage/pageContentTests.ts

@@ -0,0 +1,37 @@
+export default () => {
+  describe('Page content', () => {
+    describe('First item in the first curation', () => {
+      it('is the correct headline', () => {
+        const firstItemHeadline = document.querySelector(
+          '[data-testid="topic-promos"] > li  h2 a',
+        );
+        expect(firstItemHeadline).toBeInTheDocument();
+
+        if (firstItemHeadline) {
+          expect(firstItemHeadline.textContent).toMatchSnapshot();
+        }
+      });
+
+      it('is the correct image', () => {
+        const firstImage = document.querySelector(
+          '[data-testid="topic-promos"] > li  img, amp-img',
+        );
+        expect(firstImage).toBeInTheDocument();
+        expect(firstImage).toMatchSnapshot();
+      });
+    });
+
+    it('should display a simple curation grid', () => {
+      const simpleCurationGrid = document.querySelector(
+        '[data-testid="curation-grid-normal"]',
+      );
+
+      expect(simpleCurationGrid).toBeInTheDocument();
+    });
+
+    it('should render the main html tag with an attribute of role with the value of main', () => {
+      const mainTag = document.querySelector("main[role='main']");
+      expect(mainTag).toBeInTheDocument();
+    });
+  });
+};

src/integration/pages/topicPage/pidgin/__snapshots__/canonical.test.js.snap → ws-nextjs-app/integration/pages/topicPage/pidgin/__snapshots__/canonical.test.ts.snap

@@ -175,10 +175,24 @@ exports[`Canonical Topic Page Header Navigation link should match text and url 8
 
 exports[`Canonical Topic Page Main heading should match text 1`] = `"Donald Trump"`;
 
+exports[`Canonical Topic Page Page content First item in the first curation is the correct headline 1`] = `"Di 34 criminal charges against former US President Donald Trump and di likely punishment"`;
+
+exports[`Canonical Topic Page Page content First item in the first curation is the correct image 1`] = `
+<img
+  alt="Donald Trump in court wit im lawyers, including Todd Blanche (far left) and Susan Necheles (second from left)"
+  class="css-1seqhu9"
+  loading="eager"
+  sizes="(min-width: 63rem) 232px, (min-width: 37.5rem) 50vw, 33vw"
+  src="https://ichef.bbci.co.uk/ace/standard/240/cpsprodpb/ab73/live/2ca22200-d379-11ed-ae6f-bf4b4aaa99a6.jpg"
+  srcset="https://ichef.bbci.co.uk/ace/standard/85/cpsprodpb/ab73/live/2ca22200-d379-11ed-ae6f-bf4b4aaa99a6.jpg.webp 85w, https://ichef.bbci.co.uk/ace/standard/120/cpsprodpb/ab73/live/2ca22200-d379-11ed-ae6f-bf4b4aaa99a6.jpg.webp 120w, https://ichef.bbci.co.uk/ace/standard/170/cpsprodpb/ab73/live/2ca22200-d379-11ed-ae6f-bf4b4aaa99a6.jpg.webp 170w, https://ichef.bbci.co.uk/ace/standard/232/cpsprodpb/ab73/live/2ca22200-d379-11ed-ae6f-bf4b4aaa99a6.jpg.webp 232w, https://ichef.bbci.co.uk/ace/standard/325/cpsprodpb/ab73/live/2ca22200-d379-11ed-ae6f-bf4b4aaa99a6.jpg.webp 325w, https://ichef.bbci.co.uk/ace/standard/450/cpsprodpb/ab73/live/2ca22200-d379-11ed-ae6f-bf4b4aaa99a6.jpg.webp 450w, https://ichef.bbci.co.uk/ace/standard/660/cpsprodpb/ab73/live/2ca22200-d379-11ed-ae6f-bf4b4aaa99a6.jpg.webp 660w, https://ichef.bbci.co.uk/ace/standard/800/cpsprodpb/ab73/live/2ca22200-d379-11ed-ae6f-bf4b4aaa99a6.jpg.webp 800w"
+  style="aspect-ratio:16 / 9"
+/>
+`;
+
 exports[`Canonical Topic Page SEO Apple Touch Icon should match attributes 1`] = `
 {
   "sizes": null,
-  "url": "http://localhost:7080/pidgin/images/icons/icon-192x192.png",
+  "url": "http://localhost:7081/pidgin/images/icons/icon-192x192.png",
 }
 `;
 
@@ -210,7 +224,7 @@ exports[`Canonical Topic Page SEO Apple Touch Icon should match attributes 5`] =
 }
 `;
 
-exports[`Canonical Topic Page SEO Canonical link 1`] = `"http://localhost:7080/pidgin/topics/c95y35941vrt"`;
+exports[`Canonical Topic Page SEO Canonical link 1`] = `"http://localhost:7081/pidgin/topics/c95y35941vrt"`;
 
 exports[`Canonical Topic Page SEO Dir attribute 1`] = `"ltr"`;
 
@@ -239,7 +253,7 @@ exports[`Canonical Topic Page SEO Linked data should match text 1`] = `
         "name": "Nigerian Pidgin",
       },
       "mainEntityOfPage": {
-        "@id": "http://localhost:7080/pidgin/topics/c95y35941vrt",
+        "@id": "http://localhost:7081/pidgin/topics/c95y35941vrt",
         "@type": "WebPage",
         "name": "Donald Trump",
       },
@@ -255,7 +269,7 @@ exports[`Canonical Topic Page SEO Linked data should match text 1`] = `
         "publishingPrinciples": "https://www.bbc.com/pidgin/institutional-48528766",
       },
       "thumbnailUrl": "https://static.files.bbci.co.uk/ws/simorgh-assets/public/pidgin/images/metadata/poster-1024x576.png",
-      "url": "http://localhost:7080/pidgin/topics/c95y35941vrt",
+      "url": "http://localhost:7081/pidgin/topics/c95y35941vrt",
     },
     {
       "@type": "ItemList",
@@ -432,7 +446,7 @@ exports[`Canonical Topic Page SEO OG title 1`] = `"Donald Trump - BBC News Pidgi
 
 exports[`Canonical Topic Page SEO OG type 1`] = `"website"`;
 
-exports[`Canonical Topic Page SEO OG url 1`] = `"http://localhost:7080/pidgin/topics/c95y35941vrt"`;
+exports[`Canonical Topic Page SEO OG url 1`] = `"http://localhost:7081/pidgin/topics/c95y35941vrt"`;
 
 exports[`Canonical Topic Page SEO Page title 1`] = `"Donald Trump - BBC News Pidgin"`;