Merge pull request #760 from skaut/frontend-e2e-tests

Frontend e2e tests

.eslintrc.json

@@ -1,14 +1,14 @@
 {
   "parserOptions": {
     "parser": "@typescript-eslint/parser",
-    "project": "./tsconfig.json",
+    "project": ["./tsconfig.json", "./cypress/tsconfig.json"],
     "extraFileExtensions": [".svelte"]
   },
   "env": {
     "browser": true,
     "node": false
   },
-  "plugins": ["deprecation", "jest", "simple-import-sort", "@typescript-eslint"],
+  "plugins": ["deprecation", "cypress", "jest", "simple-import-sort", "@typescript-eslint"],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
@@ -109,6 +109,7 @@
         "gulpfile.js",
         "backend.webpack.config.js",
         "frontend.webpack.config.js",
+        "test.frontend.webpack.config.js",
         ".eslintrc.js"
       ],
       "rules": {
@@ -150,7 +151,10 @@
       }
     },
     {
-      "files": ["__tests__/**/*.test.ts"],
+      "files": [
+        "__tests__/**/*.test.ts",
+        "__tests__/test-utils/gas-stubs.ts"
+      ],
       "extends": ["plugin:jest/recommended", "plugin:jest/style"],
       "rules": {
         "jest/consistent-test-it": ["error", { "withinDescribe": "test" }],
@@ -174,6 +178,18 @@
         "jest/require-to-throw-message": "error",
         "jest/unbound-method": "error"
       }
+    },
+    {
+      "files": [
+        "__tests__/frontend/**/*.cy.ts",
+        "__tests__/test-utils/stubEndpoints.ts"
+      ],
+      "extends": ["plugin:cypress/recommended"],
+      "rules": {
+        "cypress/no-force": "error",
+        "cypress/assertion-before-screenshot": "error",
+        "cypress/no-pause": "error"
+      }
     }
   ],
   "globals": {

.github/workflows/CI.yml

@@ -61,8 +61,8 @@ jobs:
         run: |
           npm run lint
 
-  test:
-    name: "Test"
+  backend-test:
+    name: "Backend test"
     runs-on: ubuntu-latest
     steps:
       - name: "Checkout"
@@ -84,7 +84,39 @@ jobs:
 
       - name: "Run tests"
         run: |
-          npm test
+          npm run test:backend
 
       - name: "Upload coverage results"
         uses: codecov/[email protected]
+        with:
+          flags: backend
+
+  frontend-test:
+    name: "Frontend test"
+    runs-on: ubuntu-latest
+    steps:
+      - name: "Checkout"
+        uses: actions/[email protected]
+
+      - name: "Cache NPM dependencies"
+        uses: actions/[email protected]
+        with:
+          path: "~/.npm"
+          key: npm-dependencies-${{ runner.os }}-${{ env.cache-version }}-${{ hashFiles('package.json') }}
+          restore-keys: |
+            npm-dependencies-${{ runner.os }}-${{ env.cache-version }}-${{ hashFiles('package.json') }}
+            npm-dependencies-${{ runner.os }}-${{ env.cache-version }}-
+            npm-dependencies-${{ runner.os }}-
+
+      - name: "Install NPM dependencies"
+        run: |
+          npm ci
+
+      - name: "Run tests"
+        run: |
+          npm run test:frontend
+
+      - name: "Upload coverage results"
+        uses: codecov/[email protected]
+        with:
+          flags: frontend

__tests__/frontend/basic.cy.ts

@@ -0,0 +1,37 @@
+import { stubEndpoints } from "../test-utils/stubEndpoints";
+
+const stubs = stubEndpoints({
+  listFolders: (successHandler) => {
+    successHandler({ status: "success", response: [] });
+  },
+  listSharedDrives: (successHandler) => {
+    successHandler({ status: "success", response: [] });
+  },
+  move: (successHandler) => {
+    setTimeout(() => {
+      successHandler({ status: "success", response: { errors: [] } });
+    }, 100);
+  },
+});
+
+it("works with basic configuration", () => {
+  cy.visit("http://localhost:8080");
+  cy.contains("Shared drive mover");
+  cy.contains("Continue").click();
+  cy.contains("My Drive").click();
+  cy.contains("Continue").click();
+  cy.contains("My Drive").click();
+  cy.contains("Continue").click();
+  cy.contains('contents of the folder "My Drive" into the folder "My Drive"');
+  cy.contains("Move").click();
+  cy.contains("Done!");
+  cy.contains("Successfully moved").then(() => {
+    expect(stubs.move).to.have.been.calledOnceWith(
+      "root",
+      "root",
+      true,
+      true,
+      false
+    );
+  });
+});

__tests__/frontend/configuration.cy.ts

@@ -0,0 +1,61 @@
+import { stubEndpoints } from "../test-utils/stubEndpoints";
+
+const stubs = stubEndpoints({
+  listFolders: (successHandler) => {
+    successHandler({ status: "success", response: [] });
+  },
+  listSharedDrives: (successHandler) => {
+    successHandler({ status: "success", response: [] });
+  },
+  move: (successHandler) => {
+    setTimeout(() => {
+      successHandler({ status: "success", response: { errors: [] } });
+    }, 100);
+  },
+});
+
+it("works with copy configuration", () => {
+  cy.visit("http://localhost:8080");
+  cy.contains("Shared drive mover");
+  cy.contains("Copy comments").click();
+  cy.contains("Continue").click();
+  cy.contains("My Drive").click();
+  cy.contains("Continue").click();
+  cy.contains("My Drive").click();
+  cy.contains("Continue").click();
+  cy.contains('contents of the folder "My Drive" into the folder "My Drive"');
+  cy.contains("Move").click();
+  cy.contains("Done!");
+  cy.contains("Successfully moved").then(() => {
+    expect(stubs.move).to.have.been.calledOnceWith(
+      "root",
+      "root",
+      false,
+      true,
+      false
+    );
+  });
+});
+
+it("works with merge configuration", () => {
+  cy.visit("http://localhost:8080");
+  cy.contains("Shared drive mover");
+  cy.contains("Copy comments").click();
+  cy.contains("Continue").click();
+  cy.contains("My Drive").click();
+  cy.contains("Continue").click();
+  cy.contains("My Drive").click();
+  cy.contains("Continue").click();
+  cy.contains('contents of the folder "My Drive" into the folder "My Drive"');
+  cy.contains("Move").click();
+  cy.contains("Done!");
+  cy.contains("Successfully moved").then(() => {
+    expect(stubs.move).to.have.been.calledOnceWith(
+      "root",
+      "root",
+      false,
+      true,
+      false
+    );
+  });
+});

__tests__/frontend/destination-selection-api-error.cy.ts

@@ -0,0 +1,29 @@
+import { stubEndpoints } from "../test-utils/stubEndpoints";
+
+stubEndpoints({
+  listFolders: (successHandler) => {
+    setTimeout(() => {
+      successHandler({ status: "error", type: "DriveAPIError" });
+    }, 100);
+  },
+  listSharedDrives: (successHandler) => {
+    successHandler({
+      status: "success",
+      response: [
+        { id: "ID_DRIVE_1", name: "DRIVE 1" },
+        { id: "ID_DRIVE_2", name: "DRIVE 2" },
+      ],
+    });
+  },
+});
+
+it("handles raw errors in source folder selection gracefully", () => {
+  cy.visit("http://localhost:8080");
+  cy.contains("Shared drive mover");
+  cy.contains("Continue").click();
+  cy.contains("DRIVE 1").click();
+  cy.contains("Continue").click();
+  cy.contains("DRIVE 2").dblclick();
+  cy.contains("An error occurred").should("be.visible");
+  cy.contains("An error occurred in Google Drive").should("be.visible");
+});

__tests__/frontend/destination-selection-unhandled-error.cy.ts

@@ -0,0 +1,29 @@
+import { stubEndpoints } from "../test-utils/stubEndpoints";
+
+stubEndpoints({
+  listFolders: (_, failureHandler) => {
+    setTimeout(() => {
+      failureHandler(new Error("ERROR MESSAGE"));
+    }, 100);
+  },
+  listSharedDrives: (successHandler) => {
+    successHandler({
+      status: "success",
+      response: [
+        { id: "ID_DRIVE_1", name: "DRIVE 1" },
+        { id: "ID_DRIVE_2", name: "DRIVE 2" },
+      ],
+    });
+  },
+});
+
+it("handles raw errors in source folder selection gracefully", () => {
+  cy.visit("http://localhost:8080");
+  cy.contains("Shared drive mover");
+  cy.contains("Continue").click();
+  cy.contains("DRIVE 1").click();
+  cy.contains("Continue").click();
+  cy.contains("DRIVE 2").dblclick();
+  cy.contains("An error occurred").should("be.visible");
+  cy.contains("ERROR MESSAGE");
+});

__tests__/frontend/destination-selection-unknown-error.cy.ts

@@ -0,0 +1,29 @@
+import { stubEndpoints } from "../test-utils/stubEndpoints";
+
+stubEndpoints({
+  listFolders: (successHandler) => {
+    setTimeout(() => {
+      successHandler({ status: "error", type: "unknown" });
+    }, 100);
+  },
+  listSharedDrives: (successHandler) => {
+    successHandler({
+      status: "success",
+      response: [
+        { id: "ID_DRIVE_1", name: "DRIVE 1" },
+        { id: "ID_DRIVE_2", name: "DRIVE 2" },
+      ],
+    });
+  },
+});
+
+it("handles raw errors in source folder selection gracefully", () => {
+  cy.visit("http://localhost:8080");
+  cy.contains("Shared drive mover");
+  cy.contains("Continue").click();
+  cy.contains("DRIVE 1").click();
+  cy.contains("Continue").click();
+  cy.contains("DRIVE 2").dblclick();
+  cy.contains("An error occurred").should("be.visible");
+  cy.contains("An unknown error occurred").should("be.visible");
+});

__tests__/frontend/move-api-error.cy.ts

@@ -0,0 +1,30 @@
+import { stubEndpoints } from "../test-utils/stubEndpoints";
+
+stubEndpoints({
+  listFolders: (successHandler) => {
+    successHandler({ status: "success", response: [] });
+  },
+  listSharedDrives: (successHandler) => {
+    successHandler({ status: "success", response: [] });
+  },
+  move: (successHandler) => {
+    setTimeout(() => {
+      successHandler({ status: "error", type: "DriveAPIError" });
+    }, 100);
+  },
+});
+
+it("works with an API error", () => {
+  cy.visit("http://localhost:8080");
+  cy.contains("Shared drive mover");
+  cy.contains("Continue").click();
+  cy.contains("My Drive").click();
+  cy.contains("Continue").click();
+  cy.contains("My Drive").click();
+  cy.contains("Continue").click();
+  cy.contains('contents of the folder "My Drive" into the folder "My Drive"');
+  cy.contains("Move").click();
+  cy.contains("Confirmation");
+  cy.contains("An error occurred").should("be.visible");
+  cy.contains("An error occurred in Google Drive").should("be.visible");
+});

__tests__/frontend/move-folders-equal-error.cy.ts

@@ -0,0 +1,32 @@
+import { stubEndpoints } from "../test-utils/stubEndpoints";
+
+stubEndpoints({
+  listFolders: (successHandler) => {
+    successHandler({ status: "success", response: [] });
+  },
+  listSharedDrives: (successHandler) => {
+    successHandler({ status: "success", response: [] });
+  },
+  move: (successHandler) => {
+    setTimeout(() => {
+      successHandler({ status: "error", type: "sourceEqualsDestination" });
+    }, 100);
+  },
+});
+
+it("works with source and destination folders being equal", () => {
+  cy.visit("http://localhost:8080");
+  cy.contains("Shared drive mover");
+  cy.contains("Continue").click();
+  cy.contains("My Drive").click();
+  cy.contains("Continue").click();
+  cy.contains("My Drive").click();
+  cy.contains("Continue").click();
+  cy.contains('contents of the folder "My Drive" into the folder "My Drive"');
+  cy.contains("Move").click();
+  cy.contains("Confirmation");
+  cy.contains("An error occurred").should("be.visible");
+  cy.contains("The source and destination folders must be different").should(
+    "be.visible"
+  );
+});