@newskit-render/core 1.14.1 → 1.24.1

package/cypress/support/commands.js

@@ -1,25 +1,48 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+Cypress.Commands.add('mockConsentAndVisit', (url) => {
+  cy.setCookie('nukt_sp_consent', 'JABCDEFGHI')
+  cy.setCookie('consentUUID', '28cfcd1e-6916-4488-9d84-54f2618eaa14')
+  cy.visit(url)
+})
+
+Cypress.Commands.add('GetAcsSession', () => {
+  cy.request({
+    method: 'POST',
+    url: 'https://login.staging-thesun.co.uk/services/session',
+    headers: {
+      'Content-Type': 'application/vnd.newsuk.acs.createsession-v1+json',
+    },
+    body: {
+      rememberMe: false,
+      gotoUrl: 'https://login.staging-thesun.co.uk/',
+      sso: false,
+      authCredentials: {
+        username: 'temp.account@tempaccount.com',
+        password: 'asdasd1A',
+      },
+    },
+  }).then((response) => {
+    const acs_ngn = response.body.acsCookies.cookies[0].value
+    cy.setCookie('acs_ngn', acs_ngn)
+  })
+})
+
+Cypress.Commands.add('createNewEmail', () => {
+  const newEmail =
+    Cypress.env('MAIN_USER_EMAIL').split('@')[0].split('').reverse().join('') +
+    '@' +
+    Cypress.env('MAIN_USER_EMAIL').split('@')[1]
+  Cypress.env('newEmail', newEmail)
+})
+
+Cypress.Commands.add('getZuoraElement', (selector) => {
+  if (Cypress.config('chromeWebSecurity')) {
+    throw new Error('To get Zuora element `chromeWebSecurity` must be disabled')
+  }
+
+  return cy
+    .get('iframe')
+    .its('0.contentDocument.body')
+    .should('not.be.empty')
+    .then(cy.wrap)
+    .find(selector)
+})

package/cypress/support/index.js

@@ -15,6 +15,8 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
+import 'cypress-axe'
+import '@applitools/eyes-cypress/commands'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

package/cypress/visual/account/visual-regression.spec.js

@@ -0,0 +1,31 @@
+const pages = [
+  { url: '/account', pageName: 'Personal Details' },
+  { url: '/account/edit/name', pageName: 'Name form' },
+  { url: '/account/edit/email', pageName: 'Email form' },
+  { url: '/account/edit/password', pageName: 'Password from' },
+  { url: '/account/edit/mobile', pageName: 'Mobile phone from' },
+  { url: '/account/edit/address', pageName: 'Address form' },
+  {
+    url: '/account/subscription-and-billing',
+    pageName: 'Subscription and Billing',
+  },
+  {
+    url: '/account/newsletters-and-alerts',
+    pageName: 'Newsletters and Alerts',
+  },
+  {
+    url: '/account/edit/commenting-notifications',
+    pageName: 'Commenting Notifications form',
+  },
+]
+
+describe('Visual regression', () => {
+  pages.forEach(({ url, pageName }) => {
+    it(`should pass regression: ${pageName}`, () => {
+      cy.mockConsentAndVisit(url)
+      cy.eyesOpen()
+      cy.eyesCheckWindow(`${pageName} page`)
+      cy.eyesClose()
+    })
+  })
+})

package/helpers/a11y.ts

@@ -1,7 +1,9 @@
-export const handleEnterKeyPress =
-  (onClick: () => void) =>
-  ({ key }: { key: string }) => {
-    if (key === 'Enter') {
-      onClick()
-    }
+export const handleEnterKeyPress = (onClick: () => void) => ({
+  key,
+}: {
+  key: string
+}) => {
+  if (key === 'Enter') {
+    onClick()
   }
+}

package/helpers/mocks/articleMock.ts

@@ -26,25 +26,29 @@ export const relatedArticles = [
   {
     title: 'Prince Harry',
     tag: 'NEWS',
-    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a sodales leo. Cras egestas nisl libero, vitae viverra justo gravida quis.',
+    text:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a sodales leo. Cras egestas nisl libero, vitae viverra justo gravida quis.',
     href: imagePlaceholderHref('70x50'),
   },
   {
     title: 'Meghan Markle',
     tag: 'SPORT',
-    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a sodales leo. Cras egestas nisl libero, vitae viverra justo gravida quis.',
+    text:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a sodales leo. Cras egestas nisl libero, vitae viverra justo gravida quis.',
     href: imagePlaceholderHref('70x50'),
   },
   {
     title: 'Royal Family',
     tag: 'CULTURE',
-    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a sodales leo. Cras egestas nisl libero, vitae viverra justo gravida quis.',
+    text:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a sodales leo. Cras egestas nisl libero, vitae viverra justo gravida quis.',
     href: imagePlaceholderHref('70x50'),
   },
   {
     title: 'Royal Family',
     tag: 'CORONAVIRUS',
-    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a sodales leo. Cras egestas nisl libero, vitae viverra justo gravida quis.',
+    text:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a sodales leo. Cras egestas nisl libero, vitae viverra justo gravida quis.',
     href: imagePlaceholderHref('70x50'),
   },
 ]

package/helpers/mocks/getRadioPostMock.ts

@@ -29,7 +29,8 @@ export default [
                     italic: false,
                     underline: false,
                     monospace: false,
-                    text: 'Proin eget tortor risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; ',
+                    text:
+                      'Proin eget tortor risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; ',
                   },
                   {
                     type: 'text',
@@ -45,7 +46,8 @@ export default [
                     italic: false,
                     underline: false,
                     monospace: false,
-                    text: ', auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec rutrum congue leo eget malesuada. Proin eget tortor risus. Sed porttitor lectus nibh. Donec sollicitudin molestie malesuada.',
+                    text:
+                      ', auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec rutrum congue leo eget malesuada. Proin eget tortor risus. Sed porttitor lectus nibh. Donec sollicitudin molestie malesuada.',
                   },
                 ],
               },

package/helpers/mocks/getUniversalArticleMock.ts

@@ -51,17 +51,21 @@ export default [
           summary: {
             children: [
               {
-                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget lorem vel nunc feugiat malesuada ut ac nisi. Morbi odio ipsum, dignissim nec turpis vel, laoreet condimentum tortor. Duis laoreet tincidunt ullamcorper.',
+                text:
+                  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget lorem vel nunc feugiat malesuada ut ac nisi. Morbi odio ipsum, dignissim nec turpis vel, laoreet condimentum tortor. Duis laoreet tincidunt ullamcorper.',
               },
               {
-                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget lorem vel nunc feugiat malesuada ut ac nisi. Morbi odio ipsum, dignissim nec turpis vel, laoreet condimentum tortor. Duis laoreet tincidunt ullamcorper.',
+                text:
+                  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget lorem vel nunc feugiat malesuada ut ac nisi. Morbi odio ipsum, dignissim nec turpis vel, laoreet condimentum tortor. Duis laoreet tincidunt ullamcorper.',
               },
               {
                 url: 'http://this-is-a-url/',
-                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget lorem vel nunc feugiat malesuada ut ac nisi. Morbi odio ipsum, dignissim nec turpis vel, laoreet condimentum tortor. Duis laoreet tincidunt ullamcorper.',
+                text:
+                  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget lorem vel nunc feugiat malesuada ut ac nisi. Morbi odio ipsum, dignissim nec turpis vel, laoreet condimentum tortor. Duis laoreet tincidunt ullamcorper.',
               },
               {
-                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget lorem vel nunc feugiat malesuada ut ac nisi. Morbi odio ipsum, dignissim nec turpis vel, laoreet condimentum tortor. Duis laoreet tincidunt ullamcorper.',
+                text:
+                  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget lorem vel nunc feugiat malesuada ut ac nisi. Morbi odio ipsum, dignissim nec turpis vel, laoreet condimentum tortor. Duis laoreet tincidunt ullamcorper.',
               },
             ],
           },

package/infrastructure/.circleci/config.yml

@@ -15,7 +15,7 @@ orbs:
 
       node:
         docker:
-          - image: circleci/node:12.18-buster-browsers
+          - image: circleci/node:16.13-buster-browsers
             auth:
               username: ${DOCKER_USERNAME}
               password: ${DOCKER_PASSWORD}
@@ -994,11 +994,11 @@ workflows:
     jobs:
       - newskit/init_aws:
           <<: *only_on_master_branch
-          context: ncu-newskit-render-trial-project-dev
+          context: <% PROJECT_NAME >-dev
           name: init_aws_eks_pr
           job_type: 'eks_pr'
       - newskit/remove_all_pr_environments:
           <<: *only_on_master_branch
-          context: ncu-newskit-render-trial-project-dev
+          context: <% PROJECT_NAME >-dev
           requires:
             - init_aws_eks_pr

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.14.1",
+  "version": "1.24.1",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
   "keywords": [],
   "engines": {
-    "node": ">=12.0.0"
+    "node": ">=16.13.0"
   },
   "scripts": {
     "build": "next build",
@@ -16,9 +16,11 @@
     "test:unit": "jest --coverage --verbose --silent --i",
     "test:unit:ci": "JEST_JUNIT_OUTPUT_NAME=core.xml node --max_old_space_size=4096 --expose-gc ./node_modules/.bin/jest --ci --coverage --reporters=default --reporters=jest-junit --runInBand --logHeapUsage",
     "test:watch": "jest --watch",
-    "cy:run": "cypress run -b chrome --headless",
-    "cy:open": "cypress open",
+    "cy:run": "cypress run --config-file cypress/config/config.e2e.json -b chrome --headless",
+    "cy:vis": "cypress run --config-file cypress/config/config.visual.json -b chrome --headless",
+    "cy:open": "cypress open --config-file cypress/config/config.e2e.json -b chrome",
     "test:e2e": "yarn cy:run",
+    "test:e2e:ci": "cypress run --env -b chrome --headless",
     "start:test:server": "next build && next start",
     "wait:server": "wait-on http://localhost:3000",
     "pact:test": "NEWSKIT_API_ENV_URL='http://localhost:4343' jest --config=jest.config.pact.js",
@@ -30,63 +32,67 @@
     "analyze": "ANALYZE=true next build"
   },
   "dependencies": {
-    "@apollo/client": "^3.4.16",
-    "@newskit-render/api": "^0.9.0",
-    "@newskit-render/auth": "^0.25.0",
-    "@newskit-render/checkout": "^0.15.2",
-    "@newskit-render/my-account": "^0.124.1",
-    "@newskit-render/shared-components": "^0.26.1",
-    "@newskit-render/sitemap": "^0.28.0",
-    "@newskit-render/validation": "^0.30.0",
-    "cross-fetch": "^3.1.4",
-    "graphql": "^15.6.0",
-    "newrelic": "^7.1.0",
-    "newskit": "4.3.1",
-    "next": "^12.0.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.2",
-    "react-helmet": "^6.1.0",
+    "@apollo/client": "3.4.16",
+    "@newskit-render/api": "^0.14.0",
+    "@newskit-render/auth": "^0.28.0",
+    "@newskit-render/checkout": "^0.20.2",
+    "@newskit-render/feature-flags": "^0.10.0",
+    "@newskit-render/my-account": "^0.135.0",
+    "@newskit-render/shared-components": "^0.33.0",
+    "@newskit-render/sitemap": "^0.33.0",
+    "@newskit-render/validation": "^0.34.0",
+    "cross-fetch": "3.1.5",
+    "graphql": "15.6.0",
+    "newrelic": "7.1.0",
+    "newskit": "5.0.0",
+    "next": "12.0.10",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-helmet": "6.1.0",
     "react-hook-form": "7.8.4"
   },
   "devDependencies": {
-    "@apollo/react-testing": "^4.0.0",
-    "@emotion/jest": "^11.3.0",
-    "@next/bundle-analyzer": "^12.0.8",
-    "@pact-foundation/pact": "^9.12.1",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.0.2",
-    "@types/newrelic": "^7.0.0",
-    "@types/react": "^16.9.49",
-    "@types/react-helmet": "^6.1.0",
-    "@typescript-eslint/eslint-plugin": "^3.7.1",
-    "@typescript-eslint/parser": "^3.7.1",
-    "babel-jest": "^26.3.0",
+    "@apollo/react-testing": "4.0.0",
+    "@applitools/eyes-cypress": "3.23.2",
+    "@emotion/jest": "11.3.0",
+    "@next/bundle-analyzer": "12.0.8",
+    "@pact-foundation/pact": "9.12.1",
+    "@testing-library/jest-dom": "5.11.4",
+    "@testing-library/react": "11.0.2",
+    "@types/newrelic": "7.0.0",
+    "@types/react": "17.0.2",
+    "@types/react-helmet": "6.1.0",
+    "@typescript-eslint/eslint-plugin": "3.7.1",
+    "@typescript-eslint/parser": "3.7.1",
+    "axe-core": "4.3.4",
+    "babel-jest": "26.3.0",
     "cypress": "9.0.0",
-    "eslint": "^6.6.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-airbnb-typescript": "^9.0.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-config-react-app": "^5.2.1",
-    "eslint-import-resolver-typescript": "^2.0.0",
-    "eslint-loader": "^4.0.2",
-    "eslint-plugin-cypress": "^2.11.2",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.22.1",
+    "cypress-axe": "0.13.0",
+    "eslint": "6.6.0",
+    "eslint-config-airbnb": "18.2.0",
+    "eslint-config-airbnb-typescript": "9.0.0",
+    "eslint-config-prettier": "6.11.0",
+    "eslint-config-react-app": "5.2.1",
+    "eslint-import-resolver-typescript": "2.0.0",
+    "eslint-loader": "4.0.2",
+    "eslint-plugin-cypress": "2.11.2",
+    "eslint-plugin-flowtype": "5.2.0",
+    "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-prettier": "3.1.4",
     "eslint-plugin-react": "7.19.0",
-    "eslint-plugin-react-hooks": "^1.6.1",
-    "jest": "^27.2.4",
-    "jest-junit": "^12.0.0",
-    "jest-watch-typeahead": "^0.6.3",
-    "lint-staged": "^12.1.7",
-    "next-transpile-modules": "^8.0.0",
-    "prettier": "^2.0.5",
-    "prettier-eslint": "^11.0.0",
-    "prettier-eslint-cli": "^5.0.0",
-    "ts-jest": "^27.0.5",
-    "typescript": "^4.4.3",
-    "wait-on": "^5.3.0"
+    "eslint-plugin-react-hooks": "1.6.1",
+    "jest": "27.4.7",
+    "jest-junit": "12.0.0",
+    "jest-watch-typeahead": "0.6.3",
+    "lint-staged": "12.1.7",
+    "next-transpile-modules": "8.0.0",
+    "prettier": "2.0.5",
+    "prettier-eslint": "11.0.0",
+    "prettier-eslint-cli": "5.0.0",
+    "ts-jest": "27.1.3",
+    "typescript": "4.4.3",
+    "wait-on": "5.3.0"
   },
   "precommit": [
     "precommit"

package/pages/[section]/[articleId]/[articleSlug].tsx

@@ -70,6 +70,7 @@ export async function getServerSideProps(context) {
       twitterUsername: process.env.TWITTER_USERNAME || '',
       siteHost: process.env.SITE_HOST || '',
       gscId: process.env.GSC_ID || '',
+      showAds: true,
       // user,
     },
   }

package/pages/[section]/index.tsx

@@ -38,6 +38,7 @@ export async function getServerSideProps(context) {
     props: {
       page: data.page,
       isIndexPage: true,
+      showAds: true,
       //  user,
     },
   }

package/pages/_app.tsx

@@ -3,6 +3,12 @@ import { AppProps } from 'next/app'
 import Head from 'next/head'
 import { ThemeProvider, Global, css, styled } from 'newskit'
 import { SessionProvider } from '@newskit-render/auth'
+import {
+  getFeatureFlags,
+  FeatureFlagsContextProvider,
+  FeatureFlag,
+  createFeatureFlagsInstance,
+} from '@newskit-render/feature-flags'
 import { AppContextProvider, AppContext } from '../app-context/AppContext'
 import { logger } from '../helpers/logger'
 
@@ -12,6 +18,12 @@ if (!process.browser) {
   logger()
 }
 
+if (process.env.OPTIMIZELY_SDK_KEY) {
+  createFeatureFlagsInstance({
+    optimizelyConfig: { sdkKey: process.env.OPTIMIZELY_SDK_KEY },
+  })
+}
+
 const GlobalStyling = css`
   @font-face {
     font-family: GillSansMTStd-Medium;
@@ -240,7 +252,11 @@ const PageContainer = styled.div`
   min-height: 100vh;
 `
 
-function MyApp({ Component, pageProps }: AppProps) {
+interface MyAppProps extends AppProps {
+  featureFlags?: FeatureFlag
+}
+
+function MyApp({ Component, pageProps, featureFlags }: MyAppProps) {
   return (
     <AppContextProvider>
       <>
@@ -254,21 +270,36 @@ function MyApp({ Component, pageProps }: AppProps) {
             key="viewport"
           />
         </Head>
-        <SessionProvider pageProps={pageProps}>
-          <AppContext.Consumer>
-            {({ theme }) => (
-              <ThemeProvider theme={theme}>
-                <Global styles={GlobalStyling} />
-                <PageContainer>
-                  <Component {...pageProps} />
-                </PageContainer>
-              </ThemeProvider>
-            )}
-          </AppContext.Consumer>
-        </SessionProvider>
+        <FeatureFlagsContextProvider context={featureFlags}>
+          <SessionProvider pageProps={pageProps}>
+            <AppContext.Consumer>
+              {({ theme }) => (
+                <ThemeProvider theme={theme}>
+                  <Global styles={GlobalStyling} />
+                  <PageContainer>
+                    <Component {...pageProps} />
+                  </PageContainer>
+                </ThemeProvider>
+              )}
+            </AppContext.Consumer>
+          </SessionProvider>
+        </FeatureFlagsContextProvider>
       </>
     </AppContextProvider>
   )
 }
 
+MyApp.getInitialProps = async ({ Component, ctx }) => {
+  let pageProps = {}
+  if (Component.getInitialProps) {
+    pageProps = await Component.getInitialProps(ctx)
+  }
+
+  if (process.env.OPTIMIZELY_SDK_KEY) {
+    const featureFlags = await getFeatureFlags()
+    return { featureFlags, pageProps }
+  }
+  return { pageProps }
+}
+
 export default MyApp

package/pages/_document.tsx

@@ -32,6 +32,13 @@ export default class MyDocument extends Document {
 
   render() {
     const helmet = Helmet.rewind()
+    const showAds =
+      this.props.__NEXT_DATA__.props.pageProps &&
+      this.props.__NEXT_DATA__.props.pageProps.showAds
+        ? this.props.__NEXT_DATA__.props.pageProps.showAds
+        : false
+
+    const { featureFlags } = this.props.__NEXT_DATA__.props
     return (
       <Html lang="en">
         <Head>
@@ -46,12 +53,14 @@ export default class MyDocument extends Document {
               ),
             }}
           />
-          {EXPERIMENTATION_WEB && (
-            <ExperimentationWeb
-              optimizelyWebConfig={{ scriptCdn: EXPERIMENTATION_WEB }}
-              reactHelmet={Helmet}
-            />
-          )}
+          {EXPERIMENTATION_WEB &&
+            featureFlags &&
+            featureFlags.experimentation_web_flag && (
+              <ExperimentationWeb
+                optimizelyWebConfig={{ scriptCdn: EXPERIMENTATION_WEB }}
+                reactHelmet={Helmet}
+              />
+            )}
           {helmet.script.toComponent()}
           {SOURCEPOINT_ACCOUNT_ID && (
             <Consent
@@ -62,14 +71,18 @@ export default class MyDocument extends Document {
             />
           )}
           <meta name="robots" content="noindex" />
-          <script
-            type="text/javascript"
-            src="https://ads.newskit.co.uk/prebid.newskit.min.js"
-          />
-          <script
-            type="text/javascript"
-            src="https://ads.newskit.co.uk/ads.newskit.min.js"
-          />
+          {showAds && (
+            <>
+              <script
+                type="text/javascript"
+                src="https://ads.newskit.co.uk/prebid.newskit.min.js"
+              />
+              <script
+                type="text/javascript"
+                src="https://ads.newskit.co.uk/ads.newskit.min.js"
+              />
+            </>
+          )}
         </Head>
         <body>
           {TEALIUM_ACCOUNT_ID && (

package/pages/checkout/account-creation/index.tsx

@@ -1,10 +1,18 @@
 import { AccountCreation, getProviderProps } from '@newskit-render/checkout'
 import React, { useContext } from 'react'
 import { AppContext } from '../../../app-context/AppContext'
+import validation from '../../../validation'
 
 const AccountCreationPage = (props) => {
   const { theme, setTheme } = useContext(AppContext)
-  return <AccountCreation {...props} customTheme={theme} setTheme={setTheme} />
+  return (
+    <AccountCreation
+      {...props}
+      customTheme={theme}
+      setTheme={setTheme}
+      validation={validation}
+    />
+  )
 }
 
 export default AccountCreationPage

package/pages/index.tsx

@@ -35,6 +35,7 @@ export async function getServerSideProps(context) {
   return {
     props: {
       page,
+      showAds: true,
       // user: (user || null),
     },
   }