Fix failing debugger tests

4 years ago · 948bb7eee2
parent c4e5597252
commit 948bb7eee2
5 changed files with 74 additions and 83 deletions
--- a/apps/remix-ide-e2e/src/tests/debugger.test.ts
+++ b/apps/remix-ide-e2e/src/tests/debugger.test.ts
@ -42,8 +42,10 @@ module.exports = {
    .waitForElementVisible('*[data-id="slider"]')
    .click('*[data-id="slider"]')
    .setValue('*[data-id="slider"]', '50')
-    .assert.containsText('*[data-id="solidityLocals"]', 'no locals')
-    .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n92')
+    .pause(2000)
+    .click('*[data-id="dropdownPanelSolidityLocals"]')
+    .assert.containsText('*[data-id="solidityLocals"]', 'No data available')
+    .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n91')
  },

  'Should step back and forward transaction': function (browser: NightwatchBrowser) {
@ -51,12 +53,12 @@ module.exports = {
    .waitForElementPresent('*[data-id="buttonNavigatorIntoBack"]')
    .scrollAndClick('*[data-id="buttonNavigatorIntoBack"]')
    .pause(2000)
-    .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n91')
-    .assert.containsText('*[data-id="stepdetail"]', 'execution step:\n91')
+    .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n90')
+    .assert.containsText('*[data-id="stepdetail"]', 'execution step:\n90')
    .click('*[data-id="buttonNavigatorIntoForward"]')
    .pause(2000)
-    .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n92')
-    .assert.containsText('*[data-id="stepdetail"]', 'execution step:\n92')
+    .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n91')
+    .assert.containsText('*[data-id="stepdetail"]', 'execution step:\n91')
  },

  'Should jump through breakpoints': function (browser: NightwatchBrowser) {
@ -188,7 +190,7 @@ const sources = [
    'browser/blah.sol': {
      content: `
    pragma solidity >=0.7.0 <0.8.0;
-
+ 
    contract Kickstarter {

        enum State { Started, Completed }
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx
@ -141,7 +141,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
        <div className="border rounded px-1 mt-1 bg-light">
            <div className="py-0 px-1 title">
                <div className={state.toggleDropdown ? 'icon fas fa-caret-down' : 'icon fas fa-caret-right'} onClick={handleToggle}></div>
-                <div className="name" onClick={handleToggle}>{dropdownName}</div><span className="nameDetail" onClick={handleToggle}>{ header }</span>
+                <div className="name" data-id={`dropdownPanel${dropdownName.split(' ').join('')}`} onClick={handleToggle}>{dropdownName}</div><span className="nameDetail" onClick={handleToggle}>{ header }</span>
                <CopyToClipboard content={state.copiableContent} />
            </div>
            <div className='dropdownpanel' style={{ display: state.toggleDropdown ? 'block' : 'none' }}>
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx
@ -1,56 +1,10 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import DropdownPanel from './dropdown-panel'

-export interface StepDetailProps {
-    stepDetail: {
-        key: string,
-        value: string,
-        reset: boolean
-    }
-} 
-
-export const StepDetail = (props: StepDetailProps) => {
-    const { stepDetail } = props
-    const [detail, setDetail] = useState({
-        'vm trace step': '-',
-        'execution step': '-',
-        'add memory': '',
-        'gas': '',
-        'remaining gas': '-',
-        'loaded address': '-'
-    })
-
-    useEffect(() => {
-        updateField(stepDetail.key, stepDetail.value, stepDetail.reset)
-    }, [stepDetail])
-
-    const updateField = (key, value, reset) => {
-        if (!key) return
-
-        if (reset) {
-            setDetail(() => {
-                return {
-                    'vm trace step': '-',
-                    'execution step': '-',
-                    'add memory': '',
-                    'gas': '',
-                    'remaining gas': '-',
-                    'loaded address': '-'
-                }
-            })
-        } else {
-            setDetail(prevDetail => {
-                return {
-                    ...prevDetail,
-                    [key]: value
-                }
-            })
-        }
-    }
-
+export const StepDetail = ({ stepDetail }) => {
    return (
        <div id='stepdetail' data-id="stepdetail">
-            <DropdownPanel dropdownName='Step details' calldata={detail || {}} />
+            <DropdownPanel dropdownName='Step details' calldata={stepDetail || {}} />
        </div>
    )
 }
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx
@ -13,9 +13,12 @@ export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => {
  })
  const [functionPanel, setFunctionPanel] = useState(null)
  const [stepDetail, setStepDetail] = useState({
-    key: null,
-    value: null,
-    reset: false
+    'vm trace step': '-',
+    'execution step': '-',
+    'add memory': '',
+    'gas': '',
+    'remaining gas': '-',
+    'loaded address': '-'
  })
  const [solidityState, setSolidityState] = useState({
    calldata: null,
@ -29,10 +32,14 @@ export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => {
  useEffect(() => {
    if (vmDebuggerLogic) {
      vmDebuggerLogic.event.register('codeManagerChanged', (code, address, index) => {
-        setAsm({ code, address, index })
+        setAsm(() => {
+          return { code, address, index }
+        })
      })
      vmDebuggerLogic.event.register('traceUnloaded', () => {
-        setAsm({ code: [], address: '', index: -1 })
+        setAsm(() => {
+          return { code: [], address: '', index: -1 }
+        })
      })
      vmDebuggerLogic.event.register('functionsStackUpdate', (stack) => {
        if (stack === null) return
@ -43,43 +50,67 @@ export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => {

          functions.push(functionDefinitionName + '(' + func.inputs.join(', ') + ')')
        }
-        setFunctionPanel(functions)
+        setFunctionPanel(() => functions)
      })
      vmDebuggerLogic.event.register('traceUnloaded', () => {
-        setStepDetail({ key: null, value: null, reset: true })
+        setStepDetail(() => {
+          return { 'vm trace step': '-', 'execution step': '-', 'add memory': '', 'gas': '', 'remaining gas': '-', 'loaded address': '-' }
+        })
      })
      vmDebuggerLogic.event.register('newTraceLoaded', () => {
-        setStepDetail({ key: null, value: null, reset: true })
+        setStepDetail(() => {
+          return { 'vm trace step': '-', 'execution step': '-', 'add memory': '', 'gas': '', 'remaining gas': '-', 'loaded address': '-' }
+        })
      })
      vmDebuggerLogic.event.register('traceCurrentStepUpdate', (error, step) => {
-        setStepDetail({ key: 'execution step', value: (error ? '-' : step), reset: false })
+        setStepDetail(prevState => {
+          return { ...prevState, 'execution step': (error ? '-' : step) }
+        })
      })
      vmDebuggerLogic.event.register('traceMemExpandUpdate', (error, addmem) => {
-        setStepDetail({ key: 'add memory', value: (error ? '-' : addmem), reset: false })
+        setStepDetail(prevState => {
+          return { ...prevState, 'add memory': (error ? '-' : addmem) }
+        })
      })
      vmDebuggerLogic.event.register('traceStepCostUpdate', (error, gas) => {
-        setStepDetail({ key: 'gas', value: (error ? '-' : gas), reset: false })
+        setStepDetail(prevState => {
+          return { ...prevState, 'gas': (error ? '-' : gas) }
+        })
      })
      vmDebuggerLogic.event.register('traceCurrentCalledAddressAtUpdate', (error, address) => {
-        setStepDetail({ key: 'loaded address', value: (error ? '-' : address), reset: false })
+        setStepDetail(prevState => {
+          return { ...prevState, 'loaded address': (error ? '-' : address) }
+        })
      })
      vmDebuggerLogic.event.register('traceRemainingGasUpdate', (error, remainingGas) => {
-        setStepDetail({ key: 'remaining gas', value: (error ? '-' : remainingGas), reset: false })
+        setStepDetail(prevState => {
+          return { ...prevState, 'remaining gas': (error ? '-' : remainingGas) }
+        })
      })
      vmDebuggerLogic.event.register('indexUpdate', (index) => {
-        setStepDetail({ key: 'vm trace step', value: index, reset: false })
+        setStepDetail(prevState => {
+          return { ...prevState, 'vm trace step': index }
+        })
      })
      vmDebuggerLogic.event.register('solidityState', (calldata) => {
-        setSolidityState({ ...solidityState, calldata })
+        setSolidityState(() => {
+          return { ...solidityState, calldata }
+        })
      })
      vmDebuggerLogic.event.register('solidityStateMessage', (message) => {
-        setSolidityState({ ...solidityState, message })
+        setSolidityState(() => {
+          return { ...solidityState, message }
+        })
      })
      vmDebuggerLogic.event.register('solidityLocals', (calldata) => {
-        setSolidityLocals({ ...solidityLocals, calldata })
+        setSolidityLocals(() => {
+          return { ...solidityLocals, calldata }
+        })
      })
      vmDebuggerLogic.event.register('solidityLocalsMessage', (message) => {
-        setSolidityLocals({ ...solidityLocals, message })
+        setSolidityLocals(() => {
+          return { ...solidityLocals, message }
+        })
      })
      ready()
    }
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx
@ -22,28 +22,32 @@ export const VmDebugger = ({ vmDebuggerLogic, ready }) => {
  useEffect(() => {
    if (vmDebuggerLogic) {
      vmDebuggerLogic.event.register('traceManagerCallDataUpdate', (calldata) => {
-        setCalldataPanel(calldata)
+        setCalldataPanel(() => calldata)
      })
      vmDebuggerLogic.event.register('traceManagerMemoryUpdate', (calldata) => {
-        setMemoryPanel(calldata)
+        setMemoryPanel(() => calldata)
      })
      vmDebuggerLogic.event.register('traceManagerCallStackUpdate', (calldata) => {
-        setCallStackPanel(calldata)
+        setCallStackPanel(() => calldata)
      })
      vmDebuggerLogic.event.register('traceManagerStackUpdate', (calldata) => {
-        setStackPanel(calldata)
+        setStackPanel(() => calldata)
      })
      vmDebuggerLogic.event.register('traceManagerStorageUpdate', (calldata, header) => {
-        setStoragePanel({ calldata, header })
+        setStoragePanel(() => {
+          return { calldata, header }
+        })
      })
      vmDebuggerLogic.event.register('traceReturnValueUpdate', (calldata) => {
-        setReturnValuesPanel(calldata)
+        setReturnValuesPanel(() => calldata)
      })
      vmDebuggerLogic.event.register('traceAddressesUpdate', (calldata) => {
-        setFullStoragesChangesPanel({})
+        setFullStoragesChangesPanel(() => {
+          return {}
+        })
      })
      vmDebuggerLogic.event.register('traceStorageUpdate', (calldata) => {
-        setFullStoragesChangesPanel(calldata)
+        setFullStoragesChangesPanel(() => calldata)
      })
      ready()
    }