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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/__tests__/pages/[articleSlug].test.tsx +37 -1
  3. package/__tests__/pages/__snapshots__/[articleSlug].test.tsx.snap +1386 -0
  4. package/__tests__/pages/__snapshots__/relatedArticles.test.tsx.snap +2 -195
  5. package/__tests__/pages/relatedArticles.test.tsx +16 -9
  6. package/components/article/Highlights.tsx +8 -2
  7. package/components/article/__tests__/__snapshots__/index.test.tsx.snap +2 -0
  8. package/helpers/__tests__/getRecommendation.test.ts +2 -1
  9. package/package.json +1 -1
  10. package/pages/[section]/[articleId]/[articleSlug].tsx +7 -4
  11. package/pages/[section]/[articleId]/relatedArticles.tsx +6 -2
package/__tests__/pages/__snapshots__/relatedArticles.test.tsx.snap CHANGED
@@ -1,6 +1,6 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`Recommendation render page 1`] = `
3
+ exports[`Recommendation render related article page when data is null page 1`] = `
4
4
  <DocumentFragment>
5
5
  <header
6
6
  class="css-1d2q07x"
@@ -262,200 +262,7 @@ exports[`Recommendation render page 1`] = `
262
262
  <div
263
263
  class="css-1ubx3ge"
264
264
  data-testid="Articles-Grid"
265
- >
266
- <div
267
- class="css-16in0m0"
268
- data-testid="articleRec-0"
269
- >
270
- <div
271
- class="css-1opc7jp"
272
- >
273
- <div
274
- class="css-b5xivb"
275
- >
276
- <picture
277
- class="css-1t36qhh"
278
- >
279
- <div
280
- class="css-5pczz7"
281
- />
282
- <img
283
- alt="FOOT ON THE GAZ"
284
- class="css-1qgqq71"
285
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/image-656eaa885d.jpg?strip=all&w=600&h=338&crop=1"
286
- />
287
- </picture>
288
- </div>
289
- <div
290
- class="css-1shocxe"
291
- >
292
- <div
293
- class="css-u3mic"
294
- >
295
- <div
296
- class="css-38y4ob"
297
- >
298
- <div
299
- class="css-1vjcmlt"
300
- >
301
- <a
302
- class="nk-card-link css-1cq1vxv"
303
- href="https://newskit-render.ceng-dev.newsuk.tech"
304
- >
305
- <section
306
- class="css-zs57uu"
307
- >
308
- <h6
309
- class="nk-headline-heading css-10swdqn"
310
- >
311
- FOOT ON THE GAZ
312
- </h6>
313
- </section>
314
- </a>
315
- </div>
316
- <div
317
- class="css-1vjcmlt"
318
- >
319
- <p
320
- class="css-14u46jx"
321
- >
322
- Bale considering short deal with new club before RETIRING after World Cup
323
- </p>
324
- </div>
325
- </div>
326
- </div>
327
- </div>
328
- </div>
329
- </div>
330
- <div
331
- class="css-16in0m0"
332
- data-testid="articleRec-1"
333
- >
334
- <div
335
- class="css-1opc7jp"
336
- >
337
- <div
338
- class="css-b5xivb"
339
- >
340
- <picture
341
- class="css-1t36qhh"
342
- >
343
- <div
344
- class="css-5pczz7"
345
- />
346
- <img
347
- alt="TOUGH TIMES"
348
- class="css-1qgqq71"
349
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/image-a21f115694-1.jpg?strip=all&w=600&h=338&crop=1"
350
- />
351
- </picture>
352
- </div>
353
- <div
354
- class="css-1shocxe"
355
- >
356
- <div
357
- class="css-u3mic"
358
- >
359
- <div
360
- class="css-38y4ob"
361
- >
362
- <div
363
- class="css-1vjcmlt"
364
- >
365
- <a
366
- class="nk-card-link css-1cq1vxv"
367
- href="https://newskit-render.ceng-dev.newsuk.tech"
368
- >
369
- <section
370
- class="css-zs57uu"
371
- >
372
- <h6
373
- class="nk-headline-heading css-10swdqn"
374
- >
375
- TOUGH TIMES
376
- </h6>
377
- </section>
378
- </a>
379
- </div>
380
- <div
381
- class="css-1vjcmlt"
382
- >
383
- <p
384
- class="css-14u46jx"
385
- >
386
- I only made £5k last year - I sold £801k villa for cash, says Claire Sweeney
387
- </p>
388
- </div>
389
- </div>
390
- </div>
391
- </div>
392
- </div>
393
- </div>
394
- <div
395
- class="css-16in0m0"
396
- data-testid="articleRec-2"
397
- >
398
- <div
399
- class="css-1opc7jp"
400
- >
401
- <div
402
- class="css-b5xivb"
403
- >
404
- <picture
405
- class="css-1t36qhh"
406
- >
407
- <div
408
- class="css-5pczz7"
409
- />
410
- <img
411
- alt="TOUGH TIME"
412
- class="css-1qgqq71"
413
- src="https://plchldr.co/i/150x100?bg=F0F0F0&fc=111111&text=img"
414
- />
415
- </picture>
416
- </div>
417
- <div
418
- class="css-1shocxe"
419
- >
420
- <div
421
- class="css-u3mic"
422
- >
423
- <div
424
- class="css-38y4ob"
425
- >
426
- <div
427
- class="css-1vjcmlt"
428
- >
429
- <a
430
- class="nk-card-link css-1cq1vxv"
431
- href="https://newskit-render.ceng-dev.newsuk.tech"
432
- >
433
- <section
434
- class="css-zs57uu"
435
- >
436
- <h6
437
- class="nk-headline-heading css-10swdqn"
438
- >
439
- TOUGH TIME
440
- </h6>
441
- </section>
442
- </a>
443
- </div>
444
- <div
445
- class="css-1vjcmlt"
446
- >
447
- <p
448
- class="css-14u46jx"
449
- >
450
- I only made £5k last year - I sold £801k villa for cash, says Claire Sweeney
451
- </p>
452
- </div>
453
- </div>
454
- </div>
455
- </div>
456
- </div>
457
- </div>
458
- </div>
265
+ />
459
266
  </div>
460
267
  </div>
461
268
  </div>
package/__tests__/pages/relatedArticles.test.tsx CHANGED
@@ -1,19 +1,12 @@
1
1
  import { act } from '@testing-library/react'
2
+ import useSWR from 'swr'
2
3
  import RelatedArticlesPage, {
3
4
  RelatedArticles,
4
5
  getServerSideProps,
5
6
  } from '../../pages/[section]/[articleId]/relatedArticles'
6
-
7
7
  import { renderWithTheme } from '../../helpers/test-utils'
8
8
  import { recomendationsMock } from '../../helpers/mocks/getRecommendationsMock'
9
9
 
10
- jest.mock('../../helpers/getRecommendations', () => {
11
- return {
12
- fetcher: jest.fn().mockImplementationOnce(() => {
13
- return recomendationsMock
14
- }),
15
- }
16
- })
17
10
  const props: RelatedArticles = {
18
11
  articleId: 'test-1',
19
12
  }
@@ -25,6 +18,8 @@ const user = {
25
18
  },
26
19
  subscriptions: [{ endDate: null }],
27
20
  }
21
+ jest.mock('swr')
22
+ const swrMock = useSWR as jest.Mock
28
23
 
29
24
  jest.mock('newrelic', () => {
30
25
  return {
@@ -78,11 +73,23 @@ describe('Article', () => {
78
73
  })
79
74
 
80
75
  describe('Recommendation', () => {
81
- it('render page', async () => {
76
+ afterEach(() => {
77
+ jest.clearAllMocks()
78
+ })
79
+ it('render related article page when data is null page', async () => {
82
80
  let result
83
81
  await act(async () => {
82
+ swrMock.mockReturnValueOnce({ data: null })
84
83
  result = renderWithTheme(RelatedArticlesPage)
85
84
  })
86
85
  expect(result.asFragment()).toMatchSnapshot()
87
86
  })
87
+ it('render related article page', async () => {
88
+ let result
89
+ await act(async () => {
90
+ swrMock.mockReturnValueOnce({ data: recomendationsMock })
91
+ result = renderWithTheme(RelatedArticlesPage)
92
+ })
93
+ expect(result.findByTestId('articleRec-1')).toBeDefined()
94
+ })
88
95
  })
package/components/article/Highlights.tsx CHANGED
@@ -61,8 +61,14 @@ const Highlights: React.FC<{
61
61
 
62
62
  <Block spaceStack="space040">
63
63
  <Grid xsMargin="space000">
64
- {highlightsArticles.map((article) => (
65
- <Cell key={article.title} xs={12} sm={6} lg={12}>
64
+ {highlightsArticles.map((article, i) => (
65
+ <Cell
66
+ data-testid={`highlightsArticles-${i}`}
67
+ key={article.title}
68
+ xs={12}
69
+ sm={6}
70
+ lg={12}
71
+ >
66
72
  <Block spaceStack="space040" data-testid="HighlightsHorizontalCard">
67
73
  <ArticleRecommendation article={article} size="small" />
68
74
  </Block>
package/components/article/__tests__/__snapshots__/index.test.tsx.snap CHANGED
@@ -1027,6 +1027,7 @@ exports[`Article should render tile and sub title 1`] = `
1027
1027
  >
1028
1028
  <div
1029
1029
  class="css-3jmwfs"
1030
+ data-testid="highlightsArticles-0"
1030
1031
  >
1031
1032
  <div
1032
1033
  class="css-14xhfxi"
@@ -1078,6 +1079,7 @@ exports[`Article should render tile and sub title 1`] = `
1078
1079
  </div>
1079
1080
  <div
1080
1081
  class="css-3jmwfs"
1082
+ data-testid="highlightsArticles-1"
1081
1083
  >
1082
1084
  <div
1083
1085
  class="css-14xhfxi"
package/helpers/__tests__/getRecommendation.test.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { Publisher } from '@newskit-render/api'
1
2
  import { getRecommendations, fetcher } from '../getRecommendations'
2
3
  import { recomendationsMock } from '../mocks/getRecommendationsMock'
3
4
 
@@ -45,7 +46,7 @@ describe('getRecommendations function', () => {
45
46
  it('should return recomendations', async () => {
46
47
  const result = await getRecommendations({
47
48
  articleId: 'test-1',
48
- publisher: 'nukapi',
49
+ publisher: Publisher.SUN_UK,
49
50
  userId: 'user-1',
50
51
  })
51
52
  expect(result).toEqual(recomendationsMock)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@newskit-render/core",
3
- "version": "1.76.0",
3
+ "version": "1.76.1-alpha.0",
4
4
  "description": "Newskit Render - Core package",
5
5
  "author": "",
6
6
  "license": "UNLICENSED",
package/pages/[section]/[articleId]/[articleSlug].tsx CHANGED
@@ -43,14 +43,17 @@ const Article: React.FC<ArticleSlug> = ({
43
43
  if (typeof window !== 'undefined') {
44
44
  userId = window?.utag?.data['cp.utag_main_v_id']
45
45
  }
46
-
47
- const { data: recommendations = [] } = useSWR<Article[]>(
46
+ const highlitedArticles = []
47
+ const relatedArticles = []
48
+ const { data: recommendations } = useSWR<Article[]>(
48
49
  `/api/recommendations/${articleId}/${userId}`,
49
50
  fetcher
50
51
  )
51
- const highlitedArticles = recommendations.slice(0, 4)
52
- const relatedArticles = recommendations.slice(4, 12)
53
52
 
53
+ if (Array.isArray(recommendations)) {
54
+ highlitedArticles.push(recommendations.slice(0, 4))
55
+ relatedArticles.push(recommendations.slice(4, 12))
56
+ }
54
57
  return (
55
58
  <ArticlePage
56
59
  articleURL={articleURL}
package/pages/[section]/[articleId]/relatedArticles.tsx CHANGED
@@ -26,11 +26,15 @@ const RelatedArticlesPage: React.FC<RelatedArticles> = ({
26
26
  userId = window?.utag?.data['cp.utag_main_v_id']
27
27
  }
28
28
 
29
- const { data: recommendationData = [] } = useSWR<Article[]>(
29
+ const recommendations = []
30
+ const { data: recommendationData } = useSWR<Article[]>(
30
31
  `/api/recommendations/${articleId}/${userId}`,
31
32
  fetcher
32
33
  )
33
- const recommendations = recommendationData.slice(0, 18)
34
+
35
+ if (Array.isArray(recommendationData)) {
36
+ recommendations.push(recommendationData.slice(0, 4))
37
+ }
34
38
  return (
35
39
  <Layout dataTestId="SectionGrid" user={user}>
36
40
  <Cell xs={12} md={10} mdOffset={1} data-testid="SectionCell">