Ignore template spec at creation step

examples/action-chatgpt/.gitignore

@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts

examples/action/.gitignore

@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts

examples/config-babel/.gitignore

@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts

examples/config-stylelint/.gitignore

@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts

examples/content-css-module/.gitignore

@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts

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

@@ -0,0 +1,39 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/content-css-module'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the class name content_script-box', async ({
+  page
+}) => {
+  await page.goto('https://extension.js.org/')
+  const div = page.locator('body > div.content_script-box')
+  await test.expect(div).toBeVisible()
+})
+
+test('should exist an h1 element with specified content', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  await test.expect(h1).toHaveText('Change the background-color ⬇')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(51, 51, 51)')
+})

examples/content-extension-config/.gitignore

@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts

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

@@ -0,0 +1,72 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/content-extension-config'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the class name extension-root', async ({
+  page
+}) => {
+  await page.goto('https://extension.js.org/')
+  const div = page.locator('#extension-root')
+  await test.expect(div).toBeVisible()
+})
+
+test('should exist an h2 element with specified content', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h2 = page.locator('#extension-root h2')
+  await test
+    .expect(h2)
+    .toHaveText(
+      'This is a content script running React, TypeScript, and Tailwind.css'
+    )
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h2 = page.locator('#extension-root h2')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h2.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(255, 255, 255)')
+})
+
+test('should load all images successfully', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const images = page.locator('#extension-root img')
+  const imageElements = await images.all()
+
+  const results: boolean[] = []
+
+  for (const image of imageElements) {
+    const naturalWidth = await page.evaluate(
+      (img) => {
+        return img ? (img as HTMLImageElement).naturalWidth : 0
+      },
+      await image.elementHandle()
+    )
+
+    const naturalHeight = await page.evaluate(
+      (img) => {
+        return img ? (img as HTMLImageElement).naturalHeight : 0
+      },
+      await image.elementHandle()
+    )
+
+    const loadedSuccessfully = naturalWidth > 0 && naturalHeight > 0
+    results.push(loadedSuccessfully)
+  }
+
+  await test.expect(results.every((result) => result)).toBeTruthy()
+})

examples/content-less/.gitignore

@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts

examples/content-less/template.spec.ts

@@ -0,0 +1,39 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/content-less'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the class name content_script-box', async ({
+  page
+}) => {
+  await page.goto('https://extension.js.org/')
+  const div = page.locator('body > div.content_script-box')
+  await test.expect(div).toBeVisible()
+})
+
+test('should exist an h1 element with specified content', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  await test.expect(h1).toHaveText('Change the background-color ⬇')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(51, 51, 51)')
+})

examples/content-main-world/.gitignore

@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts

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

@@ -0,0 +1,39 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/content-main-world'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the class name content_script-box', async ({
+  page
+}) => {
+  await page.goto('https://extension.js.org/')
+  const div = page.locator('body > div.content_script-box')
+  await test.expect(div).toBeVisible()
+})
+
+test('should exist an h1 element with specified content', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  await test.expect(h1).toHaveText('Main World')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(51, 51, 51)')
+})

examples/content-preact/.gitignore

@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts

examples/content-preact/template.spec.ts

@@ -0,0 +1,72 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/content-preact'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the class name extension-root', async ({
+  page
+}) => {
+  await page.goto('https://extension.js.org/')
+  const div = page.locator('#extension-root')
+  await test.expect(div).toBeVisible()
+})
+
+test('should exist an h2 element with specified content', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h2 = page.locator('#extension-root h2')
+  await test
+    .expect(h2)
+    .toHaveText(
+      'This is a content script running Preact, TypeScript, and Tailwind.css.'
+    )
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h2 = page.locator('#extension-root h2')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h2.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(255, 255, 255)')
+})
+
+test('should load all images successfully', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const images = page.locator('#extension-root img')
+  const imageElements = await images.all()
+
+  const results: boolean[] = []
+
+  for (const image of imageElements) {
+    const naturalWidth = await page.evaluate(
+      (img) => {
+        return img ? (img as HTMLImageElement).naturalWidth : 0
+      },
+      await image.elementHandle()
+    )
+
+    const naturalHeight = await page.evaluate(
+      (img) => {
+        return img ? (img as HTMLImageElement).naturalHeight : 0
+      },
+      await image.elementHandle()
+    )
+
+    const loadedSuccessfully = naturalWidth > 0 && naturalHeight > 0
+    results.push(loadedSuccessfully)
+  }
+
+  await test.expect(results.every((result) => result)).toBeTruthy()
+})

examples/content-react-svgr/.gitignore

@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts

examples/content-react/.gitignore

@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts

examples/content-react/template.spec.ts

@@ -0,0 +1,72 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/content-react'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the class name extension-root', async ({
+  page
+}) => {
+  await page.goto('https://extension.js.org/')
+  const div = page.locator('#extension-root')
+  await test.expect(div).toBeVisible()
+})
+
+test('should exist an h2 element with specified content', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h2 = page.locator('#extension-root h2')
+  await test
+    .expect(h2)
+    .toHaveText(
+      'This is a content script running React, TypeScript, and Tailwind.css'
+    )
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h2 = page.locator('#extension-root h2')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h2.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(255, 255, 255)')
+})
+
+test('should load all images successfully', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const images = page.locator('#extension-root img')
+  const imageElements = await images.all()
+
+  const results: boolean[] = []
+
+  for (const image of imageElements) {
+    const naturalWidth = await page.evaluate(
+      (img) => {
+        return img ? (img as HTMLImageElement).naturalWidth : 0
+      },
+      await image.elementHandle()
+    )
+
+    const naturalHeight = await page.evaluate(
+      (img) => {
+        return img ? (img as HTMLImageElement).naturalHeight : 0
+      },
+      await image.elementHandle()
+    )
+
+    const loadedSuccessfully = naturalWidth > 0 && naturalHeight > 0
+    results.push(loadedSuccessfully)
+  }
+
+  await test.expect(results.every((result) => result)).toBeTruthy()
+})

examples/content-sass-module/.gitignore

@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts