feat: render unit test files even in --bare mode

vuejs · haoqunjiang · Dec 23, 2024 · Dec 12, 2024 · Dec 12, 2024 · Dec 12, 2024
commit b56500c05357ab4ecfb019323806b0d0f47457cc
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -51,8 +51,7 @@ jobs:
           verification-script:
             - pnpm --filter '!*typescript*' build
             - pnpm --filter '*typescript*' build
-            # bare templates only contain vitest configurations, but do not include unit test files
-            - pnpm --filter '*vitest*' --filter '!*bare*' test:unit
+            - pnpm --filter '*vitest*' test:unit
             - pnpm --filter '*eslint*' lint --no-fix --max-warnings=0
             - pnpm --filter '*prettier*' format --write --check
             # FIXME: it's failing now
@@ -173,7 +172,6 @@ jobs:
 
       - name: Cypress component testing for projects without Vitest
         if: ${{ contains(matrix.e2e-framework, 'cypress') }}
-        # bare templates only contain test configurations, but do not include component test files
-        run: pnpm --filter '*cypress*' --filter '!*vitest*' --filter '!*bare*' --workspace-concurrency 1 test:unit
+        run: pnpm --filter '*cypress*' --filter '!*vitest*' --workspace-concurrency 1 test:unit
 
       # FIXME: `--with-tests` folders. It's failing now.
diff --git a/index.ts b/index.ts
@@ -568,6 +568,21 @@ async function init() {
 
   if (argv.bare) {
     trimBoilerplate(root, { needsTypeScript, needsRouter })
+    render('bare/base')
+
+    // TODO: refactor the `render` utility to avoid this kind of manual mapping?
+    if (needsTypeScript) {
+      render('bare/typescript')
+    }
+    if (needsVitest) {
+      render('bare/vitest')
+    }
+    if (needsCypressCT) {
+      render('bare/cypress-ct')
+    }
+    if (needsNightwatchCT) {
+      render('bare/nightwatch-ct')
+    }
   }
 
   // Instructions:

diff --git a/template/bare/base/src/App.vue b/template/bare/base/src/App.vue
@@ -0,0 +1,7 @@
+<script setup></script>
+
+<template>
+  <h1>Hello World</h1>
+</template>
+
+<style scoped></style>
diff --git a/template/bare/cypress-ct/src/__tests__/App.cy.js b/template/bare/cypress-ct/src/__tests__/App.cy.js
@@ -0,0 +1,8 @@
+import App from '../App.vue'
+
+describe('App', () => {
+  it('mounts and renders properly', () => {
+    cy.mount(App)
+    cy.get('h1').should('contain', 'Hello World')
+  })
+})
diff --git a/template/bare/nightwatch-ct/src/__tests__/App.spec.js b/template/bare/nightwatch-ct/src/__tests__/App.spec.js
@@ -0,0 +1,14 @@
+describe('App', function () {
+  before((browser) => {
+    browser.init()
+  })
+
+  it('mounts and renders properly', async function () {
+    const appComponent = await browser.mountComponent('/src/App.vue');
+
+    browser.expect.element(appComponent).to.be.present;
+    browser.expect.element('h1').text.to.contain('Hello World');
+  })
+
+  after((browser) => browser.end())
+})
diff --git a/template/bare/typescript/src/App.vue b/template/bare/typescript/src/App.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>Hello World</h1>
+</template>
+
+<style scoped></style>
diff --git a/template/bare/vitest/src/__tests__/App.spec.js b/template/bare/vitest/src/__tests__/App.spec.js
@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+
+import { mount } from '@vue/test-utils'
+import App from '../App.vue'
+
+describe('App', () => {
+  it('mounts renders properly', () => {
+    const wrapper = mount(App)
+    expect(wrapper.text()).toContain('Hello World')
+  })
+})
diff --git a/utils/trimBoilerplate.ts b/utils/trimBoilerplate.ts
@@ -1,19 +1,6 @@
 import * as fs from 'node:fs'
 import * as path from 'path'
 
-function getBareBoneAppContent(isTs: boolean) {
-  return `<script setup${isTs ? ' lang="ts"' : ''}>
-</script>
-
-<template>
-  <h1>Hello World</h1>
-</template>
-
-<style scoped>
-</style>
-`
-}
-
 function replaceContent(filepath: string, replacer: (content: string) => string) {
   const content = fs.readFileSync(filepath, 'utf8')
   fs.writeFileSync(filepath, replacer(content))
@@ -24,17 +11,15 @@ export default function trimBoilerplate(rootDir: string, features: Record<string
   const srcDir = path.resolve(rootDir, 'src')
 
   for (const filename of fs.readdirSync(srcDir)) {
-    // Keep `App.vue`, `main.js/ts`, `router`, and `stores` directories
-    if (['App.vue', 'main.js', 'main.ts', 'router', 'stores'].includes(filename)) {
+    // Keep `main.js/ts`, `router`, and `stores` directories
+    // `App.vue` would be re-rendered in the next step
+    if (['main.js', 'main.ts', 'router', 'stores'].includes(filename)) {
       continue
     }
     const fullpath = path.resolve(srcDir, filename)
     fs.rmSync(fullpath, { recursive: true })
   }
 
-  // Replace the content in `src/App.vue` with a barebone template
-  replaceContent(path.resolve(rootDir, 'src/App.vue'), () => getBareBoneAppContent(isTs))
-
   // Remove CSS import in the entry file
   const entryPath = path.resolve(rootDir, isTs ? 'src/main.ts' : 'src/main.js')
   replaceContent(entryPath, (content) => content.replace("import './assets/main.css'\n\n", ''))