Migrate MostRead e2es to Next.js app

cypress/e2e/pages/mostReadPage/index.cy.js → ws-nextjs-app/cypress/e2e/mostReadPage/index.cy.ts

@@ -1,37 +1,30 @@
-import runTestsForPage from '#nextjs/cypress/support/helpers/runTestsForPage';
-import testsForCanonicalOnly from './testsForCanonicalOnly';
-import crossPlatformTests from './tests';
-import testsForAllPages from '../testsForAllPages';
-import testsForAllCanonicalPages from '../testsForAllCanonicalPages';
-import { assertPageView } from '../../specialFeatures/atiAnalytics/assertions';
-import getPathWithSuffix from '../../../support/helpers/getPathWithSuffix';
-import { assertLiteSiteSummaryComponentToMainSiteClick } from '../../specialFeatures/atiAnalytics/assertions/liteSiteSummary';
+import { MOST_READ_PAGE } from '#app/routes/utils/pageTypes';
+import runTestsForPage from '../../support/helpers/runTestsForPage';
+import {
+  assertMostReadComponentClick,
+  assertMostReadComponentView,
+} from '../specialFeatures/atiAnalytics/assertions/mostRead';
 import {
   assertDropdownNavigationComponentClick,
   assertDropdownNavigationComponentView,
   assertScrollableNavigationComponentClick,
   assertScrollableNavigationComponentView,
-} from '../../specialFeatures/atiAnalytics/assertions/navigation';
-import {
-  assertMostReadComponentClick,
-  assertMostReadComponentView,
-} from '../../specialFeatures/atiAnalytics/assertions/mostRead';
+} from '../specialFeatures/atiAnalytics/assertions/navigation';
+import { assertLiteSiteSummaryComponentToMainSiteClick } from '../specialFeatures/atiAnalytics/assertions/liteSiteSummary';
+import getPathWithSuffix from '../../support/helpers/getPathWithSuffix';
+import { assertPageView } from '../specialFeatures/atiAnalytics/assertions';
+import testsForAllCanonicalPages from '../testsForAllCanonicalPages';
+import testsForAllPages from '../testsForAllPages';
+import crossPlatformTests from './tests';
+import testsForCanonicalOnly from './testsForCanonicalOnly';
 
-const pageType = 'mostReadPage';
 const tests = [
   crossPlatformTests,
   testsForCanonicalOnly,
   testsForAllPages,
   testsForAllCanonicalPages,
 ];
 
-/**
- * Use a selection of services to ensure Most Read page renders as expected
- * arabic: RTL service
- * igbo: small service, only 5 items displayed
- * pidgin: LTR service
- * serbian: service with variant
- */
 const testSuites = [
   {
     path: '/pidgin/popular/read',
@@ -42,32 +35,24 @@ const testSuites = [
   {
     path: '/arabic/popular/read',
     service: 'arabic',
-    runforEnv: ['local', 'test', 'live'],
+    runforEnv: ['test', 'live'],
     tests,
   },
   {
     path: '/igbo/popular/read',
     service: 'igbo',
-    runforEnv: ['local', 'test', 'live'],
+    runforEnv: ['test', 'live'],
     tests,
   },
   {
     path: '/serbian/cyr/popular/read',
     service: 'serbian',
     variant: 'cyr',
-    runforEnv: ['local', 'test', 'live'],
+    runforEnv: ['test', 'live'],
     tests,
   },
 ];
 
-const ampTestSuites = testSuites.map(testSuite => {
-  return {
-    ...testSuite,
-    path: `${testSuite.path}.amp`,
-    tests: [crossPlatformTests],
-  };
-});
-
 const liteTestSuites = testSuites.map(testSuite => {
   return {
     ...testSuite,
@@ -78,11 +63,11 @@ const liteTestSuites = testSuites.map(testSuite => {
 
 const atiAnalyticsTestSuites = [
   {
-    path: '/gahuza/popular/read',
+    path: '/pidgin/popular/read',
     runforEnv: ['local', 'test', 'live'],
-    service: 'gahuza',
-    pageIdentifier: 'gahuza.popular.read.page',
-    siteId: 40,
+    service: 'pidgin',
+    pageIdentifier: 'pidgin.popular.read.page',
+    siteId: 70,
     applicationType: 'responsive',
     contentType: 'list-datadriven',
     tests: [
@@ -97,15 +82,6 @@ const atiAnalyticsTestSuites = [
   },
 ];
 
-const atiAnalyticsAmpTestSuites = atiAnalyticsTestSuites.map(testSuite => {
-  return {
-    ...testSuite,
-    path: getPathWithSuffix({ path: testSuite.path, suffix: '.amp' }),
-    applicationType: 'amp',
-    tests: [assertPageView],
-  };
-});
-
 const atiAnalyticsLiteTestSuites = atiAnalyticsTestSuites.map(testSuite => {
   const excludedLiteTests = [
     assertDropdownNavigationComponentView, // Dropdown navigation removed from all pages, as it requires JS
@@ -128,17 +104,17 @@ const atiAnalyticsLiteTestSuites = atiAnalyticsTestSuites.map(testSuite => {
 });
 
 runTestsForPage({
-  pageType,
-  testSuites: [...testSuites, ...ampTestSuites, ...liteTestSuites],
+  pageType: MOST_READ_PAGE,
+  testSuites: [...testSuites, ...liteTestSuites],
 });
 
 runTestsForPage({
-  pageType,
+  pageType: MOST_READ_PAGE,
   testSuites: atiAnalyticsTestSuites,
   testIsolation: true,
 });
 
 runTestsForPage({
-  pageType,
-  testSuites: [...atiAnalyticsAmpTestSuites, ...atiAnalyticsLiteTestSuites],
+  pageType: MOST_READ_PAGE,
+  testSuites: [...atiAnalyticsLiteTestSuites],
 });

cypress/e2e/pages/mostReadPage/mostReadAssertions.js → ws-nextjs-app/cypress/e2e/mostReadPage/mostReadAssertions.ts

@@ -1,14 +1,10 @@
 /* eslint-disable import/no-unresolved */
 import appConfig from '#src/server/utilities/serviceConfigs';
-import { getMostReadEndpoint } from '#lib/utilities/getUrlHelpers/getMostReadUrls';
 import { serviceNumerals } from '#app/components/MostRead/Canonical/Rank';
-import getAppEnv from '#cypress/support/helpers/getAppEnv';
-import ampOnlyServices from '#cypress/support/helpers/ampOnlyServices';
 
-// news, newsround, and sport are services we serve on amp, but do not want to run most read tests on
-const MOST_READ_EXCLUDED_SERVICES = [...ampOnlyServices, 'ukchina'];
+const MOST_READ_EXCLUDED_SERVICES = ['ukchina'];
 
-export const crossPlatform = ({ service, variant = 'default' }) => {
+export default ({ service, variant = 'default' }) => {
   if (!MOST_READ_EXCLUDED_SERVICES.includes(service)) {
     const {
       mostRead: { hasMostRead, numberOfItems },
@@ -64,38 +60,3 @@ export const crossPlatform = ({ service, variant = 'default' }) => {
     }
   }
 };
-
-export const ampOnly = ({ service, variant = 'default' }) => {
-  if (!MOST_READ_EXCLUDED_SERVICES.includes(service)) {
-    const {
-      mostRead: { hasMostRead },
-    } = appConfig[service][variant];
-    if (hasMostRead) {
-      describe('Most Read Component', () => {
-        beforeEach(() => {
-          cy.getToggles(service);
-        });
-        it('should not render when data fetch fails', () => {
-          const mostReadPath = getMostReadEndpoint({
-            variant: variant !== 'default' && variant,
-            isBff: getAppEnv() !== 'local',
-          });
-          cy.intercept(
-            {
-              method: 'GET',
-              pathname: mostReadPath,
-            },
-            { statusCode: 404 },
-          );
-          cy.reload();
-          cy.fixture(`toggles/${service}.json`).then(toggles => {
-            if (toggles.mostRead?.enabled) {
-              cy.get('[data-e2e="most-read"]').scrollIntoView();
-              cy.get('[data-e2e="most-read"] li').should('not.exist');
-            }
-          });
-        });
-      });
-    }
-  }
-};

cypress/e2e/pages/mostReadPage/tests.js → ws-nextjs-app/cypress/e2e/mostReadPage/tests.ts

@@ -1,4 +1,4 @@
-import { crossPlatform as mostReadAssertions } from './mostReadAssertions';
+import mostReadAssertions from './mostReadAssertions';
 
 export default ({ service, variant }) => {
   mostReadAssertions({ service, variant });

cypress/e2e/pages/mostReadPage/testsForCanonicalOnly.js → ws-nextjs-app/cypress/e2e/mostReadPage/testsForCanonicalOnly.ts

@@ -1,4 +1,4 @@
-import chartbeatTests from '../../../support/helpers/chartbeatTests';
+import chartbeatTests from '../../support/helpers/chartbeatTests';
 
 export default ({ service, pageType, variant = 'default' }) => {
   describe(`testsForCanonicalOnly for ${service} ${pageType} ${variant}`, () => {

ws-nextjs-app/pages/[service]/popular/[read]/[[...variant]].page.test.tsx

@@ -41,6 +41,22 @@ describe('handleMostReadRoute', () => {
     expect(result.props.pageType).toEqual(MOST_READ_PAGE);
   });
 
+  it('returns correct metadata.atiAnalytics', () => {
+    return handleMostReadRoute(mockGetServerSidePropsContext).then(result => {
+      expect(result.props.pageData.metadata.atiAnalytics).toEqual({
+        contentType: 'list-datadriven',
+        pageIdentifier: 'pidgin.popular.read.page',
+        timePublished:
+          pidginMostReadTopicFixture?.data?.curations?.[0]?.mostRead
+            ?.firstRecordTimeStamp,
+        timeUpdated:
+          pidginMostReadTopicFixture?.data?.curations?.[0]?.mostRead
+            ?.lastRecordTimeStamp,
+        pageTitle: pidginMostReadTopicFixture?.data?.title || null,
+      });
+    });
+  });
+
   it('returns error props if data fetch returns 500', async () => {
     jest.spyOn(getPageDataModule, 'default').mockResolvedValue({
       data: {

ws-nextjs-app/pages/[service]/popular/[read]/[[...variant]].page.tsx

@@ -101,6 +101,10 @@ export const getServerSideProps = async (
         ...data.pageData,
         metadata: {
           ...data.pageData.metadata,
+          atiAnalytics: {
+            ...data.pageData.metadata.atiAnalytics,
+            pageTitle: data.pageData.title || null,
+          },
           type: MOST_READ_PAGE,
         },
       },