chore: lint system tests in CI (#25673)

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 {}