@newskit-render/core 0.0.0-d55b7d88

package/cypress/support/e2e.js

@@ -0,0 +1,22 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+import 'cypress-axe'
+import '@percy/cypress';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package/cypress/support/users.js

@@ -0,0 +1,58 @@
+// All accounts are created in staging environment
+export const userMap = {
+  default: {
+    username: 'render.e2e.default@yopmail.com', // Sun
+    password: 'Ad45p0-swq151@',
+  },
+  noSub: {
+    username: 'render.e2e.no-sub@yopmail.com', // Sun
+    password: 'Ad45p0-swq151@',
+  },
+  expiredSub: {
+    username: 'tim.newsuk3@yopmail.com', // Sun
+    password: 'Ad45p0-swq151@',
+  },
+  withSub: {
+    username: 'render-e2e-subscription@yopmail.com', // Sun
+    password: 'Testing123$',
+  },
+  paypalSub: {
+    username: 'render-paypal-payment@yopmail.com', // Sun
+    password: 'testing123',
+  },
+  tnl: {
+    username: 'cmp1aug2022printstag@yopmail.com', //Print user
+    password: 'Password123',
+  },
+  digitalCard: {
+    //dtc=false
+    username: 'cmp-digi-card-20-09-22@yopmail.com',
+    password: 'Password123',
+  },
+  digitalDirectDebit: {
+    //dtc=false
+    username: 'cmp-digi-direct-20-09-22@yopmail.com',
+    password: 'Password123',
+  },
+  print: {
+    //dtc=true
+    username: 'cmp-dtc-card-20-09-22@yopmail.com',
+    password: 'Password123',
+  },
+  printVouchers: {
+    //dtc=false
+    username: 'cmp-test-direct-20-09-22@yopmail.com',
+    password: 'Password123',
+  },
+  digiprint: {
+    //dtc=true
+    username: 'digi-print.dtc.test@yopmail.com',
+    password: 'Password123',
+  },
+  digiprintVouchers: {
+    //dtc=false
+    username: 'digi-print-card-15-11-22@yopmail.com',
+    password: 'Password123',
+  },
+  }
+  

package/cypress/visual/account/print-visual-regression.cy.js

@@ -0,0 +1,9 @@
+describe('Visual regression for print and digi_print subscriptions', () => {
+  it('should show sections for print user subscriptions', () => {
+    cy.GetTnlAcsSession('print')
+    cy.mockConsentAndVisit('/account/subscription-and-billing')
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(1000)
+    cy.percySnapshot('Subscription and Billing page for print subscriptions')
+  })
+})

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

@@ -0,0 +1,40 @@
+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/cancellation', pageName: 'Cancel reason' },
+  {
+    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',
+  },
+  {
+    url: '/account/edit/delivery-instructions',
+    pageName: 'delivery instructions form',
+  },
+  {
+    url: '/account/holiday-stop',
+    pageName: 'Holiday Stops',
+  },
+]
+
+describe('Visual regression', () => {
+  pages.forEach(({ url, pageName }) => {
+    it(`should pass regression: ${pageName}`, () => {
+      cy.mockConsentAndVisit(url)
+      // eslint-disable-next-line cypress/no-unnecessary-waiting
+      cy.wait(1000)
+      cy.percySnapshot(`${pageName} page`)
+    })
+  })
+})

package/cypress/visual/empty/empty.cy.js

@@ -0,0 +1,5 @@
+// Running this empty test is a workaround to skip the visual tests when no visual changes have been made.
+it(`should always pass empty test`, { baseUrl: null }, () => {
+  cy.visit('./cypress/fixtures/empty.html')
+  cy.percySnapshot()
+})

package/cypress.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig } from 'cypress'
+import { loadEnvConfig } from '@next/env'
+
+export default defineConfig({
+  video: false,
+  screenshotOnRunFailure: true,
+  defaultCommandTimeout: 50000,
+  chromeWebSecurity: false,
+  retries: 1,
+  env: {
+    E2E_BASE_URL: 'http://localhost:3000/api/account',
+    ACCOUNT_PROVIDER_GRAPHQL_URL:
+      'https://main-graphql.staging.newsapis.co.uk/graphql',
+    ACCOUNT_PROVIDER_COOKIE_NAME: 'acs_ngn',
+  },
+  e2e: {
+    setupNodeEvents(on, config) {
+      const projectDir = process.cwd()
+      loadEnvConfig(projectDir)
+
+      on('task', {
+        log(message) {
+          console.log(message)
+          return null
+        },
+        table(message) {
+          console.table(message)
+          return null
+        },
+      })
+
+      return config
+    },
+    baseUrl: 'http://localhost:3000',
+    specPattern: './cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
+    excludeSpecPattern: './cypress/e2e/checkout/*.cy.{js,jsx,ts,tsx}',
+  },
+})

package/helpers/__tests__/getUser.test.ts

@@ -0,0 +1,45 @@
+import fetch from 'cross-fetch'
+import { fetchUser } from '../getUser'
+
+jest.mock('cross-fetch', () => jest.fn().mockImplementation(() => {}))
+
+describe('getUser function', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+  it("should call console.error with 'Bad response from server' when Response.status >= 400", async () => {
+    jest.spyOn(console, 'error')
+    ;(fetch as jest.Mock).mockImplementation(() =>
+      Promise.resolve({ status: 500 })
+    )
+    await fetchUser(
+      { Cookie: 'test' },
+      'http://localhost:3000/api/account/query'
+    )
+    expect(console.error).toHaveBeenCalledWith('Bad response from server')
+  })
+
+  it('should call response.json() when Response.status is < 400', async () => {
+    const mockJson = jest.fn()
+    ;(fetch as jest.Mock).mockImplementation(() =>
+      Promise.resolve({ status: 200, json: mockJson })
+    )
+    await fetchUser(
+      { Cookie: 'test' },
+      'http://localhost:3000/api/account/query'
+    )
+    expect(mockJson).toHaveBeenCalled()
+  })
+
+  it('should return null if no cookie', async () => {
+    const mockJson = jest.fn()
+    ;(fetch as jest.Mock).mockImplementation(() =>
+      Promise.resolve({ status: 200, json: mockJson })
+    )
+    await fetchUser(
+      "I'm not a cookie",
+      'http://localhost:3000/api/account/query'
+    )
+    expect(mockJson).not.toHaveBeenCalled()
+  })
+})

package/helpers/__tests__/logger.test.ts

@@ -0,0 +1,62 @@
+import { replaceConsoleWithLogger } from '../logger'
+
+describe('logger', () => {
+  const { window } = global
+
+  const loggerMock = {
+    debug: jest.fn(),
+    warn: jest.fn(),
+    info: jest.fn(),
+    error: jest.fn(),
+  }
+
+  beforeEach(() => {
+    delete global.window
+    jest.resetAllMocks()
+  })
+  afterEach(() => {
+    global.window = window
+  })
+
+  it('should not replace console.log with Wintson', () => {
+    const replaceConsole = replaceConsoleWithLogger(loggerMock, 'false')
+    replaceConsole()
+    console.log('test')
+    expect(loggerMock.info).not.toBeCalledWith('test')
+  })
+
+  it('should replace console.log with Wintson', () => {
+    const replaceConsole = replaceConsoleWithLogger(loggerMock, 'true')
+    replaceConsole()
+    console.log('test')
+    expect(loggerMock.info).toBeCalledWith('test')
+  })
+
+  it('should replace console.info with Wintson', () => {
+    const replaceConsole = replaceConsoleWithLogger(loggerMock, 'true')
+    replaceConsole()
+    console.info('test')
+    expect(loggerMock.info).toBeCalledWith('test')
+  })
+
+  it('should replace console.warn with Wintson', () => {
+    const replaceConsole = replaceConsoleWithLogger(loggerMock, 'true')
+    replaceConsole()
+    console.warn('test')
+    expect(loggerMock.warn).toBeCalledWith('test')
+  })
+
+  it('should replace console.error with Wintson', () => {
+    const replaceConsole = replaceConsoleWithLogger(loggerMock, 'true')
+    replaceConsole()
+    console.error('test')
+    expect(loggerMock.error).toBeCalledWith('test')
+  })
+
+  it('should replace console.debug with Wintson', () => {
+    const replaceConsole = replaceConsoleWithLogger(loggerMock, 'true')
+    replaceConsole()
+    console.debug('test')
+    expect(loggerMock.debug).toBeCalledWith('test')
+  })
+})

package/helpers/__tests__/useThemeDropdownObject.test.ts

@@ -0,0 +1,49 @@
+import { useThemeDropdownObject } from '../useThemeDropdownObject'
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useState: jest.fn().mockReturnValue([false, {}]),
+}))
+
+describe('createThemeDropdownObject', () => {
+  const setTheme = jest.fn()
+  test('should return themeDropdownObject', () => {
+    const themeDropdownObject = useThemeDropdownObject(setTheme)
+    expect(themeDropdownObject).toEqual({
+      clientHeaderImages: {
+        'The-Sun': 'display-personalDetails-header-sun.svg',
+        'Virgin-Radio': 'display-personalDetails-header-vr.svg',
+        'The-Times': 'display-personalDetails-header-times.svg',
+      },
+      clientNavigationLogos: {
+        'The-Sun': {
+          src: '/assets/navigationPrimary-brandMark-sun.svg',
+          width: '140px',
+          height: '48px',
+          top: '0',
+        },
+        'Virgin-Radio': {
+          src: '/assets/navigationPrimary-brandMark-vr.svg',
+          width: '150px',
+          height: '41px',
+          top: '0',
+        },
+        'The-Times': {
+          src: '/assets/navigationPrimary-brandMark-times.svg',
+          width: '150px',
+          height: '40px',
+          top: '0',
+        },
+        TLS: {
+          height: '40px',
+          src: '/assets/tls-logo-white.svg',
+          top: '0',
+          width: '150px',
+        },
+      },
+      options: expect.any(Object),
+      themeDropdownOpen: false,
+      dropdown: expect.any(Function),
+    })
+  })
+})

package/helpers/a11y.ts

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

package/helpers/addCacheHeaders.ts

@@ -0,0 +1,8 @@
+import { ServerResponse } from 'http'
+
+export const addCacheHeaders = (res: ServerResponse) => {
+  res.setHeader(
+    'Cache-Control',
+    'public, s-maxage=10, stale-while-revalidate=59'
+  )
+}

package/helpers/getUser.ts

@@ -0,0 +1,37 @@
+import fetch from 'cross-fetch'
+import { UserData } from '@newskit-render/my-account'
+import { MainAcsCookie } from '@newskit-render/api'
+
+interface UserHeaders {
+  [key: string]: string
+}
+interface UserConfig {
+  method: string
+  headers: UserHeaders
+  body: string
+}
+
+const userConfig = (acsCookie: { Cookie: string }): UserConfig => ({
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+    ...acsCookie,
+  },
+  body: JSON.stringify({ queryFragment: 'UserPaymentInfo' }),
+})
+
+export const fetchUser = async (
+  acsCookie: MainAcsCookie,
+  url: string
+): Promise<UserData | null> => {
+  if (typeof acsCookie === 'object') {
+    const response = await fetch(url, userConfig(acsCookie))
+
+    if (response.status >= 400) {
+      console.error('Bad response from server')
+      return null
+    }
+    return (await response.json()) as UserData
+  }
+  return null
+}

package/helpers/getYear.ts

@@ -0,0 +1 @@
+export const getYear = () => new Date().getFullYear()

package/helpers/global-types.ts

@@ -0,0 +1,186 @@
+declare global {
+  interface Window {
+    utag: Record<string, TealiumData>
+  }
+}
+interface TealiumData {
+  data: Record<string, string>
+}
+export enum ContentType {
+  article,
+  post,
+}
+
+export type RadioPost = {
+  id: number
+  type: ContentType
+  headline: string
+  body: Array<Object>
+  dateCreated: string
+  datePublished: string
+  dateUpdated?: string
+}
+
+export type RadioPosts = Array<RadioPost>
+
+export type Layout = 'vertical' | 'horizontal' | 'horizontal-reverse'
+
+export type TeaserSummary = {
+  children?: {
+    text: string
+  }[]
+}
+
+export type TeaserCategory = {
+  slug: string
+}
+
+export type ArticleTeaser = {
+  id?: string
+  slug?: string
+  categories?: TeaserCategory[]
+  topics?: {
+    name: string
+    slug: string
+  }[]
+  kicker?: string
+  headline?: string
+  media?: Media
+  summary?: TeaserSummary
+}
+
+export type ArticleBlock = {
+  type: string
+  article: ArticleTeaser
+}
+
+export type VideoBrightcoveBlock = {
+  accountId: string
+  id: string
+  playerId: string
+  type: string
+}
+
+export type ExternalReferenceBlock = {
+  author: {
+    id: string
+    type: string
+  }
+  headline: string
+  image: {
+    alt: string
+    caption: string
+    credit: string
+    type: string
+    url: string
+  }
+  label: string
+  type: string
+  url: string
+}
+
+export type SliceBlock =
+  | ArticleBlock
+  | VideoBrightcoveBlock
+  | ExternalReferenceBlock
+
+export type ArticleSlice = {
+  name: string
+  type: string
+  children: SliceBlock[]
+}
+
+export type TopicAuthorSlice = {
+  type: string
+}
+
+export type CollectionSlice = ArticleSlice | TopicAuthorSlice
+
+export type CollectionBlock = {
+  id: string
+  type: string
+  title?: string
+  link?: {
+    url: string
+    text?: string
+  }
+  children: CollectionSlice[]
+}
+
+export type ImageBlock = {
+  type: string
+}
+
+export type TweetBlock = {
+  type: string
+}
+
+export type PageBlock =
+  | CollectionBlock
+  | ImageBlock
+  | TweetBlock
+  | ParagraphBlock
+
+export type Page = {
+  id: string
+  title: string
+  slug: string
+  body: PageBlock[]
+}
+
+export type Media = Image | Video
+
+export type Image = {
+  crops: ImageCrop[]
+  crop?: ImageCrop
+}
+
+export type Video = {
+  videoId: string
+  accountId?: string
+  posterImage?: Image
+}
+
+export type ImageCrop = {
+  url?: string
+  alt?: string
+  aspectRatio?: string
+}
+
+export type Byline = AuthorByline | TextByline
+
+export type AuthorByline = {
+  type: string
+  slug: string
+  name: string
+}
+
+export type TextByline = {
+  type: string
+  value: string
+}
+
+export type Slug = string & { _: 'Slug' }
+export type URL = string & { _: 'Url' }
+
+export type Topic = {
+  name: string
+  slug?: string
+  link?: URL
+}
+
+export type ParagraphBlock = {
+  type?: string
+  children: ArticleParagraphChildren[]
+}
+
+export type ArticleParagraphChildren = ArticleText | ArticleHyperlink
+
+export type ArticleText = {
+  text: string
+}
+
+export type ArticleHyperlink = {
+  url: string
+  text?: string
+}

package/helpers/logger/getWinstonLogger.ts

@@ -0,0 +1,19 @@
+import winston, { Logger } from 'winston'
+import newrelicFormatter from '@newrelic/winston-enricher'
+
+const newrelicWinstonFormatter = newrelicFormatter(winston)
+
+export const getWinstonLogger = (winstonLogLevel?: string): Logger =>
+  winston.createLogger({
+    level: winstonLogLevel || 'info',
+    format: winston.format.json(),
+    transports: [
+      new winston.transports.Console({
+        format: winston.format.combine(
+          winston.format.timestamp({ format: 'DD-MM-YYYY T hh:mm:ss.sss A' }),
+          winston.format.json(),
+          newrelicWinstonFormatter()
+        ),
+      }),
+    ],
+  })

package/helpers/logger/index.ts

@@ -0,0 +1,20 @@
+import newrelic from 'newrelic'
+import { winstonEnabled, winstonLogLevel } from '../../config'
+import { getWinstonLogger } from './getWinstonLogger'
+import { replaceConsoleWithLogger } from './replaceConsoleWithLogger'
+
+const logger = getWinstonLogger(winstonLogLevel)
+const replaceConsole = replaceConsoleWithLogger(logger, winstonEnabled)
+
+const replaceConsoleAndSetTransactionName = (transactionName: string) => {
+  replaceConsole()
+
+  newrelic.setTransactionName(transactionName)
+}
+
+export {
+  logger,
+  replaceConsoleWithLogger,
+  replaceConsole,
+  replaceConsoleAndSetTransactionName,
+}

package/helpers/logger/replaceConsoleWithLogger.ts

@@ -0,0 +1,14 @@
+import { Logger } from 'winston'
+
+export const replaceConsoleWithLogger =
+  (logger: Logger, winstonEnabled?: string) => () => {
+    if (winstonEnabled === 'true') {
+      console.log = (...message: any[]) => logger.info.call(logger, ...message)
+      console.info = (...message: any[]) => logger.info.call(logger, ...message)
+      console.warn = (...message: any[]) => logger.warn.call(logger, ...message)
+      console.error = (...message: any[]) =>
+        logger.error.call(logger, ...message)
+      console.debug = (...message: any[]) =>
+        logger.debug.call(logger, ...message)
+    }
+  }

package/helpers/mocks/articleMock.ts

@@ -0,0 +1,50 @@
+const imagePlaceholderHref = (res) =>
+  `https://plchldr.co/i/${res}?bg=F0F0F0&fc=111111&text=IMG`
+
+export const highlights = [
+  // this should be returned form API when available
+  {
+    title: 'Test Box',
+    href: imagePlaceholderHref('50x50'),
+  },
+  {
+    title: 'Prince Harry',
+    href: imagePlaceholderHref('50x50'),
+  },
+  {
+    title: 'Meghan Markle',
+    href: imagePlaceholderHref('50x50'),
+  },
+  {
+    title: 'Royal Family',
+    href: imagePlaceholderHref('50x50'),
+  },
+]
+
+export const relatedArticles = [
+  // this should be returned form API when available
+  {
+    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.',
+    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.',
+    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.',
+    href: imagePlaceholderHref('70x50'),
+  },
+  {
+    title: 'Royal',
+    tag: 'CORONAVIRUS',
+    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'),
+  },
+]