test: ensure integration tests can fail, add vue-sfc (#768)

package.json

@@ -25,7 +25,7 @@
     "generate-contributors": "yarn ts-node ./tools/generate-contributors.ts && yarn all-contributors generate",
     "format": "prettier --write \"./**/*.{ts,js,json,md}\"",
     "format-check": "prettier --list-different \"./**/*.{ts,js,json,md}\"",
-    "integration-tests": "docker-compose -f tests/integration/docker-compose.yml up",
+    "integration-tests": "./tests/integration/run-all-tests.sh",
     "kill-integration-test-containers": "docker-compose -f tests/integration/docker-compose.yml down -v --rmi local",
     "lint": "eslint . --ext .js,.ts",
     "lint-fix": "eslint . --ext .js,.ts --fix",

packages/eslint-plugin-tslint/src/rules/config.ts

@@ -69,7 +69,7 @@ export default createRule<Options, MessageIds>({
     },
     type: 'problem',
     messages: {
-      failure: '{{message}} (tslint:{{ruleName}})`',
+      failure: '{{message}} (tslint:{{ruleName}})',
     },
     schema: [
       {

tests/integration/docker-compose.yml

@@ -19,3 +19,20 @@ services:
       - /usr/eslint-plugin-tslint/tests
       # Runtime link to all the specific integration test files, so that most updates don't require a rebuild.
       - ./fixtures/typescript-and-tslint-plugins-together:/usr/linked
+
+  vue-sfc:
+    build: ./fixtures/vue-sfc
+    container_name: "vue-sfc"
+    volumes:
+      # Runtime link to the relevant built @typescript-eslint packages and integration test utils,
+      # but apply an empty volume for the package tests, we don't need those.
+      - ../../package.json/:/usr/root-package.json
+      - ./utils/:/usr/utils
+      - ../../packages/parser/:/usr/parser
+      - /usr/parser/tests
+      - ../../packages/typescript-estree/:/usr/typescript-estree
+      - /usr/typescript-estree/tests
+      - ../../packages/eslint-plugin/:/usr/eslint-plugin
+      - /usr/eslint-plugin/tests
+      # Runtime link to all the specific integration test files, so that most updates don't require a rebuild.
+      - ./fixtures/vue-sfc:/usr/linked

tests/integration/fixtures/typescript-and-tslint-plugins-together/test.js.snap

@@ -24,6 +24,7 @@ Array [
         "endLine": 1,
         "line": 1,
         "message": "Missing semicolon (tslint:semicolon)",
+        "messageId": "failure",
         "nodeType": null,
         "ruleId": "@typescript-eslint/tslint/config",
         "severity": 2,

tests/integration/fixtures/vue-sfc/.eslintrc.yml

@@ -0,0 +1,21 @@
+root: true
+
+parser: 'vue-eslint-parser'
+
+env:
+  es6: true
+  node: true
+
+parserOptions:
+  # Local version of @typescript-eslint/parser
+  parser: '@typescript-eslint/parser'
+  project: /usr/linked/tsconfig.json
+  sourceType: module
+  extraFileExtensions: ['.vue']
+
+plugins:
+# Local version of @typescript-eslint/eslint-plugin
+- '@typescript-eslint'
+
+rules:
+  '@typescript-eslint/no-explicit-any': 'error'

tests/integration/fixtures/vue-sfc/Dockerfile

@@ -0,0 +1,17 @@
+FROM node:carbon
+
+# Copy the test.sh into the container. Every other file will be linked, rather
+# than copied to allow for changes without rebuilds wherever possible
+WORKDIR /usr
+COPY ./test.sh /usr/
+
+# Create file which will be executed by jest
+# to assert that the lint output is what we expect
+RUN echo "const actualLintOutput = require('./lint-output.json');\n" \
+    "\n" \
+    "test('it should produce the expected lint ouput', () => {\n" \
+    "  expect(actualLintOutput).toMatchSnapshot();\n" \
+    "});\n" > test.js
+
+# Run the integration test
+CMD [ "./test.sh" ]

tests/integration/fixtures/vue-sfc/Hello.vue

@@ -0,0 +1,36 @@
+<!-- Hello.vue -->
+<template>
+    <div>
+        <div>
+		    <!-- !!!!! expected error !!!!! -->
+			Hello {{ (name as any) }}{{exclamationMarks}}
+		</div>
+        <button @click="decrement">-</button>
+        <button @click="increment">+</button>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+export default Vue.extend({
+    props: ['name', 'initialEnthusiasm'],
+    data() {
+        return {
+            enthusiasm: this.initialEnthusiasm,
+        }
+    },
+    methods: {
+        increment() { this.enthusiasm++; },
+        decrement() {
+            if (this.enthusiasm > 1) {
+                this.enthusiasm--;
+            }
+        },
+    },
+    computed: {
+        exclamationMarks(): any { // !!!!! expected error !!!!!
+            return Array(this.enthusiasm + 1).join('!');
+        }
+    }
+});
+</script>

tests/integration/fixtures/vue-sfc/test.js.snap

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it should produce the expected lint ouput 1`] = `
+Array [
+  Object {
+    "errorCount": 1,
+    "filePath": "/usr/linked/Hello.vue",
+    "fixableErrorCount": 0,
+    "fixableWarningCount": 0,
+    "messages": Array [
+      Object {
+        "column": 29,
+        "endColumn": 32,
+        "endLine": 31,
+        "line": 31,
+        "message": "Unexpected any. Specify a different type.",
+        "messageId": "unexpectedAny",
+        "nodeType": "TSAnyKeyword",
+        "ruleId": "@typescript-eslint/no-explicit-any",
+        "severity": 2,
+      },
+    ],
+    "source": "<!-- Hello.vue -->
+<template>
+    <div>
+        <div>
+		    <!-- !!!!! expected error !!!!! -->
+			Hello {{ (name as any) }}{{exclamationMarks}}
+		</div>
+        <button @click=\\"decrement\\">-</button>
+        <button @click=\\"increment\\">+</button>
+    </div>
+</template>
+
+<script lang=\\"ts\\">
+import Vue from \\"vue\\";
+export default Vue.extend({
+    props: ['name', 'initialEnthusiasm'],
+    data() {
+        return {
+            enthusiasm: this.initialEnthusiasm,
+        }
+    },
+    methods: {
+        increment() { this.enthusiasm++; },
+        decrement() {
+            if (this.enthusiasm > 1) {
+                this.enthusiasm--;
+            }
+        },
+    },
+    computed: {
+        exclamationMarks(): any { // !!!!! expected error !!!!!
+            return Array(this.enthusiasm + 1).join('!');
+        }
+    }
+});
+</script>
+",
+    "warningCount": 0,
+  },
+]
+`;

tests/integration/fixtures/vue-sfc/test.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+
+# Generate the package.json to use
+node /usr/utils/generate-package-json.js
+
+# Install dependencies
+npm install
+
+# Use the local volumes for our own packages
+npm install $(npm pack /usr/typescript-estree | tail -1)
+npm install $(npm pack /usr/parser | tail -1)
+npm install $(npm pack /usr/eslint-plugin | tail -1)
+
+# Install the latest vue-eslint-parser (this may break us occassionally, but it's probably good to get that feedback early)
+npm install vue-eslint-parser@latest
+
+# Run the linting
+# (the "|| true" helps make sure that we run our tests on failed linting runs as well)
+npx eslint --format json --output-file /usr/lint-output.json --config /usr/linked/.eslintrc.yml /usr/linked/**/*.vue || true
+
+# Run our assertions against the linting output
+npx jest /usr/test.js --snapshotResolver=/usr/utils/jest-snapshot-resolver.js

tests/integration/fixtures/vue-sfc/tsconfig.json

@@ -0,0 +1,5 @@
+{
+    "compilerOptions": {
+        "strict": true
+    }
+}

tests/integration/run-all-tests.sh

@@ -0,0 +1,11 @@
+# Ensure child script failures are propagated
+set -e
+
+# We run the services serially and in a non-detached state just that we can ensure predictable
+# exit codes for all of our integration tests, and we can ensure CI builds pass or fail appropriately
+
+# typescript-and-tslint-plugins-together
+docker-compose -f tests/integration/docker-compose.yml up --build --abort-on-container-exit typescript-and-tslint-plugins-together
+
+# vue-sfc
+docker-compose -f tests/integration/docker-compose.yml up --build --abort-on-container-exit vue-sfc