Feature: API Pane Redesign

app/client/cypress/fixtures/testdata.json

@@ -28,10 +28,10 @@
   "methodpost": "api/users",
   "methodpatch": "api/users/2",
   "methoddelete": "1",
-  "putAction": "//div[contains(@id,'react-select') and contains(text(),'PUT')]",
-  "postAction": "//div[contains(@id,'react-select') and contains(text(),'POST')]",
-  "patchAction": "//div[contains(@id,'react-select') and contains(text(),'PATCH')]",
-  "deleteAction": "//div[contains(@id,'react-select') and contains(text(),'DELETE')]",
+  "putAction": "//div[contains(@class, 't--dropdown-option')]//span[contains(text(),'PUT')]",
+  "postAction": "//div[contains(@class, 't--dropdown-option')]//span[contains(text(),'POST')]",
+  "patchAction": "//div[contains(@class, 't--dropdown-option')]//span[contains(text(),'PATCH')]",
+  "deleteAction": "//div[contains(@class, 't--dropdown-option')]//span[contains(text(),'DELETE')]",
   "moustacheMethod": "{{Api.text}}",
   "nextUrl": ".data.next}}",
   "prevUrl": ".data.previous}}",

app/client/cypress/integration/Smoke_TestSuite/ActionExecution/Action_PageOnLoad_spec.js

@@ -11,9 +11,7 @@ describe("API Panel Test Functionality", function() {
     cy.enterDatasourceAndPath("https://reqres.in/api/", "users");
     cy.WaitAutoSave();
     cy.get("li:contains('Settings')").click({ force: true });
-    cy.get("[data-cy=executeOnLoad]")
-      .find(".bp3-switch")
-      .click();
+    cy.get("[data-cy=executeOnLoad]").click({ force: true });
 
     cy.wait("@setExecuteOnLoad");
 
@@ -36,9 +34,7 @@ describe("API Panel Test Functionality", function() {
     cy.enterDatasourceAndPath("https://abc.com", "users");
     cy.WaitAutoSave();
     cy.get("li:contains('Settings')").click({ force: true });
-    cy.get("[data-cy=executeOnLoad]")
-      .find(".bp3-switch")
-      .click();
+    cy.get("[data-cy=executeOnLoad]").click({ force: true });
 
     cy.wait("@setExecuteOnLoad");
 

app/client/cypress/integration/Smoke_TestSuite/ApiFlow/CurlImportFlow_spec.js

@@ -26,6 +26,7 @@ describe("Test curl import flow", function() {
     cy.RunAPI();
     cy.ResponseStatusCheck("200 OK");
     cy.get(ApiEditor.formActionButtons).should("be.visible");
+    cy.get(ApiEditor.ApiActionMenu).click();
     cy.get(ApiEditor.ApiDeleteBtn).click();
     cy.wait("@deleteAction");
     cy.get("@deleteAction").then((response) => {

app/client/cypress/integration/Smoke_TestSuite/ApiPaneTests/API_All_Verb_spec.js

@@ -1,9 +1,11 @@
 const testdata = require("../../../fixtures/testdata.json");
 const apiwidget = require("../../../locators/apiWidgetslocator.json");
+const ApiEditor = require("../../../locators/ApiEditor.json");
 
 describe("API Panel Test Functionality", function() {
   afterEach(function() {
-    cy.get(".t--apiFormDeleteBtn").click();
+    cy.get(ApiEditor.ApiActionMenu).click({ force: true });
+    cy.get(apiwidget.deleteAPI).click({ force: true });
     cy.wait("@deleteAction").should(
       "have.nested.property",
       "response.body.responseMeta.status",
@@ -24,8 +26,9 @@ describe("API Panel Test Functionality", function() {
       testdata.headerKey,
       testdata.headerValue,
     );
-    cy.readFile("cypress/fixtures/putjson.txt").then(json => {
+    cy.readFile("cypress/fixtures/putjson.txt").then((json) => {
       cy.log(json);
+      cy.contains(ApiEditor.bodyTab).click({ force: true });
       cy.xpath(apiwidget.postbody)
         .click({ force: true })
         .focus()
@@ -50,8 +53,9 @@ describe("API Panel Test Functionality", function() {
       testdata.headerKey,
       testdata.headerValue,
     );
-    cy.readFile("cypress/fixtures/postjson.txt").then(json => {
+    cy.readFile("cypress/fixtures/postjson.txt").then((json) => {
       cy.log(json);
+      cy.contains(ApiEditor.bodyTab).click({ force: true });
       cy.xpath(apiwidget.postbody)
         .click({ force: true })
         .focus()
@@ -76,8 +80,9 @@ describe("API Panel Test Functionality", function() {
       testdata.headerKey,
       testdata.headerValue,
     );
-    cy.readFile("cypress/fixtures/patchjson.txt").then(json => {
+    cy.readFile("cypress/fixtures/patchjson.txt").then((json) => {
       cy.log(json);
+      cy.contains(ApiEditor.bodyTab).click({ force: true });
       cy.xpath(apiwidget.postbody)
         .click({ force: true })
         .focus()

app/client/cypress/integration/Smoke_TestSuite/ApiPaneTests/API_RequestBody_spec.js

@@ -9,7 +9,7 @@ describe("API Panel request body", function() {
 
     cy.SelectAction(testdata.postAction);
 
-    cy.get(apiEditor.bodyType).click();
+    cy.contains(apiEditor.bodyTab).click();
     cy.contains(testdata.apiFormDataBodyType).click();
 
     cy.xpath(apiwidget.formEncoded).should("be.visible");

app/client/cypress/integration/Smoke_TestSuite/Binding/BindApi_withPageload_Input_spec.js

@@ -18,9 +18,7 @@ describe("Binding the API with pageOnLoad and input Widgets", function() {
     cy.enterDatasourceAndPath("https://reqres.in/api/", "users");
     cy.WaitAutoSave();
     cy.get(apiwidget.settings).click({ force: true });
-    cy.get(apiwidget.onPageLoad)
-      .find(".bp3-switch")
-      .click();
+    cy.get(apiwidget.onPageLoad).click({ force: true });
     cy.wait("@setExecuteOnLoad");
     cy.reload();
   });

app/client/cypress/integration/Smoke_TestSuite/Binding/Bind_TableTextPagination_spec.js

@@ -4,18 +4,18 @@ const pages = require("../../../locators/Pages.json");
 const apiPage = require("../../../locators/ApiEditor.json");
 const publishPage = require("../../../locators/publishWidgetspage.json");
 
-describe("Test Create Api and Bind to Table widget", function () {
+describe("Test Create Api and Bind to Table widget", function() {
   before(() => {
     cy.addDsl(dsl);
   });
 
-  it("Test_Add Paginate with Table Page No and Execute the Api", function () {
+  it("Test_Add Paginate with Table Page No and Execute the Api", function() {
     /**Create an Api1 of Paginate with Table Page No */
     cy.createAndFillApi(this.data.paginationUrl, this.data.paginationParam);
     cy.RunAPI();
   });
 
-  it("Table-Text, Validate Server Side Pagination of Paginate with Table Page No", function () {
+  it("Table-Text, Validate Server Side Pagination of Paginate with Table Page No", function() {
     cy.SearchEntityandOpen("Table1");
     /**Bind Api1 with Table widget */
     cy.testJsontext("tabledata", "{{Api1.data.users}}");
@@ -24,7 +24,7 @@ describe("Test Create Api and Bind to Table widget", function () {
     cy.SearchEntityandOpen("Text1");
     cy.testJsontext("text", "{{Table1.selectedRow.url}}");
     cy.SearchEntityandOpen("Table1");
-    cy.readTabledata("0", "0").then(tabData => {
+    cy.readTabledata("0", "0").then((tabData) => {
       const tableData = tabData;
       localStorage.setItem("tableDataPage1", tableData);
     });
@@ -43,7 +43,7 @@ describe("Test Create Api and Bind to Table widget", function () {
     //cy.ValidateTableData("11");
   });
 
-  it("Table-Text, Validate Publish Mode on Server Side Pagination of Paginate with Table Page No", function () {
+  it("Table-Text, Validate Publish Mode on Server Side Pagination of Paginate with Table Page No", function() {
     cy.PublishtheApp();
     cy.ValidatePublishTableData("1");
     cy.get(commonlocators.tableNextPage).click({ force: true });
@@ -57,7 +57,7 @@ describe("Test Create Api and Bind to Table widget", function () {
     cy.get(publishPage.backToEditor).click({ force: true });
   });
 
-  it("Test_Add Paginate with Response URL and Execute the Api", function () {
+  it("Test_Add Paginate with Response URL and Execute the Api", function() {
     /** Create Api2 of Paginate with Response URL*/
     cy.createAndFillApi(this.data.paginationUrl, "users");
     cy.RunAPI();
@@ -79,7 +79,7 @@ describe("Test Create Api and Bind to Table widget", function () {
     cy.callApi("Api2");
   });
 
-  it("Table-Text, Validate Server Side Pagination of Paginate with Response URL", function () {
+  it("Table-Text, Validate Server Side Pagination of Paginate with Response URL", function() {
     /**Validate Response data with Table data in Text Widget */
     cy.ValidatePaginateResponseUrlData(apiPage.apiPaginationPrevTest);
     cy.PublishtheApp();

app/client/cypress/integration/Smoke_TestSuite/Datasources/DatasourceForm_spec.js

@@ -4,7 +4,6 @@ describe("Datasource form related tests", function() {
     cy.CreateAPI("Testapi");
     cy.enterDatasourceAndPath("https://reqres.in/api/", "users");
 
-    cy.get(".t--store-as-datasource-menu").click();
     cy.get(".t--store-as-datasource").click();
 
     cy.get(".t--form-control-KEY_VAL_INPUT .t--add-field").click();

app/client/cypress/integration/Smoke_TestSuite/Datasources/RestApiDatasource_spec.js

@@ -4,7 +4,6 @@ describe("Create a rest datasource", function() {
     cy.CreateAPI("Testapi");
     cy.enterDatasourceAndPath("https://reqres.in/api/", "users");
 
-    cy.get(".t--store-as-datasource-menu").click();
     cy.get(".t--store-as-datasource").click();
 
     cy.saveDatasource();

app/client/cypress/locators/ApiEditor.json

@@ -6,19 +6,21 @@
     "nameOfApi": ".t--nameOfApi",
     "ApiNameField": ".t--action-name-edit-field",
     "addToPageBtn": ".t--addToPageBtn",
+    "ApiActionMenu": ".t--more-action-menu",
     "ApiDeleteBtn": ".t--apiFormDeleteBtn",
     "ApiRunBtn": ".t--apiFormRunBtn",
     "addToPageBtnsId": ".t--addToPageButtons",
     "ApiHomePage": ".t--apiHomePage",
     "formActionButtons": ".t--formActionButtons",
     "dataSourceField": ".t--dataSourceField",
     "responseBody": ".CodeMirror-code  span.cm-string.cm-property",
-    "ApiVerb": ".t--apiFormHttpMethod input",
+    "ApiVerb": ".t--apiFormHttpMethod",
     "apiPaginationNextText": ".t--apiFormPaginationNext",
     "apiPaginationPrevText": ".t--apiFormPaginationPrev",
     "apiPaginationPrevTest": ".t--apiFormPaginationPrevTest",
     "apiPaginationNextTest": ".t--apiFormPaginationNextTest",
     "apiPaginationTab": ".t--apiFormPaginationType",
     "apiTab": ".react-tabs__tab-list li",
-    "bodyType": ".t--apiFormPostBodyType"
+    "bodyType": ".t--apiFormPostBodyType",
+    "bodyTab": "Body"
 }

app/client/cypress/locators/HomePage.json

@@ -26,9 +26,9 @@
     "inviteUserMembersPage": "[data-cy=t--invite-users]",
     "email": "//input[@type='email']",
     "selectRole": "//span[text()='Select a role']",
-    "adminRole": "//div[@class='label-title']//span[text()='Administrator']",
-    "viewerRole": "//div[@class='label-title']//span[text()='App Viewer']",
-    "developerRole": "//div[@class='label-title']//span[text()='Developer']", 
+    "adminRole": "//div[contains(@class, 'label-container')]//span[1][text()='Administrator']",
+    "viewerRole": "//div[contains(@class, 'label-container')]//span[1][text()='App Viewer']",
+    "developerRole": "//div[contains(@class, 'label-container')]//span[1][text()='Developer']", 
     "inviteBtn": "//button[text()='Invite']",
     "manageUsers": ".manageUsers",
     "DeleteBtn": "[data-cy=t--deleteUser]",

app/client/cypress/locators/apiWidgetslocator.json

@@ -1,5 +1,6 @@
 {
   "resourceUrl": ".t--dataSourceField",
+  "searchInputPlaceholder": "//div[contains(@class, 't--dataSourceField')]//div//input",
   "searchApi": ".t--sidebar input[type=text]",
   "createapi": ".t--createBlankApiCard",
   "apiTxt": ".t--action-name-edit-field input",
@@ -29,21 +30,21 @@
   "paginationTab": "li:contains('Pagination')",
   "apiInputTab": "li:contains('API Input')",
   "paginationOption": ".t--apiFormPaginationType div>input",
-  "paginationWithTable": "//div[contains(@id,'react') and contains(text(),'Paginate with Table Page No')] ",
-  "paginationWithUrl": "//div[contains(@id,'react') and contains(text(),'Paginate with Response Url')]",
+  "paginationWithTable": "//label[contains(text(),'Paginate with Table Page No')] ",
+  "paginationWithUrl": "//label[contains(text(),'Paginate with Response Url')]",
   "panigationNextUrl": ".t--apiFormPaginationNext div>textarea",
   "panigationPrevUrl": ".t--apiFormPaginationPrev div>textarea",
   "TestNextUrl": ".t--apiFormPaginationNextTest",
   "TestPreUrl": ".t--apiFormPaginationPrevTest",
   "EditApiName": "img[alt='Edit pen']",
   "ApiName": ".t--action-name-edit-field span",
-  "Request": "//li[text()='Request']",
+  "Request": "//li//span[text()='Request']",
   "RequestURL": "(//span[@class='bp3-tree-node-label']/span)[1]",
   "RequestMethod": "(//span[@class='bp3-tree-node-label']/span)[2]",
   "content-Type": "(//span[@class='bp3-tree-node-label']/span)[3]",
   "requestBody": "(//div[contains(@class,'bp3-collapse-body')]//textarea)[1]",
   "showrequest": "span:contains('Show Request')",
-  "Responsetab": "//li[text()='Response Body']",
+  "Responsetab": "//li//span[text()='Response Body']",
   "deleteAPI": ".t--apiFormDeleteBtn",
   "editName": ".single-select >div:contains('Edit Name')",
   "page": ".single-select >div",

app/client/cypress/manual_TestSuite/API_Datasource_Spec.js

@@ -1,60 +1,47 @@
 const commonlocators = require("../../../locators/commonlocators.json");
 
 describe("API associated with Datasource", function() {
-    it("Edit name of the Datasource from Pane and refeclected in the Page ", function() 
-    {
-        // Click on the API datasource 
-        // Click on Action icon (Three Dots)
-        // Click on "Edit Name"
-        // Rename the Datasource
-        // Click on the datasource
-        // Ensure the name is updated on the Page 
-    }
-    )
-    it("Edit name of the Datasource from Page and refeclected in the Pane", function() 
-    {
-        // Click on the API datasource 
-        // Navigate to respective 
-        // Click on "Edit " option next to the Name of the datasource
-        // Rename the Datasource
-        // Ensure the name is updated in the Pane 
-    }
-    )
-    it("Edit the API Datasource", function() 
-    {
-        // Click on the API datasource 
-        // Ensure navigation to respective page
-        // Click on "EDIT"
-        // Make some changes 
-        // Click on Test 
-        // Click on Save
-        // Ensure it is refelected in the API 
-    }
-    )
-    it("Error on trying to Deleting an API Datasource when associated with API  ", function() 
-    {
-        // Click on API associated Datasource
-        // Navigate to respective page 
-        // Click on "Delete"
-        // Ensure an error message is displayed to user
-    }
-    )
-    it("Adding the API to an exsisting Datasource", function() 
-    {
-        // Click on exsisting Datasource
-        // Navigate to Datasource list page 
-        // Click on "+ New API"
-        // Ensure new API is added in the RHS Pane
-        // Click on "Run"
-    }
-    )
-    it("Refresh an Datasource  ", function() 
-    {
-        // Navigate to the Datasource
-        // Click on Action icon (Three Dots)
-        // Click on "Refresh"
-        // Ensure loading icon 
-    }
-    )
-}
-)
+  it("Edit name of the Datasource from Pane and refeclected in the Page ", function() {
+    // Click on the API datasource
+    // Click on Action icon (Three Dots)
+    // Click on "Edit Name"
+    // Rename the Datasource
+    // Click on the datasource
+    // Ensure the name is updated on the Page
+  });
+  it("Edit name of the Datasource from Page and refeclected in the Pane", function() {
+    // Click on the API datasource
+    // Navigate to respective
+    // Click on "Edit " option next to the Name of the datasource
+    // Rename the Datasource
+    // Ensure the name is updated in the Pane
+  });
+  it("Edit the API Datasource", function() {
+    // Click on the API datasource
+    // Ensure navigation to respective page
+    // Click on "EDIT"
+    // Make some changes
+    // Click on Test
+    // Click on Save
+    // Ensure it is refelected in the API
+  });
+  it("Error on trying to Deleting an API Datasource when associated with API  ", function() {
+    // Click on API associated Datasource
+    // Navigate to respective page
+    // Click on "Delete"
+    // Ensure an error message is displayed to user
+  });
+  it("Adding the API to an exsisting Datasource", function() {
+    // Click on exsisting Datasource
+    // Navigate to Datasource list page
+    // Click on "+ New API"
+    // Ensure new API is added in the RHS Pane
+    // Click on "Run"
+  });
+  it("Refresh an Datasource  ", function() {
+    // Navigate to the Datasource
+    // Click on Action icon (Three Dots)
+    // Click on "Refresh"
+    // Ensure loading icon
+  });
+});