chore: lint system tests in CI (#25673)

Author: flotwig

packages/app/cypress/e2e/runner/ct-framework-errors.cy.ts

@@ -74,7 +74,7 @@ reactVersions.forEach((reactVersion) => {
       })
 
       verify('error on mount', {
-        line: 6,
+        line: 5,
         column: 33,
         uncaught: true,
         uncaughtMessage: 'mount error',
@@ -86,8 +86,8 @@ reactVersions.forEach((reactVersion) => {
       })
 
       verify('sync error', {
-        line: 11,
-        column: 34,
+        line: 12,
+        column: 19,
         uncaught: true,
         uncaughtMessage: 'sync error',
         message: [
@@ -101,8 +101,8 @@ reactVersions.forEach((reactVersion) => {
       })
 
       verify('async error', {
-        line: 18,
-        column: 38,
+        line: 21,
+        column: 21,
         uncaught: true,
         uncaughtMessage: 'async error',
         message: [
@@ -116,7 +116,7 @@ reactVersions.forEach((reactVersion) => {
       })
 
       verify('command failure', {
-        line: 43,
+        line: 47,
         column: 8,
         command: 'get',
         message: [
@@ -148,7 +148,7 @@ describe('Next.js', {
     })
 
     verify('error on mount', {
-      line: 7,
+      line: 6,
       column: 33,
       uncaught: true,
       uncaughtMessage: 'mount error',
@@ -160,8 +160,8 @@ describe('Next.js', {
     })
 
     verify('sync error', {
-      line: 12,
-      column: 34,
+      line: 13,
+      column: 19,
       uncaught: true,
       uncaughtMessage: 'sync error',
       message: [
@@ -175,8 +175,8 @@ describe('Next.js', {
     })
 
     verify('async error', {
-      line: 19,
-      column: 38,
+      line: 22,
+      column: 21,
       uncaught: true,
       uncaughtMessage: 'async error',
       message: [
@@ -189,7 +189,7 @@ describe('Next.js', {
     })
 
     verify('command failure', {
-      line: 44,
+      line: 48,
       column: 8,
       command: 'get',
       message: [
@@ -338,8 +338,8 @@ describe('Nuxt', {
         'Timed out retrying',
         'element-that-does-not-exist',
       ],
-      codeFrameRegex: /Errors\.cy\.js:26/,
-      stackRegex: /Errors\.cy\.js:26/,
+      codeFrameRegex: /Errors\.cy\.js:25/,
+      stackRegex: /Errors\.cy\.js:25/,
     })
   })
 })
@@ -465,7 +465,7 @@ angularVersions.forEach((angularVersion) => {
       })
 
       verify('command failure', {
-        line: 21,
+        line: 20,
         column: 8,
         command: 'get',
         message: [

system-tests/.eslintignore

@@ -0,0 +1,27 @@
+# purposeful syntax errors
+system-tests/projects/config-with-ts-module-error/cypress.config.ts
+system-tests/projects/config-with-ts-syntax-error/cypress.config.ts
+system-tests/projects/e2e/cypress/e2e/stdout_exit_early_failing.cy.js
+system-tests/projects/e2e/cypress/e2e/typescript_syntax_error.cy.ts
+system-tests/projects/e2e/lib/fail.js
+system-tests/projects/e2e/static/fail.js
+system-tests/projects/ids/cypress/e2e/dom.jsx
+system-tests/projects/no-specs/src/Invalid.jsx
+system-tests/projects/todos/tests/_fixtures/bad_js.js
+system-tests/projects/todos/tests/_fixtures/bar.js
+system-tests/projects/todos/tests/_fixtures/foo.js
+system-tests/projects/todos/tests/_fixtures/nested/fixture.js
+system-tests/projects/todos/tests/_fixtures/no_format.js
+system-tests/projects/todos/tests/_fixtures/trailing_new_line.js
+system-tests/projects/todos/tests/_fixtures/user.js
+system-tests/project-fixtures/react/src/AppCompilationError.cy.jsx
+
+# 3rd party
+system-tests/projects/e2e/static/jquery.js
+
+# snapshots
+system-tests/projects/pristine/expected-cypress-js-component-create-react-app-v5/cypress.config.js
+system-tests/projects/pristine/expected-cypress-js-e2e/cypress.config.js
+system-tests/projects/pristine/expected-cypress-js-e2e-without-fixtures/cypress.config.js
+system-tests/projects/pristine-module/expected-cypress-js-e2e/cypress.config.js
+system-tests/projects/pristine-cjs-project/expected-cypress-js-component-vue.js-3-webpack/cypress.config.js

system-tests/.eslintrc.json

@@ -10,5 +10,8 @@
   },
   "extends": [
     "plugin:@cypress/dev/tests"
-  ]
+  ],
+  "rules": {
+    "no-console": "off"
+  }
 }

system-tests/package.json

@@ -6,6 +6,7 @@
   "main": "lib/fixtures.ts",
   "browser": "lib/fixtureDirs.ts",
   "scripts": {
+    "lint": "eslint . --ext .js,.ts,.jsx,.tsx",
     "type-check": "tsc --project .",
     "clean-deps": "find . -depth -name node_modules -type d -exec rimraf {} \\;",
     "preprojects:yarn:install": "yarn clean-deps",

system-tests/project-fixtures/angular/cypress/support/component.ts

@@ -8,5 +8,4 @@ declare global {
   }
 }
 
-
-Cypress.Commands.add('mount', mount);
+Cypress.Commands.add('mount', mount)

system-tests/project-fixtures/angular/src/app/components/another-child-providers.component.ts

@@ -5,16 +5,16 @@ import { take } from 'rxjs/operators'
 @Component({
   selector: 'app-another-child',
   template: `<button (click)="handleClick()">{{ message }}</button>`,
-  providers: [ChildProvidersService]
+  providers: [ChildProvidersService],
 })
 export class AnotherChildProvidersComponent {
   message = 'default another child message'
 
-  constructor(private readonly service: ChildProvidersService) {}
+  constructor (private readonly service: ChildProvidersService) {}
 
-  handleClick(): void {
+  handleClick (): void {
     this.service.getMessage().pipe(
-      take(1)
+      take(1),
     ).subscribe((message) => this.message = message)
   }
-}
+}

system-tests/project-fixtures/angular/src/app/components/button-output.component.ts

@@ -1,9 +1,9 @@
-import { Component, EventEmitter, Output } from "@angular/core";
+import { Component, EventEmitter, Output } from '@angular/core'
 
 @Component({
   selector: 'app-button-output',
-  template: `<button (click)="clicked.emit(true)">Click Me</button>`
+  template: `<button (click)="clicked.emit(true)">Click Me</button>`,
 })
 export class ButtonOutputComponent {
   @Output() clicked: EventEmitter<boolean> = new EventEmitter()
-}
+}

system-tests/project-fixtures/angular/src/app/components/child-providers.component.ts

@@ -4,16 +4,16 @@ import { take } from 'rxjs/operators'
 
 @Component({
   selector: 'app-child-providers',
-  template: `<button (click)="handleClick()">{{ message }}</button>`
+  template: `<button (click)="handleClick()">{{ message }}</button>`,
 })
 export class ChildProvidersComponent {
   message = 'default message'
 
-  constructor(private readonly service: ChildProvidersService) {}
+  constructor (private readonly service: ChildProvidersService) {}
 
-  handleClick(): void {
+  handleClick (): void {
     this.service.getMessage().pipe(
-      take(1)
-    ).subscribe(message => this.message = message)
+      take(1),
+    ).subscribe((message) => this.message = message)
   }
-}
+}

system-tests/project-fixtures/angular/src/app/components/child-providers.service.ts

@@ -5,11 +5,11 @@ import { map } from 'rxjs/operators'
 
 @Injectable()
 export class ChildProvidersService {
-  constructor(private readonly http: HttpClient) {}
+  constructor (private readonly http: HttpClient) {}
 
-  getMessage(): Observable<string> {
+  getMessage (): Observable<string> {
     return this.http.get<{ message: string }>('https://myfakeapiurl.com/api/message').pipe(
-      map((response) => response.message)
+      map((response) => response.message),
     )
   }
-}
+}

system-tests/project-fixtures/angular/src/app/components/child.component.ts

@@ -1,8 +1,8 @@
-import { Component, Input } from "@angular/core";
+import { Component, Input } from '@angular/core'
 
 @Component({
-  selector: "child-component",
-  template: "<h1>{{msg}}</h1>",
+  selector: 'child-component',
+  template: '<h1>{{msg}}</h1>',
 })
 export class ChildComponent {
   @Input() msg!: string;

system-tests/project-fixtures/angular/src/app/components/counter.component.ts

@@ -1,18 +1,18 @@
-import { Component } from "@angular/core";
-import { CounterService } from "./counter.service";
+import { Component } from '@angular/core'
+import { CounterService } from './counter.service'
 
 @Component({
-  selector: "counter-component",
+  selector: 'counter-component',
   template: `<button (click)="increment()">
     Increment: {{ count$ | async }}
   </button>`,
 })
 export class CounterComponent {
   count$ = this.counterService.count$;
 
-  constructor(private counterService: CounterService) {}
+  constructor (private counterService: CounterService) {}
 
-  increment() {
-    this.counterService.increment();
+  increment () {
+    this.counterService.increment()
   }
 }

system-tests/project-fixtures/angular/src/app/components/counter.service.ts

@@ -1,12 +1,12 @@
-import { Injectable } from "@angular/core";
-import { BehaviorSubject } from "rxjs";
+import { Injectable } from '@angular/core'
+import { BehaviorSubject } from 'rxjs'
 
 @Injectable()
 export class CounterService {
   private count = new BehaviorSubject<number>(0);
   public count$ = this.count.asObservable();
 
-  public increment() {
-    this.count.next(this.count.value + 1);
+  public increment () {
+    this.count.next(this.count.value + 1)
   }
 }

system-tests/project-fixtures/angular/src/app/components/errors.ts

@@ -1,7 +1,7 @@
-import { Component, Input } from "@angular/core";
+import { Component, Input } from '@angular/core'
 
 @Component({
-  selector: "errors-component",
+  selector: 'errors-component',
   template: `<div>
   <button id="sync-error" (click)="syncError()">Sync Error</button>
   <button id="async-error" (click)="asyncError()">Sync Error</button>
@@ -10,11 +10,11 @@ import { Component, Input } from "@angular/core";
 export class ErrorsComponent {
   @Input() throwError!: boolean;
 
-  syncError() {
+  syncError () {
     throw new Error('sync error')
   }
 
-  asyncError() {
+  asyncError () {
     setTimeout(() => {
       throw new Error('async error')
     })

system-tests/project-fixtures/angular/src/app/components/lifecycle.component.ts

@@ -2,22 +2,22 @@ import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/cor
 
 @Component({
   selector: 'app-lifecycle',
-  template: `<p>Hi {{ name }}. ngOnInit fired: {{ ngOnInitFired }} and ngOnChanges fired: {{ ngOnChangesFired }} and conditionalName: {{ conditionalName }}</p>`
+  template: `<p>Hi {{ name }}. ngOnInit fired: {{ ngOnInitFired }} and ngOnChanges fired: {{ ngOnChangesFired }} and conditionalName: {{ conditionalName }}</p>`,
 })
 export class LifecycleComponent implements OnInit, OnChanges {
   @Input() name = ''
   ngOnInitFired = false
   ngOnChangesFired = false
   conditionalName = false
 
-  ngOnInit(): void {
+  ngOnInit (): void {
     this.ngOnInitFired = true
   }
-  
-  ngOnChanges(changes: SimpleChanges): void {
-    this.ngOnChangesFired = true;
+
+  ngOnChanges (changes: SimpleChanges): void {
+    this.ngOnChangesFired = true
     if (changes['name'].currentValue === 'CONDITIONAL NAME') {
       this.conditionalName = true
     }
   }
-}
+}

system-tests/project-fixtures/angular/src/app/components/logo.component.ts

@@ -1,7 +1,7 @@
-import { Component } from "@angular/core";
+import { Component } from '@angular/core'
 
 @Component({
   selector: 'app-logo',
-  template: `<img src="assets/cypress-logo-light.png" />`
+  template: `<img src="assets/cypress-logo-light.png" />`,
 })
-export class LogoComponent {}
+export class LogoComponent {}

system-tests/project-fixtures/angular/src/app/components/parent-child.module.ts

@@ -4,4 +4,4 @@ import { ChildComponent } from './child.component'
 
 @NgModule({
   declarations: [ParentComponent, ChildComponent],
-}) export class ParentChildModule {}
+}) export class ParentChildModule {}

system-tests/project-fixtures/angular/src/app/components/parent-providers.component.ts

@@ -1,8 +1,8 @@
-import { Component } from '@angular/core';
+import { Component } from '@angular/core'
 
 @Component({
   template: `
     <app-child-providers></app-child-providers>
-    <app-another-child></app-another-child>`
+    <app-another-child></app-another-child>`,
 })
-export class ParentProvidersComponent {}
+export class ParentProvidersComponent {}

system-tests/project-fixtures/angular/src/app/components/parent.component.ts

@@ -1,9 +1,9 @@
-import { Component } from "@angular/core";
+import { Component } from '@angular/core'
 
 @Component({
-  selector: "parent-component",
+  selector: 'parent-component',
   template: '<child-component [msg]="msg"></child-component>',
 })
 export class ParentComponent {
-  msg = "Hello World from ParentComponent";
+  msg = 'Hello World from ParentComponent';
 }

system-tests/project-fixtures/angular/src/app/components/projection.component.ts

@@ -2,6 +2,6 @@ import { Component } from '@angular/core'
 
 @Component({
   selector: 'app-projection',
-  template: `<h3><ng-content></ng-content></h3>`
+  template: `<h3><ng-content></ng-content></h3>`,
 })
-export class ProjectionComponent {}
+export class ProjectionComponent {}