@newskit-render/core 4.25.0 → 4.26.0-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.
- package/CHANGELOG.md +8 -0
- package/__tests__/pages/home.test.tsx +0 -87
- package/cypress/e2e/core/home-page.cy.js +2 -3
- package/package.json +1 -1
- package/pages/index.tsx +17 -49
- package/__tests__/pages/__snapshots__/relatedArticles.test.tsx.snap +0 -416
- package/__tests__/pages/relatedArticles.test.tsx +0 -120
- package/pages/[section]/[articleId]/relatedArticles.tsx +0 -102
- package/pages/[section]/index.tsx +0 -65
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [4.25.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@4.25.0-alpha.0...@newskit-render/core@4.25.0) (2024-04-25)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @newskit-render/core
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [4.24.7](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@4.24.7-alpha.0...@newskit-render/core@4.24.7) (2024-04-25)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @newskit-render/core
|
|
@@ -1,67 +1,7 @@
|
|
|
1
|
-
import { getServerSideProps } from '../../pages'
|
|
2
1
|
import SectionPage from '../../components/section'
|
|
3
2
|
import { renderWithTheme } from '../../helpers/test-utils'
|
|
4
3
|
import { getPageMock } from '../../helpers/mocks'
|
|
5
4
|
|
|
6
|
-
const user = {
|
|
7
|
-
paymentFailure: {
|
|
8
|
-
active: false,
|
|
9
|
-
startDate: null,
|
|
10
|
-
},
|
|
11
|
-
subscriptions: [{ endDate: null }],
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
jest.mock('newrelic', () => {
|
|
15
|
-
return {
|
|
16
|
-
setTransactionName: jest.fn(),
|
|
17
|
-
}
|
|
18
|
-
})
|
|
19
|
-
|
|
20
|
-
jest.mock('cross-fetch', () =>
|
|
21
|
-
jest.fn().mockImplementation(() =>
|
|
22
|
-
Promise.resolve({
|
|
23
|
-
json: () => Promise.resolve(user),
|
|
24
|
-
})
|
|
25
|
-
)
|
|
26
|
-
)
|
|
27
|
-
|
|
28
|
-
/* start cra-effected */
|
|
29
|
-
jest.mock('@newskit-render/feature-flags', () => ({
|
|
30
|
-
initAndGetFeatureFlag: jest
|
|
31
|
-
.fn()
|
|
32
|
-
.mockImplementation(() => Promise.resolve({ test: 'test' })),
|
|
33
|
-
}))
|
|
34
|
-
/* end cra-effected */
|
|
35
|
-
|
|
36
|
-
jest.mock('@newskit-render/api', () => ({
|
|
37
|
-
ClientTypes: { nkapi: 'nkapi' },
|
|
38
|
-
createApolloClient: jest.fn().mockImplementation(() => {
|
|
39
|
-
return Promise.resolve({
|
|
40
|
-
query: jest.fn().mockResolvedValueOnce({
|
|
41
|
-
data: {
|
|
42
|
-
page: {
|
|
43
|
-
data: {
|
|
44
|
-
id: '123',
|
|
45
|
-
title: 'Test title',
|
|
46
|
-
},
|
|
47
|
-
},
|
|
48
|
-
},
|
|
49
|
-
}),
|
|
50
|
-
})
|
|
51
|
-
}),
|
|
52
|
-
getAcsCookie: jest.fn().mockReturnValue({ Cookie: 'something' }),
|
|
53
|
-
}))
|
|
54
|
-
|
|
55
|
-
jest.mock('@newskit-render/my-account', () => {
|
|
56
|
-
return {
|
|
57
|
-
PastDueBannerExternal: 'PastDueBannerExternal',
|
|
58
|
-
}
|
|
59
|
-
})
|
|
60
|
-
|
|
61
|
-
jest.mock('../../config', () => ({
|
|
62
|
-
getSanitzedConfig: jest.fn().mockImplementation(() => {}),
|
|
63
|
-
}))
|
|
64
|
-
|
|
65
5
|
jest.mock('../../helpers/getYear', () => ({
|
|
66
6
|
getYear: jest.fn().mockReturnValue('YYYY'),
|
|
67
7
|
}))
|
|
@@ -73,31 +13,4 @@ describe('getServerSideProps', () => {
|
|
|
73
13
|
})
|
|
74
14
|
expect(asFragment()).toMatchSnapshot()
|
|
75
15
|
})
|
|
76
|
-
test('should call newskit api and return Page data', async () => {
|
|
77
|
-
const setHeaderMock = jest.fn()
|
|
78
|
-
const response = await getServerSideProps({
|
|
79
|
-
req: { headers: { cookie: 'session-cookie' } },
|
|
80
|
-
res: { setHeader: setHeaderMock },
|
|
81
|
-
})
|
|
82
|
-
expect(response).toEqual(
|
|
83
|
-
expect.objectContaining({
|
|
84
|
-
props: {
|
|
85
|
-
page: {
|
|
86
|
-
data: {
|
|
87
|
-
id: '123',
|
|
88
|
-
title: 'Test title',
|
|
89
|
-
},
|
|
90
|
-
},
|
|
91
|
-
showAds: true,
|
|
92
|
-
user,
|
|
93
|
-
featureFlags: { test: 'test' } /* cra-effected */,
|
|
94
|
-
},
|
|
95
|
-
})
|
|
96
|
-
)
|
|
97
|
-
|
|
98
|
-
expect(setHeaderMock).toHaveBeenCalledWith(
|
|
99
|
-
'Cache-Control',
|
|
100
|
-
'public, s-maxage=10, stale-while-revalidate=59'
|
|
101
|
-
)
|
|
102
|
-
})
|
|
103
16
|
})
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
describe('The Home Page', () => {
|
|
2
|
-
it('Homepage
|
|
2
|
+
it('Homepage is opened', () => {
|
|
3
3
|
cy.visit('/')
|
|
4
|
-
cy.
|
|
5
|
-
cy.get('[data-testid="SectionCell"]').should('exist')
|
|
4
|
+
cy.contains('Welcome to newrskit-render').should('exist')
|
|
6
5
|
})
|
|
7
6
|
})
|
package/package.json
CHANGED
package/pages/index.tsx
CHANGED
|
@@ -1,52 +1,20 @@
|
|
|
1
|
+
import { Block, TextBlock } from 'newskit'
|
|
1
2
|
import { replaceConsoleAndSetTransactionName } from '../helpers/logger'
|
|
2
|
-
import {
|
|
3
|
-
createApolloClient,
|
|
4
|
-
getAcsCookie,
|
|
5
|
-
ClientTypes,
|
|
6
|
-
} from '@newskit-render/api'
|
|
7
|
-
import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
|
|
8
|
-
import { getHost } from '@newskit-render/shared-components'
|
|
9
|
-
import { optimizelysdkKey } from '../config' /* cra-effected */
|
|
10
|
-
import { GET_PAGE } from '../queries'
|
|
11
|
-
import SectionPage from '../components/section'
|
|
12
|
-
import { fetchUser } from '../helpers/getUser'
|
|
13
|
-
import { getAccountQueryUrl } from '../constants'
|
|
14
|
-
import { addCacheHeaders } from '../helpers/addCacheHeaders'
|
|
15
3
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
},
|
|
32
|
-
}),
|
|
33
|
-
await fetchUser(acsCookie, getAccountQueryUrl(siteHost)),
|
|
34
|
-
])
|
|
35
|
-
/* start cra-effected */
|
|
36
|
-
const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
|
|
37
|
-
/* end cra-effected */
|
|
38
|
-
|
|
39
|
-
addCacheHeaders(context.res)
|
|
40
|
-
const { page } = data
|
|
41
|
-
|
|
42
|
-
return {
|
|
43
|
-
props: {
|
|
44
|
-
page,
|
|
45
|
-
showAds: true,
|
|
46
|
-
user,
|
|
47
|
-
featureFlags /* cra-effected */,
|
|
48
|
-
},
|
|
49
|
-
}
|
|
4
|
+
const HomePage = () => {
|
|
5
|
+
return (
|
|
6
|
+
<Block
|
|
7
|
+
style={{
|
|
8
|
+
display: 'flex',
|
|
9
|
+
justifyContent: 'center',
|
|
10
|
+
alignItems: 'center',
|
|
11
|
+
height: '100vh',
|
|
12
|
+
}}
|
|
13
|
+
>
|
|
14
|
+
<TextBlock typographyPreset="editorialHeadline080" stylePreset="inkBase">
|
|
15
|
+
Welcome to newrskit-render
|
|
16
|
+
</TextBlock>
|
|
17
|
+
</Block>
|
|
18
|
+
)
|
|
50
19
|
}
|
|
51
|
-
|
|
52
|
-
export default SectionPage
|
|
20
|
+
export default HomePage
|
|
@@ -1,416 +0,0 @@
|
|
|
1
|
-
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
-
|
|
3
|
-
exports[`Recommendation render related article page when data is null page 1`] = `
|
|
4
|
-
<DocumentFragment>
|
|
5
|
-
<header
|
|
6
|
-
class="css-1d2q07x"
|
|
7
|
-
>
|
|
8
|
-
<div
|
|
9
|
-
class="css-hpal4s"
|
|
10
|
-
data-testid="NavigationPrimary"
|
|
11
|
-
>
|
|
12
|
-
<div
|
|
13
|
-
class="css-11pbejy"
|
|
14
|
-
>
|
|
15
|
-
<div
|
|
16
|
-
class="css-1mi1ly6"
|
|
17
|
-
>
|
|
18
|
-
<a
|
|
19
|
-
aria-label="Logo Link"
|
|
20
|
-
class="css-1ulbpfm"
|
|
21
|
-
href="/"
|
|
22
|
-
>
|
|
23
|
-
<span
|
|
24
|
-
class="css-17x5lw"
|
|
25
|
-
>
|
|
26
|
-
<div
|
|
27
|
-
class="css-swzsha"
|
|
28
|
-
>
|
|
29
|
-
<figure
|
|
30
|
-
class="css-x0vdlo"
|
|
31
|
-
>
|
|
32
|
-
<img
|
|
33
|
-
alt=""
|
|
34
|
-
data-nimg="1"
|
|
35
|
-
data-testid="Nav-Prm-logo"
|
|
36
|
-
decoding="async"
|
|
37
|
-
fetchpriority="high"
|
|
38
|
-
height="32.5"
|
|
39
|
-
src="/assets/primary-navigation-logo-white.svg"
|
|
40
|
-
style="color: transparent; object-fit: contain;"
|
|
41
|
-
width="150"
|
|
42
|
-
/>
|
|
43
|
-
</figure>
|
|
44
|
-
</div>
|
|
45
|
-
</span>
|
|
46
|
-
</a>
|
|
47
|
-
<a
|
|
48
|
-
class="css-1aup117"
|
|
49
|
-
data-testid="skip-to-content"
|
|
50
|
-
href="#main"
|
|
51
|
-
>
|
|
52
|
-
Skip to main content
|
|
53
|
-
</a>
|
|
54
|
-
</div>
|
|
55
|
-
</div>
|
|
56
|
-
<div
|
|
57
|
-
class="css-55favz"
|
|
58
|
-
>
|
|
59
|
-
<div
|
|
60
|
-
class="css-1k3e0au"
|
|
61
|
-
>
|
|
62
|
-
<button
|
|
63
|
-
aria-label="Mobile Menu Button"
|
|
64
|
-
class="css-h8miwj"
|
|
65
|
-
data-testid="mobile-menu-btn"
|
|
66
|
-
type="button"
|
|
67
|
-
>
|
|
68
|
-
<svg
|
|
69
|
-
aria-hidden="true"
|
|
70
|
-
class="css-11lepi0 css-18cthx4-EmotionIconBase ex0cdmw0"
|
|
71
|
-
fill="currentColor"
|
|
72
|
-
focusable="false"
|
|
73
|
-
overrides="[object Object]"
|
|
74
|
-
viewBox="0 0 24 24"
|
|
75
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
76
|
-
>
|
|
77
|
-
<path
|
|
78
|
-
d="M0 0h24v24H0z"
|
|
79
|
-
fill="none"
|
|
80
|
-
/>
|
|
81
|
-
<path
|
|
82
|
-
d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
|
|
83
|
-
/>
|
|
84
|
-
</svg>
|
|
85
|
-
</button>
|
|
86
|
-
</div>
|
|
87
|
-
</div>
|
|
88
|
-
<div
|
|
89
|
-
class="css-mniw6m"
|
|
90
|
-
>
|
|
91
|
-
<nav
|
|
92
|
-
class="css-1le7q07"
|
|
93
|
-
>
|
|
94
|
-
<div
|
|
95
|
-
class="css-16ctgp1"
|
|
96
|
-
data-testid="action-links-desktop"
|
|
97
|
-
>
|
|
98
|
-
<div
|
|
99
|
-
class="css-mycqxl"
|
|
100
|
-
>
|
|
101
|
-
<a
|
|
102
|
-
aria-label="Section One Link"
|
|
103
|
-
class="css-1ulbpfm"
|
|
104
|
-
href="/section-one"
|
|
105
|
-
type="standalone"
|
|
106
|
-
>
|
|
107
|
-
<span
|
|
108
|
-
class="css-1xnclyu"
|
|
109
|
-
>
|
|
110
|
-
<span
|
|
111
|
-
class="css-1o99qvy"
|
|
112
|
-
>
|
|
113
|
-
<span
|
|
114
|
-
class="css-8r74mr"
|
|
115
|
-
>
|
|
116
|
-
Section One
|
|
117
|
-
</span>
|
|
118
|
-
</span>
|
|
119
|
-
</span>
|
|
120
|
-
</a>
|
|
121
|
-
</div>
|
|
122
|
-
<div
|
|
123
|
-
class="css-mycqxl"
|
|
124
|
-
>
|
|
125
|
-
<a
|
|
126
|
-
aria-label="Section Two Link"
|
|
127
|
-
class="css-1ulbpfm"
|
|
128
|
-
href="/section-two"
|
|
129
|
-
type="standalone"
|
|
130
|
-
>
|
|
131
|
-
<span
|
|
132
|
-
class="css-1xnclyu"
|
|
133
|
-
>
|
|
134
|
-
<span
|
|
135
|
-
class="css-1o99qvy"
|
|
136
|
-
>
|
|
137
|
-
<span
|
|
138
|
-
class="css-8r74mr"
|
|
139
|
-
>
|
|
140
|
-
Section Two
|
|
141
|
-
</span>
|
|
142
|
-
</span>
|
|
143
|
-
</span>
|
|
144
|
-
</a>
|
|
145
|
-
</div>
|
|
146
|
-
<div
|
|
147
|
-
class="css-mycqxl"
|
|
148
|
-
>
|
|
149
|
-
<a
|
|
150
|
-
aria-label="Section Three Link"
|
|
151
|
-
class="css-1ulbpfm"
|
|
152
|
-
href="/section-three"
|
|
153
|
-
type="standalone"
|
|
154
|
-
>
|
|
155
|
-
<span
|
|
156
|
-
class="css-1xnclyu"
|
|
157
|
-
>
|
|
158
|
-
<span
|
|
159
|
-
class="css-1o99qvy"
|
|
160
|
-
>
|
|
161
|
-
<span
|
|
162
|
-
class="css-8r74mr"
|
|
163
|
-
>
|
|
164
|
-
Section Three
|
|
165
|
-
</span>
|
|
166
|
-
</span>
|
|
167
|
-
</span>
|
|
168
|
-
</a>
|
|
169
|
-
</div>
|
|
170
|
-
</div>
|
|
171
|
-
</nav>
|
|
172
|
-
</div>
|
|
173
|
-
<div
|
|
174
|
-
class="css-l657h8"
|
|
175
|
-
>
|
|
176
|
-
<div
|
|
177
|
-
class="css-13byt3y"
|
|
178
|
-
/>
|
|
179
|
-
</div>
|
|
180
|
-
</div>
|
|
181
|
-
</header>
|
|
182
|
-
<div
|
|
183
|
-
class="css-1ce0b49"
|
|
184
|
-
>
|
|
185
|
-
<div
|
|
186
|
-
class="css-8atxkm"
|
|
187
|
-
>
|
|
188
|
-
<div
|
|
189
|
-
class="css-1w88buo"
|
|
190
|
-
data-testid="SectionGrid"
|
|
191
|
-
>
|
|
192
|
-
<div
|
|
193
|
-
class="css-18d6eiw"
|
|
194
|
-
data-testid="SectionGrid"
|
|
195
|
-
>
|
|
196
|
-
<div
|
|
197
|
-
class="css-kccxxn"
|
|
198
|
-
data-testid="SectionCell"
|
|
199
|
-
>
|
|
200
|
-
<div
|
|
201
|
-
class="css-11s9frs"
|
|
202
|
-
/>
|
|
203
|
-
<div
|
|
204
|
-
class="css-11s9frs"
|
|
205
|
-
>
|
|
206
|
-
<div
|
|
207
|
-
class="css-w282mr"
|
|
208
|
-
>
|
|
209
|
-
<div
|
|
210
|
-
class="css-1aiajnh"
|
|
211
|
-
>
|
|
212
|
-
<section
|
|
213
|
-
class="css-3bvy7k"
|
|
214
|
-
>
|
|
215
|
-
<h3
|
|
216
|
-
class="nk-headline-heading css-b3iww6"
|
|
217
|
-
>
|
|
218
|
-
Related Articles
|
|
219
|
-
</h3>
|
|
220
|
-
</section>
|
|
221
|
-
</div>
|
|
222
|
-
</div>
|
|
223
|
-
</div>
|
|
224
|
-
</div>
|
|
225
|
-
</div>
|
|
226
|
-
</div>
|
|
227
|
-
</div>
|
|
228
|
-
</div>
|
|
229
|
-
<div
|
|
230
|
-
class="css-sxhtf1"
|
|
231
|
-
>
|
|
232
|
-
<div
|
|
233
|
-
class="css-8atxkm"
|
|
234
|
-
>
|
|
235
|
-
<div
|
|
236
|
-
class="css-1w88buo"
|
|
237
|
-
data-testid="PageLayout"
|
|
238
|
-
>
|
|
239
|
-
<div
|
|
240
|
-
class="css-18d6eiw"
|
|
241
|
-
data-testid="PageLayout"
|
|
242
|
-
>
|
|
243
|
-
<div
|
|
244
|
-
class="css-2e5lv5"
|
|
245
|
-
>
|
|
246
|
-
<svg
|
|
247
|
-
class="css-kgdu16"
|
|
248
|
-
height="48px"
|
|
249
|
-
viewBox="0 0 244 40"
|
|
250
|
-
>
|
|
251
|
-
<title>
|
|
252
|
-
NewsKit Logo
|
|
253
|
-
</title>
|
|
254
|
-
<path
|
|
255
|
-
d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
|
|
256
|
-
fill="white"
|
|
257
|
-
/>
|
|
258
|
-
<path
|
|
259
|
-
d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
|
|
260
|
-
fill="white"
|
|
261
|
-
fill-opacity="0.4"
|
|
262
|
-
/>
|
|
263
|
-
<path
|
|
264
|
-
d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
|
|
265
|
-
fill="white"
|
|
266
|
-
fill-opacity="0.701961"
|
|
267
|
-
/>
|
|
268
|
-
</svg>
|
|
269
|
-
</div>
|
|
270
|
-
<div
|
|
271
|
-
class="css-2e5lv5"
|
|
272
|
-
>
|
|
273
|
-
<hr
|
|
274
|
-
aria-hidden="true"
|
|
275
|
-
class="css-13iiewa"
|
|
276
|
-
data-testid="divider"
|
|
277
|
-
/>
|
|
278
|
-
</div>
|
|
279
|
-
<div
|
|
280
|
-
class="css-hx18jh"
|
|
281
|
-
>
|
|
282
|
-
<span
|
|
283
|
-
class="css-1cpcft7"
|
|
284
|
-
>
|
|
285
|
-
<a
|
|
286
|
-
aria-label="NavLink One"
|
|
287
|
-
class="css-1ulbpfm"
|
|
288
|
-
href="/link-one"
|
|
289
|
-
>
|
|
290
|
-
<span
|
|
291
|
-
class="css-17x5lw"
|
|
292
|
-
>
|
|
293
|
-
<span
|
|
294
|
-
class="css-yk25sg"
|
|
295
|
-
>
|
|
296
|
-
NavLink One
|
|
297
|
-
</span>
|
|
298
|
-
</span>
|
|
299
|
-
</a>
|
|
300
|
-
</span>
|
|
301
|
-
<span
|
|
302
|
-
class="css-1cpcft7"
|
|
303
|
-
>
|
|
304
|
-
<a
|
|
305
|
-
aria-label="NavLink Two"
|
|
306
|
-
class="css-1ulbpfm"
|
|
307
|
-
href="/link-two"
|
|
308
|
-
>
|
|
309
|
-
<span
|
|
310
|
-
class="css-17x5lw"
|
|
311
|
-
>
|
|
312
|
-
<span
|
|
313
|
-
class="css-yk25sg"
|
|
314
|
-
>
|
|
315
|
-
NavLink Two
|
|
316
|
-
</span>
|
|
317
|
-
</span>
|
|
318
|
-
</a>
|
|
319
|
-
</span>
|
|
320
|
-
<span
|
|
321
|
-
class="css-1cpcft7"
|
|
322
|
-
>
|
|
323
|
-
<a
|
|
324
|
-
aria-label="NavLink Three"
|
|
325
|
-
class="css-1ulbpfm"
|
|
326
|
-
href="/link-three"
|
|
327
|
-
>
|
|
328
|
-
<span
|
|
329
|
-
class="css-17x5lw"
|
|
330
|
-
>
|
|
331
|
-
<span
|
|
332
|
-
class="css-yk25sg"
|
|
333
|
-
>
|
|
334
|
-
NavLink Three
|
|
335
|
-
</span>
|
|
336
|
-
</span>
|
|
337
|
-
</a>
|
|
338
|
-
</span>
|
|
339
|
-
<span
|
|
340
|
-
class="css-1cpcft7"
|
|
341
|
-
>
|
|
342
|
-
<a
|
|
343
|
-
aria-label="NavLink Four"
|
|
344
|
-
class="css-1ulbpfm"
|
|
345
|
-
href="/link-four"
|
|
346
|
-
>
|
|
347
|
-
<span
|
|
348
|
-
class="css-17x5lw"
|
|
349
|
-
>
|
|
350
|
-
<span
|
|
351
|
-
class="css-yk25sg"
|
|
352
|
-
>
|
|
353
|
-
NavLink Four
|
|
354
|
-
</span>
|
|
355
|
-
</span>
|
|
356
|
-
</a>
|
|
357
|
-
</span>
|
|
358
|
-
<span
|
|
359
|
-
class="css-1cpcft7"
|
|
360
|
-
>
|
|
361
|
-
<a
|
|
362
|
-
aria-label="NavLink Five"
|
|
363
|
-
class="css-1ulbpfm"
|
|
364
|
-
href="/link-five"
|
|
365
|
-
>
|
|
366
|
-
<span
|
|
367
|
-
class="css-17x5lw"
|
|
368
|
-
>
|
|
369
|
-
<span
|
|
370
|
-
class="css-yk25sg"
|
|
371
|
-
>
|
|
372
|
-
NavLink Five
|
|
373
|
-
</span>
|
|
374
|
-
</span>
|
|
375
|
-
</a>
|
|
376
|
-
</span>
|
|
377
|
-
<span
|
|
378
|
-
class="css-1cpcft7"
|
|
379
|
-
>
|
|
380
|
-
<a
|
|
381
|
-
aria-label="NavLink Six"
|
|
382
|
-
class="css-1ulbpfm"
|
|
383
|
-
href="/link-six"
|
|
384
|
-
>
|
|
385
|
-
<span
|
|
386
|
-
class="css-17x5lw"
|
|
387
|
-
>
|
|
388
|
-
<span
|
|
389
|
-
class="css-yk25sg"
|
|
390
|
-
>
|
|
391
|
-
NavLink Six
|
|
392
|
-
</span>
|
|
393
|
-
</span>
|
|
394
|
-
</a>
|
|
395
|
-
</span>
|
|
396
|
-
</div>
|
|
397
|
-
<div
|
|
398
|
-
class="css-2e5lv5"
|
|
399
|
-
>
|
|
400
|
-
<hr
|
|
401
|
-
aria-hidden="true"
|
|
402
|
-
class="css-13iiewa"
|
|
403
|
-
data-testid="divider"
|
|
404
|
-
/>
|
|
405
|
-
</div>
|
|
406
|
-
<p
|
|
407
|
-
class="css-tiln3q"
|
|
408
|
-
>
|
|
409
|
-
Copyright © 2024 News Corp. All rights reserved.
|
|
410
|
-
</p>
|
|
411
|
-
</div>
|
|
412
|
-
</div>
|
|
413
|
-
</div>
|
|
414
|
-
</div>
|
|
415
|
-
</DocumentFragment>
|
|
416
|
-
`;
|
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
import { act } from '@testing-library/react'
|
|
2
|
-
import useSWR from 'swr'
|
|
3
|
-
import RelatedArticlesPage, {
|
|
4
|
-
RelatedArticles,
|
|
5
|
-
getServerSideProps,
|
|
6
|
-
} from '../../pages/[section]/[articleId]/relatedArticles'
|
|
7
|
-
import { renderWithTheme } from '../../helpers/test-utils'
|
|
8
|
-
|
|
9
|
-
const props: RelatedArticles = {
|
|
10
|
-
articleId: 'test-1',
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
const user = {
|
|
14
|
-
paymentFailure: {
|
|
15
|
-
active: false,
|
|
16
|
-
startDate: null,
|
|
17
|
-
},
|
|
18
|
-
subscriptions: [{ endDate: null }],
|
|
19
|
-
}
|
|
20
|
-
jest.mock('swr')
|
|
21
|
-
let swrMock
|
|
22
|
-
|
|
23
|
-
jest.mock('newrelic', () => {
|
|
24
|
-
return {
|
|
25
|
-
setTransactionName: jest.fn(),
|
|
26
|
-
}
|
|
27
|
-
})
|
|
28
|
-
|
|
29
|
-
jest.mock('cross-fetch', () =>
|
|
30
|
-
jest.fn().mockImplementation(() =>
|
|
31
|
-
Promise.resolve({
|
|
32
|
-
json: () => Promise.resolve(user),
|
|
33
|
-
})
|
|
34
|
-
)
|
|
35
|
-
)
|
|
36
|
-
|
|
37
|
-
/* start cra-effected */
|
|
38
|
-
jest.mock('@newskit-render/feature-flags', () => ({
|
|
39
|
-
initAndGetFeatureFlag: jest
|
|
40
|
-
.fn()
|
|
41
|
-
.mockImplementation(() => Promise.resolve({ test: 'test' })),
|
|
42
|
-
}))
|
|
43
|
-
/* end cra-effected */
|
|
44
|
-
|
|
45
|
-
jest.mock('@newskit-render/api', () => ({
|
|
46
|
-
ClientTypes: { nkapi: 'nkapi' },
|
|
47
|
-
getAcsCookie: jest.fn().mockReturnValue({ Cookie: 'something' }),
|
|
48
|
-
Publisher: {
|
|
49
|
-
SUN_UK: 'SUN_UK',
|
|
50
|
-
},
|
|
51
|
-
}))
|
|
52
|
-
|
|
53
|
-
describe('Article', () => {
|
|
54
|
-
describe('getServerSideProps', () => {
|
|
55
|
-
beforeAll(() => {
|
|
56
|
-
process.env = Object.assign(process.env, {
|
|
57
|
-
TWITTER_USERNAME: 'D_Trump',
|
|
58
|
-
GSC_ID: '4320982',
|
|
59
|
-
})
|
|
60
|
-
})
|
|
61
|
-
|
|
62
|
-
it('should return props', async () => {
|
|
63
|
-
const setHeaderMock = jest.fn()
|
|
64
|
-
|
|
65
|
-
const response = await getServerSideProps({
|
|
66
|
-
params: {
|
|
67
|
-
articleId: 'test-1',
|
|
68
|
-
},
|
|
69
|
-
req: { headers: { cookie: 'some-cookie' } },
|
|
70
|
-
res: { setHeader: setHeaderMock },
|
|
71
|
-
})
|
|
72
|
-
expect(response).toMatchObject({
|
|
73
|
-
props: {
|
|
74
|
-
...props,
|
|
75
|
-
showAds: true,
|
|
76
|
-
user,
|
|
77
|
-
featureFlags: { test: 'test' } /* cra-effected */,
|
|
78
|
-
},
|
|
79
|
-
})
|
|
80
|
-
expect(setHeaderMock).toHaveBeenCalledWith(
|
|
81
|
-
'Cache-Control',
|
|
82
|
-
'public, s-maxage=10, stale-while-revalidate=59'
|
|
83
|
-
)
|
|
84
|
-
})
|
|
85
|
-
})
|
|
86
|
-
})
|
|
87
|
-
|
|
88
|
-
describe('Recommendation', () => {
|
|
89
|
-
beforeEach(() => {
|
|
90
|
-
swrMock = useSWR as jest.Mock
|
|
91
|
-
})
|
|
92
|
-
afterEach(() => {
|
|
93
|
-
jest.clearAllMocks()
|
|
94
|
-
})
|
|
95
|
-
it('render related article page when data is null page', async () => {
|
|
96
|
-
let result
|
|
97
|
-
await act(async () => {
|
|
98
|
-
swrMock.mockReturnValueOnce({ data: null })
|
|
99
|
-
result = renderWithTheme(RelatedArticlesPage)
|
|
100
|
-
})
|
|
101
|
-
expect(result.asFragment()).toMatchSnapshot()
|
|
102
|
-
})
|
|
103
|
-
it('render related article page', async () => {
|
|
104
|
-
let result
|
|
105
|
-
await act(async () => {
|
|
106
|
-
swrMock.mockReturnValueOnce({
|
|
107
|
-
data: [
|
|
108
|
-
{
|
|
109
|
-
href: 'https://www.thesun.co.uk/wp-content/uploads/2022/03/image-656eaa885d.jpg?strip=all&w=600&h=338&crop=1',
|
|
110
|
-
tag: 'FOOT ON THE GAZ',
|
|
111
|
-
text: 'Bale considering short deal with new club before RETIRING after World Cup',
|
|
112
|
-
title: 'FOOT ON THE GAZ',
|
|
113
|
-
},
|
|
114
|
-
],
|
|
115
|
-
})
|
|
116
|
-
result = renderWithTheme(RelatedArticlesPage)
|
|
117
|
-
})
|
|
118
|
-
expect(result.findByTestId('articleRec-1')).toBeDefined()
|
|
119
|
-
})
|
|
120
|
-
})
|
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { replaceConsoleAndSetTransactionName } from '../../../helpers/logger'
|
|
3
|
-
import { getAcsCookie, ClientTypes, Config } from '@newskit-render/api'
|
|
4
|
-
import {
|
|
5
|
-
RecommendedArticleList,
|
|
6
|
-
ArticleRecommendationsProvider,
|
|
7
|
-
} from '@newskit-render/standalone-components'
|
|
8
|
-
import { getHost } from '@newskit-render/shared-components'
|
|
9
|
-
import { Block, Cell, TitleBar } from 'newskit'
|
|
10
|
-
import { UserData } from '@newskit-render/my-account'
|
|
11
|
-
import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
|
|
12
|
-
import { fetchUser } from '../../../helpers/getUser'
|
|
13
|
-
import { getAccountQueryUrl } from '../../../constants'
|
|
14
|
-
import { addCacheHeaders } from '../../../helpers/addCacheHeaders'
|
|
15
|
-
import Layout from '../../../components/layout'
|
|
16
|
-
import {
|
|
17
|
-
newskitApiEnvUrl,
|
|
18
|
-
newskitApiXApiKey,
|
|
19
|
-
optimizelysdkKey /* cra-effected */,
|
|
20
|
-
} from '../../../config'
|
|
21
|
-
|
|
22
|
-
export type RelatedArticles = {
|
|
23
|
-
user?: UserData
|
|
24
|
-
articleId
|
|
25
|
-
config: Config
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
const RelatedArticlesPage: React.FC<RelatedArticles> = ({
|
|
29
|
-
user,
|
|
30
|
-
articleId,
|
|
31
|
-
config,
|
|
32
|
-
}) => {
|
|
33
|
-
return (
|
|
34
|
-
<ArticleRecommendationsProvider articleId={articleId} config={config}>
|
|
35
|
-
<Layout dataTestId="SectionGrid" user={user}>
|
|
36
|
-
<Cell xs={12} md={10} mdOffset={1} data-testid="SectionCell">
|
|
37
|
-
<Block marginBlockEnd="space080" />
|
|
38
|
-
<Block marginBlockEnd="space080">
|
|
39
|
-
<TitleBar
|
|
40
|
-
overrides={{
|
|
41
|
-
paddingInline: {
|
|
42
|
-
xs: 'spaceInsetSquish000',
|
|
43
|
-
},
|
|
44
|
-
paddingBlock: {
|
|
45
|
-
xs: 'spaceInsetSquish000',
|
|
46
|
-
},
|
|
47
|
-
heading: {
|
|
48
|
-
typographyPreset: {
|
|
49
|
-
xs: 'editorialHeadline050',
|
|
50
|
-
md: 'editorialHeadline060',
|
|
51
|
-
xl: 'editorialHeadline070',
|
|
52
|
-
},
|
|
53
|
-
stylePreset: 'inkContrast',
|
|
54
|
-
},
|
|
55
|
-
}}
|
|
56
|
-
>
|
|
57
|
-
Related Articles
|
|
58
|
-
</TitleBar>
|
|
59
|
-
</Block>
|
|
60
|
-
<RecommendedArticleList templateId="list-1" />
|
|
61
|
-
</Cell>
|
|
62
|
-
</Layout>
|
|
63
|
-
</ArticleRecommendationsProvider>
|
|
64
|
-
)
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
export async function getServerSideProps(context) {
|
|
68
|
-
replaceConsoleAndSetTransactionName('RelatedArticlesPage')
|
|
69
|
-
console.warn('context:')
|
|
70
|
-
console.warn(context.req && context.req.headers)
|
|
71
|
-
const {
|
|
72
|
-
params: { articleId },
|
|
73
|
-
} = context
|
|
74
|
-
const siteHost = getHost(context.req)
|
|
75
|
-
const acsCookie = context.req.headers.cookie
|
|
76
|
-
? getAcsCookie(ClientTypes.main, context.req.headers.cookie)
|
|
77
|
-
: ''
|
|
78
|
-
|
|
79
|
-
const [user] = await Promise.all([
|
|
80
|
-
await fetchUser(acsCookie, getAccountQueryUrl(siteHost)),
|
|
81
|
-
])
|
|
82
|
-
/* start cra-effected */
|
|
83
|
-
const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
|
|
84
|
-
/* end cra-effected */
|
|
85
|
-
|
|
86
|
-
addCacheHeaders(context.res)
|
|
87
|
-
|
|
88
|
-
return {
|
|
89
|
-
props: {
|
|
90
|
-
showAds: true,
|
|
91
|
-
user,
|
|
92
|
-
articleId,
|
|
93
|
-
config: {
|
|
94
|
-
newskitApiEnvUrl,
|
|
95
|
-
newskitApiXApiKey,
|
|
96
|
-
},
|
|
97
|
-
featureFlags /* cra-effected */,
|
|
98
|
-
},
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
export default RelatedArticlesPage
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { replaceConsoleAndSetTransactionName } from '../../helpers/logger'
|
|
2
|
-
import {
|
|
3
|
-
createApolloClient,
|
|
4
|
-
getAcsCookie,
|
|
5
|
-
ClientTypes,
|
|
6
|
-
} from '@newskit-render/api'
|
|
7
|
-
import { getHost } from '@newskit-render/shared-components'
|
|
8
|
-
import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
|
|
9
|
-
import { optimizelysdkKey } from '../../config' /* cra-effected */
|
|
10
|
-
import { GET_PAGE } from '../../queries'
|
|
11
|
-
import SectionPage from '../../components/section'
|
|
12
|
-
import { fetchUser } from '../../helpers/getUser'
|
|
13
|
-
import { getAccountQueryUrl } from '../../constants'
|
|
14
|
-
import { addCacheHeaders } from '../../helpers/addCacheHeaders'
|
|
15
|
-
|
|
16
|
-
export async function getServerSideProps(context) {
|
|
17
|
-
const apolloClient = await createApolloClient(ClientTypes.nkapi)
|
|
18
|
-
|
|
19
|
-
const {
|
|
20
|
-
params: { section },
|
|
21
|
-
} = context
|
|
22
|
-
|
|
23
|
-
const acsCookie = context.req.headers.cookie
|
|
24
|
-
? getAcsCookie(ClientTypes.main, context.req.headers.cookie)
|
|
25
|
-
: ''
|
|
26
|
-
const siteHost = getHost(context.req)
|
|
27
|
-
replaceConsoleAndSetTransactionName(`Section: ${section}`)
|
|
28
|
-
|
|
29
|
-
let data
|
|
30
|
-
let user
|
|
31
|
-
try {
|
|
32
|
-
const [{ data: pageData }, pageUser] = await Promise.all([
|
|
33
|
-
apolloClient.query({
|
|
34
|
-
query: GET_PAGE,
|
|
35
|
-
variables: {
|
|
36
|
-
channel: section,
|
|
37
|
-
publisher: 'DEMO',
|
|
38
|
-
},
|
|
39
|
-
}),
|
|
40
|
-
await fetchUser(acsCookie, getAccountQueryUrl(siteHost)),
|
|
41
|
-
])
|
|
42
|
-
data = pageData
|
|
43
|
-
user = pageUser
|
|
44
|
-
} catch (e) {
|
|
45
|
-
return {
|
|
46
|
-
notFound: true,
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
/* start cra-effected */
|
|
50
|
-
const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
|
|
51
|
-
/* end cra-effected */
|
|
52
|
-
|
|
53
|
-
addCacheHeaders(context.res)
|
|
54
|
-
return {
|
|
55
|
-
props: {
|
|
56
|
-
page: data.page,
|
|
57
|
-
isIndexPage: true,
|
|
58
|
-
showAds: true,
|
|
59
|
-
user,
|
|
60
|
-
featureFlags /* cra-effected */,
|
|
61
|
-
},
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
export default SectionPage
|