test: add tests for rule violations in .vue files

Author: haoqunjiang

test/index.spec.ts

@@ -1,3 +1,4 @@
+import fs from 'node:fs'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 
@@ -13,7 +14,23 @@ function runLintAgainst(projectName: string) {
   const projectDir = path.join(__dirname, '../examples', projectName)
   // Use `pnpm` to avoid locating each `eslint` bin ourselves.
   // Use `--silent` to only print the output of the command, stripping the pnpm log.
-  return execa({ preferLocal: true, cwd: projectDir })`pnpm --silent lint`
+  return execa({ preferLocal: true, cwd: projectDir, reject: false })`pnpm --silent lint`
+}
+
+function setupFileMutations(filename: string) {
+  // Read the file
+  const fileContents = fs.readFileSync(filename, 'utf8')
+
+  // Implementation for modifying and restoring the file
+  function modify(getNewContents: (oldContents: string) => string) {
+    fs.writeFileSync(filename, getNewContents(fileContents))
+  }
+
+  function restore() {
+    fs.writeFileSync(filename, fileContents)
+  }
+
+  return { modify, restore }
 }
 
 describe('should pass lint without error in new projects', () => {
@@ -37,29 +54,41 @@ describe('should pass lint without error in new projects', () => {
   }
 })
 
-describe.todo(
-  'should report error on recommended rule violations in .vue files',
-  () => {
-    test.todo('minimal', () => {})
-    test.todo('allow-js', () => {})
-    // TODO:
-    // ts-eslint disabled a few rules in eslint-recommended because tsc would catch them anyway.
-    // Shall we check that if `vue-tsc` would catch these issues in plain `script` blocks?
-
-    test.todo('with-tsx', () => {})
-    test.todo('with-tsx-in-vue', () => {})
-    test.todo('with-jsx', () => {})
-    test.todo('with-jsx-in-vue', () => {})
-
-    test.todo('with-prettier', () => {})
+describe('should report error on recommended rule violations in .vue files', () => {
+  for (const projectName of [
+    'minimal',
+    'allow-js',
+    'with-tsx',
+    'with-tsx-in-vue',
+    'with-jsx',
+    'with-jsx-in-vue',
+    'with-prettier',
+    'with-cypress',
+    'with-nightwatch',
+    'with-playwright',
+    'with-vitest',
+  ]) {
+    test(projectName, async () => {
+      const appVuePath = path.join(
+        __dirname,
+        '../examples',
+        projectName,
+        'src/App.vue',
+      )
+      const { modify, restore } = setupFileMutations(appVuePath)
+      
+      modify(oldContents =>
+        oldContents.replace('</script>', '// @ts-ignore\n</script>'),
+      )
 
-    test.todo('with-cypress', () => {})
-    test.todo('with-nightwatch', () => {})
-    test.todo('with-playwright', () => {})
+      const { failed, stdout } = await runLintAgainst(projectName)
+      restore()
 
-    test.todo('with-vitest', () => {})
-  },
-)
+      expect(failed).toBe(true)
+      expect(stdout).toContain(' @typescript-eslint/ban-ts-comment')
+    })
+  }
+})
 
 describe.todo(
   'should report error on recommended rule violations in other script files',