Skip to content

Commit 53f8a89

Browse files
schiller-manuelschiller-manuel
committed
test
1 parent 050fda7 commit 53f8a89

3 files changed

Lines changed: 105 additions & 78 deletions

File tree

‎e2e/react-start/css-modules/tests/css.spec.ts‎

Lines changed: 35 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { expect, request } from '@playwright/test'
1+
import { expect } from '@playwright/test'
22
import { test } from '@tanstack/router-e2e-utils'
33

44
// Whitelist errors that can occur in CI:
@@ -13,21 +13,24 @@ test.describe('CSS styles in SSR (dev mode)', () => {
1313
test.use({ whitelistErrors })
1414

1515
// Warmup: trigger Vite's dependency optimization before running tests
16-
// This prevents "504 (Outdated Optimize Dep)" errors during actual tests
17-
test.beforeAll(async ({ baseURL }) => {
18-
const context = await request.newContext()
16+
// This prevents "optimized dependencies changed. reloading" during actual tests
17+
// We use a real browser context since dep optimization happens on JS load, not HTTP requests
18+
test.beforeAll(async ({ browser, baseURL }) => {
19+
const context = await browser.newContext()
20+
const page = await context.newPage()
1921
try {
20-
// Hit both pages to trigger any dependency optimization
21-
await context.get(baseURL!)
22-
await context.get(`${baseURL}/modules`)
23-
// Give Vite time to complete optimization
24-
await new Promise((resolve) => setTimeout(resolve, 1000))
25-
// Hit again after optimization
26-
await context.get(baseURL!)
22+
// Load both pages to trigger dependency optimization
23+
await page.goto(baseURL!)
24+
await page.waitForTimeout(2000) // Wait for deps to optimize
25+
await page.goto(`${baseURL}/modules`)
26+
await page.waitForTimeout(2000)
27+
// Load again after optimization completes
28+
await page.goto(baseURL!)
29+
await page.waitForTimeout(1000)
2730
} catch {
2831
// Ignore errors during warmup
2932
} finally {
30-
await context.dispose()
33+
await context.close()
3134
}
3235
})
3336

@@ -115,14 +118,17 @@ test.describe('CSS styles in SSR (dev mode)', () => {
115118
test('styles persist after hydration', async ({ page, baseURL }) => {
116119
await page.goto(buildUrl(baseURL!, '/'))
117120

118-
// Wait for hydration
119-
await page.waitForTimeout(1000)
120-
121+
// Wait for hydration and styles to be applied
121122
const element = page.getByTestId('global-styled')
122-
const backgroundColor = await element.evaluate(
123-
(el) => getComputedStyle(el).backgroundColor,
124-
)
125-
expect(backgroundColor).toBe('rgb(59, 130, 246)')
123+
await expect(element).toBeVisible()
124+
125+
// Wait for CSS to be applied (background color should not be transparent)
126+
await expect(async () => {
127+
const backgroundColor = await element.evaluate(
128+
(el) => getComputedStyle(el).backgroundColor,
129+
)
130+
expect(backgroundColor).toBe('rgb(59, 130, 246)')
131+
}).toPass({ timeout: 5000 })
126132
})
127133

128134
test('CSS modules styles persist after hydration', async ({
@@ -131,14 +137,17 @@ test.describe('CSS styles in SSR (dev mode)', () => {
131137
}) => {
132138
await page.goto(buildUrl(baseURL!, '/modules'))
133139

134-
// Wait for hydration
135-
await page.waitForTimeout(1000)
136-
140+
// Wait for hydration and styles to be applied
137141
const card = page.getByTestId('module-card')
138-
const backgroundColor = await card.evaluate(
139-
(el) => getComputedStyle(el).backgroundColor,
140-
)
141-
expect(backgroundColor).toBe('rgb(240, 253, 244)')
142+
await expect(card).toBeVisible()
143+
144+
// Wait for CSS to be applied (background color should not be transparent)
145+
await expect(async () => {
146+
const backgroundColor = await card.evaluate(
147+
(el) => getComputedStyle(el).backgroundColor,
148+
)
149+
expect(backgroundColor).toBe('rgb(240, 253, 244)')
150+
}).toPass({ timeout: 5000 })
142151
})
143152

144153
test('styles work correctly after client-side navigation', async ({

‎e2e/solid-start/css-modules/tests/css.spec.ts‎

Lines changed: 35 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { expect, request } from '@playwright/test'
1+
import { expect } from '@playwright/test'
22
import { test } from '@tanstack/router-e2e-utils'
33

44
// Whitelist errors that can occur in CI:
@@ -13,21 +13,24 @@ test.describe('CSS styles in SSR (dev mode)', () => {
1313
test.use({ whitelistErrors })
1414

1515
// Warmup: trigger Vite's dependency optimization before running tests
16-
// This prevents "504 (Outdated Optimize Dep)" errors during actual tests
17-
test.beforeAll(async ({ baseURL }) => {
18-
const context = await request.newContext()
16+
// This prevents "optimized dependencies changed. reloading" during actual tests
17+
// We use a real browser context since dep optimization happens on JS load, not HTTP requests
18+
test.beforeAll(async ({ browser, baseURL }) => {
19+
const context = await browser.newContext()
20+
const page = await context.newPage()
1921
try {
20-
// Hit both pages to trigger any dependency optimization
21-
await context.get(baseURL!)
22-
await context.get(`${baseURL}/modules`)
23-
// Give Vite time to complete optimization
24-
await new Promise((resolve) => setTimeout(resolve, 1000))
25-
// Hit again after optimization
26-
await context.get(baseURL!)
22+
// Load both pages to trigger dependency optimization
23+
await page.goto(baseURL!)
24+
await page.waitForTimeout(2000) // Wait for deps to optimize
25+
await page.goto(`${baseURL}/modules`)
26+
await page.waitForTimeout(2000)
27+
// Load again after optimization completes
28+
await page.goto(baseURL!)
29+
await page.waitForTimeout(1000)
2730
} catch {
2831
// Ignore errors during warmup
2932
} finally {
30-
await context.dispose()
33+
await context.close()
3134
}
3235
})
3336

@@ -115,14 +118,17 @@ test.describe('CSS styles in SSR (dev mode)', () => {
115118
test('styles persist after hydration', async ({ page, baseURL }) => {
116119
await page.goto(buildUrl(baseURL!, '/'))
117120

118-
// Wait for hydration
119-
await page.waitForTimeout(1000)
120-
121+
// Wait for hydration and styles to be applied
121122
const element = page.getByTestId('global-styled')
122-
const backgroundColor = await element.evaluate(
123-
(el) => getComputedStyle(el).backgroundColor,
124-
)
125-
expect(backgroundColor).toBe('rgb(59, 130, 246)')
123+
await expect(element).toBeVisible()
124+
125+
// Wait for CSS to be applied (background color should not be transparent)
126+
await expect(async () => {
127+
const backgroundColor = await element.evaluate(
128+
(el) => getComputedStyle(el).backgroundColor,
129+
)
130+
expect(backgroundColor).toBe('rgb(59, 130, 246)')
131+
}).toPass({ timeout: 5000 })
126132
})
127133

128134
test('CSS modules styles persist after hydration', async ({
@@ -131,14 +137,17 @@ test.describe('CSS styles in SSR (dev mode)', () => {
131137
}) => {
132138
await page.goto(buildUrl(baseURL!, '/modules'))
133139

134-
// Wait for hydration
135-
await page.waitForTimeout(1000)
136-
140+
// Wait for hydration and styles to be applied
137141
const card = page.getByTestId('module-card')
138-
const backgroundColor = await card.evaluate(
139-
(el) => getComputedStyle(el).backgroundColor,
140-
)
141-
expect(backgroundColor).toBe('rgb(240, 253, 244)')
142+
await expect(card).toBeVisible()
143+
144+
// Wait for CSS to be applied (background color should not be transparent)
145+
await expect(async () => {
146+
const backgroundColor = await card.evaluate(
147+
(el) => getComputedStyle(el).backgroundColor,
148+
)
149+
expect(backgroundColor).toBe('rgb(240, 253, 244)')
150+
}).toPass({ timeout: 5000 })
142151
})
143152

144153
test('styles work correctly after client-side navigation', async ({

‎e2e/vue-start/css-modules/tests/css.spec.ts‎

Lines changed: 35 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { expect, request } from '@playwright/test'
1+
import { expect } from '@playwright/test'
22
import { test } from '@tanstack/router-e2e-utils'
33

44
// Whitelist errors that can occur in CI:
@@ -15,21 +15,24 @@ test.describe('CSS styles in SSR (dev mode)', () => {
1515
test.use({ whitelistErrors })
1616

1717
// Warmup: trigger Vite's dependency optimization before running tests
18-
// This prevents "504 (Outdated Optimize Dep)" errors during actual tests
19-
test.beforeAll(async ({ baseURL }) => {
20-
const context = await request.newContext()
18+
// This prevents "optimized dependencies changed. reloading" during actual tests
19+
// We use a real browser context since dep optimization happens on JS load, not HTTP requests
20+
test.beforeAll(async ({ browser, baseURL }) => {
21+
const context = await browser.newContext()
22+
const page = await context.newPage()
2123
try {
22-
// Hit both pages to trigger any dependency optimization
23-
await context.get(baseURL!)
24-
await context.get(`${baseURL}/modules`)
25-
// Give Vite time to complete optimization
26-
await new Promise((resolve) => setTimeout(resolve, 1000))
27-
// Hit again after optimization
28-
await context.get(baseURL!)
24+
// Load both pages to trigger dependency optimization
25+
await page.goto(baseURL!)
26+
await page.waitForTimeout(2000) // Wait for deps to optimize
27+
await page.goto(`${baseURL}/modules`)
28+
await page.waitForTimeout(2000)
29+
// Load again after optimization completes
30+
await page.goto(baseURL!)
31+
await page.waitForTimeout(1000)
2932
} catch {
3033
// Ignore errors during warmup
3134
} finally {
32-
await context.dispose()
35+
await context.close()
3336
}
3437
})
3538

@@ -117,14 +120,17 @@ test.describe('CSS styles in SSR (dev mode)', () => {
117120
test('styles persist after hydration', async ({ page, baseURL }) => {
118121
await page.goto(buildUrl(baseURL!, '/'))
119122

120-
// Wait for hydration
121-
await page.waitForTimeout(1000)
122-
123+
// Wait for hydration and styles to be applied
123124
const element = page.getByTestId('global-styled')
124-
const backgroundColor = await element.evaluate(
125-
(el) => getComputedStyle(el).backgroundColor,
126-
)
127-
expect(backgroundColor).toBe('rgb(59, 130, 246)')
125+
await expect(element).toBeVisible()
126+
127+
// Wait for CSS to be applied (background color should not be transparent)
128+
await expect(async () => {
129+
const backgroundColor = await element.evaluate(
130+
(el) => getComputedStyle(el).backgroundColor,
131+
)
132+
expect(backgroundColor).toBe('rgb(59, 130, 246)')
133+
}).toPass({ timeout: 5000 })
128134
})
129135

130136
test('CSS modules styles persist after hydration', async ({
@@ -133,14 +139,17 @@ test.describe('CSS styles in SSR (dev mode)', () => {
133139
}) => {
134140
await page.goto(buildUrl(baseURL!, '/modules'))
135141

136-
// Wait for hydration
137-
await page.waitForTimeout(1000)
138-
142+
// Wait for hydration and styles to be applied
139143
const card = page.getByTestId('module-card')
140-
const backgroundColor = await card.evaluate(
141-
(el) => getComputedStyle(el).backgroundColor,
142-
)
143-
expect(backgroundColor).toBe('rgb(240, 253, 244)')
144+
await expect(card).toBeVisible()
145+
146+
// Wait for CSS to be applied (background color should not be transparent)
147+
await expect(async () => {
148+
const backgroundColor = await card.evaluate(
149+
(el) => getComputedStyle(el).backgroundColor,
150+
)
151+
expect(backgroundColor).toBe('rgb(240, 253, 244)')
152+
}).toPass({ timeout: 5000 })
144153
})
145154

146155
test('styles work correctly after client-side navigation', async ({

0 commit comments

Comments
 (0)