@newskit-render/core 1.75.2 → 1.76.1-alpha.0

package/__tests__/pages/__snapshots__/relatedArticles.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Recommendation render page 1`] = `
+exports[`Recommendation render related article page when data is null page 1`] = `
 <DocumentFragment>
   <header
     class="css-1d2q07x"
@@ -262,200 +262,7 @@ exports[`Recommendation render page 1`] = `
             <div
               class="css-1ubx3ge"
               data-testid="Articles-Grid"
-            >
-              <div
-                class="css-16in0m0"
-                data-testid="articleRec-0"
-              >
-                <div
-                  class="css-1opc7jp"
-                >
-                  <div
-                    class="css-b5xivb"
-                  >
-                    <picture
-                      class="css-1t36qhh"
-                    >
-                      <div
-                        class="css-5pczz7"
-                      />
-                      <img
-                        alt="FOOT ON THE GAZ"
-                        class="css-1qgqq71"
-                        src="https://www.thesun.co.uk/wp-content/uploads/2022/03/image-656eaa885d.jpg?strip=all&w=600&h=338&crop=1"
-                      />
-                    </picture>
-                  </div>
-                  <div
-                    class="css-1shocxe"
-                  >
-                    <div
-                      class="css-u3mic"
-                    >
-                      <div
-                        class="css-38y4ob"
-                      >
-                        <div
-                          class="css-1vjcmlt"
-                        >
-                          <a
-                            class="nk-card-link css-1cq1vxv"
-                            href="https://newskit-render.ceng-dev.newsuk.tech"
-                          >
-                            <section
-                              class="css-zs57uu"
-                            >
-                              <h6
-                                class="nk-headline-heading css-10swdqn"
-                              >
-                                FOOT ON THE GAZ
-                              </h6>
-                            </section>
-                          </a>
-                        </div>
-                        <div
-                          class="css-1vjcmlt"
-                        >
-                          <p
-                            class="css-14u46jx"
-                          >
-                            Bale considering short deal with new club before RETIRING after World Cup
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="css-16in0m0"
-                data-testid="articleRec-1"
-              >
-                <div
-                  class="css-1opc7jp"
-                >
-                  <div
-                    class="css-b5xivb"
-                  >
-                    <picture
-                      class="css-1t36qhh"
-                    >
-                      <div
-                        class="css-5pczz7"
-                      />
-                      <img
-                        alt="TOUGH TIMES"
-                        class="css-1qgqq71"
-                        src="https://www.thesun.co.uk/wp-content/uploads/2022/03/image-a21f115694-1.jpg?strip=all&w=600&h=338&crop=1"
-                      />
-                    </picture>
-                  </div>
-                  <div
-                    class="css-1shocxe"
-                  >
-                    <div
-                      class="css-u3mic"
-                    >
-                      <div
-                        class="css-38y4ob"
-                      >
-                        <div
-                          class="css-1vjcmlt"
-                        >
-                          <a
-                            class="nk-card-link css-1cq1vxv"
-                            href="https://newskit-render.ceng-dev.newsuk.tech"
-                          >
-                            <section
-                              class="css-zs57uu"
-                            >
-                              <h6
-                                class="nk-headline-heading css-10swdqn"
-                              >
-                                TOUGH TIMES
-                              </h6>
-                            </section>
-                          </a>
-                        </div>
-                        <div
-                          class="css-1vjcmlt"
-                        >
-                          <p
-                            class="css-14u46jx"
-                          >
-                            I only made £5k last year - I sold £801k villa for cash, says Claire Sweeney
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="css-16in0m0"
-                data-testid="articleRec-2"
-              >
-                <div
-                  class="css-1opc7jp"
-                >
-                  <div
-                    class="css-b5xivb"
-                  >
-                    <picture
-                      class="css-1t36qhh"
-                    >
-                      <div
-                        class="css-5pczz7"
-                      />
-                      <img
-                        alt="TOUGH TIME"
-                        class="css-1qgqq71"
-                        src="https://plchldr.co/i/150x100?bg=F0F0F0&fc=111111&text=img"
-                      />
-                    </picture>
-                  </div>
-                  <div
-                    class="css-1shocxe"
-                  >
-                    <div
-                      class="css-u3mic"
-                    >
-                      <div
-                        class="css-38y4ob"
-                      >
-                        <div
-                          class="css-1vjcmlt"
-                        >
-                          <a
-                            class="nk-card-link css-1cq1vxv"
-                            href="https://newskit-render.ceng-dev.newsuk.tech"
-                          >
-                            <section
-                              class="css-zs57uu"
-                            >
-                              <h6
-                                class="nk-headline-heading css-10swdqn"
-                              >
-                                TOUGH TIME
-                              </h6>
-                            </section>
-                          </a>
-                        </div>
-                        <div
-                          class="css-1vjcmlt"
-                        >
-                          <p
-                            class="css-14u46jx"
-                          >
-                            I only made £5k last year - I sold £801k villa for cash, says Claire Sweeney
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+            />
           </div>
         </div>
       </div>

package/__tests__/pages/relatedArticles.test.tsx

@@ -1,19 +1,12 @@
 import { act } from '@testing-library/react'
+import useSWR from 'swr'
 import RelatedArticlesPage, {
   RelatedArticles,
   getServerSideProps,
 } from '../../pages/[section]/[articleId]/relatedArticles'
-
 import { renderWithTheme } from '../../helpers/test-utils'
 import { recomendationsMock } from '../../helpers/mocks/getRecommendationsMock'
 
-jest.mock('../../helpers/getRecommendations', () => {
-  return {
-    fetcher: jest.fn().mockImplementationOnce(() => {
-      return recomendationsMock
-    }),
-  }
-})
 const props: RelatedArticles = {
   articleId: 'test-1',
 }
@@ -25,6 +18,8 @@ const user = {
   },
   subscriptions: [{ endDate: null }],
 }
+jest.mock('swr')
+const swrMock = useSWR as jest.Mock
 
 jest.mock('newrelic', () => {
   return {
@@ -78,11 +73,23 @@ describe('Article', () => {
 })
 
 describe('Recommendation', () => {
-  it('render page', async () => {
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+  it('render related article page when data is null page', async () => {
     let result
     await act(async () => {
+      swrMock.mockReturnValueOnce({ data: null })
       result = renderWithTheme(RelatedArticlesPage)
     })
     expect(result.asFragment()).toMatchSnapshot()
   })
+  it('render related article page', async () => {
+    let result
+    await act(async () => {
+      swrMock.mockReturnValueOnce({ data: recomendationsMock })
+      result = renderWithTheme(RelatedArticlesPage)
+    })
+    expect(result.findByTestId('articleRec-1')).toBeDefined()
+  })
 })

package/components/article/Highlights.tsx

@@ -61,8 +61,14 @@ const Highlights: React.FC<{
 
     <Block spaceStack="space040">
       <Grid xsMargin="space000">
-        {highlightsArticles.map((article) => (
-          <Cell key={article.title} xs={12} sm={6} lg={12}>
+        {highlightsArticles.map((article, i) => (
+          <Cell
+            data-testid={`highlightsArticles-${i}`}
+            key={article.title}
+            xs={12}
+            sm={6}
+            lg={12}
+          >
             <Block spaceStack="space040" data-testid="HighlightsHorizontalCard">
               <ArticleRecommendation article={article} size="small" />
             </Block>

package/components/article/__tests__/__snapshots__/index.test.tsx.snap

@@ -1027,6 +1027,7 @@ exports[`Article should render tile and sub title 1`] = `
                   >
                     <div
                       class="css-3jmwfs"
+                      data-testid="highlightsArticles-0"
                     >
                       <div
                         class="css-14xhfxi"
@@ -1078,6 +1079,7 @@ exports[`Article should render tile and sub title 1`] = `
                     </div>
                     <div
                       class="css-3jmwfs"
+                      data-testid="highlightsArticles-1"
                     >
                       <div
                         class="css-14xhfxi"

package/helpers/__tests__/getRecommendation.test.ts

@@ -1,3 +1,4 @@
+import { Publisher } from '@newskit-render/api'
 import { getRecommendations, fetcher } from '../getRecommendations'
 import { recomendationsMock } from '../mocks/getRecommendationsMock'
 
@@ -45,7 +46,7 @@ describe('getRecommendations function', () => {
   it('should return recomendations', async () => {
     const result = await getRecommendations({
       articleId: 'test-1',
-      publisher: 'nukapi',
+      publisher: Publisher.SUN_UK,
       userId: 'user-1',
     })
     expect(result).toEqual(recomendationsMock)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.75.2",
+  "version": "1.76.1-alpha.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -35,12 +35,12 @@
     "@apollo/client": "3.4.16",
     "@newskit-render/api": "^0.36.0",
     "@newskit-render/auth": "^0.44.0",
-    "@newskit-render/checkout": "^0.50.2",
+    "@newskit-render/checkout": "^0.51.0",
     "@newskit-render/feature-flags": "^0.24.0",
     "@newskit-render/feed": "^0.24.0",
-    "@newskit-render/my-account": "^0.181.2",
-    "@newskit-render/shared-components": "^0.66.2",
-    "@newskit-render/standalone-components": "^0.28.3",
+    "@newskit-render/my-account": "^0.182.0",
+    "@newskit-render/shared-components": "^0.67.0",
+    "@newskit-render/standalone-components": "^0.29.0",
     "@newskit-render/validation": "^0.50.0",
     "cross-fetch": "3.1.5",
     "graphql": "15.6.0",

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

@@ -43,14 +43,17 @@ const Article: React.FC<ArticleSlug> = ({
   if (typeof window !== 'undefined') {
     userId = window?.utag?.data['cp.utag_main_v_id']
   }
-
-  const { data: recommendations = [] } = useSWR<Article[]>(
+  const highlitedArticles = []
+  const relatedArticles = []
+  const { data: recommendations } = useSWR<Article[]>(
     `/api/recommendations/${articleId}/${userId}`,
     fetcher
   )
-  const highlitedArticles = recommendations.slice(0, 4)
-  const relatedArticles = recommendations.slice(4, 12)
 
+  if (Array.isArray(recommendations)) {
+    highlitedArticles.push(recommendations.slice(0, 4))
+    relatedArticles.push(recommendations.slice(4, 12))
+  }
   return (
     <ArticlePage
       articleURL={articleURL}

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

@@ -26,11 +26,15 @@ const RelatedArticlesPage: React.FC<RelatedArticles> = ({
     userId = window?.utag?.data['cp.utag_main_v_id']
   }
 
-  const { data: recommendationData = [] } = useSWR<Article[]>(
+  const recommendations = []
+  const { data: recommendationData } = useSWR<Article[]>(
     `/api/recommendations/${articleId}/${userId}`,
     fetcher
   )
-  const recommendations = recommendationData.slice(0, 18)
+
+  if (Array.isArray(recommendationData)) {
+    recommendations.push(recommendationData.slice(0, 4))
+  }
   return (
     <Layout dataTestId="SectionGrid" user={user}>
       <Cell xs={12} md={10} mdOffset={1} data-testid="SectionCell">

package/pages/help-hub/article/[title]/index.tsx

@@ -1,21 +1,20 @@
 import React, { useContext } from 'react'
 import newrelic from 'newrelic'
 import {
-  ArticlePage,
-  articleProvider,
-  ProviderPropsMapper,
+  HelpHubArticlePage,
+  helpHubArticleProvider,
 } from '@newskit-render/standalone-components'
 import { createThemeDropdownObject } from '../../../../helpers/createThemeDropdownObject'
 import { AppContext } from '../../../../context'
+import { addCacheHeaders } from '../../../../helpers/addCacheHeaders'
 
-const HelpHubArticlePage = (props) => {
+const ArticlePage = (props) => {
   const { theme, setTheme } = useContext(AppContext)
   const themeDropdownObject = createThemeDropdownObject(setTheme)
 
   return (
-    <ArticlePage
+    <HelpHubArticlePage
       {...props}
-      contextName="articlePage"
       customTheme={theme}
       themeDropdownObject={themeDropdownObject}
     />
@@ -26,6 +25,8 @@ export const getServerSideProps = async (context) => {
   newrelic.setTransactionName('HelpHubArticlePage')
   console.warn('context:')
   console.warn(context.req && context.req.headers)
-  return articleProvider({ ...context })
+
+  addCacheHeaders(context.res)
+  return helpHubArticleProvider({ ...context })
 }
-export default HelpHubArticlePage
+export default ArticlePage

package/pages/help-hub/index.tsx

@@ -1,39 +1,63 @@
 import React, { useContext } from 'react'
+import newrelic from 'newrelic'
 import {
-  LandingPage,
-  AlgoliaCredentials,
-  ContextName,
+  HelpHubLandingPage,
+  helpHubLandingPageProvider,
 } from '@newskit-render/standalone-components'
 import { createThemeDropdownObject } from '../../helpers/createThemeDropdownObject'
 import { AppContext } from '../../context'
-import { algoliaApiKey, algoliaAppId, algoliaIndex } from '../../config'
+import { addCacheHeaders } from '../../helpers/addCacheHeaders'
 
-const HelpHubLandingPage: React.FC<{ credentials: AlgoliaCredentials }> = (
-  props
-) => {
+const mostReadArticles = [
+  {
+    title: 'Sign-in with Google',
+    objectID: 'sign-with-google',
+  },
+  {
+    title:
+      'I am trying to share an article via Google+ but an error message keeps appearing',
+    objectID:
+      'i-am-trying-to-share-an-article-via-google-but-an-error-message-keeps-appearing',
+  },
+  {
+    title: 'How will I find out if I have won a competition?',
+    objectID: 'how-will-i-find-out-if-i-have-won-a-competition',
+  },
+  {
+    title: 'How do I login/reset my password?',
+    objectID: 'how-do-i-login-reset-my-password',
+  },
+  {
+    title: 'How do I cancel or change my pack?',
+    objectID: 'how-do-i-cancel-or-change-my-pack',
+  },
+  {
+    title: 'Can I share my Times & Sunday Times iPad subscription access?',
+    objectID: 'can-i-share-my-times-sunday-times-ipad-subscription-access',
+  },
+]
+
+const LandingPage = ({ credentials }) => {
   const { theme, setTheme } = useContext(AppContext)
   const themeDropdownObject = createThemeDropdownObject(setTheme)
 
   return (
-    <LandingPage
-      {...props}
-      contextName={ContextName.landingPage}
+    <HelpHubLandingPage
+      credentials={credentials}
+      context={{ mostReadArticles }}
       customTheme={theme}
       themeDropdownObject={themeDropdownObject}
     />
   )
 }
 
-export async function getServerSideProps() {
-  return {
-    props: {
-      credentials: {
-        appId: algoliaAppId,
-        apiKey: algoliaApiKey,
-        indexName: algoliaIndex,
-      },
-    },
-  }
-}
+export default LandingPage
 
-export default HelpHubLandingPage
+export const getServerSideProps = async (context) => {
+  newrelic.setTransactionName('HelpHubLandingPage')
+  console.warn('context:')
+  console.warn(context.req && context.req.headers)
+  addCacheHeaders(context.res)
+
+  return helpHubLandingPageProvider()
+}

package/pages/help-hub/results.tsx

@@ -1,15 +1,16 @@
 import React, { useContext } from 'react'
+import newrelic from 'newrelic'
 import {
-  ResultsPage,
+  HelpHubResultsPage,
   AlgoliaCredentials,
   Hit,
-  resultsProvider,
-  ContextName,
+  helpHubResultsProvider,
 } from '@newskit-render/standalone-components'
 import { createThemeDropdownObject } from '../../helpers/createThemeDropdownObject'
 import { AppContext } from '../../context'
+import { addCacheHeaders } from '../../helpers/addCacheHeaders'
 
-const HelpHubResultsPage: React.FC<{
+const ResultsPage: React.FC<{
   credentilas: AlgoliaCredentials
   hits: Hit[]
 }> = (props) => {
@@ -17,9 +18,8 @@ const HelpHubResultsPage: React.FC<{
   const themeDropdownObject = createThemeDropdownObject(setTheme)
   const credentials = { props }
   return (
-    <ResultsPage
+    <HelpHubResultsPage
       {...props}
-      contextName={ContextName.resultsPage}
       customTheme={theme}
       themeDropdownObject={themeDropdownObject}
       credentials={credentials}
@@ -27,8 +27,15 @@ const HelpHubResultsPage: React.FC<{
   )
 }
 
-export default HelpHubResultsPage
+export default ResultsPage
 
 export const getServerSideProps = async (context) => {
-  return resultsProvider({ ...context })
+  newrelic.setTransactionName('HelpHubResultsPage')
+  console.warn('context:')
+  console.warn(context.req && context.req.headers)
+
+  addCacheHeaders(context.res)
+
+  const results = await helpHubResultsProvider({ ...context })
+  return results
 }