feat: basic e2e

apps/ligo-virgo-e2e/.eslintrc.json

@@ -0,0 +1,17 @@
+{
+    "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"],
+    "ignorePatterns": ["!**/*"],
+    "overrides": [
+        {
+            "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+            "rules": {}
+        },
+        {
+            "files": ["src/plugins/index.js"],
+            "rules": {
+                "@typescript-eslint/no-var-requires": "off",
+                "no-undef": "off"
+            }
+        }
+    ]
+}

apps/ligo-virgo-e2e/cypress.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'cypress';
+
+module.exports = defineConfig({
+    e2e: {
+        supportFile: './src/support/index.ts',
+        specPattern: './src/integration',
+        setupNodeEvents(on, config) {
+            // implement node event listeners here
+        },
+    },
+    fileServerFolder: '.',
+    fixturesFolder: './src/fixtures',
+    video: false,
+    // videosFolder: '../../dist/cypress/apps/ligo-virgo-e2e/videos',
+    screenshotsFolder: '../../dist/cypress/apps/ligo-virgo-e2e/screenshots',
+    chromeWebSecurity: false,
+});

apps/ligo-virgo-e2e/project.json

@@ -0,0 +1,28 @@
+{
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "apps/ligo-virgo-e2e/src",
+    "projectType": "application",
+    "targets": {
+        "e2e": {
+            "executor": "@nrwl/cypress:cypress",
+            "options": {
+                "cypressConfig": "apps/ligo-virgo-e2e/cypress.config.ts",
+                "devServerTarget": "ligo-virgo:serve"
+            },
+            "configurations": {
+                "production": {
+                    "devServerTarget": "ligo-virgo:serve:production"
+                }
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": ["apps/ligo-virgo-e2e/**/*.{js,ts}"]
+            }
+        }
+    },
+    "tags": [],
+    "implicitDependencies": ["ligo-virgo"]
+}

apps/ligo-virgo-e2e/src/fixtures/example.json

@@ -0,0 +1,4 @@
+{
+    "name": "Using fixtures to represent data",
+    "email": "hello@cypress.io"
+}

apps/ligo-virgo-e2e/src/integration/app.spec.ts

@@ -0,0 +1,14 @@
+import { getTitle, getBoard } from '../support/app.po';
+
+describe('ligo-virgo', () => {
+    beforeEach(() => cy.visit('/'));
+
+    it('basic load check', () => {
+        getTitle().contains('Get Started with AFFiNE');
+
+        cy.get('.block_container').contains('The Essentials');
+
+        getBoard().click();
+        cy.get('.tl-inner-div').contains('Graduating');
+    });
+});

apps/ligo-virgo-e2e/src/support/app.po.ts

@@ -0,0 +1,3 @@
+export const getTitle = () => cy.get('span[title]');
+export const getDoc = () => cy.contains('Doc');
+export const getBoard = () => cy.contains('Board');

apps/ligo-virgo-e2e/src/support/commands.ts

@@ -0,0 +1,33 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface Chainable<Subject> {
+        login(email: string, password: string): void;
+    }
+}
+//
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+    console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

apps/ligo-virgo-e2e/src/support/index.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';

apps/ligo-virgo-e2e/tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "sourceMap": false,
+        "outDir": "../../dist/out-tsc",
+        "allowJs": true,
+        "types": ["cypress", "node"]
+    },
+    "include": ["src/**/*.ts", "src/**/*.js"]
+}

apps/ligo-virgo/project.json

@@ -48,7 +48,8 @@
             "configurations": {
                 "production": {
                     "buildTarget": "ligo-virgo:build:production",
-                    "hmr": false
+                    "hmr": false,
+                    "open": false
                 }
             }
         },

apps/ligo-virgo/webpack.config.js

@@ -16,6 +16,7 @@ module.exports = function (webpackConfig) {
     const config = getNxWebpackConfig(webpackConfig);
 
     const isProd = config.mode === 'production';
+    const isE2E = process.env.NX_E2E;
 
     const style9 = {
         test: /\.(tsx|ts|js|mjs|jsx)$/,
@@ -158,6 +159,7 @@ module.exports = function (webpackConfig) {
             global: {},
         }),
         isProd &&
+            !isE2E &&
             new HtmlWebpackPlugin({
                 title: 'AFFiNE - All In One Workos',
                 favicon: path.resolve(