Move e2e tests to their own templates

e2e/content-css-module.spec.ts → examples/content-css-module/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/content-css-module'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/content-extension-config.spec.ts → examples/content-extension-config/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/content-extension-config'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/content-less.spec.ts → examples/content-less/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/content-less'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/content-main-world.spec.ts → examples/content-main-world/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/content-main-world'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/content-preact.spec.ts → examples/content-preact/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/content-preact'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/content-react.spec.ts → examples/content-react/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/content-react'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/content-sass-module.spec.ts → examples/content-sass-module/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/content-sass-module'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/content-sass.spec.ts → examples/content-sass/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/content-sass'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/content-shadow-dom.spec.ts → examples/content-shadow-dom/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/content-shadow-dom'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/content-tailwind.spec.ts → examples/content-tailwind/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/content-tailwind'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/content-typescript.spec.ts → examples/content-typescript/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/content-typescript'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/content-vue.spec.ts → examples/content-vue/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/content-vue'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/content.spec.ts → examples/content/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/content'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/new-crypto.spec.ts → examples/new-crypto/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/new-crypto'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/new-less.spec.ts → examples/new-less/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/new-less'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/new-preact.spec.ts → examples/new-preact/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/new-preact'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/new-react-router.spec.ts → examples/new-react-router/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/new-react-router'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/new-react.spec.ts → examples/new-react/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/new-react'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/new-sass.spec.ts → examples/new-sass/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/new-sass'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/new-tailwind.spec.ts → examples/new-tailwind/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/new-tailwind'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/new-typescript.spec.ts → examples/new-typescript/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/new-typescript'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/new-vue.spec.ts → examples/new-vue/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/new-vue'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

e2e/new.spec.ts → examples/new/template.spec.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import {execSync} from 'child_process'
-import {extensionFixtures} from './extension-fixtures'
+import {extensionFixtures} from '../extension-fixtures'
 
 const exampleDir = 'examples/new'
-const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const pathToExtension = path.join(__dirname, `dist/chrome`)
 const test = extensionFixtures(pathToExtension, true)
 
 test.beforeAll(async () => {

playwright.config.ts

@@ -11,7 +11,7 @@ import {defineConfig, devices} from '@playwright/test'
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: './e2e',
+  testDir: './examples',
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */

programs/create/lib/messages.ts

@@ -289,3 +289,10 @@ export function writingDirectoryError(error: any) {
     red(error)
   )
 }
+
+export function cantSetupBuiltInTests(projectName: string, error: any) {
+  return (
+    `${red(`✖︎✖︎✖︎`)} Can't setup built-in tests for ` +
+    `${cyan(projectName)}:\n${red(error)}`
+  )
+}

programs/create/module.ts

@@ -11,6 +11,7 @@ import {writeManifestJson} from './steps/write-manifest-json'
 import {generateExtensionTypes} from './steps/generate-extension-types'
 import {writeGitignore} from './steps/write-gitignore'
 import {initializeGitRepository} from './steps/initialize-git-repository'
+import {setupBuiltInTests} from './steps/setup-built-in-tests'
 
 export interface CreateOptions {
   template: string
@@ -55,6 +56,7 @@ export async function extensionCreate(
     await writeManifestJson(projectPath, projectName)
     await initializeGitRepository(projectPath, projectName)
     await writeGitignore(projectPath)
+    await setupBuiltInTests(projectPath, projectName)
 
     if (utils.isTypeScriptTemplate(template)) {
       await generateExtensionTypes(projectPath, projectName)

programs/create/steps/import-external-template.ts

@@ -9,6 +9,7 @@ import path from 'path'
 import fs from 'fs/promises'
 import goGitIt from 'go-git-it'
 import * as messages from '../lib/messages'
+import * as utils from '../lib/utils'
 
 export async function importExternalTemplate(
   projectPath: string,
@@ -32,11 +33,16 @@ export async function importExternalTemplate(
 
       templatePath = path.join(projectPath, templateName)
 
-      await fs.cp(
-        path.join(__dirname, '..', '..', '..', 'examples', templateName),
-        templatePath,
-        {recursive: true}
+      const localTemplatePath = path.join(
+        __dirname,
+        '..',
+        '..',
+        '..',
+        'examples',
+        templateName
       )
+
+      await utils.copyDirectory(localTemplatePath, templatePath)
     } else {
       await goGitIt(
         templateUrl,

programs/create/steps/setup-built-in-tests.ts

@@ -0,0 +1,28 @@
+//  ██████╗██████╗ ███████╗ █████╗ ████████╗███████╗
+// ██╔════╝██╔══██╗██╔════╝██╔══██╗╚══██╔══╝██╔════╝
+// ██║     ██████╔╝█████╗  ███████║   ██║   █████╗
+// ██║     ██╔══██╗██╔══╝  ██╔══██║   ██║   ██╔══╝
+// ╚██████╗██║  ██║███████╗██║  ██║   ██║   ███████╗
+//  ╚═════╝╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝   ╚═╝   ╚══════╝
+
+import path from 'path'
+import fs from 'fs'
+import * as messages from '../lib/messages'
+
+export async function setupBuiltInTests(
+  projectPath: string,
+  projectName: string
+) {
+  try {
+    // Remove the existing test spec templates.spec.ts
+    const testSpecPath = path.join(projectPath, 'tests', 'templates.spec.ts')
+
+    if (fs.existsSync(testSpecPath)) {
+      fs.unlinkSync(testSpecPath)
+    }
+  } catch (error: any) {
+    console.error(messages.cantSetupBuiltInTests(projectName, error))
+
+    process.exit(1)
+  }
+}