Page MenuHomePhabricator

[Cashtab] Add disabled button component & use in Send.js
ClosedPublic

Authored by kieran709 on Mar 30 2022, 15:25.

Details

Summary

Related to task T2359. In a previous revision, the SecondaryButton styled component was changed to show the disabled symbol on hover, however since this button is used in different contexts throughout the app, this revision adds a disabled button component.

Test Plan

cd web/cashtab-v2 && npm start
in a private browser, hover over the import wallet button on the home screen
the cursor should be a pointer
in a non-private browser
navigate to the send screen
add invalid eCash address or invalid XEC amount
over over the send button
observe the disabled symbol on the send button.

Diff Detail

Repository
rABC Bitcoin ABC
Branch
disabled-button-component
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 18700
Build 37191: Build Diffcashtab-tests
Build 37190: arc lint + arc unit

Event Timeline

We should land this once the pointer issue is fixed, to correct the current issue with Cashtab showing 'disabled' cursor on non-disabled buttons. Going forward, we should change the css of PrimaryButton or SecondaryButton based on the disabled prop, instead of switching out entirely different components.

I'll create a task for that.

web/cashtab/src/components/Common/PrimaryButton.js
41 โ†—(On Diff #32997)

cursor: pointer

This revision now requires changes to proceed.Mar 30 2022, 17:26

responding to review feedback

bytesofman added inline comments.
web/cashtab/src/components/Common/PrimaryButton.js
41 โ†—(On Diff #33004)

cursor: cursor --> cursor: pointer

This revision now requires changes to proceed.Mar 30 2022, 17:53

respdonding to review feedback

Failed tests logs:

====== CashTab Unit Tests:  Without wallet defined ======
Error: expect(received).toMatchSnapshot()

Snapshot name: `Without wallet defined 1`

- Snapshot  - 1
+ Received  + 1

@@ -61,11 +61,11 @@
        </svg>
      </span>
       New Wallet
    </button>
    <button
-     className="sc-cSHVUG bFbFlg"
+     className="sc-cSHVUG kUJUGX"
      onClick={[Function]}
    >
      <span
        aria-label="import"
        className="anticon anticon-import"
    at Object.<anonymous> (/work/web/cashtab/src/components/Receive/__tests__/Receive.test.js:107:18)
    at Promise.then.completed (/work/web/cashtab/node_modules/jest-circus/build/utils.js:391:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/work/web/cashtab/node_modules/jest-circus/build/utils.js:316:10)
    at _callCircusTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:218:40)
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at _runTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:155:3)
    at _runTestsForDescribeBlock (/work/web/cashtab/node_modules/jest-circus/build/run.js:66:9)
    at run (/work/web/cashtab/node_modules/jest-circus/build/run.js:25:3)
    at runAndTransformResultsToJestFormat (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:170:21)
    at jestAdapter (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:82:19)
    at runTestInternal (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:389:16)
    at runTest (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:475:34)
    at Object.worker (/work/web/cashtab/node_modules/jest-runner/build/testWorker.js:133:12)Error: expect(received).toMatchSnapshot()

Snapshot name: `Without wallet defined 1`

- Snapshot  - 1
+ Received  + 1

@@ -61,11 +61,11 @@
        </svg>
      </span>
       New Wallet
    </button>
    <button
-     className="sc-cSHVUG bFbFlg"
+     className="sc-cSHVUG kUJUGX"
      onClick={[Function]}
    >
      <span
        aria-label="import"
        className="anticon anticon-import"
    at Object.<anonymous> (/work/web/cashtab/src/components/Home/__tests__/Home.test.js:88:18)
    at Promise.then.completed (/work/web/cashtab/node_modules/jest-circus/build/utils.js:391:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/work/web/cashtab/node_modules/jest-circus/build/utils.js:316:10)
    at _callCircusTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:218:40)
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at _runTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:155:3)
    at _runTestsForDescribeBlock (/work/web/cashtab/node_modules/jest-circus/build/run.js:66:9)
    at run (/work/web/cashtab/node_modules/jest-circus/build/run.js:25:3)
    at runAndTransformResultsToJestFormat (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:170:21)
    at jestAdapter (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:82:19)
    at runTestInternal (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:389:16)
    at runTest (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:475:34)
    at Object.worker (/work/web/cashtab/node_modules/jest-runner/build/testWorker.js:133:12)
====== CashTab Unit Tests:  Configure without a wallet ======
Error: expect(received).toMatchSnapshot()

Snapshot name: `Configure without a wallet 1`

- Snapshot  - 1
+ Received  + 1

@@ -120,11 +120,11 @@
          </svg>
        </span>
         New Wallet
      </button>
      <button
-       className="sc-cvbbAY caTSwS"
+       className="sc-cvbbAY eOLbDk"
        onClick={[Function]}
      >
        <span
          aria-label="import"
          className="anticon anticon-import"
    at Object.<anonymous> (/work/web/cashtab/src/components/Configure/__tests__/Configure.test.js:17:18)
    at Promise.then.completed (/work/web/cashtab/node_modules/jest-circus/build/utils.js:391:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/work/web/cashtab/node_modules/jest-circus/build/utils.js:316:10)
    at _callCircusTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:218:40)
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at _runTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:155:3)
    at _runTestsForDescribeBlock (/work/web/cashtab/node_modules/jest-circus/build/run.js:66:9)
    at run (/work/web/cashtab/node_modules/jest-circus/build/run.js:25:3)
    at runAndTransformResultsToJestFormat (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:170:21)
    at jestAdapter (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:82:19)
    at runTestInternal (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:389:16)
    at runTest (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:475:34)
    at Object.worker (/work/web/cashtab/node_modules/jest-runner/build/testWorker.js:133:12)
====== CashTab Unit Tests:  Configure with a wallet ======
Error: expect(received).toMatchSnapshot()

Snapshot name: `Configure with a wallet 1`

- Snapshot  - 1
+ Received  + 1

@@ -160,11 +160,11 @@
          </svg>
        </span>
         New Wallet
      </button>
      <button
-       className="sc-cvbbAY caTSwS"
+       className="sc-cvbbAY eOLbDk"
        onClick={[Function]}
      >
        <span
          aria-label="import"
          className="anticon anticon-import"
    at Object.<anonymous> (/work/web/cashtab/src/components/Configure/__tests__/Configure.test.js:31:18)
    at Promise.then.completed (/work/web/cashtab/node_modules/jest-circus/build/utils.js:391:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/work/web/cashtab/node_modules/jest-circus/build/utils.js:316:10)
    at _callCircusTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:218:40)
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at _runTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:155:3)
    at _runTestsForDescribeBlock (/work/web/cashtab/node_modules/jest-circus/build/run.js:66:9)
    at run (/work/web/cashtab/node_modules/jest-circus/build/run.js:25:3)
    at runAndTransformResultsToJestFormat (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:170:21)
    at jestAdapter (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:82:19)
    at runTestInternal (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:389:16)
    at runTest (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:475:34)
    at Object.worker (/work/web/cashtab/node_modules/jest-runner/build/testWorker.js:133:12)

Each failure log is accessible here:
CashTab Unit Tests: Without wallet defined
CashTab Unit Tests: Configure without a wallet
CashTab Unit Tests: Configure with a wallet

This revision is now accepted and ready to land.Mar 30 2022, 22:44

Failed tests logs:

====== CashTab Unit Tests:  Wallet with BCH balances and tokens and state field ======
Error: expect(received).toMatchSnapshot()

Snapshot name: `Wallet with BCH balances and tokens and state field 1`

- Snapshot  - 10
+ Received  +  2

@@ -26,15 +26,11 @@
              "width": "auto",
            }
          }
        >
          <div
- <<<<<<< HEAD
-           className="sc-jzJRlG kGXhCS"
- =======
-           className="sc-cSHVUG gfECsd"
- >>>>>>> d50a38d37 ([Cashtab] Add disabled button component & use in Send.js)
+           className="sc-cSHVUG iNTIbE"
          >
            <div
              className="ant-row ant-form-item ant-form-item-with-help"
              style={Object {}}
            >
@@ -143,15 +139,11 @@
                </div>
              </div>
            </div>
          </div>
          <div
- <<<<<<< HEAD
-           className="sc-jzJRlG kGXhCS"
- =======
-           className="sc-cSHVUG gfECsd"
- >>>>>>> d50a38d37 ([Cashtab] Add disabled button component & use in Send.js)
+           className="sc-cSHVUG iNTIbE"
          >
            <div
              className="ant-row ant-form-item ant-form-item-with-help"
              style={Object {}}
            >
    at Object.<anonymous> (/work/web/cashtab/src/components/Send/__tests__/SendToken.test.js:71:18)
    at Promise.then.completed (/work/web/cashtab/node_modules/jest-circus/build/utils.js:391:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/work/web/cashtab/node_modules/jest-circus/build/utils.js:316:10)
    at _callCircusTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:218:40)
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at _runTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:155:3)
    at _runTestsForDescribeBlock (/work/web/cashtab/node_modules/jest-circus/build/run.js:66:9)
    at run (/work/web/cashtab/node_modules/jest-circus/build/run.js:25:3)
    at runAndTransformResultsToJestFormat (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:170:21)
    at jestAdapter (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:82:19)
    at runTestInternal (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:389:16)
    at runTest (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:475:34)
    at Object.worker (/work/web/cashtab/node_modules/jest-runner/build/testWorker.js:133:12)
====== CashTab Unit Tests:  Configure without a wallet ======
Error: expect(received).toMatchSnapshot()

Snapshot name: `Configure without a wallet 1`

- Snapshot  - 1
+ Received  + 1

@@ -1,10 +1,10 @@
  <div
    className="sc-gqjmRU dYraLr"
  >
    <div
-     className="sc-gipzik MdceN"
+     className="sc-gipzik kiYvZB"
    >
      <h2>
        <span
          aria-label="copy"
          className="anticon anticon-copy sc-bdVaJa jyutTw"
    at Object.<anonymous> (/work/web/cashtab/src/components/Configure/__tests__/Configure.test.js:17:18)
    at Promise.then.completed (/work/web/cashtab/node_modules/jest-circus/build/utils.js:391:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/work/web/cashtab/node_modules/jest-circus/build/utils.js:316:10)
    at _callCircusTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:218:40)
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at _runTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:155:3)
    at _runTestsForDescribeBlock (/work/web/cashtab/node_modules/jest-circus/build/run.js:66:9)
    at run (/work/web/cashtab/node_modules/jest-circus/build/run.js:25:3)
    at runAndTransformResultsToJestFormat (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:170:21)
    at jestAdapter (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:82:19)
    at runTestInternal (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:389:16)
    at runTest (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:475:34)
    at Object.worker (/work/web/cashtab/node_modules/jest-runner/build/testWorker.js:133:12)
====== CashTab Unit Tests:  Configure with a wallet ======
Error: expect(received).toMatchSnapshot()

Snapshot name: `Configure with a wallet 1`

- Snapshot  - 1
+ Received  + 1

@@ -1,10 +1,10 @@
  <div
    className="sc-gqjmRU dYraLr"
  >
    <div
-     className="sc-gipzik MdceN"
+     className="sc-gipzik kiYvZB"
    >
      <h2>
        <span
          aria-label="copy"
          className="anticon anticon-copy sc-bdVaJa jyutTw"
    at Object.<anonymous> (/work/web/cashtab/src/components/Configure/__tests__/Configure.test.js:31:18)
    at Promise.then.completed (/work/web/cashtab/node_modules/jest-circus/build/utils.js:391:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/work/web/cashtab/node_modules/jest-circus/build/utils.js:316:10)
    at _callCircusTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:218:40)
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at _runTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:155:3)
    at _runTestsForDescribeBlock (/work/web/cashtab/node_modules/jest-circus/build/run.js:66:9)
    at run (/work/web/cashtab/node_modules/jest-circus/build/run.js:25:3)
    at runAndTransformResultsToJestFormat (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:170:21)
    at jestAdapter (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:82:19)
    at runTestInternal (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:389:16)
    at runTest (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:475:34)
    at Object.worker (/work/web/cashtab/node_modules/jest-runner/build/testWorker.js:133:12)

Each failure log is accessible here:
CashTab Unit Tests: Wallet with BCH balances and tokens and state field
CashTab Unit Tests: Configure without a wallet
CashTab Unit Tests: Configure with a wallet

test comment to force re-test

removed unnecessary test comment