[Cashtab] Bring QRCode tests in line with rest of react testing lib tests
ClosedPublic
Actions

Authored by bytesofman on Feb 18 2024, 15:10.

Details

Reviewers

emack

Group Reviewers

Restricted Project

Commits

rABCa68eec42473b: [Cashtab] Bring QRCode tests in line with rest of react testing lib tests

Summary

Existing tests here are not particularly helpful...expecting onClick to have been called on a click.

Update so we test the actual behavior we want to see -- user clicks, a div is displayed that has the text content of the address.

Test Plan

npm test

Diff Detail

Repository

rABC Bitcoin ABC

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

bytesofman created this revision.Feb 18 2024, 15:10

Herald added a reviewer: Restricted Project. · View Herald TranscriptFeb 18 2024, 15:10

version bump

bytesofman published this revision for review.Feb 18 2024, 15:11

Harbormaster completed remote builds in B27234: Diff 45363.Feb 18 2024, 15:13

Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

Failed tests logs:

====== CashTab Unit Tests: <Receive /> Renders the Receive screen correctly ======
Error: expect(received).toHaveStyle()

received value must be an HTMLElement or an SVGElement.
Received has value: null
    at __EXTERNAL_MATCHER_TRAP__ (/work/cashtab/node_modules/expect/build/index.js:325:30)
    at Object.throwingMatcher [as toHaveStyle] (/work/cashtab/node_modules/expect/build/index.js:326:15)
    at Object.toHaveStyle (/work/cashtab/src/components/Receive/__tests__/Receive.test.js:90:56)
    at Promise.then.completed (/work/cashtab/node_modules/jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/work/cashtab/node_modules/jest-circus/build/utils.js:231:10)
    at _callCircusTest (/work/cashtab/node_modules/jest-circus/build/run.js:316:40)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at _runTest (/work/cashtab/node_modules/jest-circus/build/run.js:252:3)
    at _runTestsForDescribeBlock (/work/cashtab/node_modules/jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (/work/cashtab/node_modules/jest-circus/build/run.js:121:9)
    at run (/work/cashtab/node_modules/jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (/work/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (/work/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (/work/cashtab/node_modules/jest-runner/build/runTest.js:367:16)
    at runTest (/work/cashtab/node_modules/jest-runner/build/runTest.js:444:34)
    at Object.worker (/work/cashtab/node_modules/jest-runner/build/testWorker.js:106:12)
====== CashTab Unit Tests: <Receive /> Clicking the QR code copy pastes address to clipboard ======
Error: expect(received).toHaveStyle()

received value must be an HTMLElement or an SVGElement.
Received has value: null
    at __EXTERNAL_MATCHER_TRAP__ (/work/cashtab/node_modules/expect/build/index.js:325:30)
    at Object.throwingMatcher [as toHaveStyle] (/work/cashtab/node_modules/expect/build/index.js:326:15)
    at Object.toHaveStyle (/work/cashtab/src/components/Receive/__tests__/Receive.test.js:191:56)

Each failure log is accessible here:
CashTab Unit Tests: <Receive /> Renders the Receive screen correctly
CashTab Unit Tests: <Receive /> Clicking the QR code copy pastes address to clipboard

Harbormaster completed remote builds in B27235: Diff 45364.Feb 18 2024, 15:13

Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

Failed tests logs:

====== CashTab Unit Tests: <Receive /> Renders the Receive screen correctly ======
Error: expect(received).toHaveStyle()

received value must be an HTMLElement or an SVGElement.
Received has value: null
    at __EXTERNAL_MATCHER_TRAP__ (/work/cashtab/node_modules/expect/build/index.js:325:30)
    at Object.throwingMatcher [as toHaveStyle] (/work/cashtab/node_modules/expect/build/index.js:326:15)
    at Object.toHaveStyle (/work/cashtab/src/components/Receive/__tests__/Receive.test.js:90:56)
    at Promise.then.completed (/work/cashtab/node_modules/jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/work/cashtab/node_modules/jest-circus/build/utils.js:231:10)
    at _callCircusTest (/work/cashtab/node_modules/jest-circus/build/run.js:316:40)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at _runTest (/work/cashtab/node_modules/jest-circus/build/run.js:252:3)
    at _runTestsForDescribeBlock (/work/cashtab/node_modules/jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (/work/cashtab/node_modules/jest-circus/build/run.js:121:9)
    at run (/work/cashtab/node_modules/jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (/work/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (/work/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (/work/cashtab/node_modules/jest-runner/build/runTest.js:367:16)
    at runTest (/work/cashtab/node_modules/jest-runner/build/runTest.js:444:34)
    at Object.worker (/work/cashtab/node_modules/jest-runner/build/testWorker.js:106:12)
====== CashTab Unit Tests: <Receive /> Clicking the QR code copy pastes address to clipboard ======
Error: expect(received).toHaveStyle()

received value must be an HTMLElement or an SVGElement.
Received has value: null
    at __EXTERNAL_MATCHER_TRAP__ (/work/cashtab/node_modules/expect/build/index.js:325:30)
    at Object.throwingMatcher [as toHaveStyle] (/work/cashtab/node_modules/expect/build/index.js:326:15)
    at Object.toHaveStyle (/work/cashtab/src/components/Receive/__tests__/Receive.test.js:191:56)

Each failure log is accessible here:
CashTab Unit Tests: <Receive /> Renders the Receive screen correctly
CashTab Unit Tests: <Receive /> Clicking the QR code copy pastes address to clipboard

bytesofman planned changes to this revision.Feb 18 2024, 15:13

remove data-test-id pointers from receive test

Harbormaster completed remote builds in B27236: Diff 45365.Feb 18 2024, 15:18

emack requested changes to this revision.Feb 19 2024, 06:49

emack added a subscriber: emack.

emack added inline comments.

cashtab/src/components/Common/__tests__/QRCode.test.js
20 ↗	(On Diff #45365)	Shouldn't this be failing because since it doesn't exist, `QrCodeCopied` should be returning null and therefore not able to call `.toHaveStyle()`? Also what is the advantage of using this instead of `.not.toBeInTheDocument()`?

This revision now requires changes to proceed.Feb 19 2024, 06:49

bytesofman requested review of this revision.Feb 19 2024, 16:01

bytesofman marked an inline comment as done.

bytesofman added inline comments.

cashtab/src/components/Common/__tests__/QRCode.test.js
20 ↗	(On Diff #45365)	The way this component is implemented -- it is always in the document. The click handler is toggling the css to show or hide it. I don't think there is some "optimum" way to do this in react, i.e. maybe it is always better to conditionally render, maybe it is always better to conditionally change css so something is visible. Often, it's easier to manage content jumping by simply showing or hiding an element that is always there. In this case -- I don't think so much thought went into it. Probably just how it happened to be implemented. But I can't discern any impact from refactoring the component to conditionally render this div instead of using the current approach. So -- the test matches the implementation. `not.toBeInTheDocument()` would be appropriate for some component `isRendered && <SomeComponent />` -- testing when we expect `!isRendered`