Page MenuHomePhabricator
Differential D16037

[Cashtab] Improve OnBoarding component
ClosedPublic
Actions

Authored by bytesofman on Apr 20 2024, 21:23.

Details

Reviewers
emack
Group Reviewers
Restricted Project
Commits
rABC71f8dee097e9: [Cashtab] Improve OnBoarding component
Summary

Refactor Onboarding to match preferred "index.js" and "styles.js" in ComponentName directory name. Change component so that importing a wallet opens a modal, the same UX that is currently on the Wallets screen. Add integration tests to confirm expected behavior.

Test Plan

npm test

Diff Detail

Event Timeline

bytesofman created this revision.Apr 20 2024, 21:23
Herald added a reviewer: Restricted Project. · View Herald TranscriptApr 20 2024, 21:23
Harbormaster completed remote builds in B28697: Diff 47352.Apr 20 2024, 21:23
bytesofman updated this revision to Diff 47353.Apr 20 2024, 21:24

lint

Harbormaster completed remote builds in B28698: Diff 47353.Apr 20 2024, 21:27
teamcity added a comment.Apr 20 2024, 21:27
Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

Failed tests logs:

====== CashTab Unit Tests: <App /> A new user can import a mnemonic ======
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "Import"

Here are the accessible roles:

  button:

  Name "X":
  <button
    class="sc-kafWEX eZrFWm"
  />

  Name "OK":
  <button
    class="sc-hEsumM sc-ktHwxA kCXxpS"
    disabled=""
  />

  Name "Cancel":
  <button
    class="sc-hEsumM sc-cIShpX jCLzmg"
  />

  Name "New Wallet":
  <button
    class="sc-bXGyLb sc-eLExRp cOkytB"
  />

  Name "Import Wallet":
  <button
    class="sc-bXGyLb sc-krvtoX hNTXGz"
  />

  --------------------------------------------------
  textbox:

  Name "":
  <input
    class="sc-bYSBpT sc-elJkPf egcYGm"
    name="mnemonic"
    placeholder="mnemonic (seed phrase)"
    value=""
  />

  --------------------------------------------------
  heading:

  Name "Welcome to Cashtab!":
  <h2 />

  --------------------------------------------------
  link:

  Name "open source,":
  <a
    class="sc-cugefK iNuIGu"
    href="https://github.com/bitcoin-abc/bitcoin-abc"
    rel="noreferrer"
    target="_blank"
  />

  --------------------------------------------------

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      class="sc-iIHSe eltjIz"
    >
      <div
        class="Toastify"
      />
      <div
        class="sc-gldTML dVoZGX"
      >
        <div
          class="sc-cJOK fBMxHQ"
        >
          <div
            class="sc-bbmXgH fmGsMc"
            height="198"
            width="320"
          >
            <button
              class="sc-kafWEX eZrFWm"
            >
              X
            </button>
            <div
              class="sc-jnlKLf hkWeLB"
              height="198"
            >
              <div
                class="sc-gGBfsJ eXxSDa"
              >
                Import wallet
              </div>
              <div
                class="sc-btzYZH kSktdT"
              >
                <div
                  class="sc-lhVmIH fuhlTY"
                >
                  <input
                    class="sc-bYSBpT sc-elJkPf egcYGm"
                    name="mnemonic"
                    placeholder="mnemonic (seed phrase)"
                    value=""
                  />
                </div>
                <div
                  class="sc-kPVwWT hoYKFq"
                />
              </div>
            </div>
            <div
              class="sc-tilXH dcVxTZ"
            >
              <button
                class="sc-hEsumM sc-ktHwxA kCXxpS"
                disabled=""
              >
                OK
              </button>
              <button
                class="sc-hEsumM sc-cIShpX jCLzmg"
              >
                Cancel
              </button>
            </div>
          </div>
          <div
            class="sc-feJyhm fVwfUM"
          />
          <div
            class="sc-cHSUfg hOGfcT"
          >
            <h2>
              Welcome to Cashtab!
            </h2>
            <p
              class="sc-cTjmhe iXYHSa"
            >
              Cashtab is an
               
              <a
                class="sc-cugefK iNuIGu"
                href="https://github.com/bitcoin-abc/bitcoin-abc"
                rel="noreferrer"
                target="_blank"
              >
                open source,
              </a>
               
              non-custodial web wallet for 
              eCash
              .
            </p>
            <button
              class="sc-bXGyLb sc-eLExRp cOkytB"
            >
              New Wallet
            </button>
            <button
              class="sc-bXGyLb sc-krvtoX hNTXGz"
            >
              Import Wallet
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
    at Object.getElementError (/work/cashtab/node_modules/@testing-library/dom/dist/config.js:37:19)
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
    at Object.getByRole (/work/cashtab/src/components/App/__tests__/App.test.js:666:37)

Each failure log is accessible here:
CashTab Unit Tests: <App /> A new user can import a mnemonic

teamcity added a comment.Apr 20 2024, 21:27
Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

Failed tests logs:

====== CashTab Unit Tests: <App /> A new user can import a mnemonic ======
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "Import"

Here are the accessible roles:

  button:

  Name "X":
  <button
    class="sc-kafWEX eZrFWm"
  />

  Name "OK":
  <button
    class="sc-hEsumM sc-ktHwxA kCXxpS"
    disabled=""
  />

  Name "Cancel":
  <button
    class="sc-hEsumM sc-cIShpX jCLzmg"
  />

  Name "New Wallet":
  <button
    class="sc-bXGyLb sc-eLExRp cOkytB"
  />

  Name "Import Wallet":
  <button
    class="sc-bXGyLb sc-krvtoX hNTXGz"
  />

  --------------------------------------------------
  textbox:

  Name "":
  <input
    class="sc-bYSBpT sc-elJkPf egcYGm"
    name="mnemonic"
    placeholder="mnemonic (seed phrase)"
    value=""
  />

  --------------------------------------------------
  heading:

  Name "Welcome to Cashtab!":
  <h2 />

  --------------------------------------------------
  link:

  Name "open source,":
  <a
    class="sc-cugefK iNuIGu"
    href="https://github.com/bitcoin-abc/bitcoin-abc"
    rel="noreferrer"
    target="_blank"
  />

  --------------------------------------------------

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      class="sc-iIHSe eltjIz"
    >
      <div
        class="Toastify"
      />
      <div
        class="sc-gldTML dVoZGX"
      >
        <div
          class="sc-cJOK fBMxHQ"
        >
          <div
            class="sc-bbmXgH fmGsMc"
            height="198"
            width="320"
          >
            <button
              class="sc-kafWEX eZrFWm"
            >
              X
            </button>
            <div
              class="sc-jnlKLf hkWeLB"
              height="198"
            >
              <div
                class="sc-gGBfsJ eXxSDa"
              >
                Import wallet
              </div>
              <div
                class="sc-btzYZH kSktdT"
              >
                <div
                  class="sc-lhVmIH fuhlTY"
                >
                  <input
                    class="sc-bYSBpT sc-elJkPf egcYGm"
                    name="mnemonic"
                    placeholder="mnemonic (seed phrase)"
                    value=""
                  />
                </div>
                <div
                  class="sc-kPVwWT hoYKFq"
                />
              </div>
            </div>
            <div
              class="sc-tilXH dcVxTZ"
            >
              <button
                class="sc-hEsumM sc-ktHwxA kCXxpS"
                disabled=""
              >
                OK
              </button>
              <button
                class="sc-hEsumM sc-cIShpX jCLzmg"
              >
                Cancel
              </button>
            </div>
          </div>
          <div
            class="sc-feJyhm fVwfUM"
          />
          <div
            class="sc-cHSUfg hOGfcT"
          >
            <h2>
              Welcome to Cashtab!
            </h2>
            <p
              class="sc-cTjmhe iXYHSa"
            >
              Cashtab is an
               
              <a
                class="sc-cugefK iNuIGu"
                href="https://github.com/bitcoin-abc/bitcoin-abc"
                rel="noreferrer"
                target="_blank"
              >
                open source,
              </a>
               
              non-custodial web wallet for 
              eCash
              .
            </p>
            <button
              class="sc-bXGyLb sc-eLExRp cOkytB"
            >
              New Wallet
            </button>
            <button
              class="sc-bXGyLb sc-krvtoX hNTXGz"
            >
              Import Wallet
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
    at Object.getElementError (/work/cashtab/node_modules/@testing-library/dom/dist/config.js:37:19)
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
    at Object.getByRole (/work/cashtab/src/components/App/__tests__/App.test.js:666:37)

Each failure log is accessible here:
CashTab Unit Tests: <App /> A new user can import a mnemonic

bytesofman updated this revision to Diff 47354.Apr 20 2024, 21:37

update legacy test to use new modal

bytesofman published this revision for review.Apr 20 2024, 21:38
Harbormaster completed remote builds in B28699: Diff 47354.Apr 20 2024, 21:41
emack accepted this revision.Apr 21 2024, 12:48
This revision is now accepted and ready to land.Apr 21 2024, 12:48
Closed by commit rABC71f8dee097e9: [Cashtab] Improve OnBoarding component (authored by bytesofman). · Explain WhyApr 21 2024, 13:46
This revision was automatically updated to reflect the committed changes.
bytesofman added a commit: rABC71f8dee097e9: [Cashtab] Improve OnBoarding component.

Revision Contents
Changeset List

PathSize
cashtab/
src/
components/
App/
2 lines
OnBoarding/
__tests__/
205 lines
104 lines
30 lines

Diff 47352

View Options

cashtab/src/components/App/App.js

Loading...
View Options

cashtab/src/components/OnBoarding/OnBoarding.js

Loading...
View Options

cashtab/src/components/OnBoarding/__tests__/index.test.js

Loading...
View Options

cashtab/src/components/OnBoarding/index.js

Loading...
View Options

cashtab/src/components/OnBoarding/styles.js

Loading...