Skip to content

Commit 32fb7d5

Browse files
serhalpserhalp
authored
test: de-flake e2e stale-while-revalidate tests at last (#547)
* test: remove unsupported durable directive from EFs * test: deflake SWR tests by increasing revalidate sleep * test: deflake cache tests by explicitly reloading page I can't find anything in the playwright docs or issues about this, but `await page.goto(foo); await page.goto(foo)` does NOT behave the same as `await page.goto(foo); await page.reload()`. Quite consistently the former ends up... somehow... bypassing what should be a CDN cache hit. My best guess is that it's triggering a Remix/RR7 client-side navigation or something. I don't really know, but this fixes it.
1 parent 573bb94 commit 32fb7d5

File tree

6 files changed

+33
-30
lines changed

6 files changed

+33
-30
lines changed

‎tests/e2e/fixtures/classic-edge-site/app/routes/_index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export const headers: HeadersFunction = () => {
44
return {
55
// This is an example of how to set caching headers for a route
66
// For more info on headers in Remix, see: https://remix.run/route/headers
7-
'Cache-Control': 'public, max-age=60, s-maxage=60, durable',
7+
'Cache-Control': 'public, max-age=60, s-maxage=60',
88
}
99
}
1010

‎tests/e2e/fixtures/edge-site/app/routes/cached-for-a-year.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const loader = () => {
88
},
99
{
1010
headers: {
11-
"CDN-Cache-Control": "public, max-age=31536000, durable",
11+
"CDN-Cache-Control": "public, max-age=31536000",
1212
"Cache-Tag": "cached-for-a-year-tag",
1313
},
1414
},

‎tests/e2e/fixtures/edge-site/app/routes/headers.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const loader = () => {
88
},
99
{
1010
headers: {
11-
"Cache-Control": "public, max-age=3600, durable",
11+
"Cache-Control": "public, max-age=3600",
1212
},
1313
},
1414
);

‎tests/e2e/fixtures/edge-site/app/routes/stale-while-revalidate.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const loader = () => {
99
{
1010
headers: {
1111
"CDN-Cache-Control":
12-
"public, max-age=60, stale-while-revalidate=31536000, durable",
12+
"public, max-age=60, stale-while-revalidate=31536000",
1313
"Cache-Tag": "stale-while-revalidate-tag",
1414
},
1515
},

‎tests/e2e/react-router-user-journeys.spec.ts‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { expect, test } from './support/fixtures'
22

3+
const REVALIDATE_BUFFER_MS = 5000
34
const PURGE_BUFFER_MS = 5000
45

56
test.describe('React Router user journeys', () => {
@@ -88,23 +89,23 @@ test.describe('React Router user journeys', () => {
8889

8990
await page.waitForTimeout(MAX_AGE / 2)
9091

91-
await page.goto(`${reactRouterServerlessSite.url}/stale-while-revalidate`)
92+
await page.reload()
9293
const responseGeneratedAtText2 = await page.getByText('Response generated at').textContent()
9394
expect(responseGeneratedAtText2, 'First and second response should have matching date and time').toEqual(
9495
responseGeneratedAtText1,
9596
)
9697

9798
await page.waitForTimeout(2000 + MAX_AGE / 2)
9899

99-
await page.goto(`${reactRouterServerlessSite.url}/stale-while-revalidate`)
100+
await page.reload()
100101
const responseGeneratedAtText3 = await page.getByText('Response generated at').textContent()
101102
expect(responseGeneratedAtText3, 'First and third response should have matching date and time').toEqual(
102103
responseGeneratedAtText1,
103104
)
104105

105-
await page.waitForTimeout(2000)
106+
await page.waitForTimeout(REVALIDATE_BUFFER_MS)
106107

107-
await page.goto(`${reactRouterServerlessSite.url}/stale-while-revalidate`)
108+
await page.reload()
108109
const responseGeneratedAtText4 = await page.getByText('Response generated at').textContent()
109110
expect(
110111
responseGeneratedAtText4,
@@ -118,7 +119,7 @@ test.describe('React Router user journeys', () => {
118119

119120
await page.waitForTimeout(5000)
120121

121-
await page.goto(`${reactRouterServerlessSite.url}/cached-for-a-year`)
122+
await page.reload()
122123
const responseGeneratedAtText2 = await page.getByText('Response generated at').textContent()
123124
expect(responseGeneratedAtText2, 'First and second response should have matching date and time').toEqual(
124125
responseGeneratedAtText1,
@@ -128,7 +129,7 @@ test.describe('React Router user journeys', () => {
128129

129130
await page.waitForTimeout(PURGE_BUFFER_MS)
130131

131-
await page.goto(`${reactRouterServerlessSite.url}/cached-for-a-year`)
132+
await page.reload()
132133
const responseGeneratedAtText3 = await page.getByText('Response generated at').textContent()
133134
expect(
134135
responseGeneratedAtText3,
@@ -186,7 +187,7 @@ test.describe('React Router user journeys', () => {
186187
test('response has user-defined Cache-Control header', async ({ page, edgeSite }) => {
187188
const response = await page.goto(`${edgeSite.url}/headers`)
188189
await expect(page.getByRole('heading', { name: /Headers/i })).toBeVisible()
189-
expect(response?.headers()['cache-control']).toBe('public,max-age=3600,durable')
190+
expect(response?.headers()['cache-control']).toBe('public,max-age=3600')
190191
})
191192

192193
test('user can configure Stale-while-revalidate', async ({ page, edgeSite }) => {
@@ -197,36 +198,37 @@ test.describe('React Router user journeys', () => {
197198

198199
await page.waitForTimeout(MAX_AGE / 2)
199200

200-
await page.goto(`${edgeSite.url}/stale-while-revalidate`)
201+
await page.reload()
201202
const responseGeneratedAtText2 = await page.getByText('Response generated at').textContent()
202203
expect(responseGeneratedAtText2, 'First and second response should have matching date and time').toEqual(
203204
responseGeneratedAtText1,
204205
)
205206

206207
await page.waitForTimeout(2000 + MAX_AGE / 2)
207208

208-
await page.goto(`${edgeSite.url}/stale-while-revalidate`)
209+
await page.reload()
209210
const responseGeneratedAtText3 = await page.getByText('Response generated at').textContent()
210211
expect(responseGeneratedAtText3, 'First and third response should have matching date and time').toEqual(
211212
responseGeneratedAtText1,
212213
)
213214

214-
await page.waitForTimeout(2000)
215+
await page.waitForTimeout(REVALIDATE_BUFFER_MS)
215216

216-
await page.goto(`${edgeSite.url}/stale-while-revalidate`)
217+
await page.reload()
217218
const responseGeneratedAtText4 = await page.getByText('Response generated at').textContent()
218219
expect(
219220
responseGeneratedAtText4,
220221
'Fourth response should not have matching date and time with previous responses',
221222
).not.toEqual(responseGeneratedAtText1)
222223
})
224+
223225
test('user can on-demand purge response cached on CDN', async ({ page, edgeSite }) => {
224226
await page.goto(`${edgeSite.url}/cached-for-a-year`)
225227
const responseGeneratedAtText1 = await page.getByText('Response generated at').textContent()
226228

227229
await page.waitForTimeout(5000)
228230

229-
await page.goto(`${edgeSite.url}/cached-for-a-year`)
231+
await page.reload()
230232
const responseGeneratedAtText2 = await page.getByText('Response generated at').textContent()
231233
expect(responseGeneratedAtText2, 'First and second response should have matching date and time').toEqual(
232234
responseGeneratedAtText1,
@@ -236,7 +238,7 @@ test.describe('React Router user journeys', () => {
236238

237239
await page.waitForTimeout(PURGE_BUFFER_MS)
238240

239-
await page.goto(`${edgeSite.url}/cached-for-a-year`)
241+
await page.reload()
240242
const responseGeneratedAtText3 = await page.getByText('Response generated at').textContent()
241243
expect(
242244
responseGeneratedAtText3,

‎tests/e2e/remix-user-journeys.spec.ts‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { expect, test } from './support/fixtures'
22

3+
const REVALIDATE_BUFFER_MS = 5000
34
const PURGE_BUFFER_MS = 5000
45

56
test.describe('Remix user journeys', () => {
@@ -163,7 +164,7 @@ test.describe('Remix user journeys', () => {
163164
test('response has user-defined Cache-Control header when using edge SSR', async ({ page, edgeSite }) => {
164165
const response = await page.goto(`${edgeSite.url}/headers`)
165166
await expect(page.getByRole('heading', { name: /Headers/i })).toBeVisible()
166-
expect(response?.headers()['cache-control']).toBe('public,max-age=3600,durable')
167+
expect(response?.headers()['cache-control']).toBe('public,max-age=3600')
167168
})
168169

169170
test('user can configure Stale-while-revalidate when using origin SSR', async ({ page, serverlessSite }) => {
@@ -174,23 +175,23 @@ test.describe('Remix user journeys', () => {
174175

175176
await page.waitForTimeout(MAX_AGE / 2)
176177

177-
await page.goto(`${serverlessSite.url}/stale-while-revalidate`)
178+
await page.reload()
178179
const responseGeneratedAtText2 = await page.getByText('Response generated at').textContent()
179180
expect(responseGeneratedAtText2, 'First and second response should have matching date and time').toEqual(
180181
responseGeneratedAtText1,
181182
)
182183

183184
await page.waitForTimeout(2000 + MAX_AGE / 2)
184185

185-
await page.goto(`${serverlessSite.url}/stale-while-revalidate`)
186+
await page.reload()
186187
const responseGeneratedAtText3 = await page.getByText('Response generated at').textContent()
187188
expect(responseGeneratedAtText3, 'First and third response should have matching date and time').toEqual(
188189
responseGeneratedAtText1,
189190
)
190191

191-
await page.waitForTimeout(2000)
192+
await page.waitForTimeout(REVALIDATE_BUFFER_MS)
192193

193-
await page.goto(`${serverlessSite.url}/stale-while-revalidate`)
194+
await page.reload()
194195
const responseGeneratedAtText4 = await page.getByText('Response generated at').textContent()
195196
expect(
196197
responseGeneratedAtText4,
@@ -206,23 +207,23 @@ test.describe('Remix user journeys', () => {
206207

207208
await page.waitForTimeout(MAX_AGE / 2)
208209

209-
await page.goto(`${edgeSite.url}/stale-while-revalidate`)
210+
await page.reload()
210211
const responseGeneratedAtText2 = await page.getByText('Response generated at').textContent()
211212
expect(responseGeneratedAtText2, 'First and second response should have matching date and time').toEqual(
212213
responseGeneratedAtText1,
213214
)
214215

215216
await page.waitForTimeout(2000 + MAX_AGE / 2)
216217

217-
await page.goto(`${edgeSite.url}/stale-while-revalidate`)
218+
await page.reload()
218219
const responseGeneratedAtText3 = await page.getByText('Response generated at').textContent()
219220
expect(responseGeneratedAtText3, 'First and third response should have matching date and time').toEqual(
220221
responseGeneratedAtText1,
221222
)
222223

223-
await page.waitForTimeout(2000)
224+
await page.waitForTimeout(REVALIDATE_BUFFER_MS)
224225

225-
await page.goto(`${edgeSite.url}/stale-while-revalidate`)
226+
await page.reload()
226227
const responseGeneratedAtText4 = await page.getByText('Response generated at').textContent()
227228
expect(
228229
responseGeneratedAtText4,
@@ -236,7 +237,7 @@ test.describe('Remix user journeys', () => {
236237

237238
await page.waitForTimeout(5000)
238239

239-
await page.goto(`${serverlessSite.url}/cached-for-a-year`)
240+
await page.reload()
240241
const responseGeneratedAtText2 = await page.getByText('Response generated at').textContent()
241242
expect(responseGeneratedAtText2, 'First and second response should have matching date and time').toEqual(
242243
responseGeneratedAtText1,
@@ -246,7 +247,7 @@ test.describe('Remix user journeys', () => {
246247

247248
await page.waitForTimeout(PURGE_BUFFER_MS)
248249

249-
await page.goto(`${serverlessSite.url}/cached-for-a-year`)
250+
await page.reload()
250251
const responseGeneratedAtText3 = await page.getByText('Response generated at').textContent()
251252
expect(
252253
responseGeneratedAtText3,
@@ -260,7 +261,7 @@ test.describe('Remix user journeys', () => {
260261

261262
await page.waitForTimeout(5000)
262263

263-
await page.goto(`${edgeSite.url}/cached-for-a-year`)
264+
await page.reload()
264265
const responseGeneratedAtText2 = await page.getByText('Response generated at').textContent()
265266
expect(responseGeneratedAtText2, 'First and second response should have matching date and time').toEqual(
266267
responseGeneratedAtText1,
@@ -270,7 +271,7 @@ test.describe('Remix user journeys', () => {
270271

271272
await page.waitForTimeout(PURGE_BUFFER_MS)
272273

273-
await page.goto(`${edgeSite.url}/cached-for-a-year`)
274+
await page.reload()
274275
const responseGeneratedAtText3 = await page.getByText('Response generated at').textContent()
275276
expect(
276277
responseGeneratedAtText3,

0 commit comments

Comments
 (0)