context menu tests

apps/remix-ide-e2e/src/commands/enableClipBoard.ts

@@ -8,11 +8,23 @@ class EnableClipBoard extends EventEmitter {
       const chromeBrowser = (browser as any).chrome
       chromeBrowser.setPermission('clipboard-read', 'granted')
       chromeBrowser.setPermission('clipboard-write', 'granted')
-    }
-    if(browser.isFirefox()){
-      const firefoxBrowser = (browser as any).firefox
-      console.log('ff', firefoxBrowser)
-      //firefoxBrowser.setPreference('devtools.inspector.clipboardSource.allowedOrigins', 'http://localhost:8080')
+      // test it
+      browser.executeAsyncScript(function (done) {
+        navigator.clipboard.writeText('test').then(function () {
+          navigator.clipboard.readText().then(function (text) {
+            console.log('Pasted content: ', text)
+            done(text)
+          }).catch(function (err) {
+            console.error('Failed to read clipboard contents: ', err)
+            done()
+          })
+        }).catch(function (err) {
+          console.error('Failed to write to clipboard: ', err)
+          done()
+        })
+      }, [], function (result) {
+        browser.assert.ok((result as any).value === 'test', 'copy paste should work')
+      })
     }
     this.emit('complete')
     return this

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

@@ -1,50 +0,0 @@
-'use strict'
-import { NightwatchBrowser } from 'nightwatch'
-import init from '../helpers/init'
-
-module.exports = {
-  '@disabled': true,
-  before: function (browser: NightwatchBrowser, done: VoidFunction) {
-    init(browser, done)
-  },
-  'Should copy paste text with JS chrome only #flaky #group1': function (browser: NightwatchBrowser) {
-    const textToCopyPaste = 'text to copy paste'
-    if (browser.isChrome()) {
-      browser.executeAsyncScript(function (txt, done) {
-        navigator.clipboard.writeText(txt).then(function () {
-          navigator.clipboard.readText().then(function (text) {
-            console.log('Pasted content: ', text)
-            done(text)
-          }).catch(function (err) {
-            console.error('Failed to read clipboard contents: ', err)
-            done()
-          })
-        }).catch(function (err) {
-          console.error('Failed to write to clipboard: ', err)
-          done()
-        })
-      }, [textToCopyPaste], function (result) {
-        console.log(result.value)
-        browser.assert.ok((result as any).value === textToCopyPaste)
-      })
-    }
-  },
-  'Should copy file name': function (browser: NightwatchBrowser) {
-    browser
-      .clickLaunchIcon('filePanel')
-      .waitForElementVisible('li[data-id="treeViewLitreeViewItemREADME.txt"]')
-      .rightClick('li[data-id="treeViewLitreeViewItemREADME.txt"]')
-      .waitForElementPresent('[data-id="context_menuitem_copyFileName"]')
-      .click('[data-id="context_menuitem_copyFileName"]')
-      .click('*[data-id="fileExplorerNewFilecreateNewFile"]')
-      .pause(1000)
-      .waitForElementVisible('*[data-id$="/blank"]')
-      .sendKeys('*[data-id$="/blank"]', browser.Keys.CONTROL + 'v')
-      .pause(1000)
-      .sendKeys('*[data-id$="/blank"]', browser.Keys.ENTER)
-      .pause()
-      .waitForElementVisible('*[data-id="treeViewLitreeViewItem5_New_contract.sol"]', 7000)
-      .pause()
-  }
-
-}

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

@@ -0,0 +1,128 @@
+'use strict'
+import { NightwatchBrowser } from 'nightwatch'
+import init from '../helpers/init'
+
+module.exports = {
+  '@disabled': true,
+  before: function (browser: NightwatchBrowser, done: VoidFunction) {
+    init(browser, done)
+  },
+  // file copy file name tests
+  'Should copy file name and paste in root with new file button and it will contain a new file #group1 #flaky': function (browser: NightwatchBrowser) {
+    browser
+      .clickLaunchIcon('filePanel')
+      .waitForElementVisible('li[data-id="treeViewLitreeViewItemREADME.txt"]')
+      .rightClick('li[data-id="treeViewLitreeViewItemREADME.txt"]')
+      .waitForElementPresent('[data-id="contextMenuItemcopyFileName"]')
+      .click('[data-id="contextMenuItemcopyFileName"]')
+      .click('*[data-id="fileExplorerNewFilecreateNewFile"]')
+      .pause(1000)
+      .waitForElementVisible('*[data-id$="/blank"] .remixui_items')
+      .sendKeys('*[data-id$="/blank"] .remixui_items', browser.Keys.CONTROL + 'v')
+      .pause(1000)
+      .sendKeys('*[data-id$="/blank"] .remixui_items', browser.Keys.ENTER)
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemREADME1.txt"]', 7000)
+  },
+  'Should copy file name and paste in another folder with new file button and it will contain a new file #group1 #flaky': function (browser: NightwatchBrowser) {
+    browser
+      .waitForElementVisible('li[data-id="treeViewLitreeViewItemREADME.txt"]')
+      .rightClick('li[data-id="treeViewLitreeViewItemREADME.txt"]')
+      .waitForElementPresent('[data-id="contextMenuItemcopyFileName"]')
+      .click('[data-id="contextMenuItemcopyFileName"]')
+      .click('[data-id="treeViewLitreeViewItemcontracts"]')
+      .click('*[data-id="fileExplorerNewFilecreateNewFile"]')
+      .pause(1000)
+      .waitForElementVisible('*[data-id$="/blank"] .remixui_items')
+      .sendKeys('*[data-id$="/blank"] .remixui_items', browser.Keys.CONTROL + 'v')
+      .pause(1000)
+      .sendKeys('*[data-id$="/blank"] .remixui_items', browser.Keys.ENTER)
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemcontracts/README.txt"]', 7000)
+  },
+  'Should copy file name and paste in another folder that has the same filename with new file button and it will contain a new file #group1 #flaky': function (browser: NightwatchBrowser) {
+    browser
+      .waitForElementVisible('li[data-id="treeViewLitreeViewItemREADME.txt"]')
+      .rightClick('li[data-id="treeViewLitreeViewItemREADME.txt"]')
+      .waitForElementPresent('[data-id="contextMenuItemcopyFileName"]')
+      .click('[data-id="contextMenuItemcopyFileName"]')
+      .click('[data-id="treeViewLitreeViewItemcontracts"]')
+      .click('*[data-id="fileExplorerNewFilecreateNewFile"]')
+      .pause(1000)
+      .waitForElementVisible('*[data-id$="/blank"] .remixui_items')
+      .sendKeys('*[data-id$="/blank"] .remixui_items', browser.Keys.CONTROL + 'v')
+      .pause(1000)
+      .sendKeys('*[data-id$="/blank"] .remixui_items', browser.Keys.ENTER)
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemcontracts/README1.txt"]', 7000)
+  },
+  'Should copy file name and paste in root with right click and it will contain a new file #group1 #flaky': function (browser: NightwatchBrowser) {
+    browser
+      .waitForElementVisible('li[data-id="treeViewLitreeViewItemREADME.txt"]')
+      .rightClick('li[data-id="treeViewLitreeViewItemREADME.txt"]')
+      .waitForElementPresent('[data-id="contextMenuItemcopyFileName"]')
+      .click('[data-id="contextMenuItemcopyFileName"]')
+      .rightClick('*[data-id="treeViewUltreeViewMenu"]')
+      .click('*[data-id="contextMenuItemnewFile"]')
+      .pause(1000)
+      .waitForElementVisible('*[data-id$="/blank"] .remixui_items')
+      .sendKeys('*[data-id$="/blank"] .remixui_items', browser.Keys.CONTROL + 'v')
+      .pause(1000)
+      .sendKeys('*[data-id$="/blank"] .remixui_items', browser.Keys.ENTER)
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemREADME2.txt"]', 7000)
+  },
+  'Should copy file name and paste in contracts with right click and it will contain a new file #group1 #flaky': function (browser: NightwatchBrowser) {
+    browser
+      .waitForElementVisible('li[data-id="treeViewLitreeViewItemREADME.txt"]')
+      .rightClick('li[data-id="treeViewLitreeViewItemREADME.txt"]')
+      .waitForElementPresent('[data-id="contextMenuItemcopyFileName"]')
+      .click('[data-id="contextMenuItemcopyFileName"]')
+      .rightClick('*[data-id="treeViewLitreeViewItemcontracts"]')
+      .click('*[data-id="contextMenuItemnewFile"]')
+      .pause(1000)
+      .waitForElementVisible('*[data-id$="/blank"] .remixui_items')
+      .sendKeys('*[data-id$="/blank"] .remixui_items', browser.Keys.CONTROL + 'v')
+      .pause(1000)
+      .sendKeys('*[data-id$="/blank"] .remixui_items', browser.Keys.ENTER)
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemREADME2.txt"]', 7000)
+  },
+  // file copy paste tests
+  'Should copy file and paste in root with right click and it will contain a new file #group1 #flaky': function (browser: NightwatchBrowser) {
+    browser
+      .waitForElementVisible('li[data-id="treeViewLitreeViewItemREADME.txt"]')
+      .rightClick('li[data-id="treeViewLitreeViewItemREADME.txt"]')
+      .waitForElementPresent('[data-id="contextMenuItemcopy')
+      .click('[data-id="contextMenuItemcopy"]')
+      .rightClick('*[data-id="treeViewUltreeViewMenu"]')
+      .click('*[data-id="contextMenuItempaste"]')
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemCopy_README.txt"]', 7000)
+  },
+  'Should copy file and paste in contracts with right click and it will contain a new file #group1 #flaky': function (browser: NightwatchBrowser) {
+    browser
+      .waitForElementVisible('li[data-id="treeViewLitreeViewItemREADME.txt"]')
+      .rightClick('li[data-id="treeViewLitreeViewItemREADME.txt"]')
+      .waitForElementPresent('[data-id="contextMenuItemcopy')
+      .click('[data-id="contextMenuItemcopy"]')
+      .rightClick('*[data-id="treeViewLitreeViewItemcontracts"]')
+      .click('*[data-id="contextMenuItempaste"]')
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemcontracts/Copy_README.txt"]', 7000)
+  },
+    // folder copy paste tests
+    'Should copy folder and paste in root with right click and it will contain a copied folder #group1 #flaky': function (browser: NightwatchBrowser) {
+      browser
+        .rightClick('li[data-id="treeViewLitreeViewItemcontracts"]')
+        .waitForElementPresent('[data-id="contextMenuItemcopy')
+        .click('[data-id="contextMenuItemcopy"]')
+        .rightClick('*[data-id="treeViewUltreeViewMenu"]')
+        .click('*[data-id="contextMenuItempaste"]')
+        .waitForElementVisible('*[data-id="treeViewLitreeViewItemCopy_contracts"]', 7000)
+    },
+    'Should copy folder and paste in contracts with right click and it will contain a copied folder #group1 #flaky': function (browser: NightwatchBrowser) {
+      browser
+        .pause(1000)
+        .waitForElementVisible('li[data-id="treeViewLitreeViewItemscripts"]')
+        .rightClick('li[data-id="treeViewLitreeViewItemscripts"]')
+        .waitForElementPresent('[data-id="contextMenuItemcopy')
+        .click('[data-id="contextMenuItemcopy"]')
+        .rightClick('*[data-id="treeViewLitreeViewItemcontracts"]')
+        .click('*[data-id="contextMenuItempaste"]')
+        .waitForElementVisible('*[data-id="treeViewLitreeViewItemcontracts/Copy_scripts"]', 7000)
+    }
+}

libs/remix-ui/workspace/src/lib/components/file-explorer-context-menu.tsx

@@ -120,6 +120,7 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
           return (
             <li
               id={`menuitem${item.name.toLowerCase()}`}
+              data-id={`contextMenuItem${item.id}`}
               key={key}
               className={className}
               onClick={() => {
@@ -139,6 +140,7 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
           return (
             <li
               id={`menuitem${item.name.toLowerCase()}`}
+              data-id={`contextMenuItem${item.id}`}
               key={key}
               className={className}
               onClick={() => {
@@ -156,6 +158,7 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
         return (
           <li
             id={`menuitem${item.name.toLowerCase()}`}
+            data-id={`contextMenuItem${item.id}`}
             key={key}
             className={className}
             onClick={(e) => {

libs/remix-ui/workspace/src/lib/components/file-explorer.tsx

@@ -221,7 +221,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
         })
       }
     } else {
-      if (state.focusEdit.lastEdit === content) {
+      if (state.focusEdit.lastEdit === content && state.focusEdit.isNew === false) {
         return setState((prevState) => {
           return {
             ...prevState,
@@ -247,6 +247,8 @@ export const FileExplorer = (props: FileExplorerProps) => {
               () => { }
             )
           } else {
+            console.log('createNewFile', joinPath(parentFolder, content))
+            console.log('createNewFolder', state.focusEdit)
             state.focusEdit.type === 'file' ? createNewFile(joinPath(parentFolder, content)) : createNewFolder(joinPath(parentFolder, content))
             props.dispatchRemoveInputField(parentFolder)
           }

libs/remix-ui/workspace/src/lib/components/flat-tree-item-input.tsx

@@ -40,6 +40,10 @@ export const FlatTreeItemInput = (props: FlatTreeItemInputProps) => {
     }
   }
 
+  const changeValue = (e: any) => {
+    setValue(e.target.value)
+  }
+
   useEffect(() => {
     ref.current.focus()
   },[])
@@ -55,7 +59,7 @@ export const FlatTreeItemInput = (props: FlatTreeItemInputProps) => {
     }}
     className='form-control p-0 ml-2 remixui_items' 
     onFocus={handleFocus} 
-    onChange={e => setValue(e.target.value)} 
+    onChange={changeValue} 
     defaultValue={file.name}>
   </input>)
 }