Org name, email and website update test cases implemented (#1433)

app/client/cypress/integration/Smoke_TestSuite/OrganisationTests/UpdateOrgTests_spec.js

@@ -0,0 +1,71 @@
+const homePage = require("../../../locators/HomePage.json");
+
+describe("Update Organization", function() {
+  let orgid;
+
+  it("Open the org general settings and update org name. The update should reflect in the org. It should also reflect in the org names on the left side and the org dropdown.	", function() {
+    cy.NavigateToHome();
+    cy.generateUUID().then(uid => {
+      orgid = uid;
+      localStorage.setItem("OrgName", orgid);
+      cy.createOrg(orgid);
+      cy.get(homePage.orgList.concat(orgid).concat(")"))
+        .scrollIntoView()
+        .should("be.visible")
+        .within(() => {
+          cy.get(".t--org-name")
+            .first()
+            .click();
+        });
+      cy.get(homePage.orgSettingOption).click();
+    });
+    cy.generateUUID().then(uid => {
+      orgid = uid;
+      localStorage.setItem("OrgName", orgid);
+      cy.get(homePage.orgNameInput).clear();
+      cy.get(homePage.orgNameInput).type(orgid);
+      cy.wait(2000);
+      cy.get(homePage.orgHeaderName).should("have.text", orgid);
+    });
+    cy.NavigateToHome();
+    cy.get(homePage.leftPanelContainer).within(() => {
+      cy.get("span").should(item => {
+        expect(item).to.contain.text(orgid);
+      });
+    });
+  });
+
+  it("Open the org general settings and update org email. The update should reflect in the org.", function() {
+    cy.get(homePage.orgList.concat(orgid).concat(")"))
+      .scrollIntoView()
+      .should("be.visible")
+      .within(() => {
+        cy.get(".t--org-name")
+          .first()
+          .click();
+      });
+    cy.get(homePage.orgSettingOption).click();
+    cy.get(homePage.orgEmailInput).clear();
+    cy.get(homePage.orgEmailInput).type(Cypress.env("TESTUSERNAME2"));
+    cy.wait("@updateOrganization").should(
+      "have.nested.property",
+      "response.body.responseMeta.status",
+      200,
+    );
+    cy.get(homePage.orgEmailInput).should(
+      "have.value",
+      Cypress.env("TESTUSERNAME2"),
+    );
+  });
+
+  it("Open the org general settings and update org website. The update should reflect in the org.", function() {
+    cy.get(homePage.orgWebsiteInput).clear();
+    cy.get(homePage.orgWebsiteInput).type("demowebsite");
+    cy.wait("@updateOrganization").should(
+      "have.nested.property",
+      "response.body.responseMeta.status",
+      200,
+    );
+    cy.get(homePage.orgWebsiteInput).should("have.value", "demowebsite");
+  });
+});

app/client/cypress/locators/HomePage.json

@@ -50,5 +50,11 @@
     "applicationName": ".t--application-name",
     "profileMenu": ".bp3-popover-wrapper.profile-menu",
     "signOutIcon": ".t--logout-icon",
-    "headerAppSmithLogo": ".t--Appsmith-logo-image"
-} 
+    "headerAppSmithLogo": ".t--Appsmith-logo-image",
+    "orgSettingOption": "[data-cy=t--org-setting]",
+    "orgNameInput": "[data-cy=t--org-name-input]",
+    "orgEmailInput": "[data-cy=t--org-email-input]",
+    "orgWebsiteInput": "[data-cy=t--org-website-input]",
+    "orgHeaderName": ".t--organization-header",
+    "leftPanelContainer": "[data-cy=t--left-panel]"
+}

app/client/cypress/support/commands.js

@@ -1654,6 +1654,8 @@ Cypress.Commands.add("startServerAndRoutes", () => {
   cy.route("POST", "/api/v1/pages").as("createPage");
   cy.route("POST", "/api/v1/pages/clone/*").as("clonePage");
   cy.route("PUT", "/api/v1/applications/*/changeAccess").as("changeAccess");
+
+  cy.route("PUT", "/api/v1/organizations/*").as("updateOrganization");
 });
 
 Cypress.Commands.add("alertValidate", text => {

app/client/src/components/ads/TextInput.tsx

@@ -175,7 +175,7 @@ const TextInput = forwardRef(
     );
 
     return (
-      <InputWrapper data-cy={props.cypressSelector}>
+      <InputWrapper>
         <StyledInput
           type="text"
           ref={ref}
@@ -186,6 +186,7 @@ const TextInput = forwardRef(
           placeholder={props.placeholder}
           onChange={memoizedChangeHandler}
           readOnly={props.readOnly}
+          data-cy={props.cypressSelector}
         />
         {ErrorMessage}
       </InputWrapper>

app/client/src/pages/Applications/index.tsx

@@ -334,7 +334,7 @@ function LeftPane() {
         heading="ORGANIZATIONS"
         isFetchingApplications={isFetchingApplications}
       >
-        <WorkpsacesNavigator>
+        <WorkpsacesNavigator data-cy="t--left-panel">
           <FormDialogComponent
             trigger={NewWorkspaceTrigger}
             Form={CreateOrganizationForm}
@@ -487,6 +487,7 @@ const ApplicationsSection = (props: any) => {
         <MenuItem
           icon="general"
           text="Organization Settings"
+          cypressSelector="t--org-setting"
           onSelect={() =>
             getOnSelectAction(DropdownOnSelectActions.REDIRECT, {
               path: `/org/${orgId}/settings/general`,

app/client/src/pages/organization/General.tsx

@@ -86,6 +86,7 @@ export function GeneralSettings() {
             placeholder="Workspace name"
             onChange={onWorkspaceNameChange}
             defaultValue={currentOrg.name}
+            cypressSelector="t--org-name-input"
           ></TextInput>
         )}
       </SettingWrapper>
@@ -100,6 +101,7 @@ export function GeneralSettings() {
             placeholder="Your website"
             onChange={onWebsiteChange}
             defaultValue={currentOrg.website || ""}
+            cypressSelector="t--org-website-input"
           ></TextInput>
         )}
       </SettingWrapper>
@@ -115,6 +117,7 @@ export function GeneralSettings() {
             placeholder="Email"
             onChange={onEmailChange}
             defaultValue={currentOrg.email || ""}
+            cypressSelector="t--org-email-input"
           ></TextInput>
         )}
       </SettingWrapper>

app/client/src/pages/organization/settings.tsx

@@ -81,7 +81,9 @@ export default function Settings() {
     <SettingsWrapper>
       <LinkToApplications to={"/applications"}>
         <IconComponent iconName="chevron-left" color="#9F9F9F"></IconComponent>
-        <Text type={TextType.H1}>{currentOrg.name}</Text>
+        <Text type={TextType.H1} className="t--organization-header">
+          {currentOrg.name}
+        </Text>
       </LinkToApplications>
       <TabComponent
         tabs={tabArr}