test: add unit test for eslint configs

The commit adds a unit test for the eslint configurations and properly formats our tests.

Author: cexbrayat

.prettierignore

@@ -4,6 +4,8 @@ pnpm-lock.yaml
 # https://github.com/prettier/prettier/issues/7884
 **/*.spec.js
 **/*.spec.ts
+# but let's format our unit tests
+!__test__/**/*.spec.ts
 **/dist
 # https://github.com/prettier/prettier/issues/5246
 **/*.html

__test__/locale.spec.ts

@@ -6,23 +6,23 @@ import en from '../locales/en-US.json'
 function getKeys(obj: any, path = '', result: string[] = []) {
   for (let key in obj) {
     if (typeof obj[key] === 'object') {
-      getKeys(obj[key], path ? `${path}.${key}` : key, result);
+      getKeys(obj[key], path ? `${path}.${key}` : key, result)
     } else {
-      result.push(path ? `${path}.${key}` : key);
+      result.push(path ? `${path}.${key}` : key)
     }
   }
-  return result;
+  return result
 }
 
 const localesOtherThanEnglish = readdirSync(resolve(__dirname, '../locales')).filter((file) => {
   return file.endsWith('.json') && !file.startsWith('en-US')
 })
-const defaultKeys = getKeys(en);
+const defaultKeys = getKeys(en)
 
-describe("locale files should include all keys", () => {
+describe('locale files should include all keys', () => {
   localesOtherThanEnglish.forEach((locale) => {
     it(`for ${locale}`, () => {
       expect(getKeys(require(`../locales/${locale}`))).toEqual(defaultKeys)
     })
   })
-})
+})

__test__/renderEslint.spec.ts

@@ -0,0 +1,56 @@
+import { it, describe, expect } from 'vitest'
+import { getAdditionalConfigAndDependencies } from '../utils/renderEslint'
+
+describe('renderEslint', () => {
+  it('should get additional dependencies and config with no test flags', () => {
+    const { additionalConfig, additionalDependencies } = getAdditionalConfigAndDependencies({
+      needsCypress: false,
+      needsCypressCT: false,
+      needsPlaywright: false
+    })
+    expect(additionalConfig).toStrictEqual({})
+    expect(additionalDependencies).toStrictEqual({})
+  })
+
+  it('should get additional dependencies and config with for cypress', () => {
+    const { additionalConfig, additionalDependencies } = getAdditionalConfigAndDependencies({
+      needsCypress: true,
+      needsCypressCT: false,
+      needsPlaywright: false
+    })
+    expect(additionalConfig.overrides[0].files).toStrictEqual([
+      'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}',
+      'cypress/support/**/*.{js,ts,jsx,tsx}'
+    ])
+    expect(additionalConfig.overrides[0].extends).toStrictEqual(['plugin:cypress/recommended'])
+    expect(additionalDependencies['eslint-plugin-cypress']).not.toBeUndefined()
+  })
+
+  it('should get additional dependencies and config with for cypress with component testing', () => {
+    const { additionalConfig, additionalDependencies } = getAdditionalConfigAndDependencies({
+      needsCypress: true,
+      needsCypressCT: true,
+      needsPlaywright: false
+    })
+    expect(additionalConfig.overrides[0].files).toStrictEqual([
+      '**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}',
+      'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}',
+      'cypress/support/**/*.{js,ts,jsx,tsx}'
+    ])
+    expect(additionalConfig.overrides[0].extends).toStrictEqual(['plugin:cypress/recommended'])
+    expect(additionalDependencies['eslint-plugin-cypress']).not.toBeUndefined()
+  })
+
+  it('should get additional dependencies and config with for playwright', () => {
+    const { additionalConfig, additionalDependencies } = getAdditionalConfigAndDependencies({
+      needsCypress: false,
+      needsCypressCT: false,
+      needsPlaywright: true
+    })
+    expect(additionalConfig.overrides[0].files).toStrictEqual([
+      'e2e/**/*.{test,spec}.{js,ts,jsx,tsx}'
+    ])
+    expect(additionalConfig.overrides[0].extends).toStrictEqual(['plugin:playwright/recommended'])
+    expect(additionalDependencies['eslint-plugin-playwright']).not.toBeUndefined()
+  })
+})

scripts/snapshot.mjs

@@ -54,7 +54,12 @@ function fullCombination(arr) {
 }
 
 let flagCombinations = fullCombination(featureFlags)
-flagCombinations.push(['default'], ['devtools', 'router', 'pinia'], ['eslint'], ['eslint-with-prettier'])
+flagCombinations.push(
+  ['default'],
+  ['devtools', 'router', 'pinia'],
+  ['eslint'],
+  ['eslint-with-prettier']
+)
 
 // `--with-tests` are equivalent of `--vitest --cypress`
 // Previously it means `--cypress` without `--vitest`.

utils/renderEslint.ts

@@ -15,36 +15,11 @@ export default function renderEslint(
   rootDir,
   { needsTypeScript, needsCypress, needsCypressCT, needsPrettier, needsPlaywright }
 ) {
-  const additionalConfig: Linter.Config = {}
-  const additionalDependencies = {}
-
-  if (needsCypress) {
-    additionalConfig.overrides = [
-      {
-        files: needsCypressCT
-          ? [
-              '**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}',
-              'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}',
-              'cypress/support/**/*.{js,ts,jsx,tsx}'
-            ]
-          : ['cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}', 'cypress/support/**/*.{js,ts,jsx,tsx}'],
-        extends: ['plugin:cypress/recommended']
-      }
-    ]
-
-    additionalDependencies['eslint-plugin-cypress'] = eslintDeps['eslint-plugin-cypress']
-  }
-
-  if (needsPlaywright) {
-    additionalConfig.overrides = [
-      {
-        files: ['e2e/**/*.{test,spec}.{js,ts,jsx,tsx}'],
-        extends: ['plugin:playwright/recommended']
-      }
-    ]
-
-    additionalDependencies['eslint-plugin-playwright'] = eslintDeps['eslint-plugin-playwright']
-  }
+  const { additionalConfig, additionalDependencies } = getAdditionalConfigAndDependencies({
+    needsCypress,
+    needsCypressCT,
+    needsPlaywright
+  })
 
   const { pkg, files } = createESLintConfig({
     vueVersion: '3.x',
@@ -86,3 +61,42 @@ export default function renderEslint(
     fs.writeFileSync(fullPath, content as string, 'utf-8')
   }
 }
+
+// visible for testing
+export function getAdditionalConfigAndDependencies({
+  needsCypress,
+  needsCypressCT,
+  needsPlaywright
+}) {
+  const additionalConfig: Linter.Config = {}
+  const additionalDependencies = {}
+
+  if (needsCypress) {
+    additionalConfig.overrides = [
+      {
+        files: needsCypressCT
+          ? [
+              '**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}',
+              'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}',
+              'cypress/support/**/*.{js,ts,jsx,tsx}'
+            ]
+          : ['cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}', 'cypress/support/**/*.{js,ts,jsx,tsx}'],
+        extends: ['plugin:cypress/recommended']
+      }
+    ]
+
+    additionalDependencies['eslint-plugin-cypress'] = eslintDeps['eslint-plugin-cypress']
+  }
+
+  if (needsPlaywright) {
+    additionalConfig.overrides = [
+      {
+        files: ['e2e/**/*.{test,spec}.{js,ts,jsx,tsx}'],
+        extends: ['plugin:playwright/recommended']
+      }
+    ]
+
+    additionalDependencies['eslint-plugin-playwright'] = eslintDeps['eslint-plugin-playwright']
+  }
+  return { additionalConfig, additionalDependencies }
+}