From 02b6431aaf687fde8fa9325ce463fd11abbeb97b Mon Sep 17 00:00:00 2001
From: OJ Kwon <1210596+kwonoj@users.noreply.github.com>
Date: Thu, 7 Sep 2023 15:20:24 -0700
Subject: [PATCH] test(turbopack): migrate tailwind test cases from next-dev

---
 .../with-tailwindcss/pages/index.js           | 15 +++++-
 .../with-tailwindcss/postcss.config.js        |  6 +++
 .../with-tailwindcss/tailwind.config.js       | 12 +++++
 .../css/test/basic-tailwind.test.js           | 47 +++++++++++++++++++
 test/turbopack-tests-manifest.js              |  1 +
 5 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 test/integration/css-fixtures/with-tailwindcss/postcss.config.js
 create mode 100644 test/integration/css-fixtures/with-tailwindcss/tailwind.config.js
 create mode 100644 test/integration/css/test/basic-tailwind.test.js

diff --git a/test/integration/css-fixtures/with-tailwindcss/pages/index.js b/test/integration/css-fixtures/with-tailwindcss/pages/index.js
index b3ba78da2d5e1..5311664264b65 100644
--- a/test/integration/css-fixtures/with-tailwindcss/pages/index.js
+++ b/test/integration/css-fixtures/with-tailwindcss/pages/index.js
@@ -1,3 +1,16 @@
 export default function Home() {
-  return <div />
+  return (
+    <div>
+      <footer className="flex h-24 w-full items-center justify-center border-t">
+        <a
+          className="flex items-center justify-center gap-2"
+          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Powered by{' '}
+        </a>
+      </footer>
+    </div>
+  )
 }
diff --git a/test/integration/css-fixtures/with-tailwindcss/postcss.config.js b/test/integration/css-fixtures/with-tailwindcss/postcss.config.js
new file mode 100644
index 0000000000000..33ad091d26d8a
--- /dev/null
+++ b/test/integration/css-fixtures/with-tailwindcss/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/test/integration/css-fixtures/with-tailwindcss/tailwind.config.js b/test/integration/css-fixtures/with-tailwindcss/tailwind.config.js
new file mode 100644
index 0000000000000..95b7c46ff8ab9
--- /dev/null
+++ b/test/integration/css-fixtures/with-tailwindcss/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+    './app/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/test/integration/css/test/basic-tailwind.test.js b/test/integration/css/test/basic-tailwind.test.js
new file mode 100644
index 0000000000000..8ff9b477d2952
--- /dev/null
+++ b/test/integration/css/test/basic-tailwind.test.js
@@ -0,0 +1,47 @@
+/* eslint-env jest */
+import { createNext, FileRef } from 'e2e-utils'
+import webdriver from 'next-webdriver'
+import { join } from 'path'
+
+const fixturesDir = join(__dirname, '../..', 'css-fixtures')
+
+//[NOTE]: This test is migrated from next-dev integration tests for turbopack,
+//Extracted into a single test file so we can put this in blocking tests for turbopack (turbopack-tests-manifests.js)
+describe('Render css with tailwind', () => {
+  const appDir = join(fixturesDir, 'with-tailwindcss')
+
+  let next
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        pages: new FileRef(join(appDir, 'pages')),
+        styles: new FileRef(join(appDir, 'styles')),
+        'postcss.config.js': new FileRef(join(appDir, 'postcss.config.js')),
+        'tailwind.config.js': new FileRef(join(appDir, 'tailwind.config.js')),
+      },
+      dependencies: {
+        postcss: '^8.4.29',
+        tailwindcss: '^3.3.3',
+        autoprefixer: '^10.4.13',
+      },
+    })
+  })
+
+  afterAll(() => next?.destroy())
+
+  it('should apply global styles', async () => {
+    let browser
+    try {
+      browser = await webdriver(next.url, '/')
+
+      const alignItems = await browser.eval(
+        `window.getComputedStyle(document.querySelector('footer')).alignItems`
+      )
+      expect(alignItems).toMatchInlineSnapshot(`"center"`)
+    } finally {
+      if (browser) {
+        await browser.close()
+      }
+    }
+  })
+})
diff --git a/test/turbopack-tests-manifest.js b/test/turbopack-tests-manifest.js
index cf7b406536247..3617211073acf 100644
--- a/test/turbopack-tests-manifest.js
+++ b/test/turbopack-tests-manifest.js
@@ -22,6 +22,7 @@ const enabledTests = [
   'test/e2e/undici-fetch/index.test.ts',
   'test/integration/bigint/test/index.test.js',
   'test/e2e/styled-jsx/index.test.ts',
+  'test/integration/css/test/basic-tailwind.test.js',
   // TODO: re-enable once the logging is aligned
   // 'test/integration/middleware-basic/test/index.test.js',
 ]