feat: add peers page e2e test (#344)

Signed-off-by: zhaoxinxin <1186037180@qq.com>

codecov.yml

@@ -1,16 +1,16 @@
 coverage:
   precision: 2
   round: down
-  range: '80...100'
+  range: '90...100'
   status:
     project:
       default:
         enabled: yes
-        target: 5%
+        target: 90%
     patch:
       default:
         enabled: yes
-        target: 5%
+        target: 90%
 comment:
   layout: 'reach, diff, flags, files'
   behavior: default

cypress/e2e/insight/peers.cy.ts

@@ -0,0 +1,316 @@
+import peers from '../../fixtures/peers/peers.json';
+
+const path = require('path');
+declare const expect: Chai.ExpectStatic;
+
+describe('Peers', () => {
+  beforeEach(() => {
+    cy.signin();
+    cy.intercept(
+      {
+        method: 'GET',
+        url: '/api/v1/peers?page=1&per_page=10000000',
+      },
+      (req) => {
+        req.reply({
+          statusCode: 200,
+          body: peers,
+        });
+      },
+    );
+
+    cy.visit('/insight/peers');
+    cy.viewport(1440, 1080);
+  });
+
+  describe('when data is loaded', () => {
+    it('should display the total number of peers', () => {
+      cy.get(':nth-child(1) > .MuiPaper-root > .inde_navigationContent__kHaOF').should('exist');
+      cy.get(
+        ':nth-child(1) > .MuiPaper-root > .inde_navigationContent__kHaOF > div.MuiBox-root > .MuiTypography-h5',
+      ).should('have.text', 7);
+    });
+
+    it('should display the total number of git version', () => {
+      cy.get(':nth-child(2) > .MuiPaper-root > .inde_navigationContent__kHaOF').should('exist');
+      cy.get(
+        ':nth-child(2) > .MuiPaper-root > .inde_navigationContent__kHaOF > div.MuiBox-root > .MuiTypography-h5',
+      ).should('have.text', 4);
+    });
+
+    it('should display the total number of git commit', () => {
+      cy.get(':nth-child(3) > .MuiPaper-root > .inde_navigationContent__kHaOF').should('exist');
+      cy.get(
+        ':nth-child(3) > .MuiPaper-root > .inde_navigationContent__kHaOF > div.MuiBox-root > .MuiTypography-h5',
+      ).should('have.text', 5);
+    });
+
+    it('should display the active ratio', () => {
+      // Show active ratio by cluster.
+      cy.get('#cluster-active').should('contain', '71.43%');
+
+      // Show active ratio by git version.
+      cy.get('#git-version-active').should('contain', '71.43%');
+
+      cy.get('.css-1tg4d9 > .MuiFormControl-root > .MuiInputBase-root > #states-select').click();
+
+      cy.get('[data-value="cluster-1"]').click();
+
+      cy.get('#git-version-active').should('contain', '66.67%');
+
+      // Show active ratio by git commit.
+      cy.get('#git-commit-active').should('contain', '71.43%');
+
+      cy.get('.css-1klrv8o-MuiFormControl-root > .MuiInputBase-root > #states-select').click();
+
+      cy.get('[data-value="cluster-1"]').click();
+
+      cy.get('#git-commit-active').should('contain', '66.67%');
+
+      cy.get(
+        '.css-1tg4d9 > .MuiBox-root > .css-1461v9t-MuiFormControl-root > .MuiInputBase-root > #states-select',
+      ).click();
+
+      cy.get('[data-value="git-version-1"]').click();
+
+      cy.get('#git-commit-active').should('contain', '50%');
+    });
+
+    it('can export csv file', () => {
+      const downloadsFolder = Cypress.config('downloadsFolder');
+
+      // Click export csv.
+      cy.get('.css-1st7tpv > .MuiButtonBase-root').click();
+
+      // Click save button.
+      cy.get('#save').click();
+
+      // Wait two seconds to ensure the download is successful.
+      cy.wait(2000);
+
+      // Get download file.
+      const all = path.join(downloadsFolder, 'Peer Data.csv');
+
+      // Check all quantity.
+      cy.readFile(all).then((fileContent) => {
+        const lines = fileContent.split('\n');
+        const numEntries = lines.length - 2;
+
+        expect(numEntries).to.be.closeTo(7, 0);
+      });
+
+      // Click export csv.
+      cy.get('.css-1st7tpv > .MuiButtonBase-root').click();
+
+      cy.get('.css-nvaly6-MuiFormControl-root > .MuiInputBase-root > #states-select').click();
+      cy.get('[data-value="cluster-1"]').click();
+
+      cy.get('#save').click();
+
+      cy.wait(2000);
+
+      const cluster = path.join(downloadsFolder, 'Peer Data.csv');
+
+      // Check whether the number of data exported based on cluster-1 is correct.
+      cy.readFile(cluster)
+        .should('exist')
+        .then((fileContent) => {
+          const numEntries = fileContent.split('\n').length - 2;
+
+          expect(numEntries).to.be.closeTo(3, 0);
+        });
+
+      // Click export csv.
+      cy.get('.css-1st7tpv > .MuiButtonBase-root').click();
+
+      cy.get('.css-nvaly6-MuiFormControl-root > .MuiInputBase-root > #states-select').click();
+      cy.get('[data-value="cluster-1"]').click();
+
+      cy.get('.css-g74ywa-MuiFormControl-root > .MuiInputBase-root > #states-select').click();
+      cy.get('[data-value="git-version-1"]').click();
+
+      cy.get('#save').click();
+
+      cy.wait(2000);
+
+      const gitVersion = path.join(downloadsFolder, 'Peer Data.csv');
+
+      // Check whether the number of data exported based on git-version-1 is correct.
+      cy.readFile(gitVersion)
+        .should('exist')
+        .then((fileContent) => {
+          const numEntries = fileContent.split('\n').length - 2;
+
+          expect(numEntries).to.be.closeTo(2, 0);
+        });
+
+      // Click export csv.
+      cy.get('.css-1st7tpv > .MuiButtonBase-root').click();
+
+      cy.get('.css-nvaly6-MuiFormControl-root > .MuiInputBase-root > #states-select').click();
+      cy.get('[data-value="cluster-1"]').click();
+
+      cy.get('.css-g74ywa-MuiFormControl-root > .MuiInputBase-root > #states-select').click();
+      cy.get('[data-value="git-version-1"]').click();
+
+      cy.get('.css-70qsx4-MuiFormControl-root > .MuiInputBase-root > #states-select').click();
+      cy.get('[data-value="git-commit-4"]').click();
+
+      cy.get('#save').click();
+
+      cy.wait(2000);
+
+      const gitCommit = path.join(downloadsFolder, 'Peer Data.csv');
+
+      // Check whether the number of data exported based on git-commit-4 is correct.
+      cy.readFile(gitCommit)
+        .should('exist')
+        .then((fileContent) => {
+          const numEntries = fileContent.split('\n').length - 2;
+
+          expect(numEntries).to.be.closeTo(1, 0);
+        });
+    });
+
+    it('click cancel button', () => {
+      // Click export csv.
+      cy.get('.css-1st7tpv > .MuiButtonBase-root').click();
+      cy.get('#alert-dialog-title').should('be.visible').and('have.text', 'Export');
+
+      // Select cluster-1 in the clusters selection box.
+      cy.get('.css-nvaly6-MuiFormControl-root > .MuiInputBase-root > #states-select').click();
+      cy.get('[data-value="cluster-1"]').click();
+
+      // Select git-version-1 in the git version selection box.
+      cy.get('.css-g74ywa-MuiFormControl-root > .MuiInputBase-root > #states-select').click();
+      cy.get('[data-value="git-version-1"]').click();
+
+      // Select git-commit-4 in the git commit selection box.
+      cy.get('.css-70qsx4-MuiFormControl-root > .MuiInputBase-root > #states-select').click();
+      cy.get('[data-value="git-commit-4"]').click();
+
+      // Click cancel button.
+      cy.get('#cancel').click();
+
+      cy.get('.css-1st7tpv > .MuiButtonBase-root').click();
+
+      // Check whether the selected one is all.
+      cy.get('.css-nvaly6-MuiFormControl-root > .MuiInputBase-root > #states-select').should('have.text', 'All');
+      cy.get('.css-g74ywa-MuiFormControl-root > .MuiInputBase-root > #states-select').should('have.text', 'All');
+      cy.get('.css-70qsx4-MuiFormControl-root > .MuiInputBase-root > #states-select').should('have.text', 'All');
+    });
+  });
+
+  describe('when no data is loaded', () => {
+    beforeEach(() => {
+      cy.intercept(
+        {
+          method: 'GET',
+          url: '/api/v1/peers?page=1&per_page=10000000',
+        },
+        (req) => {
+          req.reply({
+            statusCode: 200,
+            body: [],
+          });
+        },
+      );
+    });
+
+    it('should display the total number of peers', () => {
+      cy.get(':nth-child(1) > .MuiPaper-root > .inde_navigationContent__kHaOF').should('exist');
+      cy.get(
+        ':nth-child(1) > .MuiPaper-root > .inde_navigationContent__kHaOF > div.MuiBox-root > .MuiTypography-h5',
+      ).should('have.text', 0);
+    });
+
+    it('should display the total number of git version', () => {
+      cy.get(':nth-child(2) > .MuiPaper-root > .inde_navigationContent__kHaOF').should('exist');
+      cy.get(
+        ':nth-child(2) > .MuiPaper-root > .inde_navigationContent__kHaOF > div.MuiBox-root > .MuiTypography-h5',
+      ).should('have.text', 0);
+    });
+
+    it('should display the total number of git commit', () => {
+      cy.get(':nth-child(3) > .MuiPaper-root > .inde_navigationContent__kHaOF').should('exist');
+      cy.get(
+        ':nth-child(3) > .MuiPaper-root > .inde_navigationContent__kHaOF > div.MuiBox-root > .MuiTypography-h5',
+      ).should('have.text', 0);
+    });
+
+    it('cannot display the active ratio', () => {
+      cy.get('#git-version-active').should('contain', '0');
+      cy.get('#git-version-active').should('contain', '0');
+      cy.get('#git-commit-active').should('contain', '0');
+    });
+
+    it('cannot export csv file', () => {
+      cy.get('.css-1st7tpv > .MuiButtonBase-root').click();
+      cy.get('#save').click();
+
+      // Show error message.
+      cy.get('.MuiAlert-message').should('have.text', 'Export failed');
+    });
+  });
+
+  describe('should handle API error response', () => {
+    beforeEach(() => {
+      cy.intercept(
+        {
+          method: 'GET',
+          url: '/api/v1/peers?page=1&per_page=10000000',
+        },
+        (req) => {
+          req.reply({
+            forceNetworkError: true,
+          });
+        },
+      );
+      cy.visit('/insight/peers');
+    });
+
+    it('should display the total number of peers', () => {
+      cy.get(':nth-child(1) > .MuiPaper-root > .inde_navigationContent__kHaOF').should('exist');
+      cy.get(
+        ':nth-child(1) > .MuiPaper-root > .inde_navigationContent__kHaOF > div.MuiBox-root > .MuiTypography-h5',
+      ).should('have.text', 0);
+    });
+
+    it('should display the total number of git version', () => {
+      cy.get(':nth-child(2) > .MuiPaper-root > .inde_navigationContent__kHaOF').should('exist');
+      cy.get(
+        ':nth-child(2) > .MuiPaper-root > .inde_navigationContent__kHaOF > div.MuiBox-root > .MuiTypography-h5',
+      ).should('have.text', 0);
+    });
+
+    it('should display the total number of git commit', () => {
+      cy.get(':nth-child(3) > .MuiPaper-root > .inde_navigationContent__kHaOF').should('exist');
+      cy.get(
+        ':nth-child(3) > .MuiPaper-root > .inde_navigationContent__kHaOF > div.MuiBox-root > .MuiTypography-h5',
+      ).should('have.text', 0);
+    });
+
+    it('cannot display the active ratio', () => {
+      cy.get('#git-version-active').should('contain', '0');
+      cy.get('#git-version-active').should('contain', '0');
+      cy.get('#git-commit-active').should('contain', '0');
+    });
+
+    it('show error message', () => {
+      // Show error message.
+      cy.get('.MuiAlert-message').should('be.visible').and('contain', 'Failed to fetch');
+
+      // Close error message.
+      cy.get('.MuiAlert-action > .MuiButtonBase-root').click();
+      cy.get('.MuiAlert-message').should('not.exist');
+    });
+
+    it('cannot export csv file', () => {
+      cy.get('.css-1st7tpv > .MuiButtonBase-root').click();
+      cy.get('#save').click();
+
+      // Show error message.
+      cy.get('.MuiAlert-message').should('have.text', 'Export failed');
+    });
+  });
+});

cypress/fixtures/peers/peers.json

@@ -0,0 +1,324 @@
+[
+  {
+    "id": 1,
+    "created_at": "2023-12-18T09:36:14Z",
+    "updated_at": "2023-12-18T09:36:14Z",
+    "is_del": 0,
+    "host_name": "peer-1",
+    "type": "super",
+    "idc": "sdfsd",
+    "location": "Hangzhou",
+    "ip": "30.44.96.255",
+    "port": 34001,
+    "download_port": 34201,
+    "object_storage_port": 0,
+    "state": "inactive",
+    "os": "linux",
+    "platform": "example",
+    "platform_family": "",
+    "platform_version": "7.2",
+    "kernel_version": "5.23.23",
+    "git_version": "git-version-1",
+    "git_commit": "commit-1",
+    "build_platform": "linux",
+    "scheduler_cluster_id": 1,
+    "scheduler_cluster": {
+      "id": 1,
+      "created_at": "2023-11-27T07:31:23Z",
+      "updated_at": "2023-11-27T07:31:23Z",
+      "is_del": 0,
+      "name": "cluster-1",
+      "bio": "",
+      "config": {
+        "candidate_parent_limit": 4,
+        "filter_parent_limit": 40
+      },
+      "client_config": {
+        "concurrent_piece_count": 4,
+        "load_limit": 50
+      },
+      "scopes": {},
+      "is_default": true,
+      "seed_peer_clusters": null,
+      "schedulers": null,
+      "peers": null,
+      "jobs": null
+    }
+  },
+  {
+    "id": 2,
+    "created_at": "2023-12-18T09:36:14Z",
+    "updated_at": "2023-12-18T09:36:14Z",
+    "is_del": 0,
+    "host_name": "peer-2",
+    "type": "super",
+    "idc": "sdfsd",
+    "location": "Hangzhou",
+    "ip": "30.44.96.255",
+    "port": 34001,
+    "download_port": 34201,
+    "object_storage_port": 0,
+    "state": "active",
+    "os": "linux",
+    "platform": "example",
+    "platform_family": "",
+    "platform_version": "7.2",
+    "kernel_version": "5.23.23",
+    "git_version": "git-version-2",
+    "git_commit": "git-commit-1",
+    "build_platform": "linux",
+    "scheduler_cluster_id": 1,
+    "scheduler_cluster": {
+      "id": 1,
+      "created_at": "2023-11-27T07:31:23Z",
+      "updated_at": "2023-11-27T07:31:23Z",
+      "is_del": 0,
+      "name": "cluster-1",
+      "bio": "",
+      "config": {
+        "candidate_parent_limit": 4,
+        "filter_parent_limit": 40
+      },
+      "client_config": {
+        "concurrent_piece_count": 4,
+        "load_limit": 50
+      },
+      "scopes": {},
+      "is_default": true,
+      "seed_peer_clusters": null,
+      "schedulers": null,
+      "peers": null,
+      "jobs": null
+    }
+  },
+  {
+    "id": 3,
+    "created_at": "2023-12-18T09:36:14Z",
+    "updated_at": "2023-12-18T09:36:14Z",
+    "is_del": 0,
+    "host_name": "peer-3",
+    "type": "super",
+    "idc": "sdfsd",
+    "location": "Hangzhou",
+    "ip": "30.44.96.255",
+    "port": 34001,
+    "download_port": 34201,
+    "object_storage_port": 0,
+    "state": "active",
+    "os": "linux",
+    "platform": "example",
+    "platform_family": "",
+    "platform_version": "7.2",
+    "kernel_version": "5.23.23",
+    "git_version": "git-version-2",
+    "git_commit": "git-commit-1",
+    "build_platform": "linux",
+    "scheduler_cluster_id": 1,
+    "scheduler_cluster": {
+      "id": 2,
+      "created_at": "2023-11-27T07:31:23Z",
+      "updated_at": "2023-11-27T07:31:23Z",
+      "is_del": 0,
+      "name": "cluster-2",
+      "bio": "",
+      "config": {
+        "candidate_parent_limit": 4,
+        "filter_parent_limit": 40
+      },
+      "client_config": {
+        "concurrent_piece_count": 4,
+        "load_limit": 50
+      },
+      "scopes": {},
+      "is_default": true,
+      "seed_peer_clusters": null,
+      "schedulers": null,
+      "peers": null,
+      "jobs": null
+    }
+  },
+  {
+    "id": 4,
+    "created_at": "2023-12-18T09:36:14Z",
+    "updated_at": "2023-12-18T09:36:14Z",
+    "is_del": 0,
+    "host_name": "peer-4",
+    "type": "super",
+    "idc": "sdfsd",
+    "location": "Hangzhou",
+    "ip": "30.44.96.255",
+    "port": 34001,
+    "download_port": 34201,
+    "object_storage_port": 0,
+    "state": "active",
+    "os": "linux",
+    "platform": "example",
+    "platform_family": "",
+    "platform_version": "7.2",
+    "kernel_version": "5.23.23",
+    "git_version": "git-version-3",
+    "git_commit": "git-commit-2",
+    "build_platform": "linux",
+    "scheduler_cluster_id": 1,
+    "scheduler_cluster": {
+      "id": 3,
+      "created_at": "2023-11-27T07:31:23Z",
+      "updated_at": "2023-11-27T07:31:23Z",
+      "is_del": 0,
+      "name": "cluster-3",
+      "bio": "",
+      "config": {
+        "candidate_parent_limit": 4,
+        "filter_parent_limit": 40
+      },
+      "client_config": {
+        "concurrent_piece_count": 4,
+        "load_limit": 50
+      },
+      "scopes": {},
+      "is_default": true,
+      "seed_peer_clusters": null,
+      "schedulers": null,
+      "peers": null,
+      "jobs": null
+    }
+  },
+  {
+    "id": 5,
+    "created_at": "2023-12-18T09:36:14Z",
+    "updated_at": "2023-12-18T09:36:14Z",
+    "is_del": 0,
+    "host_name": "peer-5",
+    "type": "super",
+    "idc": "sdfsd",
+    "location": "Hangzhou",
+    "ip": "30.44.96.255",
+    "port": 34001,
+    "download_port": 34201,
+    "object_storage_port": 0,
+    "state": "inactive",
+    "os": "linux",
+    "platform": "example",
+    "platform_family": "",
+    "platform_version": "7.2",
+    "kernel_version": "5.23.23",
+    "git_version": "git-version-3",
+    "git_commit": "git-commit-3",
+    "build_platform": "linux",
+    "scheduler_cluster_id": 1,
+    "scheduler_cluster": {
+      "id": 3,
+      "created_at": "2023-11-27T07:31:23Z",
+      "updated_at": "2023-11-27T07:31:23Z",
+      "is_del": 0,
+      "name": "cluster-3",
+      "bio": "",
+      "config": {
+        "candidate_parent_limit": 4,
+        "filter_parent_limit": 40
+      },
+      "client_config": {
+        "concurrent_piece_count": 4,
+        "load_limit": 50
+      },
+      "scopes": {},
+      "is_default": true,
+      "seed_peer_clusters": null,
+      "schedulers": null,
+      "peers": null,
+      "jobs": null
+    }
+  },
+  {
+    "id": 6,
+    "created_at": "2023-12-18T09:36:14Z",
+    "updated_at": "2023-12-18T09:36:14Z",
+    "is_del": 0,
+    "host_name": "peer-6",
+    "type": "super",
+    "idc": "sdfsd",
+    "location": "Hangzhou",
+    "ip": "30.44.96.255",
+    "port": 34001,
+    "download_port": 34201,
+    "object_storage_port": 0,
+    "state": "active",
+    "os": "linux",
+    "platform": "example",
+    "platform_family": "",
+    "platform_version": "7.2",
+    "kernel_version": "5.23.23",
+    "git_version": "git-version-4",
+    "git_commit": "git-commit-4",
+    "build_platform": "linux",
+    "scheduler_cluster_id": 1,
+    "scheduler_cluster": {
+      "id": 4,
+      "created_at": "2023-11-27T07:31:23Z",
+      "updated_at": "2023-11-27T07:31:23Z",
+      "is_del": 0,
+      "name": "cluster-4",
+      "bio": "",
+      "config": {
+        "candidate_parent_limit": 4,
+        "filter_parent_limit": 40
+      },
+      "client_config": {
+        "concurrent_piece_count": 4,
+        "load_limit": 50
+      },
+      "scopes": {},
+      "is_default": true,
+      "seed_peer_clusters": null,
+      "schedulers": null,
+      "peers": null,
+      "jobs": null
+    }
+  },
+  {
+    "id": 7,
+    "created_at": "2023-12-18T09:36:14Z",
+    "updated_at": "2023-12-18T09:36:14Z",
+    "is_del": 0,
+    "host_name": "peer-7",
+    "type": "super",
+    "idc": "sdfsd",
+    "location": "Hangzhou",
+    "ip": "30.44.96.255",
+    "port": 34001,
+    "download_port": 34201,
+    "object_storage_port": 0,
+    "state": "active",
+    "os": "linux",
+    "platform": "example",
+    "platform_family": "",
+    "platform_version": "7.2",
+    "kernel_version": "5.23.23",
+    "git_version": "git-version-1",
+    "git_commit": "git-commit-4",
+    "build_platform": "linux",
+    "scheduler_cluster_id": 1,
+    "scheduler_cluster": {
+      "id": 1,
+      "created_at": "2023-11-27T07:31:23Z",
+      "updated_at": "2023-11-27T07:31:23Z",
+      "is_del": 0,
+      "name": "cluster-1",
+      "bio": "",
+      "config": {
+        "candidate_parent_limit": 4,
+        "filter_parent_limit": 40
+      },
+      "client_config": {
+        "concurrent_piece_count": 4,
+        "load_limit": 50
+      },
+      "scopes": {},
+      "is_default": true,
+      "seed_peer_clusters": null,
+      "schedulers": null,
+      "peers": null,
+      "jobs": null
+    }
+  }
+]

package.json

@@ -110,5 +110,8 @@
     "*.{css,sass}": [
       "prettier --write"
     ]
+  },
+  "nyc": {
+    "exclude": "src/reportWebVitals.ts"
   }
 }

src/components/insight/peer/index.tsx

@@ -20,7 +20,6 @@ import {
   Snackbar,
   Alert,
   Tooltip as MuiTooltip,
-  Chip,
 } from '@mui/material';
 import {
   Chart as ChartJS,
@@ -497,6 +496,10 @@ export default function Peer() {
       { key: 'scheduler_cluster.client_config.load_limit', label: 'schedulerCluster.clientConfig.loadLimit' },
     ];
     try {
+      if (peer.length === 0) {
+        throw Error;
+      }
+
       if (exportSelectedVersion === 'All' && exportSelectedCommit === 'All' && exportSelectedCluster === 'All') {
         exportCSVFile(headers, peer, 'Peer Data');
         setLoadingButton(false);
@@ -692,7 +695,7 @@ export default function Peer() {
                       <Typography variant="subtitle2" fontFamily="mabry-light">
                         Active
                       </Typography>
-                      <Typography variant="subtitle1" fontFamily="mabry-bold">
+                      <Typography id="cluster-active" variant="subtitle1" fontFamily="mabry-bold">
                         {isLoading ? <Skeleton width="2rem" /> : clusterActive ? `${clusterActive}%` : '0'}
                       </Typography>
                     </Box>
@@ -790,7 +793,7 @@ export default function Peer() {
                       <Typography variant="subtitle2" fontFamily="mabry-light">
                         Active
                       </Typography>
-                      <Typography variant="subtitle1" fontFamily="mabry-bold">
+                      <Typography id="git-version-active" variant="subtitle1" fontFamily="mabry-bold">
                         {isLoading ? <Skeleton width="2rem" /> : gitVersionActive ? `${gitVersionActive}%` : '0'}
                       </Typography>
                     </Box>
@@ -914,7 +917,7 @@ export default function Peer() {
                       <Typography variant="subtitle2" fontFamily="mabry-light">
                         Active
                       </Typography>
-                      <Typography variant="subtitle1" fontFamily="mabry-bold">
+                      <Typography id="git-commit-active" variant="subtitle1" fontFamily="mabry-bold">
                         {isLoading ? <Skeleton width="2rem" /> : gitCommitActive ? `${gitCommitActive}%` : '0'}
                       </Typography>
                     </Box>
@@ -1024,6 +1027,7 @@ export default function Peer() {
               size="small"
               variant="outlined"
               loadingPosition="end"
+              id="cancel"
               sx={{
                 '&.MuiLoadingButton-root': {
                   color: 'var(--calcel-size-color)',
@@ -1058,6 +1062,7 @@ export default function Peer() {
               variant="outlined"
               type="submit"
               loadingPosition="end"
+              id="save"
               sx={{
                 '&.MuiLoadingButton-root': {
                   backgroundColor: 'var(--save-color)',