@newskit-render/core 1.50.1 → 1.63.2

package/__tests__/pages/brightcove.test.tsx

@@ -0,0 +1,34 @@
+import { useRouter } from 'next/router'
+import { renderWithTheme } from '../../helpers/test-utils'
+import BrightcovePlayer from '../../pages/player/brightcove'
+
+jest.mock('next/router', () => {
+  return {
+    useRouter: jest.fn(),
+  }
+})
+
+const useRouterMock = useRouter as jest.Mock
+
+describe('Brightcove page tests', () => {
+  test('render page', () => {
+    useRouterMock.mockImplementationOnce(() => ({
+      query: {
+        account_id: 'account_id_test',
+        player_id: 'player_id_test',
+        post_id: 'post_id_test',
+        video_id: 'video_id_test',
+      },
+    }))
+
+    const { asFragment, getByTestId } = renderWithTheme(BrightcovePlayer)
+
+    const videoPlayer = getByTestId('bc-video-player')
+
+    expect(videoPlayer).toBeInTheDocument()
+    expect(videoPlayer.getAttribute('data-account')).toEqual('account_id_test')
+    expect(videoPlayer.getAttribute('data-video-id')).toEqual('video_id_test')
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+})

package/__tests__/pages/home.test.tsx

@@ -3,10 +3,6 @@ import SectionPage from '../../components/section'
 import { renderWithTheme } from '../../helpers/test-utils'
 import { getPageMock } from '../../helpers/mocks'
 
-jest.mock('../../helpers/getYear', () => ({
-  getYear: jest.fn().mockReturnValue('YYYY'),
-}))
-
 const user = {
   paymentFailure: {
     active: false,
@@ -15,6 +11,20 @@ const user = {
   subscriptions: [{ endDate: null }],
 }
 
+jest.mock('newrelic', () => {
+  return {
+    setTransactionName: jest.fn(),
+  }
+})
+
+jest.mock('cross-fetch', () =>
+  jest.fn().mockImplementation(() =>
+    Promise.resolve({
+      json: () => Promise.resolve(user),
+    })
+  )
+)
+
 jest.mock('@newskit-render/api', () => ({
   ClientTypes: { nkapi: 'nkapi' },
   createApolloClient: jest.fn().mockImplementation(() => {
@@ -34,20 +44,20 @@ jest.mock('@newskit-render/api', () => ({
   getAcsCookie: jest.fn().mockReturnValue({ Cookie: 'something' }),
 }))
 
-jest.mock('cross-fetch', () =>
-  jest.fn().mockImplementation(() =>
-    Promise.resolve({
-      json: () => Promise.resolve(user),
-    })
-  )
-)
-
 jest.mock('@newskit-render/my-account', () => {
   return {
     PastDueBannerExternal: 'PastDueBannerExternal',
   }
 })
 
+jest.mock('../../config', () => ({
+  getSanitzedConfig: jest.fn().mockImplementation(() => {}),
+}))
+
+jest.mock('../../helpers/getYear', () => ({
+  getYear: jest.fn().mockReturnValue('YYYY'),
+}))
+
 describe('getServerSideProps', () => {
   test('Homepage', () => {
     const { asFragment } = renderWithTheme(SectionPage, {

package/__tests__/pages/mocks.ts

@@ -0,0 +1,29 @@
+import { Article } from '@newskit-render/standalone-components'
+
+test.skip('Workaround', () => 1)
+
+export const mockArticles: Article[] = [
+  {
+    href:
+      'https://www.thesun.co.uk/wp-content/uploads/2022/03/image-656eaa885d.jpg?strip=all&w=600&h=338&crop=1',
+    tag: 'FOOT ON THE GAZ',
+    text:
+      'Bale considering short deal with new club before RETIRING after World Cup',
+    title: 'FOOT ON THE GAZ',
+  },
+  {
+    href:
+      'https://www.thesun.co.uk/wp-content/uploads/2022/03/image-a21f115694-1.jpg?strip=all&w=600&h=338&crop=1',
+    tag: 'TOUGH TIMES',
+    text:
+      'I only made £5k last year - I sold £801k villa for cash, says Claire Sweeney',
+    title: 'TOUGH TIMES',
+  },
+  {
+    href: null,
+    tag: 'TOUGH TIMES',
+    text:
+      'I only made £5k last year - I sold £801k villa for cash, says Claire Sweeney',
+    title: 'TOUGH TIMES',
+  },
+]

package/__tests__/pages/relatedArticles.test.tsx

@@ -0,0 +1,76 @@
+import { recommendationsProvider } from '@newskit-render/standalone-components'
+import {
+  RelatedArticles,
+  getServerSideProps,
+} from '../../pages/[section]/[articleId]/relatedArticles'
+import { mockArticles } from './mocks'
+
+const props: RelatedArticles = {
+  recommendations: mockArticles,
+}
+
+const user = {
+  paymentFailure: {
+    active: false,
+    startDate: null,
+  },
+  subscriptions: [{ endDate: null }],
+}
+
+jest.mock('newrelic', () => {
+  return {
+    setTransactionName: jest.fn(),
+  }
+})
+
+jest.mock('cross-fetch', () =>
+  jest.fn().mockImplementation(() =>
+    Promise.resolve({
+      json: () => Promise.resolve(user),
+    })
+  )
+)
+
+jest.mock('@newskit-render/api', () => ({
+  ClientTypes: { nkapi: 'nkapi' },
+  getAcsCookie: jest.fn().mockReturnValue({ Cookie: 'something' }),
+  Publisher: {
+    SUN_UK: 'SUN_UK',
+  },
+}))
+
+jest.mock('@newskit-render/standalone-components', () => {
+  return {
+    recommendationsProvider: jest.fn(),
+  }
+})
+
+describe('Article', () => {
+  describe('getServerSideProps', () => {
+    beforeAll(() => {
+      process.env = Object.assign(process.env, {
+        SITE_HOST: 'hostname',
+        TWITTER_USERNAME: 'D_Trump',
+        GSC_ID: '4320982',
+      })
+      recommendationsProvider.mockResolvedValueOnce(mockArticles)
+    })
+
+    it('should return props', async () => {
+      const setHeaderMock = jest.fn()
+
+      const response = await getServerSideProps({
+        params: {
+          articleId: 'test-1',
+        },
+        req: { headers: { cookie: 'some-cookie' } },
+        res: { setHeader: setHeaderMock },
+      })
+      expect(response).toEqual({ props: { ...props, showAds: true, user } })
+      expect(setHeaderMock).toHaveBeenCalledWith(
+        'Cache-Control',
+        'public, s-maxage=10, stale-while-revalidate=59'
+      )
+    })
+  })
+})

package/components/article/RelatedArticles.tsx

@@ -1,22 +1,16 @@
-import React from 'react'
+import React, { ComponentType } from 'react'
 import {
   Block,
   TitleBar,
-  Grid,
-  TextBlock,
-  Cell,
-  Card,
   Stack,
   StackChild,
   AlignSelfValues,
   Divider,
-  Headline,
   Visible,
 } from 'newskit'
-import { ArticleRecommendation } from '@newskit-render/standalone-components'
+import { useRouter } from 'next/router'
 import ViewMoreButton from '../common/ViewMoreButton'
-
-const viewMoreButton = () => <ViewMoreButton href="/" />
+import { BasicRow } from '../section/layouts'
 
 const RelatedArticles: React.FC<{
   relatedArticles: {
@@ -25,54 +19,53 @@ const RelatedArticles: React.FC<{
     text: string
     href: string
   }[]
-}> = ({ relatedArticles }) => (
-  <Block data-testid="RelatedArticles">
-    <Block spaceStack="space080">
-      <TitleBar
-        overrides={{
-          spaceInset: {
-            xs: 'spaceInsetSquish000',
-          },
-          heading: {
-            typographyPreset: {
-              xs: 'editorialHeadline050',
-              md: 'editorialHeadline060',
-              xl: 'editorialHeadline070',
-            },
-            stylePreset: 'inkContrast',
-          },
-        }}
-        actionItem={viewMoreButton}
-      >
-        Related
-      </TitleBar>
-    </Block>
+}> = ({ relatedArticles }) => {
+  const { asPath } = useRouter()
+  const relatedArticlesPath = `${asPath.substring(
+    0,
+    asPath.lastIndexOf('/')
+  )}/relatedArticles`
 
-    <Grid xsMargin="space000">
-      {relatedArticles.map((article) => (
-        <Cell
-          key={article.title}
-          xs={12}
-          sm={6}
-          lg={3}
-          data-testid="RelatedArticlesVerticalCard"
+  return (
+    <Block data-testid="RelatedArticles">
+      <Block spaceStack="space080">
+        <TitleBar
+          overrides={{
+            spaceInset: {
+              xs: 'spaceInsetSquish000',
+            },
+            heading: {
+              typographyPreset: {
+                xs: 'editorialHeadline050',
+                md: 'editorialHeadline060',
+                xl: 'editorialHeadline070',
+              },
+              stylePreset: 'inkContrast',
+            },
+          }}
+          actionItem={() => <ViewMoreButton href={relatedArticlesPath} />}
         >
-          <ArticleRecommendation article={article} size="large" />
-        </Cell>
-      ))}
-      <Cell xs={12}>
-        <Visible xs lg>
+          Related
+        </TitleBar>
+      </Block>
+
+      <BasicRow
+        data-testid="RelatedArticlesVerticalCard"
+        colums={{ xs: '1fr', sm: '1fr 1fr', lg: '1fr 1fr 1fr 1fr' }}
+        articles={relatedArticles}
+      />
+
+      <Visible xs lg>
+        <Divider />
+        <Stack>
+          <StackChild alignSelf={AlignSelfValues.Center}>
+            <ViewMoreButton href={relatedArticlesPath} />
+          </StackChild>
           <Divider />
-          <Stack>
-            <StackChild alignSelf={AlignSelfValues.Center}>
-              <ViewMoreButton href="/" />
-            </StackChild>
-            <Divider />
-          </Stack>
-        </Visible>
-      </Cell>
-    </Grid>
-  </Block>
-)
+        </Stack>
+      </Visible>
+    </Block>
+  )
+}
 
 export default RelatedArticles