chore(tests): re-implement basic tests (#521)

.github/workflows/ci.yml

@@ -35,11 +35,14 @@ jobs:
         if: steps.cache.outputs.cache-hit != 'true'
         run: yarn
 
+      - name: Prepare
+        run: yarn dev:prepare
+
       - name: Lint
         run: yarn lint
 
-      # - name: Test
-      #   run: yarn test
+      - name: Test
+        run: yarn test
 
       # - name: Coverage
       #   run: yarn codecov

package.json

@@ -23,7 +23,7 @@
     "lint": "eslint --ext .js,.ts,.vue",
     "prepack": "yarn build",
     "release": "yarn test && standard-version && git push --follow-tags && npm publish",
-    "test": "yarn lint"
+    "test": "vitest"
   },
   "dependencies": {
     "@nuxt/kit": "^3.0.0-rc.5",
@@ -42,13 +42,15 @@
   },
   "devDependencies": {
     "@fontsource/inter": "^4.5.11",
+    "@nuxt/content": "npm:@nuxt/content-edge@latest",
     "@nuxt/module-builder": "latest",
-    "@nuxt/test-utils": "latest",
+    "@nuxt/test-utils": "^3.0.0-rc.8",
     "@nuxtjs/eslint-config-typescript": "latest",
     "codecov": "latest",
     "eslint": "latest",
+    "jsdom": "^20.0.0",
     "nuxt": "npm:nuxt3@latest",
-    "@nuxt/content": "npm:@nuxt/content-edge@latest",
-    "standard-version": "latest"
+    "standard-version": "latest",
+    "vitest": "^0.22.1"
   }
 }

test/basic.test.ts

@@ -0,0 +1,50 @@
+import { useTestContext, $fetch } from '@nuxt/test-utils'
+import { describe, test, expect, vi } from 'vitest'
+import { mockedInfo } from 'consola'
+import { r, setupNuxtTailwind } from './util'
+
+describe('tailwindcss module', async () => {
+  vi.mock('consola', async () => {
+    const { default: mod } = (await vi.importActual<typeof import('consola')>('consola'))
+    mod.withScope = () => mod
+    mod.info = vi.fn()
+    return { default: mod, mockedInfo: mod.info }
+  })
+
+  await setupNuxtTailwind({
+    exposeConfig: true,
+    configPath: r('tailwind.config.js'),
+    cssPath: r('tailwind.css')
+  })
+
+  //
+  test('tailwind works', async () => {
+    const manifest = await $fetch('/_nuxt/manifest.json')
+    // @ts-expect-error untyped
+    const [, { css }] = Object.entries(manifest).find(([, v]) => v.isEntry)
+    const cssContents = await $fetch(`/_nuxt/${css[0]}`) as string
+
+    // test tailwind is the first entry
+    expect(cssContents.startsWith('/*! tailwindcss v')).toBeTruthy()
+    // test pages/index.vue is read
+    expect(cssContents).toContain('.max-w-7xl')
+  })
+
+  test('include custom tailwind.css file in project css', () => {
+    const nuxt = useTestContext().nuxt
+
+    expect(mockedInfo.mock.calls[0]).contains('Using Tailwind CSS from ~/tailwind.css')
+
+    expect(nuxt.options.css).toHaveLength(1)
+    expect(nuxt.options.css[0]).toEqual(nuxt.options.tailwindcss.cssPath)
+  })
+
+  // @todo re-implement
+  // test('custom paths', () => {
+  //   const ctx = useTestContext()
+  //
+  //   expect(logger.info).toHaveBeenNthCalledWith(1, `Using Tailwind CSS from ~/${relative(rootDir, nuxt.options.tailwindcss.cssPath)}`)
+  //   expect(logger.info).toHaveBeenNthCalledWith(2, `Merging Tailwind config from ~/${relative(rootDir, nuxt.options.tailwindcss.configPath)}`)
+  // })
+  //
+})

test/fixture/basic/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtPage />
+  </div>
+</template>

test/fixture/basic/malformed-tailwind.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('something-that-doesnt-exist')
+  ]
+}

test/fixture/basic/nuxt.config.ts

@@ -0,0 +1,11 @@
+import { resolve } from 'path'
+import { defineNuxtConfig } from 'nuxt'
+
+export default defineNuxtConfig({
+  alias: {
+    '@nuxtjs/tailwindcss': resolve(__dirname, '../../../src/module.ts')
+  },
+  modules: [
+    '@nuxtjs/tailwindcss'
+  ]
+})

test/fixture/basic/pages/index.vue

@@ -0,0 +1,18 @@
+<template>
+<!-- This example requires Tailwind CSS v2.0+ -->
+<div class="bg-gray-50">
+  <div class="px-4 py-12 mx-auto max-w-7xl sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
+    <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+      <span class="block">Ready to dive in?</span>
+      <span class="block text-indigo-600">Start your free trial today.</span>
+    </h2>
+    <div class="flex mt-8 lg:mt-0 lg:shrink-0">
+      <div class="inline-flex rounded-md shadow">
+        <a href="/_tailwind" class="inline-flex items-center justify-center px-5 py-3 text-base font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700">
+          Open Tailwind Config Viewer
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+</template>

test/fixture/basic/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://v3.nuxtjs.org/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

test/util.ts

@@ -0,0 +1,15 @@
+import { fileURLToPath } from 'node:url'
+import { setup } from '@nuxt/test-utils'
+
+export const r = (s: string = '') => fileURLToPath(new URL('./fixture/basic/' + s, import.meta.url))
+
+export const setupNuxtTailwind = (tailwindcss = {}) => {
+  return setup({
+    rootDir: r(),
+    server: true,
+    browser: false,
+    nuxtConfig: {
+      tailwindcss
+    }
+  })
+}

vitest.config.ts

@@ -0,0 +1,23 @@
+/* eslint-disable spaced-comment */
+/// <reference types="vitest" />
+/// <reference types="vitest/globals" />
+
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@nuxtjs/tailwindcss': resolve(__dirname, 'src/module.ts')
+    }
+  },
+  define: {
+    __VUE_OPTIONS_API__: 'true',
+    __VUE_PROD_DEVTOOLS__: 'false'
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    reporters: 'dot'
+  }
+})