|
1 | 1 | import { nextTestSetup } from 'e2e-utils'
|
2 | 2 | import { check } from 'next-test-utils'
|
3 | 3 |
|
| 4 | +const isPPREnabledByDefault = process.env.__NEXT_EXPERIMENTAL_PPR === 'true' |
| 5 | + |
4 | 6 | describe('app dir - css', () => {
|
5 | 7 | const { next, isNextDev, skipped } = nextTestSetup({
|
6 | 8 | files: __dirname,
|
@@ -476,15 +478,41 @@ describe('app dir - css', () => {
|
476 | 478 | } else {
|
477 | 479 | // Even if it's deduped by Float, it should still only be included once in the payload.
|
478 | 480 |
|
479 |
| - const matches = initialHtml.match(/\/_next\/static\/css\/.+?\.css/g) |
480 |
| - const counts = new Map() |
481 |
| - for (const match of matches) { |
482 |
| - counts.set(match, (counts.get(match) || 0) + 1) |
483 |
| - } |
484 |
| - for (const count of counts.values()) { |
485 |
| - // There are 3 matches, one for the rendered <link>, one for float preload and one for the <link> inside flight payload. |
486 |
| - // And there is one match for the not found style |
487 |
| - expect([1, 3]).toContain(count) |
| 481 | + const matches = initialHtml |
| 482 | + .match(/\/_next\/static\/css\/.+?\.css/g) |
| 483 | + .sort() |
| 484 | + |
| 485 | + // Heavy on testing React implementation details. |
| 486 | + // Assertions may change often but what needs to be checked on change is if styles are needlessly duplicated in Flight data |
| 487 | + // There are 3 matches, one for the rendered <link> (HTML), one for Float preload (Flight) and one for the <link> inside Flight payload. |
| 488 | + // And there is one match for the not found style |
| 489 | + if (isPPREnabledByDefault) { |
| 490 | + expect(matches).toEqual([ |
| 491 | + // string split across chunks. |
| 492 | + '/_next/static/css/app/css/css-dupl"])</script><script>self.__next_f.push([1,"icate-2/layout.css', |
| 493 | + '/_next/static/css/app/css/css-duplicate-2/layout.css', |
| 494 | + '/_next/static/css/app/css/css-duplicate-2/layout.css', |
| 495 | + '/_next/static/css/app/css/layout.css', |
| 496 | + '/_next/static/css/app/css/layout.css', |
| 497 | + '/_next/static/css/app/css/layout.css', |
| 498 | + '/_next/static/css/app/layout.css', |
| 499 | + '/_next/static/css/app/layout.css', |
| 500 | + '/_next/static/css/app/layout.css', |
| 501 | + '/_next/static/css/app/not-found.css', |
| 502 | + ]) |
| 503 | + } else { |
| 504 | + expect(matches).toEqual([ |
| 505 | + '/_next/static/css/app/css/css-duplicate-2/layout.css', |
| 506 | + '/_next/static/css/app/css/css-duplicate-2/layout.css', |
| 507 | + '/_next/static/css/app/css/css-duplicate-2/layout.css', |
| 508 | + '/_next/static/css/app/css/layout.css', |
| 509 | + '/_next/static/css/app/css/layout.css', |
| 510 | + '/_next/static/css/app/css/layout.css', |
| 511 | + '/_next/static/css/app/layout.css', |
| 512 | + '/_next/static/css/app/layout.css', |
| 513 | + '/_next/static/css/app/layout.css', |
| 514 | + '/_next/static/css/app/not-found.css', |
| 515 | + ]) |
488 | 516 | }
|
489 | 517 | }
|
490 | 518 | })
|
|
0 commit comments