terminal tests

apps/remixdesktop/test/tests/app/xterm.test.ts

@@ -28,5 +28,103 @@ module.exports = {
                 return actions.sendKeys('mv example.txt newExample.txt').sendKeys(this.Keys.ENTER)
             })
             .waitForElementVisible('*[data-id="treeViewLitreeViewItemnewExample.txt"]', 10000)
-    }
+    },
+    'create a file and delete it': function (browser: NightwatchBrowser) {
+        browser
+            .perform(function () {
+                const actions = this.actions({ async: true })
+                return actions.sendKeys('touch newExample2.txt').sendKeys(this.Keys.ENTER)
+            })
+            .waitForElementVisible('*[data-id="treeViewLitreeViewItemnewExample2.txt"]', 10000)
+            .perform(function () {
+                const actions = this.actions({ async: true })
+                return actions.sendKeys('rm newExample2.txt').sendKeys(this.Keys.ENTER)
+            })
+            .waitForElementNotPresent('*[data-id="treeViewLitreeViewItemnewExample2.txt"]', 10000)
+    },
+    'run a git clone command': function (browser: NightwatchBrowser) {
+        browser
+            .perform(function () {
+                const actions = this.actions({ async: true })
+                return actions.sendKeys('git clone https://github.com/ethereum/awesome-remix').sendKeys(this.Keys.ENTER)
+            }
+            )
+            .waitForElementVisible('*[data-id="treeViewLitreeViewItemawesome-remix"]', 10000)
+            .click('*[data-id="treeViewLitreeViewItemawesome-remix"]')
+            .waitForElementVisible('*[data-id="treeViewLitreeViewItemawesome-remix/README.md"]', 10000)
+    },
+    'remove the cloned repo': function (browser: NightwatchBrowser) {
+        browser
+            .waitForElementVisible('*[data-type="remixUIXT"]', 10000)
+            .click('*[data-type="remixUIXT"]')
+            .perform(function () {
+                const actions = this.actions({ async: true })
+                return actions.sendKeys('rm -rf awesome-remix').sendKeys(this.Keys.ENTER)
+            }
+            )
+            .waitForElementNotPresent('*[data-id="treeViewLitreeViewItemawesome-remix"]', 10000)
+    },
+    'list files': function (browser: NightwatchBrowser) {
+        browser
+            .perform(function () {
+                const actions = this.actions({ async: true })
+                return actions.sendKeys('ls').sendKeys(this.Keys.ENTER)
+            })
+            .waitForElementVisible({
+                selector: "//*[@data-type='remixUIXT' and @data-active='1']",
+                timeout: 10000,
+                locateStrategy: 'xpath'
+            })
+            .getText({
+                selector: "//*[@data-type='remixUIXT' and @data-active='1']",
+                timeout: 10000,
+                locateStrategy: 'xpath'
+            }, function (result) {
+                console.log('Text content of the element:', result.value);
+                browser.assert.ok((result.value as string).includes('newExample.txt'))
+            })
+    },
+    'switch to a new terminal': function (browser: NightwatchBrowser) {
+        browser
+            .waitForElementVisible('*[data-id="createTerminalButton"]', 10000)
+            .click('*[data-id="createTerminalButton"]')
+            .elements('css selector', '[data-type="remixUIXTSideButton"]', function (result) {
+                browser.assert.ok((result.value as any).length === 2)
+            })
+            .getText({
+                selector: "//*[@data-type='remixUIXT' and @data-active='1']",
+                timeout: 10000,
+                locateStrategy: 'xpath'
+            }, function (result) {
+                console.log('Text content of the element:', result.value);
+                browser.assert.ok(!(result.value as string).includes('newExample.txt'))
+            })
+    },
+    'switch back to the first terminal': function (browser: NightwatchBrowser) {
+        browser
+            .elements('css selector', '[data-type="remixUIXTSideButton"]', function (result) {
+                browser.elementIdClick(((Object.values((result.value as any)[0]))[0] as any))
+            })
+            .getText({
+                selector: "//*[@data-type='remixUIXT' and @data-active='1']",
+                timeout: 10000,
+                locateStrategy: 'xpath'
+            }, function (result) {
+                console.log('Text content of the element:', result.value);
+                browser.assert.ok((result.value as string).includes('newExample.txt'))
+            })
+    },
+    'clear the terminal': function (browser: NightwatchBrowser) {
+        browser
+        .waitForElementVisible('*[data-id="clearTerminalButton"]', 10000)
+        .click('*[data-id="clearTerminalButton"]')
+        .getText({
+            selector: "//*[@data-type='remixUIXT' and @data-active='1']",
+            timeout: 10000,
+            locateStrategy: 'xpath'
+        }, function (result) {
+            console.log('Text content of the element:', result.value);
+            browser.assert.ok(!(result.value as string).includes('newExample.txt'))
+        })
+    }  
 }

libs/remix-ui/xterm/src/lib/components/remix-ui-terminal-menu-xterm.tsx

@@ -27,7 +27,7 @@ export const RemixUIXtermMenu = (props: RemixUiTerminalProps) => {
 
   return (<>
     <div className={`d-flex flex-row align-items-center ${xtermState.showOutput ? 'd-none' : ''}`}>
-      <div className="mx-2" onClick={async () => onCreateTerminal()}>
+      <div data-id="createTerminalButton" className="mx-2" onClick={async () => onCreateTerminal()}>
         <CustomTooltip tooltipText={<FormattedMessage id='xterm.new' defaultMessage='New terminal' />}>
           <i className="fas fa-plus border-0 p-0 m-0"></i>
         </CustomTooltip>
@@ -44,12 +44,12 @@ export const RemixUIXtermMenu = (props: RemixUiTerminalProps) => {
           </Dropdown>
         </CustomTooltip>
       </div>
-      <div className="mx-2" onClick={onCloseTerminal}>
+      <div data-id="closeTerminalButton" className="mx-2" onClick={onCloseTerminal}>
         <CustomTooltip tooltipText={<FormattedMessage id='xterm.close' defaultMessage='Close terminal' />}>
           <i className="far fa-trash border-0 ml-1"></i>
         </CustomTooltip>
       </div>
-      <div className="mx-2" onClick={async () => onClearTerminal()}>
+      <div data-id="clearTerminalButton" className="mx-2" onClick={async () => onClearTerminal()}>
         <CustomTooltip tooltipText={<FormattedMessage id='xterm.clear' defaultMessage='Clear Terminal' />}>
           <i className="fas fa-ban border-0 p-0 m-0"></i>
         </CustomTooltip>

libs/remix-ui/xterm/src/lib/components/remix-ui-xterminals.tsx

@@ -146,7 +146,7 @@ export const RemixUiXterminals = (props: RemixUiXterminalsProps) => {
         { <div className={`flex-row w-100 h-100 ${xtermState.showOutput ? 'h-0 d-none' : 'h-100 d-flex'}`}>
           {terminals.map((xtermState) => {
             return (
-              <div className={`h-100 w-100 ${xtermState.hidden ? 'd-none' : 'd-block'}`} key={xtermState.pid} data-type="remixUIXT" data-id={`remixUIXT${xtermState.pid}`}>
+              <div className={`h-100 w-100 ${xtermState.hidden ? 'd-none' : 'd-block'}`} data-active={`${xtermState.hidden ? '0' : '1'}`} key={xtermState.pid} data-type="remixUIXT" data-id={`remixUIXT${xtermState.pid}`}>
                 <RemixUiXterm
                   theme={theme}
                   setTerminalRef={setTerminalRef}
@@ -164,6 +164,8 @@ export const RemixUiXterminals = (props: RemixUiXterminalsProps) => {
               return (<button
                 key={index}
                 onClick={async () => selectTerminal(xtermState)}
+                data-type="remixUIXTSideButton"
+                data-id={`remixUIXTSideButton${xtermState.pid}`}
                 className={`btn btn-sm m-1 p-1 px-2 ${xtermState.hidden ? 'border border-secondary' : 'btn-secondary'}`}
               >
                 <span className="fa fa-terminal border-0 p-0 m-0"></span>