🧪 test: add e2e tests with Cypress

Author: ShayanTheNerd

.gitignore

@@ -12,9 +12,15 @@ pnpm-debug.log*
 
 # environment variables
 .env.production
+src/env.d.ts
 
 # macOS-specific files
 .DS_Store
 
 # localhost mobile preview
 ngrok.exe
+
+# Cypress files
+tests/cypress/videos
+tests/cypress/downloads
+tests/cypress/screenshots

astro.config.ts

@@ -10,7 +10,6 @@ export default defineConfig({
 		assets: 'assets',
 	},
 	server: {
-		open: true,
 		port: 3000,
 		host: '127.0.0.1',
 	},

cypress.config.js

@@ -0,0 +1,29 @@
+import { resolve } from 'node:path';
+import { defineConfig } from 'cypress';
+import vitePreprocessor from 'cypress-vite';
+import { URL, fileURLToPath } from 'node:url';
+
+export default defineConfig({
+	viewportWidth: 1024,
+	scrollBehavior: 'center',
+	e2e: {
+		supportFile: false,
+		experimentalStudio: true,
+		baseUrl: 'http://127.0.0.1:3000/image-editor',
+		specPattern: 'tests/cypress/e2e/**/*.cy.ts',
+		videosFolder: 'tests/cypress/videos',
+		fixturesFolder: 'tests/cypress/fixtures',
+		downloadsFolder: 'tests/cypress/downloads',
+		screenshotsFolder: 'tests/cypress/screenshots',
+		setupNodeEvents(on) {
+			on('file:preprocessor', vitePreprocessor({
+				resolve: {
+					alias: {
+						'@ts': resolve(fileURLToPath(new URL('./src/assets/ts', import.meta.url))),
+						'@types': resolve(fileURLToPath(new URL('./src/types.d.ts', import.meta.url))),
+					},
+				},
+			}));
+		},
+	},
+});

eslint.config.js

@@ -2,6 +2,7 @@ import eslintJS from '@eslint/js';
 import eslintAntfuConfig from '@antfu/eslint-config';
 import eslintPluginVitest from 'eslint-plugin-vitest';
 import eslintPluginStylistic from '@stylistic/eslint-plugin';
+import eslintPluginCypress from 'eslint-plugin-cypress/flat';
 
 /* eslint-disable no-magic-numbers -- Improve SNR */
 const jsRules = {
@@ -183,6 +184,13 @@ const vitestRules = {
 	'vitest/max-nested-describe': ['error', { max: 1 }],
 };
 
+const cypressRules = {
+	'cypress/no-pause': 'error',
+	'cypress/no-force': 'error',
+	'cypress/no-async-tests': 'off',
+	'cypress/assertion-before-screenshot': 'error',
+};
+
 const stylisticRules = {
 	...eslintPluginStylistic.configs['recommended-flat'].rules,
 
@@ -289,12 +297,11 @@ const generalRules = {
 
 export default eslintAntfuConfig(
 	{
-		files: ['**/*.js', '**/*.ts'],
+		files: ['**/*.{js,ts}'],
 		vue: false,
 		typescript: {
 			tsconfigPath: 'tsconfig.json',
 		},
-		// @ts-ignore: TypeScript can't properly infer the types.
 		rules: { ...jsRules, ...tsRules, ...stylisticRules },
 	},
 	{
@@ -317,6 +324,11 @@ export default eslintAntfuConfig(
 			'ts/no-unsafe-member-access': 'off',
 		},
 	},
+	{
+		files: ['tests/cypress/**/*.ts'],
+		...eslintPluginCypress.configs.recommended,
+		rules: { ...cypressRules, 'no-magic-numbers': 'off' },
+	},
 	{ rules: generalRules },
 	{ ignores: ['**/*.json', 'src/env.d.ts'] },
 );

package.json

@@ -20,13 +20,14 @@
 	},
 	"scripts": {
 		"dev": "astro dev",
-		"format": "npx prettier --write '**/*.{json,css,astro}' --config=prettier.config.js --cache",
-		"lint": "eslint --fix --ignore-pattern='.vscode/*.json' --config=eslint.config.js --cache-location='/node_modules/.eslintcache/",
-		"test:unit": "vitest --config=vitest.config.ts",
 		"build": "astro build",
-		"removeEnvTypesFile": "node scripts/removeEnvTypesFile.js",
 		"preview": "astro preview",
-		"all": "pnpm format && pnpm lint && pnpm test:unit --run && pnpm build && pnpm removeEnvTypesFile"
+		"format": "prettier --write '**/*.{json,css,astro}' --config=prettier.config.js --cache",
+		"lint": "eslint --fix --ignore-pattern='.vscode/*.json' --config=eslint.config.js --cache-location='/node_modules/.eslintcache/",
+		"test:unit": "vitest --config=vitest.config.ts",
+		"test:e2e": "concurrently \"pnpm dev\" \"cypress open\" --kill-others",
+		"test:e2e:ci": "concurrently \"pnpm preview\" \"cypress run --headed\" --kill-others",
+		"all": "pnpm format && pnpm lint && pnpm test:unit --run && pnpm build && pnpm test:e2e:ci"
 	},
 	"dependencies": {
 		"@formkit/auto-animate": "^0.8.1",
@@ -39,7 +40,11 @@
 		"@types/eslint__js": "^8.42.3",
 		"astro": "^4.4.15",
 		"browserslist": "^4.23.0",
+		"concurrently": "^8.2.2",
+		"cypress": "^13.13.2",
+		"cypress-vite": "^1.5.0",
 		"eslint": "^9.8.0",
+		"eslint-plugin-cypress": "^3.4.0",
 		"eslint-plugin-vitest": "^0.5.4",
 		"lightningcss": "^1.24.0",
 		"prettier": "^3.2.5",