feat: add unit test and TailwindcssPatcher class

sonofmagic · sonofmagic · commit d50c9f526933 · 2023-04-28T20:54:29.000+08:00
diff --git a/apps/next-app/package.json b/apps/next-app/package.json
@@ -10,7 +10,7 @@
     "prepare": "tw-patch"
   },
   "dependencies": {
-    "@types/node": "18.16.1",
+    "@types/node": "18.16.2",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.1",
     "autoprefixer": "10.4.14",
diff --git a/apps/nuxt-app/package.json b/apps/nuxt-app/package.json
@@ -10,7 +10,7 @@
     "prepare": "tw-patch"
   },
   "devDependencies": {
-    "@types/node": "^18",
+    "@types/node": "^18.16.2",
     "autoprefixer": "^10.4.14",
     "nuxt": "^3.4.2",
     "postcss": "^8.4.23",
diff --git a/apps/vite-vue/package.json b/apps/vite-vue/package.json
@@ -21,6 +21,6 @@
     "typescript": "^5.0.4",
     "unplugin-tailwindcss-mangle": "workspace:*",
     "vite": "^4.3.3",
-    "vue-tsc": "^1.6.0"
+    "vue-tsc": "^1.6.1"
   }
 }
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "@icebreakers/tsconfig": "^0.0.6",
     "@tsconfig/recommended": "^1.0.2",
     "@types/jest": "^29.5.1",
-    "@types/node": "^18.16.1",
+    "@types/node": "^18.16.2",
     "cross-env": "^7.0.3",
     "eslint": "^8.39.0",
     "jest": "^29.5.0",
diff --git a/packages/tailwindcss-patch/src/cache.ts b/packages/tailwindcss-patch/src/cache.ts
@@ -2,7 +2,7 @@ import fs from 'fs'
 import path from 'path'
 import { pkgName } from './constants'
 import type { CacheOptions } from './type'
-
+import { log } from './logger'
 export function mkCacheDirectory(cacheDirectory: string) {
   const exists = fs.existsSync(cacheDirectory)
   if (!exists) {
@@ -15,7 +15,7 @@ export function mkCacheDirectory(cacheDirectory: string) {
 
 export function getCacheOptions(options: CacheOptions = {}): Required<CacheOptions> & { filename: string } {
   const cwd = options.cwd ?? process.cwd()
-  const dir = options.dir ?? path.resolve(cwd, 'node_modules', '.cache', pkgName)
+  const dir = options.dir ?? path.resolve(cwd, 'node_modules/.cache', pkgName)
   const file = options.file ?? 'index.json'
   const filename = path.resolve(dir, file)
   return {
@@ -33,7 +33,7 @@ export function writeCache(data: Set<string>, options: CacheOptions = {}) {
     fs.writeFileSync(filename, JSON.stringify(Array.from(data), null, 2), 'utf-8')
     return filename
   } catch (error) {
-    console.log(error)
+    log('write cache file fail!')
   }
 }
 
@@ -45,11 +45,11 @@ export function readCache(options: CacheOptions = {}) {
       return new Set<string>(JSON.parse(data))
     }
   } catch (error) {
-    console.log(error)
+    log('parse cache content fail! path:' + filename)
     try {
       fs.unlinkSync(filename)
     } catch (error) {
-      console.log(error)
+      log('delete cache file fail! path:' + filename)
     }
   }
 }
diff --git a/packages/tailwindcss-patch/src/class.ts b/packages/tailwindcss-patch/src/class.ts
@@ -10,8 +10,9 @@ export interface TailwindcssPatcherOptions {
 
 export class TailwindcssPatcher {
   public rawOptions: TailwindcssPatcherOptions
-  public cache: InternalCacheOptions
-  public patch: Function
+  public cacheOptions: InternalCacheOptions
+  public patchOptions?: PatchOptions
+  public patch: () => void
   constructor(options: TailwindcssPatcherOptions = {}) {
     this.rawOptions = options
     let cache: InternalCacheOptions
@@ -33,7 +34,8 @@ export class TailwindcssPatcher {
         break
       }
     }
-    this.cache = cache
+    this.cacheOptions = cache
+    this.patchOptions = options.patch
     this.patch = createPatch(options.patch)
   }
 
@@ -42,14 +44,14 @@ export class TailwindcssPatcher {
   }
 
   setCache(set: Set<string>) {
-    if (this.cache.enable) {
-      return writeCache(set, this.cache)
+    if (this.cacheOptions.enable) {
+      return writeCache(set, this.cacheOptions)
     }
   }
 
   getCache() {
     // if(this.cache.enable){
-    return readCache(this.cache)
+    return readCache(this.cacheOptions)
     // }
   }
 
diff --git a/packages/tailwindcss-patch/src/logger.ts b/packages/tailwindcss-patch/src/logger.ts
diff --git a/packages/tailwindcss-patch/src/patcher.ts b/packages/tailwindcss-patch/src/patcher.ts
@@ -27,10 +27,16 @@ export function getInstalledPkgJsonPath(options: PatchOptions = {}) {
 }
 
 export function createPatch(options: PatchOptions = {}) {
-  const opt = defu(options, defaultOptions) as InternalPatchOptions
+  const opt = defu(
+    options,
+    {
+      basedir: process.cwd()
+    },
+    defaultOptions
+  ) as InternalPatchOptions
   return () => {
     try {
-      const pkgJsonPath = getInstalledPkgJsonPath(options)
+      const pkgJsonPath = getInstalledPkgJsonPath(opt)
       return internalPatch(pkgJsonPath, opt)
     } catch (error) {
       console.warn(`patch tailwindcss failed:` + (<Error>error).message)
diff --git a/packages/tailwindcss-patch/src/type.ts b/packages/tailwindcss-patch/src/type.ts
@@ -5,7 +5,7 @@ export interface CacheOptions {
   file?: string
 }
 
-export type InternalCacheOptions = CacheOptions & { enable: boolean }
+export type InternalCacheOptions = CacheOptions & { enable?: boolean }
 
 export interface PatchOptions {
   overwrite?: boolean
diff --git a/packages/tailwindcss-patch/test/cache.test.ts b/packages/tailwindcss-patch/test/cache.test.ts
@@ -21,8 +21,11 @@ describe('cache', () => {
     // const opt = getCacheOptions()
     let cache: Set<string> | undefined
     cache = readCache()
-    expect(cache).toBe(undefined)
-    writeCache(new Set(['a', 'b', 'c']))
+    // expect(cache).toBe(undefined)
+    writeCache(new Set(['a', 'b', 'c']), {
+      dir: path.resolve(__dirname, 'fixtures/cache'),
+      file: 'raw-method.json'
+    })
     cache = readCache()
     expect(cache).toBeDefined()
     if (cache) {
diff --git a/packages/tailwindcss-patch/test/class.test.ts b/packages/tailwindcss-patch/test/class.test.ts
@@ -1 +1,38 @@
-describe('class', () => {})
+import { TailwindcssPatcher } from '../src/class'
+import path from 'path'
+import { getCss, getTestCase } from './utils'
+describe('class', () => {
+  it('default', () => {
+    // const dir = path.resolve(__dirname, './fixtures/cache')
+    const twPatcher = new TailwindcssPatcher()
+    expect(twPatcher.cacheOptions.enable).toBe(false)
+    twPatcher.patch()
+    getCss([getTestCase('hello-world.html')])
+    const ctxs = twPatcher.getContexts()
+    expect(ctxs.length).toBe(1)
+    const set = twPatcher.getClassSet()
+    expect(set.size).toBeGreaterThan(0)
+    expect(set.size).toBe(4)
+  })
+
+  it('cache option', () => {
+    const dir = path.resolve(__dirname, './fixtures/cache')
+    const twPatcher = new TailwindcssPatcher({
+      cache: {
+        dir
+      }
+    })
+    const res = twPatcher.getCache()
+    expect(res instanceof Set).toBe(true)
+    expect(res?.size).toBe(5)
+    const p = twPatcher.setCache(new Set(['*', 'bg-[#123456]', 'font-bold', 'text-3xl', 'underline']))
+    expect(p).toBe(path.resolve(dir, 'index.json'))
+    twPatcher.patch()
+    getCss([getTestCase('hello-world.html'), getTestCase('hello-world.js')])
+    const ctxs = twPatcher.getContexts()
+    expect(ctxs.length).toBe(1)
+    const set = twPatcher.getClassSet()
+    expect(set.size).toBeGreaterThan(0)
+    expect(set.size).toBe(5)
+  })
+})
diff --git a/packages/tailwindcss-patch/test/context.test.ts b/packages/tailwindcss-patch/test/context.test.ts
@@ -1,34 +1,10 @@
-import postcss from 'postcss'
-import tailwindcss from 'tailwindcss'
-import fs from 'fs'
-import path from 'path'
 import { getContexts, getClassCacheSet } from '../src'
-
-function getTestCase(caseName: string) {
-  return fs.readFileSync(path.resolve(__dirname, 'fixtures', caseName), 'utf-8')
-}
-// @tailwind base;
-// @tailwind components;
-function getCss(raw: string | string[]) {
-  if (typeof raw === 'string') {
-    raw = [raw]
-  }
-  return postcss([
-    tailwindcss({
-      content: raw.map((x) => {
-        return {
-          raw: x
-        }
-      })
-    })
-  ]).process('@tailwind utilities;').css
-}
-
+import { getCss, getTestCase } from './utils'
 describe('common usage', () => {
   it('hello-world', () => {
     const result = getCss(getTestCase('hello-world.html'))
     const ctxs = getContexts()
-    expect(ctxs).toBeTruthy()
+    expect(ctxs.length).toBeTruthy()
     const set = getClassCacheSet()
     expect(set.size).toBeGreaterThan(0)
     expect(set.size).toBe(4)
@@ -38,7 +14,7 @@ describe('common usage', () => {
   it('hello-world with js', () => {
     const result = getCss([getTestCase('hello-world.html'), getTestCase('hello-world.js')])
     const ctxs = getContexts()
-    expect(ctxs).toBeTruthy()
+    expect(ctxs.length).toBeTruthy()
     const set = getClassCacheSet()
     expect(set.size).toBeGreaterThan(0)
     expect(set.size).toBe(5)
diff --git a/packages/tailwindcss-patch/test/fixtures/cache/index.json b/packages/tailwindcss-patch/test/fixtures/cache/index.json
@@ -0,0 +1,7 @@
+[
+  "*",
+  "bg-[#123456]",
+  "font-bold",
+  "text-3xl",
+  "underline"
+]
diff --git a/packages/tailwindcss-patch/test/fixtures/cache/raw-method.json b/packages/tailwindcss-patch/test/fixtures/cache/raw-method.json
@@ -0,0 +1,5 @@
+[
+  "a",
+  "b",
+  "c"
+]
diff --git a/packages/tailwindcss-patch/test/utils.ts b/packages/tailwindcss-patch/test/utils.ts
@@ -0,0 +1,24 @@
+import postcss from 'postcss'
+import tailwindcss from 'tailwindcss'
+import fs from 'fs'
+import path from 'path'
+
+export function getTestCase(caseName: string) {
+  return fs.readFileSync(path.resolve(__dirname, 'fixtures', caseName), 'utf-8')
+}
+// @tailwind base;
+// @tailwind components;
+export function getCss(raw: string | string[]) {
+  if (typeof raw === 'string') {
+    raw = [raw]
+  }
+  return postcss([
+    tailwindcss({
+      content: raw.map((x) => {
+        return {
+          raw: x
+        }
+      })
+    })
+  ]).process('@tailwind utilities;').css
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,6 @@`
`21`	`21`	`"typescript": "^5.0.4",`
`22`	`22`	`"unplugin-tailwindcss-mangle": "workspace:*",`
`23`	`23`	`"vite": "^4.3.3",`
`24`		`- "vue-tsc": "^1.6.0"`
	`24`	`+ "vue-tsc": "^1.6.1"`
`25`	`25`	`}`
`26`	`26`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,8 +10,9 @@ export interface TailwindcssPatcherOptions {`
`10`	`10`
`11`	`11`	`export class TailwindcssPatcher {`
`12`	`12`	`public rawOptions: TailwindcssPatcherOptions`
`13`		`- public cache: InternalCacheOptions`
`14`		`- public patch: Function`
	`13`	`+ public cacheOptions: InternalCacheOptions`
	`14`	`+ public patchOptions?: PatchOptions`
	`15`	`+ public patch: () => void`
`15`	`16`	`constructor(options: TailwindcssPatcherOptions = {}) {`
`16`	`17`	`this.rawOptions = options`
`17`	`18`	`let cache: InternalCacheOptions`
`@@ -33,7 +34,8 @@ export class TailwindcssPatcher {`
`33`	`34`	`break`
`34`	`35`	`}`
`35`	`36`	`}`
`36`		`- this.cache = cache`
	`37`	`+ this.cacheOptions = cache`
	`38`	`+ this.patchOptions = options.patch`
`37`	`39`	`this.patch = createPatch(options.patch)`
`38`	`40`	`}`
`39`	`41`
`@@ -42,14 +44,14 @@ export class TailwindcssPatcher {`
`42`	`44`	`}`
`43`	`45`
`44`	`46`	`setCache(set: Set<string>) {`
`45`		`- if (this.cache.enable) {`
`46`		`- return writeCache(set, this.cache)`
	`47`	`+ if (this.cacheOptions.enable) {`
	`48`	`+ return writeCache(set, this.cacheOptions)`
`47`	`49`	`}`
`48`	`50`	`}`
`49`	`51`
`50`	`52`	`getCache() {`
`51`	`53`	`// if(this.cache.enable){`
`52`		`- return readCache(this.cache)`
	`54`	`+ return readCache(this.cacheOptions)`
`53`	`55`	`// }`
`54`	`56`	`}`
`55`	`57`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ export interface CacheOptions {`
`5`	`5`	`file?: string`
`6`	`6`	`}`
`7`	`7`
`8`		`-export type InternalCacheOptions = CacheOptions & { enable: boolean }`
	`8`	`+export type InternalCacheOptions = CacheOptions & { enable?: boolean }`
`9`	`9`
`10`	`10`	`export interface PatchOptions {`
`11`	`11`	`overwrite?: boolean`