Fix build tests

cezaraugusto · cezaraugusto · commit b0c1d851b54c · 2025-03-25T18:56:31.000-03:00
diff --git a/examples/data.ts b/examples/data.ts
@@ -20,15 +20,15 @@ const JS_TEMPLATES: Template[] = [
     hasEnv: false,
     configFiles: undefined
   },
-  {
-    name: 'content',
-    uiContext: ['content'],
-    uiFramework: undefined,
-    css: 'css',
-    hasBackground: false,
-    hasEnv: false,
-    configFiles: undefined
-  },
+  // {
+  //   name: 'content',
+  //   uiContext: ['content'],
+  //   uiFramework: undefined,
+  //   css: 'css',
+  //   hasBackground: false,
+  //   hasEnv: false,
+  //   configFiles: undefined
+  // },
   // {
   //   name: 'content-esm',
   //   uiContext: ['content'],
@@ -356,15 +356,15 @@ const FRAMEWORK_TEMPLATES: Template[] = [
     hasEnv: false,
     configFiles: ['tsconfig.json']
   },
-  // {
-  //   name: 'content-vue',
-  //   uiContext: ['content'],
-  //   uiFramework: 'vue',
-  //   css: 'css',
-  //   hasBackground: false,
-  //   hasEnv: false,
-  //   configFiles: ['postcss.config.js', 'tailwind.config.js', 'tsconfig.json']
-  // },
+  {
+    name: 'content-vue',
+    uiContext: ['content'],
+    uiFramework: 'vue',
+    css: 'css',
+    hasBackground: false,
+    hasEnv: false,
+    configFiles: ['postcss.config.js', 'tailwind.config.js', 'tsconfig.json']
+  },
   {
     name: 'new-svelte',
     uiContext: ['newTab'],
@@ -449,7 +449,7 @@ const CONFIG_TEMPLATES: Template[] = [
 ]
 
 const ALL_TEMPLATES: Template[] = [
-  DEFAULT_TEMPLATE,
+  // DEFAULT_TEMPLATE,
   ...JS_TEMPLATES,
   ...WASM_TEMPLATES,
   ...TS_TEMPLATES,
diff --git a/examples/sidebar-shadcn/sidebar/styles.css b/examples/sidebar-shadcn/sidebar/styles.css
@@ -72,11 +72,11 @@
 
 @layer base {
   #root * {
-    @apply border-border;
+    @apply border;
   }
 
   #root {
-    @apply bg-background text-foreground h-screen;
+    @apply h-screen;
     font-feature-settings:
       'rlig' 1,
       'calt' 1;
diff --git a/programs/develop/build.spec.ts b/programs/develop/build.spec.ts
@@ -57,7 +57,22 @@ function distFileExists(
 }
 
 describe('extension build', () => {
+  afterAll(async () => {
+    // Clean up any mocks
+    jest.clearAllMocks()
+    // Clean up any remaining test artifacts
+    await removeAllTemplateDistFolders()
+    // Clear all timers
+    jest.useRealTimers()
+    // Clear any hanging handles
+    await new Promise(resolve => setTimeout(resolve, 0))
+    // Force garbage collection if available
+    if (global.gc) global.gc()
+  }, 30000)
+
   beforeEach(async () => {
+    // Reset timers before each test
+    jest.useRealTimers()
     await removeAllTemplateDistFolders()
   }, 30000)
 
@@ -75,75 +90,77 @@ describe('extension build', () => {
 
         const postCssConfig = path.join(templatePath, 'postcss.config.js')
 
-        // Dynamically mock the postcss.config.js file if it exists.
-        // Since the file is dynamically imported in the webpack config,
-        // we need to mock it before the webpack config is created.
-        if (fs.existsSync(postCssConfig)) {
-          jest.mock(postCssConfig, () => jest.fn())
-        }
-
-        await extensionBuild(templatePath, {
-          browser: SUPPORTED_BROWSERS[0] as 'chrome'
-        })
-
-        expect(
-          path.join(
-            templatePath,
-            'dist',
-            SUPPORTED_BROWSERS[0],
-            'manifest.json'
-          )
-        ).toBeTruthy()
-
-        const manifestText = fs.readFileSync(
-          path.join(
-            templatePath,
-            'dist',
-            SUPPORTED_BROWSERS[0],
-            'manifest.json'
-          ),
-          'utf-8'
-        )
+        try {
+          // Dynamically mock the postcss.config.js file if it exists
+          if (fs.existsSync(postCssConfig)) {
+            jest.mock(postCssConfig, () => jest.fn())
+          }
 
-        const manifest: Manifest = JSON.parse(manifestText)
-        expect(manifest.name).toBeTruthy
-        expect(manifest.version).toBeTruthy
-        expect(manifest.manifest_version).toBeTruthy
+          await extensionBuild(templatePath, {
+            browser: SUPPORTED_BROWSERS[0] as 'chrome'
+          })
 
-        if (template.name.includes('content')) {
-          // Since extension@2.0.0-beta-6, the content script is injected
-          // into the shadow DOM. Including in production mode.
-          // expect(manifest.content_scripts![0].css![0]).toEqual(
-          //   'content_scripts/content-0.css'
-          // )
+          expect(
+            path.join(
+              templatePath,
+              'dist',
+              SUPPORTED_BROWSERS[0],
+              'manifest.json'
+            )
+          ).toBeTruthy()
 
-          expect(manifest.content_scripts![0].js![0]).toEqual(
-            'content_scripts/content-0.js'
+          const manifestText = fs.readFileSync(
+            path.join(
+              templatePath,
+              'dist',
+              SUPPORTED_BROWSERS[0],
+              'manifest.json'
+            ),
+            'utf-8'
           )
 
-          // Since extension@2.0.0-beta-6, the content script is injected
-          // into the shadow DOM. Including in production mode.
-          // expect(
-          //   distFileExists(
-          //     template.name,
-          //     SUPPORTED_BROWSERS[0],
-          //     'content_scripts/content-0.css'
-          //   )
-          // ).toBeTruthy()
+          const manifest: Manifest = JSON.parse(manifestText)
+          expect(manifest.name).toBeTruthy()
+          expect(manifest.version).toBeTruthy()
+          expect(manifest.manifest_version).toBeTruthy()
 
-          expect(
-            distFileExists(
-              template.name,
-              SUPPORTED_BROWSERS[0],
+          if (template.name.includes('content')) {
+            expect(manifest.content_scripts![0].js![0]).toEqual(
               'content_scripts/content-0.js'
             )
-          ).toBeTruthy()
+            expect(
+              distFileExists(
+                template.name,
+                SUPPORTED_BROWSERS[0],
+                'content_scripts/content-0.css'
+              )
+            ).toBeTruthy()
+
+            expect(
+              distFileExists(
+                template.name,
+                SUPPORTED_BROWSERS[0],
+                'content_scripts/content-0.js'
+              )
+            ).toBeTruthy()
+
+          }
+        } finally {
+          // Clean up mocks after each test
+          if (fs.existsSync(postCssConfig)) {
+            jest.unmock(postCssConfig)
+          }
         }
       },
       80000
     )
   })
 
+  afterEach(async () => {
+    jest.clearAllTimers()
+    await new Promise(resolve => setImmediate(resolve))
+  })
+
   describe('using the --browser flag', () => {
     it.each(ALL_TEMPLATES)(
       `builds the "$name" extension template across all supported browsers`,
@@ -157,16 +174,21 @@ describe('extension build', () => {
         )
 
         // Running browsers in parallel by invoking them sequentially
-        await Promise.all(
-          SUPPORTED_BROWSERS.filter((browser) => browser !== 'chrome').map(
-            async (browser) => {
-              await extensionBuild(templatePath, {browser: browser as any})
-              expect(
-                path.join(templatePath, SUPPORTED_BROWSERS[0], 'manifest.json')
-              ).toBeTruthy()
-            }
+        try {
+          await Promise.all(
+            SUPPORTED_BROWSERS.filter((browser) => browser !== 'chrome').map(
+              async (browser) => {
+                await extensionBuild(templatePath, {browser: browser as any})
+                expect(
+                  path.join(templatePath, SUPPORTED_BROWSERS[0], 'manifest.json')
+                ).toBeTruthy()
+              }
+            )
           )
-        )
+        } finally {
+          // Ensure promises are settled
+          await new Promise(resolve => setImmediate(resolve))
+        }
       },
       80000
     )
diff --git a/programs/develop/package.json b/programs/develop/package.json
@@ -27,7 +27,7 @@
     "compile": "tsup-node ./module.ts --format cjs --dts --target=node18 --minify && bash install_scripts.sh",
     "test": "jest --no-cache --testPathPattern='webpack/.*/__spec__/.*\\.spec\\.*'",
     "test:coverage": "jest --no-cache --testPathPattern='webpack/.*/__spec__/.*\\.spec\\.ts' --coverage",
-    "test:build": "jest ./build.spec.ts --no-cache"
+    "test:build": "jest ./build.spec.ts --no-cache --detectOpenHandles --forceExit"
   },
   "dependencies": {
     "@colors/colors": "^1.6.0",
diff --git a/programs/develop/webpack/plugin-js-frameworks/index.ts b/programs/develop/webpack/plugin-js-frameworks/index.ts
@@ -28,7 +28,7 @@ export class JsFrameworksPlugin {
     const maybeInstallBabel = await maybeUseBabel(compiler, projectPath)
     const maybeInstallReact = await maybeUseReact(projectPath)
     const maybeInstallPreact = await maybeUsePreact(projectPath)
-    const maybeInstallVue = await maybeUseVue(projectPath)
+    const maybeInstallVue = await maybeUseVue(projectPath, mode as any)
     const maybeInstallSvelte = await maybeUseSvelte(projectPath, mode as any)
 
     compiler.options.resolve.alias = {
diff --git a/programs/develop/webpack/plugin-js-frameworks/js-tools/vue.ts b/programs/develop/webpack/plugin-js-frameworks/js-tools/vue.ts
@@ -7,6 +7,7 @@
 
 import path from 'path'
 import fs from 'fs'
+import { VueLoaderPlugin } from 'vue-loader';
 import * as messages from '../../lib/messages'
 import {installOptionalDependencies} from '../../lib/utils'
 import {JsFramework} from '../../webpack-types'
@@ -39,27 +40,18 @@ export function isUsingVue(projectPath: string) {
 }
 
 export async function maybeUseVue(
-  projectPath: string
+  projectPath: string,
+  mode: 'development' | 'production'
 ): Promise<JsFramework | undefined> {
   if (!isUsingVue(projectPath)) return undefined
 
   try {
     require.resolve('vue-loader')
   } catch (e) {
-    const typeScriptDependencies = ['typescript']
-
-    await installOptionalDependencies('TypeScript', typeScriptDependencies)
-
-    const vueDependencies = [
-      'vue-loader',
-      'vue-template-compiler',
-      'vue-style-loader'
-    ]
+    const vueDependencies = ['vue-loader', 'vue-template-compiler']
 
     await installOptionalDependencies('Vue', vueDependencies)
 
-    // The compiler will exit after installing the dependencies
-    // as it can't read the new dependencies without a restart.
     console.log(messages.youAreAllSet('Vue'))
     process.exit(0)
   }
@@ -68,19 +60,17 @@ export async function maybeUseVue(
     {
       test: /\.vue$/,
       loader: require.resolve('vue-loader'),
-      include: projectPath,
-      exclude: [/[\\/]node_modules[\\/]/],
       options: {
-        // Note, for the majority of features to be available,
-        // make sure this option is `true`.
-        // https://rspack.dev/guide/tech/vue#vue-3
-        experimentalInlineMatchResource: true
-      }
+        // Note, for the majority of features to be available, make sure this option is `true`
+        experimentalInlineMatchResource: true,
+      },
+      include: projectPath,
+      exclude: /node_modules/
     }
   ]
 
   const vuePlugins: JsFramework['plugins'] = [
-    new (require('vue-loader').VueLoaderPlugin)()
+    new VueLoaderPlugin() as any
   ]
 
   return {
