From f028eae75e03964beb99758b1fadbf137ab7f95d Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Fri, 6 Sep 2024 10:48:49 +0200
Subject: [PATCH] Integration tests: Move all file writes into retry block
 (#14350)

There are still instances in which CI is flaky after #14332. This PR
applies the same fix (that is, moving the file write into the retrying
block) to all `retryAssertion` callbacks.
---
 integrations/postcss/next.test.ts |  18 +--
 integrations/vite/astro.test.ts   |  21 +--
 integrations/vite/config.test.ts  |   6 +-
 integrations/vite/index.test.ts   | 214 +++++++++++++++---------------
 integrations/vite/nuxt.test.ts    |  17 +--
 5 files changed, 143 insertions(+), 133 deletions(-)

diff --git a/integrations/postcss/next.test.ts b/integrations/postcss/next.test.ts
index f50b34e58..b1472c528 100644
--- a/integrations/postcss/next.test.ts
+++ b/integrations/postcss/next.test.ts
@@ -135,16 +135,16 @@ test(
         expect(css).toContain(candidate`underline`)
       })
 
-      await fs.write(
-        'app/page.js',
-        js`
-          export default function Page() {
-            return <h1 className="underline text-red-500">Hello, Next.js!</h1>
-          }
-        `,
-      )
-
       await retryAssertion(async () => {
+        await fs.write(
+          'app/page.js',
+          js`
+            export default function Page() {
+              return <h1 className="underline text-red-500">Hello, Next.js!</h1>
+            }
+          `,
+        )
+
         let css = await fetchStyles(port)
         expect(css).toContain(candidate`underline`)
         expect(css).toContain(candidate`text-red-500`)
diff --git a/integrations/vite/astro.test.ts b/integrations/vite/astro.test.ts
index 68031c8c1..188d6e9f4 100644
--- a/integrations/vite/astro.test.ts
+++ b/integrations/vite/astro.test.ts
@@ -44,17 +44,18 @@ test(
       expect(css).toContain(candidate`underline`)
     })
 
-    await fs.write(
-      'src/pages/index.astro',
-      html`
-        <div class="underline font-bold">Hello, world!</div>
-
-        <style is:global>
-          @import 'tailwindcss';
-        </style>
-      `,
-    )
     await retryAssertion(async () => {
+      await fs.write(
+        'src/pages/index.astro',
+        html`
+          <div class="underline font-bold">Hello, world!</div>
+
+          <style is:global>
+            @import 'tailwindcss';
+          </style>
+      `,
+      )
+
       let css = await fetchStyles(port)
       expect(css).toContain(candidate`underline`)
       expect(css).toContain(candidate`font-bold`)
diff --git a/integrations/vite/config.test.ts b/integrations/vite/config.test.ts
index 9ee774e00..196d96440 100644
--- a/integrations/vite/config.test.ts
+++ b/integrations/vite/config.test.ts
@@ -191,8 +191,9 @@ test(
       expect(css).toContain('color: blue')
     })
 
-    await fs.write('my-color.cjs', js`module.exports = 'red'`)
     await retryAssertion(async () => {
+      await fs.write('my-color.cjs', js`module.exports = 'red'`)
+
       let css = await fetchStyles(port, '/index.html')
       expect(css).toContain(candidate`text-primary`)
       expect(css).toContain('color: red')
@@ -262,8 +263,9 @@ test(
       expect(css).toContain('color: blue')
     })
 
-    await fs.write('my-color.mjs', js`export default 'red'`)
     await retryAssertion(async () => {
+      await fs.write('my-color.mjs', js`export default 'red'`)
+
       let css = await fetchStyles(port, '/index.html')
       expect(css).toContain(candidate`text-primary`)
       expect(css).toContain('color: red')
diff --git a/integrations/vite/index.test.ts b/integrations/vite/index.test.ts
index 3891b9674..ecfa37b05 100644
--- a/integrations/vite/index.test.ts
+++ b/integrations/vite/index.test.ts
@@ -171,78 +171,81 @@ for (let transformer of ['postcss', 'lightningcss']) {
         // Candidates are resolved lazily, so the first visit of index.html
         // will only have candidates from this file.
         await retryAssertion(async () => {
-          let css = await fetchStyles(port, '/index.html')
-          expect(css).toContain(candidate`underline`)
-          expect(css).toContain(candidate`flex`)
-          expect(css).not.toContain(candidate`font-bold`)
+          let styles = await fetchStyles(port, '/index.html')
+          expect(styles).toContain(candidate`underline`)
+          expect(styles).toContain(candidate`flex`)
+          expect(styles).not.toContain(candidate`font-bold`)
         })
 
         // Going to about.html will extend the candidate list to include
         // candidates from about.html.
         await retryAssertion(async () => {
-          let css = await fetchStyles(port, '/about.html')
-          expect(css).toContain(candidate`underline`)
-          expect(css).toContain(candidate`flex`)
-          expect(css).toContain(candidate`font-bold`)
+          let styles = await fetchStyles(port, '/about.html')
+          expect(styles).toContain(candidate`underline`)
+          expect(styles).toContain(candidate`flex`)
+          expect(styles).toContain(candidate`font-bold`)
         })
 
-        // Updates are additive and cause new candidates to be added.
-        await fs.write(
-          'project-a/index.html',
-          html`
-            <head>
-              <link rel="stylesheet" href="./src/index.css" />
-            </head>
-            <body>
-              <div class="underline m-2">Hello, world!</div>
-            </body>
-          `,
-        )
         await retryAssertion(async () => {
-          let css = await fetchStyles(port)
-          expect(css).toContain(candidate`underline`)
-          expect(css).toContain(candidate`flex`)
-          expect(css).toContain(candidate`font-bold`)
-          expect(css).toContain(candidate`m-2`)
+          // Updates are additive and cause new candidates to be added.
+          await fs.write(
+            'project-a/index.html',
+            html`
+              <head>
+                <link rel="stylesheet" href="./src/index.css" />
+              </head>
+              <body>
+                <div class="underline m-2">Hello, world!</div>
+              </body>
+            `,
+          )
+
+          let styles = await fetchStyles(port)
+          expect(styles).toContain(candidate`underline`)
+          expect(styles).toContain(candidate`flex`)
+          expect(styles).toContain(candidate`font-bold`)
+          expect(styles).toContain(candidate`m-2`)
         })
 
-        // Manually added `@source`s are watched and trigger a rebuild
-        await fs.write(
-          'project-b/src/index.js',
-          js`
-            const className = "[.changed_&]:content-['project-b/src/index.js']"
-            module.exports = { className }
-          `,
-        )
         await retryAssertion(async () => {
-          let css = await fetchStyles(port)
-          expect(css).toContain(candidate`underline`)
-          expect(css).toContain(candidate`flex`)
-          expect(css).toContain(candidate`font-bold`)
-          expect(css).toContain(candidate`m-2`)
-          expect(css).toContain(candidate`[.changed_&]:content-['project-b/src/index.js']`)
+          // Manually added `@source`s are watched and trigger a rebuild
+          await fs.write(
+            'project-b/src/index.js',
+            js`
+              const className = "[.changed_&]:content-['project-b/src/index.js']"
+              module.exports = { className }
+            `,
+          )
+
+          let styles = await fetchStyles(port)
+          expect(styles).toContain(candidate`underline`)
+          expect(styles).toContain(candidate`flex`)
+          expect(styles).toContain(candidate`font-bold`)
+          expect(styles).toContain(candidate`m-2`)
+          expect(styles).toContain(candidate`[.changed_&]:content-['project-b/src/index.js']`)
         })
 
-        // After updates to the CSS file, all previous candidates should still be in
-        // the generated CSS
-        await fs.write(
-          'project-a/src/index.css',
-          css`
-            ${await fs.read('project-a/src/index.css')}
-
-            .red {
-              color: red;
-            }
-          `,
-        )
         await retryAssertion(async () => {
-          let css = await fetchStyles(port)
-          expect(css).toContain(candidate`red`)
-          expect(css).toContain(candidate`flex`)
-          expect(css).toContain(candidate`m-2`)
-          expect(css).toContain(candidate`underline`)
-          expect(css).toContain(candidate`[.changed_&]:content-['project-b/src/index.js']`)
-          expect(css).toContain(candidate`font-bold`)
+          // After updates to the CSS file, all previous candidates should still be in
+          // the generated CSS
+          await fs.write(
+            'project-a/src/index.css',
+            css`
+              ${await fs.read('project-a/src/index.css')}
+
+              .red {
+                color: red;
+              }
+            `,
+          )
+
+          let styles = await fetchStyles(port)
+          expect(styles).toContain(candidate`red`)
+          expect(styles).toContain(candidate`flex`)
+          expect(styles).toContain(candidate`m-2`)
+          expect(styles).toContain(candidate`underline`)
+          expect(styles).toContain(candidate`[.changed_&]:content-['project-b/src/index.js']`)
+          expect(styles).toContain(candidate`font-bold`)
         })
       },
     )
@@ -337,51 +340,53 @@ for (let transformer of ['postcss', 'lightningcss']) {
 
           let files = await fs.glob('project-a/dist/**/*.css')
           expect(files).toHaveLength(1)
-          let [, css] = files[0]
-          expect(css).toContain(candidate`underline`)
-          expect(css).toContain(candidate`flex`)
-          expect(css).toContain(candidate`m-2`)
+          let [, styles] = files[0]
+          expect(styles).toContain(candidate`underline`)
+          expect(styles).toContain(candidate`flex`)
+          expect(styles).toContain(candidate`m-2`)
         })
 
-        // Manually added `@source`s are watched and trigger a rebuild
-        await fs.write(
-          'project-b/src/index.js',
-          js`
-            const className = "[.changed_&]:content-['project-b/src/index.js']"
-            module.exports = { className }
-          `,
-        )
         await retryAssertion(async () => {
+          // Manually added `@source`s are watched and trigger a rebuild
+          await fs.write(
+            'project-b/src/index.js',
+            js`
+              const className = "[.changed_&]:content-['project-b/src/index.js']"
+              module.exports = { className }
+            `,
+          )
+
           let files = await fs.glob('project-a/dist/**/*.css')
           expect(files).toHaveLength(1)
-          let [, css] = files[0]
-          expect(css).toContain(candidate`underline`)
-          expect(css).toContain(candidate`flex`)
-          expect(css).toContain(candidate`m-2`)
-          expect(css).toContain(candidate`[.changed_&]:content-['project-b/src/index.js']`)
+          let [, styles] = files[0]
+          expect(styles).toContain(candidate`underline`)
+          expect(styles).toContain(candidate`flex`)
+          expect(styles).toContain(candidate`m-2`)
+          expect(styles).toContain(candidate`[.changed_&]:content-['project-b/src/index.js']`)
         })
 
-        // After updates to the CSS file, all previous candidates should still be in
-        // the generated CSS
-        await fs.write(
-          'project-a/src/index.css',
-          css`
-            ${await fs.read('project-a/src/index.css')}
-
-            .red {
-              color: red;
-            }
-          `,
-        )
         await retryAssertion(async () => {
+          // After updates to the CSS file, all previous candidates should still be in
+          // the generated CSS
+          await fs.write(
+            'project-a/src/index.css',
+            css`
+              ${await fs.read('project-a/src/index.css')}
+
+              .red {
+                color: red;
+              }
+            `,
+          )
+
           let files = await fs.glob('project-a/dist/**/*.css')
           expect(files).toHaveLength(1)
-          let [, css] = files[0]
-          expect(css).toContain(candidate`underline`)
-          expect(css).toContain(candidate`flex`)
-          expect(css).toContain(candidate`m-2`)
-          expect(css).toContain(candidate`[.changed_&]:content-['project-b/src/index.js']`)
-          expect(css).toContain(candidate`red`)
+          let [, styles] = files[0]
+          expect(styles).toContain(candidate`underline`)
+          expect(styles).toContain(candidate`flex`)
+          expect(styles).toContain(candidate`m-2`)
+          expect(styles).toContain(candidate`[.changed_&]:content-['project-b/src/index.js']`)
+          expect(styles).toContain(candidate`red`)
         })
       },
     )
@@ -439,25 +444,26 @@ test(
     // Candidates are resolved lazily, so the first visit of index.html
     // will only have candidates from this file.
     await retryAssertion(async () => {
-      let css = await fetchStyles(port, '/index.html')
-      expect(css).toContain(candidate`underline`)
-      expect(css).not.toContain(candidate`font-bold`)
+      let styles = await fetchStyles(port, '/index.html')
+      expect(styles).toContain(candidate`underline`)
+      expect(styles).not.toContain(candidate`font-bold`)
     })
 
     // Going to about.html will extend the candidate list to include
     // candidates from about.html.
     await retryAssertion(async () => {
-      let css = await fetchStyles(port, '/about.html')
-      expect(css).toContain(candidate`underline`)
-      expect(css).toContain(candidate`font-bold`)
+      let styles = await fetchStyles(port, '/about.html')
+      expect(styles).toContain(candidate`underline`)
+      expect(styles).toContain(candidate`font-bold`)
     })
 
-    // We change the CSS file so it is no longer a valid Tailwind root.
-    await fs.write('src/index.css', css`@import 'tailwindcss';`)
     await retryAssertion(async () => {
-      let css = await fetchStyles(port)
-      expect(css).toContain(candidate`underline`)
-      expect(css).toContain(candidate`font-bold`)
+      // We change the CSS file so it is no longer a valid Tailwind root.
+      await fs.write('src/index.css', css`@import 'tailwindcss';`)
+
+      let styles = await fetchStyles(port)
+      expect(styles).toContain(candidate`underline`)
+      expect(styles).toContain(candidate`font-bold`)
     })
   },
 )
diff --git a/integrations/vite/nuxt.test.ts b/integrations/vite/nuxt.test.ts
index 7004ccada..21876d2c7 100644
--- a/integrations/vite/nuxt.test.ts
+++ b/integrations/vite/nuxt.test.ts
@@ -47,15 +47,16 @@ test(
       expect(css).toContain(candidate`underline`)
     })
 
-    await fs.write(
-      'app.vue',
-      html`
-        <template>
-          <div class="underline font-bold">Hello world!</div>
-        </template>
-      `,
-    )
     await retryAssertion(async () => {
+      await fs.write(
+        'app.vue',
+        html`
+          <template>
+            <div class="underline font-bold">Hello world!</div>
+          </template>
+        `,
+      )
+
       let css = await fetchStyles(port)
       expect(css).toContain(candidate`underline`)
       expect(css).toContain(candidate`font-bold`)