add test

apps/remix-ide-e2e/src/tests/dgit_github.test.ts

@@ -310,4 +310,66 @@ module.exports = {
                 }
             })
     },
+    // pagination test
+    'clone repo #group3': function (browser: NightwatchBrowser) {
+        browser.
+            clickLaunchIcon('dgit')
+            .waitForElementVisible('*[data-id="clone-url"]')
+            .setValue('*[data-id="clone-url"]', 'https://github.com/ethereum/awesome-remix')
+            .waitForElementVisible('*[data-id="clone-branch"]')
+            .setValue('*[data-id="clone-branch"]', 'master')
+            .waitForElementVisible('*[data-id="clone-btn"]')
+            .click('*[data-id="clone-btn"]')
+            .clickLaunchIcon('filePanel')
+            .waitForElementVisible('*[data-id="treeViewLitreeViewItemREADME.md"]')
+    },
+    'Update settings for git #group3': function (browser: NightwatchBrowser) {
+        browser.
+            clickLaunchIcon('dgit')
+            .setValue('*[data-id="githubToken"]', 'invalidtoken')
+            .setValue('*[data-id="gitubUsername"]', 'git')
+            .setValue('*[data-id="githubEmail"]', 'git@example.com')
+            .click('*[data-id="saveGitHubCredentials"]')
+            .modalFooterOKClick('github-credentials-error')
+    },
+    'check the commits panel for pagination #group3': function (browser: NightwatchBrowser) {
+        browser
+            .waitForElementVisible('*[data-id="commits-panel"]')
+            .click('*[data-id="commits-panel"]')
+            .elements('xpath', '//*[@data-id="commits-current-branch-master"]//*[@data-type="commit-summary"]', function (result) {
+                console.log('Number of commit-summary elements:', (result.value as any).length);
+                browser.assert.ok((result.value as any).length == 1)
+            })
+    },
+    'load more commits #group3': function (browser: NightwatchBrowser) {
+        browser
+            .waitForElementVisible('*[data-id="load-more-commits"]')
+            .click('*[data-id="load-more-commits"]')
+            .waitForElementVisible('*[data-id="loader-indicator"]')
+            .waitForElementNotPresent('*[data-id="loader-indicator"]')
+            .elements('xpath', '//*[@data-id="commits-current-branch-master"]//*[@data-type="commit-summary"]', function (result) {
+                console.log('Number of commit-summary elements:', (result.value as any).length);
+                browser.assert.ok((result.value as any).length > 2)
+            })
+    },
+    'load more branches from remote #group3': function (browser: NightwatchBrowser) {
+        browser
+            .click('*[data-id="branches-panel"]')
+            .waitForElementVisible({
+                selector: '//*[@data-id="branches-panel-content-remote-branches"]',
+                locateStrategy: 'xpath'
+            })
+            .elements('xpath', '//*[@data-id="branches-panel-content-remote-branches"]//*[@data-type="branches-branch"]', function (result) {
+                console.log('Number of branches elements:', (result.value as any).length);
+                browser.assert.ok((result.value as any).length == 1)
+            })
+            .waitForElementVisible('*[data-id="remote-sync-origin"]')
+            .click('*[data-id="remote-sync-origin"]')
+            .waitForElementVisible('*[data-id="loader-indicator"]')
+            .waitForElementNotPresent('*[data-id="loader-indicator"]')
+            .elements('xpath', '//*[@data-id="branches-panel-content-remote-branches"]//*[@data-type="branches-branch"]', function (result) {
+                console.log('Number of branches elements:', (result.value as any).length);
+                browser.assert.ok((result.value as any).length > 2)
+            })
+    }
 }

libs/remix-ui/git/src/components/navigation/branchedetails.tsx

@@ -64,7 +64,7 @@ export const BrancheDetailsNavigation = (props: BrancheDetailsNavigationProps) =
   return (
     <>
       <div className="d-flex flex-row w-100 mb-2 mt-2">
-        <div data-id={`branches-${context.currentBranch.name === branch.name ? 'current-' : ''}branch-${branch.name}`} onClick={() => handleClick()} role={'button'} className='pointer d-flex flex-row w-100 commit-navigation'>
+        <div data-type='branches-branch' data-id={`branches-${context.currentBranch.name === branch.name ? 'current-' : ''}branch-${branch.name}`} onClick={() => handleClick()} role={'button'} className='pointer d-flex flex-row w-100 commit-navigation'>
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }

libs/remix-ui/git/src/components/navigation/loaderindicator.tsx

@@ -13,7 +13,7 @@ const LoaderIndicator = ({ type, isLoadingCondition }: LoaderIndicatorProps) =>
   const isLoading = loading || isLoadingCondition
   if (!isLoading) return null
   return (
-    <i style={{ fontSize: 'x-small' }} className="ml-1 fas fa-spinner fa-spin fa-4x"></i>
+    <i data-id='loader-indicator' style={{ fontSize: 'x-small' }} className="ml-1 fas fa-spinner fa-spin fa-4x"></i>
   );
 };
 

libs/remix-ui/git/src/components/panels/branches/localbranchdetails.tsx

@@ -81,7 +81,7 @@ export const LocalBranchDetails = (props: BrancheDetailsProps) => {
             })}
           </div>
         </div>
-        {hasNextPage && <GitUIButton className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
+        {hasNextPage && <GitUIButton data-id='load-more-local-branches' className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
       </>
     </Accordion.Collapse>
   </Accordion>)

libs/remix-ui/git/src/components/panels/branches/remotebranchedetails.tsx

@@ -107,7 +107,7 @@ export const RemoteBranchDetails = (props: BrancheDetailsProps) => {
           })}
 
         </div>
-        {hasNextPage && <GitUIButton className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
+        {hasNextPage && <GitUIButton data-id='load-more-remote-branches' className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
       </>
     </Accordion.Collapse>
   </Accordion>)

libs/remix-ui/git/src/components/panels/clone.tsx

@@ -78,7 +78,7 @@ export const Clone = (props: CloneProps) => {
           <FormControl data-id="clone-url" id="cloneulr" placeholder="url" name='cloneurl' value={cloneUrl} onChange={e => onGitHubCloneUrlChange(e.target.value)} aria-describedby="urlprepend" />
         </InputGroup>
 
-        <input name='clonebranch' onChange={e => onCloneBranchChange(e.target.value)} value={cloneBranch} className="form-control mb-2 mt-2" placeholder="branch" type="text" id="clonebranch" />
+        <input name='clonebranch' data-id="clone-branch" onChange={e => onCloneBranchChange(e.target.value)} value={cloneBranch} className="form-control mb-2 mt-2" placeholder="branch" type="text" id="clonebranch" />
         <GitUIButton disabledCondition={!cloneUrl} data-id='clone-btn' className='btn btn-primary mt-1 w-100' onClick={async () => {
           clone()
         }}>clone</GitUIButton>

libs/remix-ui/git/src/components/panels/commits.tsx

@@ -57,7 +57,7 @@ export const Commits = () => {
             })}
           </div>
         </div>
-        {hasNextPage && <GitUIButton disabledCondition={fetchIsDisabled()} className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
+        {hasNextPage && <GitUIButton data-id='load-more-commits' disabledCondition={fetchIsDisabled()} className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
         </>
         : <div className="text-muted">No commits</div>}
     </>

libs/remix-ui/git/src/components/panels/commits/commitsummary.tsx

@@ -61,7 +61,7 @@ export const CommitSummary = (props: CommitSummaryProps) => {
 
   return (
     <>
-      <div data-id={`commit-summary-${removeLineBreaks(commit.commit.message)}-${isAheadOfRepo ? 'ahead' : ''}`} className="long-and-truncated ml-2">
+      <div data-type='commit-summary' data-id={`commit-summary-${removeLineBreaks(commit.commit.message)}-${isAheadOfRepo ? 'ahead' : ''}`} className="long-and-truncated ml-2">
         {commit.commit.message}
       </div>
       {commit.commit.author.name || ""}