test: add the create and delete plugin in drawer

web/cypress/fixtures/data.json

@@ -14,6 +14,7 @@
   "serviceName2": "test_service2",
   "routeName": "test_route",
   "consumerName": "test_consumer",
+  "basicAuthPlugin": "basic-auth",
   "ip1": "127.0.0.1",
   "ip2": "127.0.0.2",
   "host1": "11.11.11.11",

web/cypress/fixtures/selector.json

@@ -11,6 +11,7 @@
   "errorNotification:": ".ant-notification-notice-error",
 
   "pluginCard": ".ant-card",
+  "pluginCardBordered": ".ant-card-bordered",
   "pageContent": ".ant-pro-page-container",
 
   "tableBody":".ant-table-tbody",
@@ -19,6 +20,7 @@
   "refresh": ".anticon-reload",
   "codemirror": ".CodeMirror",
   "disabledSwitcher": "#disable",
+  "checkedSwitcher": ".ant-switch-checked",
   "deleteButton": ".ant-btn-dangerous",
 
   "name": "#name",
@@ -66,6 +68,7 @@
   "usernameInput": "#control-ref_username",
   "passwordInput": "#control-ref_password",
   "drawer": ".ant-drawer-content",
+  "drawerFooter": ".ant-drawer-footer",
   "codemirrorScroll": ".CodeMirror-scroll",
   "drawerClose": ".ant-drawer-close",
   "descriptionSelector": "[title=Description]",

web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js

@@ -0,0 +1,55 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* eslint-disable no-undef */
+
+context('Delete Plugin List with the Drawer', () => {
+  const timeout = 5000;
+
+  beforeEach(() => {
+    cy.login();
+
+    cy.fixture('selector.json').as('domSelector');
+    cy.fixture('data.json').as('data');
+  });
+
+  it('should visit plugin market and create plugin', function () {
+    cy.visit('/');
+    cy.contains('Plugin').click();
+    cy.contains('Create').click();
+
+    cy.contains(this.data.basicAuthPlugin).parents(this.domSelector.pluginCardBordered).within(() => {
+      cy.get('button').click({ force: true });
+    });
+
+    cy.get(this.domSelector.drawer).should('be.visible').within(() => {
+      cy.get(this.domSelector.disabledSwitcher).click();
+      cy.get(this.domSelector.checkedSwitcher).should('exist');
+    });
+
+    cy.contains('button', 'Submit').click();
+    cy.get(this.domSelector.drawer, { timeout }).should('not.exist');
+  });
+
+  it('should delete the plugin with the drawer', function () {
+    cy.visit('/plugin/list');
+    cy.get(this.domSelector.refresh).click();
+    cy.contains('button', 'Edit').click();
+    cy.get(this.domSelector.drawerFooter).contains('button', 'Delete').click({ force: true });
+    cy.contains('button', 'Confirm').click({ force: true });
+    cy.get(this.domSelector.empty).should('be.visible');
+  });
+});

web/cypress/integration/route/create-edit-delete-route.spec.js

@@ -20,6 +20,7 @@ context('Create and Delete Route', () => {
   const name = `routeName${new Date().valueOf()}`;
   const newName = `newName${new Date().valueOf()}`;
   const sleepTime = 100;
+  const timeout = 5000;
 
   beforeEach(() => {
     cy.login();
@@ -71,13 +72,33 @@ context('Create and Delete Route', () => {
       });
     });
 
-    // config prometheus plugin
-    cy.contains(this.domSelector.pluginCard, 'prometheus').within(() => {
-      cy.get('button').first().click({
-        force: true
-      });
+    // config basic auth plugin
+    cy.contains(this.data.basicAuthPlugin).parents(this.domSelector.pluginCardBordered).within(() => {
+      cy.get('button').click({ force: true });
+    });
+
+    cy.get(this.domSelector.drawer).should('be.visible').within(() => {
+      cy.get(this.domSelector.disabledSwitcher).click();
+      cy.get(this.domSelector.checkedSwitcher).should('exist');
+    });
+
+    cy.contains('button', 'Submit').click();
+    cy.get(this.domSelector.drawer, { timeout }).should('not.exist');
+
+    cy.contains(this.data.basicAuthPlugin).parents(this.domSelector.pluginCardBordered).within(() => {
+      cy.get('button').click({ force: true });
     });
-    cy.contains('button', 'Cancel').click();
+
+    cy.get(this.domSelector.drawerFooter).contains('button', 'Delete').click({ force: true });
+    cy.contains('button', 'Confirm').click({ force: true });
+
+    cy.contains(this.data.basicAuthPlugin).parents(this.domSelector.pluginCardBordered).within(() => {
+      cy.get('button').click({ force: true });
+    });
+
+    cy.get(this.domSelector.drawerFooter).contains('button', 'Delete').should('not.exist');
+    cy.contains('button', 'Cancel').click({ force: true });
+
     cy.contains('Next').click();
     cy.contains('Submit').click();
     cy.contains(this.data.submitSuccess);

web/cypress/integration/service/create-edit-delete-service.spec.js

@@ -17,6 +17,8 @@
 /* eslint-disable no-undef */
 
 context('Create and Delete Service ', () => {
+  const timeout = 5000;
+
   beforeEach(() => {
     cy.login();
 
@@ -35,6 +37,33 @@ context('Create and Delete Service ', () => {
     cy.get(this.domSelector.nodes_0_host).type(this.data.ip1);
 
     cy.contains('Next').click();
+
+    cy.contains(this.data.basicAuthPlugin).parents(this.domSelector.pluginCardBordered).within(() => {
+      cy.get('button').click({ force: true });
+    });
+
+    cy.get(this.domSelector.drawer).should('be.visible').within(() => {
+      cy.get(this.domSelector.disabledSwitcher).click();
+      cy.get(this.domSelector.checkedSwitcher).should('exist');
+    });
+
+    cy.contains('button', 'Submit').click();
+    cy.get(this.domSelector.drawer, { timeout }).should('not.exist');
+
+    cy.contains(this.data.basicAuthPlugin).parents(this.domSelector.pluginCardBordered).within(() => {
+      cy.get('button').click({ force: true });
+    });
+
+    cy.get(this.domSelector.drawerFooter).contains('button', 'Delete').click({ force: true });
+    cy.contains('button', 'Confirm').click({ force: true });
+
+    cy.contains(this.data.basicAuthPlugin).parents(this.domSelector.pluginCardBordered).within(() => {
+      cy.get('button').click({ force: true });
+    });
+
+    cy.get(this.domSelector.drawerFooter).contains('button', 'Delete').should('not.exist');
+    cy.contains('button', 'Cancel').click({ force: true });
+
     cy.contains('Next').click();
     cy.contains('Submit').click();
     cy.get(this.domSelector.notification).should('contain', this.data.createServiceSuccess);