Add cypress tests for Gateway-Policy feature UI

portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx

@@ -551,7 +551,11 @@ const Listing: React.FC = () => {
                             defaultMessage='Cancel'
                         />
                     </Button>
-                    <Button onClick={() => deletePolicy(selectedPolicyId)} color='primary'>
+                    <Button
+                        onClick={() => deletePolicy(selectedPolicyId)}
+                        color='primary'
+                        data-testid='policy-mapping-delete-confirmation-button'
+                    >
                         <FormattedMessage
                             id='Delete'
                             defaultMessage='Delete'
@@ -595,7 +599,11 @@ const Listing: React.FC = () => {
                             defaultMessage='Cancel'
                         />
                     </Button>
-                    <Button onClick={() => deploy(policyID, deployingGatewayList)} color='primary'>
+                    <Button
+                        onClick={() => deploy(policyID, deployingGatewayList)}
+                        color='primary'
+                        data-testid='deploy-to-gateway-button'
+                    >
                         <FormattedMessage
                             id='Deploy'
                             defaultMessage='Deploy'
@@ -639,7 +647,11 @@ const Listing: React.FC = () => {
                             defaultMessage='Cancel'
                         />
                     </Button>
-                    <Button onClick={() => undeploy(policyID, gateway)} color='primary'>
+                    <Button
+                        onClick={() => undeploy(policyID, gateway)}
+                        color='primary'
+                        data-testid='undeploy-from-gateway-button'
+                    >
                         <FormattedMessage
                             id='Undeploy'
                             defaultMessage='Undeploy'
@@ -724,6 +736,7 @@ const Listing: React.FC = () => {
                                                 deleteIcon={
                                                     !isRestricted(['apim:gateway_policy_manage']) 
                                                         ? <CloudOffRoundedIcon/> : <></>}
+                                                id={`gateway-chip-${gateway}`}
                                             />
                                         </>))}
                                 {undeployDialog(policyId, deployingGateway)}
@@ -799,6 +812,7 @@ const Listing: React.FC = () => {
                                 <Button
                                     aria-label='Edit'
                                     component={Link}
+                                    data-testid = 'policy-mapping-edit-button'
                                     to={getEditUrl(policyId)}
                                 >
                                     <Icon className={classes.icon}>
@@ -813,6 +827,7 @@ const Listing: React.FC = () => {
                                     <Button
                                         aria-label='Delete'
                                         onClick={handleDeleteClick}
+                                        data-testid = 'policy-mapping-delete-button'
                                     >
                                         <Icon className={classes.icon}>
                                             delete_forever
@@ -967,6 +982,7 @@ const Listing: React.FC = () => {
                                     variant='contained'
                                     color='primary'
                                     fullWidth
+                                    data-testid= 'policy-mapping-deploy-button'
                                     disabled={getSelectedGatewayLabelsById(policy.id).length < 1}
                                     onClick={() => setIsDeployDialogOpen(true)}
                                 >

portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx

@@ -587,6 +587,7 @@ const Policies: FC<PolicyProps> =  ({
                         type='submit'
                         variant='contained'
                         color='primary'
+                        data-testid= 'policy-mapping-save-or-update-button'
                         disabled={disabled}
                         onClick={() => isCreateNew? save() : update()}
                     >

tests/cypress/integration/publisher/022-gateway-policies/00-gateway-policy.spec.js

@@ -0,0 +1,107 @@
+/*
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. 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.
+ */
+
+import Utils from "@support/utils";
+
+describe("Gateway Policies", () => {
+
+    const { carbonUsername, carbonPassword } = Utils.getUserInfo();
+
+    before(function () {
+        cy.loginToPublisher(carbonUsername, carbonPassword);
+    })
+
+    it("Global Policy Operations", () => {
+        // Add policy mapping
+        cy.visit(`publisher/global-policies/create`, { timeout: Cypress.config().largeTimeout });
+        cy.get('#outlined-required').click();
+        cy.get('#outlined-required').type('Global policy mapping 1');
+        cy.get('#outlined-multiline-static').click();
+        cy.get('#outlined-multiline-static').type('Global policy mapping 1 description');
+        cy.get('#request-tab').click();
+        const dataTransfer = new DataTransfer();
+        cy.contains('Add Header', { timeout: Cypress.config().largeTimeout }).trigger('dragstart', {
+            dataTransfer
+        });
+        cy.contains('Drag and drop policies here').trigger('drop', {
+            dataTransfer
+        });
+        cy.get('#headerName').click();
+        cy.get('#headerName').type('RequestHeader');
+        cy.get('#headerValue').click();
+        cy.get('#headerValue').type('RequestHeaderValue');
+        cy.get('[data-testid=policy-attached-details-save]').click();
+        cy.get('[data-testid=policy-mapping-save-or-update-button]')
+            .scrollIntoView()
+            .should('be.visible')
+            .click();
+        cy.wait(2000);
+
+        // deploy policy mapping to a gateway
+        cy.visit(`publisher/global-policies`, { timeout: Cypress.config().largeTimeout });
+        cy.get('td button') // Get all buttons within <td> elements
+            .first() // Select the first button found
+            .click();
+        cy.get('#multi-select').should('exist').should('be.visible');
+        cy.get('#multi-select').click();
+        cy.contains('Default').click();
+        cy.get('[data-testid=policy-mapping-deploy-button]').click();
+        cy.get('[data-testid=deploy-to-gateway-button]', { timeout: Cypress.config().largeTimeout }).click();
+
+        // update policy mapping
+        cy.visit(`publisher/global-policies`, { timeout: Cypress.config().largeTimeout });
+        cy.get('[data-testid=policy-mapping-edit-button]').click();
+        cy.wait(4000);
+        cy.get('div[title="Add Header : v1"]').click();
+        cy.get('#headerValue', { timeout: Cypress.config().largeTimeout }).click();
+        cy.get('[data-testid=policy-attached-details-save]').should('be.disabled');
+        const newText = 'RequestHeaderValueNew';
+        cy.get('#headerValue').clear().type(newText).should('have.value', newText);
+        cy.get('[data-testid=policy-attached-details-save]').should('not.be.disabled');
+        cy.get('[data-testid=policy-attached-details-save]').click();
+        cy.get('[data-testid=policy-mapping-save-or-update-button]')
+            .scrollIntoView()
+            .should('be.visible')
+            .click();
+        cy.wait(2000);
+        cy.visit(`publisher/global-policies`, { timeout: Cypress.config().largeTimeout });
+        cy.get('[data-testid=policy-mapping-edit-button]').click();
+        cy.wait(4000);
+        cy.get('div[title="Add Header : v1"]').click();
+        cy.get('#headerValue', { timeout: Cypress.config().largeTimeout }).click();
+        cy.get('#headerValue').should('have.value', newText);
+
+
+        // undeploy policy mapping
+        cy.visit(`publisher/global-policies`, { timeout: Cypress.config().largeTimeout });
+        const gateway = 'Default';
+        cy.get(`#gateway-chip-${gateway} svg[class*=MuiChip-deleteIcon]`)
+            .should('be.visible')
+            .click();
+        cy.get('[data-testid=undeploy-from-gateway-button]', { timeout: Cypress.config().largeTimeout }).click();
+
+        //Successful deletion of policy mapping
+        cy.visit(`publisher/global-policies`, { timeout: Cypress.config().largeTimeout });
+        cy.get('[data-testid=policy-mapping-delete-button]').click();
+        cy.get('[data-testid=policy-mapping-delete-confirmation-button]', { timeout: Cypress.config().largeTimeout }).click();
+        cy.visit(`publisher/global-policies`, { timeout: Cypress.config().largeTimeout });
+        cy.contains('Global policy mapping 1').should('not.exist');
+
+        cy.logoutFromPublisher();
+    });
+})