test: Fix failing git sync tests (#12488)

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/GitSync/Connection_spec.js

@@ -202,14 +202,20 @@ describe("Git sync modal: connect tab", function() {
 
   it("validates submit errors", function() {
     cy.get(gitSyncLocators.useGlobalGitConfig).click();
-    cy.get(gitSyncLocators.gitConfigNameInput).type(`{selectAll}${owner}`);
+    cy.get(gitSyncLocators.gitConfigNameInput)
+      .scrollIntoView()
+      .type(`{selectAll}${owner}`);
     cy.get(gitSyncLocators.gitConfigEmailInput).type(
       `{selectAll}${Cypress.env("USERNAME")}`,
     );
-
+    cy.wait(200);
+    cy.get(gitSyncLocators.gitConnectionContainer)
+      .scrollTo("top")
+      .should("be.visible");
     cy.get(gitSyncLocators.gitRepoInput)
       .click({ force: true })
       .type(`{selectAll}${invalidURLDetectedOnTheBackend}`);
+    cy.get(gitSyncLocators.connectSubmitBtn).scrollIntoView();
     cy.get(gitSyncLocators.connectSubmitBtn).click();
     cy.wait("@connectGitRepo").then((interception) => {
       const status = interception.response.body.responseMeta.status;
@@ -217,13 +223,14 @@ describe("Git sync modal: connect tab", function() {
       // todo check for error msg based on the context
     });
 
-    cy.get(gitSyncLocators.gitRepoInput).type(
+    cy.get(gitSyncLocators.gitRepoInput)
-      `{selectAll}git@github.com:${owner}-test/${repoName}.git`,
+      .scrollIntoView()
-      {
+      .type(`{selectAll}git@github.com:${owner}-test/${repoName}.git`, {
         force: true,
-      },
+      });
-    );
+    cy.get(gitSyncLocators.connectSubmitBtn)
-    cy.get(gitSyncLocators.connectSubmitBtn).click();
+      .scrollIntoView()
+      .click();
     cy.get(gitSyncLocators.connetStatusbar).should("exist");
     cy.wait("@connectGitRepo").then((interception) => {
       const status = interception.response.body.responseMeta.status;
@@ -231,12 +238,11 @@ describe("Git sync modal: connect tab", function() {
       // todo check for error msg based on the context
     });
 
-    cy.get(gitSyncLocators.gitRepoInput).type(
+    cy.get(gitSyncLocators.gitRepoInput)
-      `{selectAll}git@github.com:${owner}/${repoName}.git`,
+      .scrollIntoView()
-      {
+      .type(`{selectAll}git@github.com:${owner}/${repoName}.git`, {
         force: true,
-      },
+      });
-    );
 
     cy.request({
       method: "POST",
@@ -253,7 +259,9 @@ describe("Git sync modal: connect tab", function() {
       },
     });
 
-    cy.get(gitSyncLocators.connectSubmitBtn).click();
+    cy.get(gitSyncLocators.connectSubmitBtn)
+      .scrollIntoView()
+      .click();
     cy.get(gitSyncLocators.connetStatusbar).should("exist");
     cy.wait("@connectGitRepo").then((interception) => {
       const status = interception.response.body.responseMeta.status;

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/GitSync/RepoLimitExceededErrorModal_spec.js

@@ -3,6 +3,9 @@ import gitSyncLocators from "../../../../locators/gitSyncLocators";
 let repoName1, repoName2, repoName3, repoName4, windowOpenSpy;
 describe("Repo Limit Exceeded Error Modal", function() {
   before(() => {
+    cy.generateUUID().then((uid) => {
+      cy.Signup(`${uid}@appsmithtest.com`, uid);
+    });
     const uuid = require("uuid");
     repoName1 = uuid.v4().split("-")[0];
     repoName2 = uuid.v4().split("-")[0];
@@ -50,6 +53,10 @@ describe("Repo Limit Exceeded Error Modal", function() {
     cy.get(gitSyncLocators.repoLimitExceededErrorModal).should("not.exist");
     cy.get(gitSyncLocators.disconnectGitModal).should("exist");
 
+    cy.get(gitSyncLocators.closeRevokeModal).click();
+    cy.get(gitSyncLocators.repoLimitExceededErrorModal).should("not.exist");
+  });
+  after(() => {
     cy.request({
       method: "DELETE",
       url: "api/v1/applications/" + repoName1,

app/client/cypress/locators/gitSyncLocators.js

@@ -14,6 +14,7 @@ export default {
   branchSearchInput: ".t--branch-search-input",
   branchListItem: ".t--branch-item",
   closeGitSyncModal: ".t--close-git-sync-modal",
+  closeRevokeModal: ".t--close-disconnect-modal",
   gitSyncModal: ".git-sync-modal",
   bottomBarCommitButton: ".t--bottom-bar-commit",
   bottomBarMergeButton: ".t--bottom-bar-merge",
@@ -46,4 +47,6 @@ export default {
   learnMoreOnRepoLimitModal: ".t--learn-more-repo-limit-modal",
   gitSyncModalDeployTab: "[data-cy=t--tab-DEPLOY]",
   gitPullCount: ".t--bottom-bar-pull .count",
+  gitConnectionContainer: "[data-test=t--git-connection-container]",
+  gitRemoteURLContainer: "[data-test=t--remote-url-container]",
 };

app/client/src/pages/Editor/gitSync/Tabs/GitConnection.tsx

@@ -122,7 +122,7 @@ const RemoteUrlInfoWrapper = styled.div`
 const Section = styled.div``;
 
 const StickyMenuWrapper = styled.div`
-  position: sticky;
+  position: static;
   top: 0px;
   height: fit-content;
   z-index: 9999;
@@ -393,7 +393,7 @@ function GitConnection({ isImport }: Props) {
   }, []);
 
   return (
-    <Container ref={scrollWrapperRef}>
+    <Container data-test="t--git-connection-container" ref={scrollWrapperRef}>
       <Section>
         <StickyMenuWrapper>
           <Title>
@@ -403,7 +403,7 @@ function GitConnection({ isImport }: Props) {
           </Title>
           <Subtitle>{createMessage(CONNECT_TO_GIT_SUBTITLE)}</Subtitle>
         </StickyMenuWrapper>
-        <UrlOptionContainer>
+        <UrlOptionContainer data-test="t--remote-url-container">
           <Text color={Colors.GREY_9} type={TextType.P1}>
             {createMessage(REMOTE_URL)}
           </Text>