Merge pull request #628 from DFE-Digital/level-2-nav/add-linting

Add linting to cypress tests

docs/supercharge-your-dev-environment.md

@@ -3,9 +3,12 @@
 Use this documentation to help supercharge your dev environment. We recommend using Rider or Visual Studio with ReSharper.
 
 - [Supercharge your dev environment](#supercharge-your-dev-environment)
-- [Set up continuous testing](#set-up-continuous-testing)
-- [Analyse test coverage](#analyse-test-coverage)
-- [Configure linting and code cleanup](#configure-linting-and-code-cleanup)
+  - [Set up continuous testing](#set-up-continuous-testing)
+  - [Analyse test coverage](#analyse-test-coverage)
+  - [Configure linting and code cleanup](#configure-linting-and-code-cleanup)
+    - [Linting markdown](#linting-markdown)
+    - [Linting cypress tests](#linting-cypress-tests)
+    - [Formatting cypress tests](#formatting-cypress-tests)
 
 ## Set up continuous testing
 
@@ -65,21 +68,31 @@ npm run lint:fix ## to scan and fix issues
 ### Linting markdown
 
 We use `markdownlint` to check for lint issues on Markdown files in the pipeline.
-You can install the [VS code extension](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint) to check your files locally.
+You can install the [markdownlint VS code extension](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint) to check your files locally.
 
 ### Linting cypress tests
 
-Tests are written in TypeScript and we are using `ts-standard` for linting.
-You can configure VS code to use standard as your default formatter:
+Tests are written in TypeScript and we are using `typescript-eslint` and `eslint-plugin-cypress` for linting.
+You can install [ESLint VS code extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) to highlight errors caught by the linter as you code.
 
-1. Install VS code extension [StandardJS - JavaScript Standard Style](https://marketplace.visualstudio.com/items?itemName=standard.vscode-standard)
+### Formatting cypress tests
 
-2. Edit your _Settings.json_ file (workspace or user):
+We recommend using VS code to format your code as you work.
+
+In your [settings](https://code.visualstudio.com/docs/getstarted/settings) change these values:
+
+- `Editor: Format On Save` => :white_check_mark:
+- `Editor: Format On Type` => :white_check_mark:
+- `Files: Insert Final Newline` => :white_check_mark:
+- `TypeScript › Format: Semicolons` => `insert`
+
+Alternatively, you add the following to your [settings.json file](https://code.visualstudio.com/docs/getstarted/settings#_settings-json-file)
 
 ```json
 {
-  "[typescript]": {
-    "editor.defaultFormatter": "standard.vscode-standard"
-  }
+    "editor.formatOnSave": true,
+    "editor.formatOnType": true,
+    "files.insertFinalNewline": true,
+    "typescript.format.semicolons": "insert"
 }
 ```

tests/DFE.FindInformationAcademiesTrusts.CypressTests/cypress.config.ts

@@ -1,6 +1,6 @@
-const { defineConfig } = require("cypress");
-const fs = require('fs');
-const path = require('path');
+import { defineConfig } from "cypress";
+import fs from 'fs';
+import path from 'path';
 
 module.exports = defineConfig({
   userAgent: 'FindInformationAcademiesTrusts/1.0 Cypress',
@@ -16,11 +16,13 @@ module.exports = defineConfig({
         json: true,
       },
     },
+
     setupNodeEvents(on, config) {
-      config.baseUrl = config.env.URL;
+      config.baseUrl = config.env.URL as string;
+
       // Custom task to find the most recent .xlsx file in the downloads folder
       on('task', {
-        findLatestFile(folderPath) {
+        findLatestFile(folderPath: string) {
           const files = fs.readdirSync(folderPath);
           const xlsxFiles = files.filter(file => file.endsWith('.xlsx'));
 
@@ -38,7 +40,7 @@ module.exports = defineConfig({
         },
 
         // Custom task to delete a file
-        deleteFile(filePath) {
+        deleteFile(filePath: string) {
           if (fs.existsSync(filePath)) {
             fs.unlinkSync(filePath);
             return { success: true };
@@ -47,7 +49,7 @@ module.exports = defineConfig({
         },
 
         // Custom task to check if files exist in the downloads folder
-        checkForFiles(folderPath) {
+        checkForFiles(folderPath: string) {
           if (fs.existsSync(folderPath)) {
             const files = fs.readdirSync(folderPath);
             return files.length > 0 ? files : null;
@@ -56,7 +58,7 @@ module.exports = defineConfig({
         },
 
         // Custom task to delete all files in the downloads folder
-        clearDownloads(folderPath) {
+        clearDownloads(folderPath: string) {
           if (fs.existsSync(folderPath)) {
             const files = fs.readdirSync(folderPath);
             files.forEach((file) => {

tests/DFE.FindInformationAcademiesTrusts.CypressTests/cypress/support/e2e.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-namespace */ //required to enable custom Cypress commands typescript support
 import { AuthenticationInterceptorParams } from '../auth/authenticationInterceptor';
 import './commands'
 

tests/DFE.FindInformationAcademiesTrusts.CypressTests/eslint.config.mjs

@@ -0,0 +1,31 @@
+import eslint from '@eslint/js';
+import pluginCypress from 'eslint-plugin-cypress/flat'
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  tseslint.configs.recommendedTypeChecked,
+  tseslint.configs.stylisticTypeChecked,
+  {
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+  pluginCypress.configs.recommended,
+  {
+    rules: {
+      'cypress/no-async-before': 'error',
+      'cypress/assertion-before-screenshot': 'error',
+      'cypress/no-force': 'warn',
+      'cypress/no-pause': 'error',
+      'cypress/no-debug': 'error'
+    }
+  },
+  {
+    files: ['eslint.config.mjs'],
+    extends: [tseslint.configs.disableTypeChecked],
+  },
+);