Skip to content

feat: redesign approval editor #11011

feat: redesign approval editor

feat: redesign approval editor #11011

GitHub Actions / Tests annotations (🧪 jest-coverage-report-action) failed May 3, 2024 in 0s

Test suite run failed

Failed tests: 2/1422. Failed suites: 1/198.

Details

Created failed tests' annotations. To disable them, see documentation.

  ● ApprovalEditor › renders a read-only view if the transaction contains signatures

    TestingLibraryElementError: Unable to find an element with the text: 0x4da7...5e4c. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    Ignored nodes: comments, script, style
    <body>
      <div>
        <div
          class="container MuiBox-root css-rxas85"
        >
          <div>
            <p
              class="MuiTypography-root MuiTypography-body1 css-1hvxk4z-MuiTypography-root"
            >
              Allow access to tokens?
            </p>
            <p
              class="MuiTypography-root MuiTypography-body2 css-ceebrx-MuiTypography-root"
            >
              This allows the spender to spend the specified amount of your tokens.
            </p>
          </div>
          <ul
            class="MuiList-root MuiList-padding approvalsList css-h4y409-MuiList-root"
          >
            <div
              class="MuiStack-root css-1ucnu3w-MuiStack-root"
            >
              <div
                class="MuiStack-root approvalField css-19jd1d1-MuiStack-root"
              >
                <p
                  class="MuiTypography-root MuiTypography-body2 css-13ba1nr-MuiTypography-root"
                >
                  Spender
                </p>
                <div>
                  <div
                    class="container"
                  >
                    <div
                      class="avatarContainer"
                      style="width: 24px; height: 24px;"
                    >
                      <div
                        class="icon"
                        style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDgiIHNoYXBlLXJlbmRlcmluZz0ib3B0aW1pemVTcGVlZCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJoc2woMTc0IDU4JSA0MyUpIiBkPSJNMCwwSDhWOEgweiIvPjxwYXRoIGZpbGw9ImhzbCgyNjkgOTMlIDUwJSkiIGQ9Ik0xLDBoMXYxaC0xek02LDBoMXYxaC0xek0zLDBoMXYxaC0xek00LDBoMXYxaC0xek0xLDFoMXYxaC0xek02LDFoMXYxaC0xek0yLDFoMXYxaC0xek01LDFoMXYxaC0xek0zLDFoMXYxaC0xek00LDFoMXYxaC0xek0wLDJoMXYxaC0xek03LDJoMXYxaC0xek0yLDJoMXYxaC0xek01LDJoMXYxaC0xek0zLDJoMXYxaC0xek00LDJoMXYxaC0xek0wLDNoMXYxaC0xek03LDNoMXYxaC0xek0wLDVoMXYxaC0xek03LDVoMXYxaC0xek0yLDVoMXYxaC0xek01LDVoMXYxaC0xek0wLDZoMXYxaC0xek03LDZoMXYxaC0xek0xLDZoMXYxaC0xek02LDZoMXYxaC0xek0zLDZoMXYxaC0xek00LDZoMXYxaC0xeiIvPjxwYXRoIGZpbGw9ImhzbCgxMTcgOTAlIDU0JSkiIGQ9Ik0xLDJoMXYxaC0xek02LDJoMXYxaC0xek0xLDNoMXYxaC0xek02LDNoMXYxaC0xek0yLDRoMXYxaC0xek01LDRoMXYxaC0xek0zLDRoMXYxaC0xek00LDRoMXYxaC0xeiIvPjwvc3ZnPg==); width: 24px; height: 24px;"
                      />
                    </div>
                    <div
                      class="MuiBox-root css-i6bazn"
                    >
                      <div
                        class="addressContainer"
                      >
                        <div
                          class="MuiBox-root css-b5p5gz"
                        >
                          <span
                            aria-label="Copy to clipboard"
                            class=""
                            data-mui-internal-clone-element="true"
                            style="cursor: pointer;"
                          >
                            <span>
                              0x4da7e8cca0af1fc2b1b646a5eaa7f74a2b6f5e4c
                            </span>
                          </span>
                        </div>
                        <div
                          class="MuiBox-root css-yjghm1"
                        >
                          <button
                            aria-label=""
                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1o2vr87-MuiButtonBase-root-MuiIconButton-root"
                            data-mui-internal-clone-element="true"
                            data-testid="explorer-btn"
                            href=""
                            rel="noreferrer"
                            tabindex="0"
                            target="_blank"
                            type="button"
                          >
                            <mock-icon
                              aria-hidden="true"
                              classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-11dtfly-MuiSvgIcon-root"
                              focusable="false"
                            />
                            <span
                              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                            />
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <li
                class="MuiListItem-root MuiListItem-gutters css-1xt1ued-MuiListItem-root"
                data-testid="approval-item"
              >
                <div
                  class="MuiStack-root approvalField css-1kq5d21-MuiStack-root"
                >
                  <img
                    alt="TST"
                    class="image"
                    height="32"
                    src="/images/common/token-placeholder.svg"
                  />
                  <div
                    class="MuiBox-root css-0"
                  >
                    <p
                      class="MuiTypography-root MuiTypography-body2 css-13ba1nr-MuiTypography-root"
                    >
                      Set TST allowance to
                    </p>
                    <p
                      class="MuiTypography-root MuiTypography-body1 css-1pqjor9-MuiTypography-root"
                      data-testid="token-amount"
                    >
                      420
                    </p>
                  </div>
                </div>
              </li>
            </div>
          </ul>
        </div>
      </div>
    </body>

      101 |     expect(result.getByText('TST', { exact: false }))
      102 |     expect(result.getByText('420', { exact: false }))
    > 103 |     expect(result.getByText(shortenAddress(spenderAddress)))
          |                   ^
      104 |   })
      105 |
      106 |   it('renders a form if there are no signatures', async () => {

      at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:37:19)
      at node_modules/@testing-library/dom/dist/query-helpers.js:76:38
      at node_modules/@testing-library/dom/dist/query-helpers.js:52:17
      at node_modules/@testing-library/dom/dist/query-helpers.js:95:19
      at Object.getByText (src/components/tx/ApprovalEditor/ApprovalEditor.test.tsx:103:19)

  ● ApprovalEditor › renders a form if there are no signatures

    TestingLibraryElementError: Unable to find an element with the text: 0xbf7f...0bfe. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    Ignored nodes: comments, script, style
    <body>
      <div>
        <div
          class="container MuiBox-root css-rxas85"
        >
          <div>
            <p
              class="MuiTypography-root MuiTypography-body1 css-1hvxk4z-MuiTypography-root"
            >
              Allow access to tokens?
            </p>
            <p
              class="MuiTypography-root MuiTypography-body2 css-ceebrx-MuiTypography-root"
            >
              This allows the spender to spend the specified amount of your tokens.
            </p>
          </div>
          <ul
            class="MuiList-root MuiList-padding approvalsList css-h4y409-MuiList-root"
          >
            <div
              class="MuiBox-root css-0"
            >
              <div
                class="MuiStack-root css-1ucnu3w-MuiStack-root"
              >
                <div
                  class="MuiStack-root approvalField css-19jd1d1-MuiStack-root"
                >
                  <p
                    class="MuiTypography-root MuiTypography-body2 css-13ba1nr-MuiTypography-root"
                  >
                    Spender
                  </p>
                  <div>
                    <div
                      class="container"
                    >
                      <div
                        class="avatarContainer"
                        style="width: 24px; height: 24px;"
                      >
                        <div
                          class="icon"
                          style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDgiIHNoYXBlLXJlbmRlcmluZz0ib3B0aW1pemVTcGVlZCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJoc2woNDIgNzElIDUxJSkiIGQ9Ik0wLDBIOFY4SDB6Ii8+PHBhdGggZmlsbD0iaHNsKDI3NyA4OSUgMzQlKSIgZD0iTTEsMGgxdjFoLTF6TTYsMGgxdjFoLTF6TTIsMGgxdjFoLTF6TTUsMGgxdjFoLTF6TTEsMWgxdjFoLTF6TTYsMWgxdjFoLTF6TTIsMWgxdjFoLTF6TTUsMWgxdjFoLTF6TTMsMmgxdjFoLTF6TTQsMmgxdjFoLTF6TTIsM2gxdjFoLTF6TTUsM2gxdjFoLTF6TTEsNGgxdjFoLTF6TTYsNGgxdjFoLTF6TTIsNGgxdjFoLTF6TTUsNGgxdjFoLTF6TTAsNWgxdjFoLTF6TTcsNWgxdjFoLTF6TTEsNWgxdjFoLTF6TTYsNWgxdjFoLTF6TTMsNWgxdjFoLTF6TTQsNWgxdjFoLTF6TTEsNmgxdjFoLTF6TTYsNmgxdjFoLTF6TTIsNmgxdjFoLTF6TTUsNmgxdjFoLTF6TTMsNmgxdjFoLTF6TTQsNmgxdjFoLTF6TTAsN2gxdjFoLTF6TTcsN2gxdjFoLTF6Ii8+PHBhdGggZmlsbD0iaHNsKDY2IDQyJSA2MCUpIiBkPSJNMSwyaDF2MWgtMXpNNiwyaDF2MWgtMXpNMCwzaDF2MWgtMXpNNywzaDF2MWgtMXpNMyw0aDF2MWgtMXpNNCw0aDF2MWgtMXpNMiw1aDF2MWgtMXpNNSw1aDF2MWgtMXpNMCw2aDF2MWgtMXpNNyw2aDF2MWgtMXpNMSw3aDF2MWgtMXpNNiw3aDF2MWgtMXoiLz48L3N2Zz4=); width: 24px; height: 24px;"
                        />
                      </div>
                      <div
                        class="MuiBox-root css-i6bazn"
                      >
                        <div
                          class="addressContainer"
                        >
                          <div
                            class="MuiBox-root css-b5p5gz"
                          >
                            <span
                              aria-label="Copy to clipboard"
                              class=""
                              data-mui-internal-clone-element="true"
                              style="cursor: pointer;"
                            >
                              <span>
                                0xbf7f4c59fccef15c0cfcb1aa7bbf5ca8ef9d0bfe
                              </span>
                            </span>
                          </div>
                          <div
                            class="MuiBox-root css-yjghm1"
                          >
                            <button
                              aria-label=""
                              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1o2vr87-MuiButtonBase-root-MuiIconButton-root"
                              data-mui-internal-clone-element="true"
                              data-testid="explorer-btn"
                              href=""
                              rel="noreferrer"
                              tabindex="0"
                              target="_blank"
                              type="button"
                            >
                              <mock-icon
                                aria-hidden="true"
                                classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-11dtfly-MuiSvgIcon-root"
                                focusable="false"
                              />
                              <span
                                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                              />
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <li
                  class="MuiListItem-root MuiListItem-gutters css-1xt1ued-MuiListItem-root"
                  data-testid="approval-item"
                >
                  <div
                    class="MuiStack-root approvalField css-1kq5d21-MuiStack-root"
                  >
                    <div
                      class="MuiBox-root css-ct9q29"
                    >
                      <img
                        alt="TST"
                        class="image"
                        height="32"
                        src="/images/common/token-placeholder.svg"
                      />
                    </div>
                    <div
                      class="MuiAutocomplete-root MuiAutocomplete-fullWidth css-1kkal6p-MuiAutocomplete-root"
                    >
                      <div
                        class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root css-1z10yd4-MuiFormControl-root-MuiTextField-root"
                      >
                        <label
                          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-standard MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-standard css-19tvrld-MuiFormLabel-root-MuiInputLabel-root"
                          data-shrink="true"
                          for=":r4:"
                          id=":r4:-label"
                        >
                          Set TST allowance to
                        </label>
                        <div
                          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiAutocomplete-inputRoot css-nd4g0u-MuiInputBase-root-MuiInput-root"
                        >
                          <input
                            aria-autocomplete="list"
                            aria-expanded="false"
                            aria-invalid="false"
                            autocapitalize="none"
                            autocomplete="off"
                            class="MuiInputBase-input MuiInput-input MuiInputBase-inputSizeSmall approvalAmount css-1653i1n-MuiInputBase-input-MuiInput-input"
                            id=":r4:"
                            name="approvals.0"
                            readonly=""
                            role="combobox"
                            spellcheck="false"
                            type="text"
                            value="420.0"
                          />
                        </div>
                      </div>
                    </div>
                    <span
                      data-track="modals: Edit approval"
                    >
                      <button
                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorBorder MuiIconButton-sizeMedium css-xx60qq-MuiButtonBase-root-MuiIconButton-root"
                        tabindex="0"
                        title="Edit"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-1q0g6p-MuiSvgIcon-root-MuiSvgIcon-root"
                          data-testid="EditOutlinedIcon"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"
                          />
                        </svg>
                        <span
                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                        />
                      </button>
                    </span>
                  </div>
                </li>
              </div>
            </div>
          </ul>
        </div>
      </div>
    </body>

      131 |     expect(amountInput1).toHaveValue('420.0')
      132 |     expect(result.getByText('TST', { exact: false }))
    > 133 |     expect(result.getByText(shortenAddress(spenderAddress)))
          |                   ^
      134 |   })
      135 |
      136 |   it('should modify approvals on save', async () => {

      at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:37:19)
      at node_modules/@testing-library/dom/dist/query-helpers.js:76:38
      at node_modules/@testing-library/dom/dist/query-helpers.js:52:17
      at node_modules/@testing-library/dom/dist/query-helpers.js:95:19
      at Object.getByText (src/components/tx/ApprovalEditor/ApprovalEditor.test.tsx:133:19)

Annotations

Check failure on line 77 in src/components/tx/ApprovalEditor/ApprovalEditor.test.tsx

See this annotation in the file changed.

@github-actions github-actions / Tests annotations (🧪 jest-coverage-report-action)

ApprovalEditor > renders a read-only view if the transaction contains signatures

TestingLibraryElementError: Unable to find an element with the text: 0x4da7...5e4c. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      class="container MuiBox-root css-rxas85"
    >
      <div>
        <p
          class="MuiTypography-root MuiTypography-body1 css-1hvxk4z-MuiTypography-root"
        >
          Allow access to tokens?
        </p>
        <p
          class="MuiTypography-root MuiTypography-body2 css-ceebrx-MuiTypography-root"
        >
          This allows the spender to spend the specified amount of your tokens.
        </p>
      </div>
      <ul
        class="MuiList-root MuiList-padding approvalsList css-h4y409-MuiList-root"
      >
        <div
          class="MuiStack-root css-1ucnu3w-MuiStack-root"
        >
          <div
            class="MuiStack-root approvalField css-19jd1d1-MuiStack-root"
          >
            <p
              class="MuiTypography-root MuiTypography-body2 css-13ba1nr-MuiTypography-root"
            >
              Spender
            </p>
            <div>
              <div
                class="container"
              >
                <div
                  class="avatarContainer"
                  style="width: 24px; height: 24px;"
                >
                  <div
                    class="icon"
                    style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDgiIHNoYXBlLXJlbmRlcmluZz0ib3B0aW1pemVTcGVlZCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJoc2woMTc0IDU4JSA0MyUpIiBkPSJNMCwwSDhWOEgweiIvPjxwYXRoIGZpbGw9ImhzbCgyNjkgOTMlIDUwJSkiIGQ9Ik0xLDBoMXYxaC0xek02LDBoMXYxaC0xek0zLDBoMXYxaC0xek00LDBoMXYxaC0xek0xLDFoMXYxaC0xek02LDFoMXYxaC0xek0yLDFoMXYxaC0xek01LDFoMXYxaC0xek0zLDFoMXYxaC0xek00LDFoMXYxaC0xek0wLDJoMXYxaC0xek03LDJoMXYxaC0xek0yLDJoMXYxaC0xek01LDJoMXYxaC0xek0zLDJoMXYxaC0xek00LDJoMXYxaC0xek0wLDNoMXYxaC0xek03LDNoMXYxaC0xek0wLDVoMXYxaC0xek03LDVoMXYxaC0xek0yLDVoMXYxaC0xek01LDVoMXYxaC0xek0wLDZoMXYxaC0xek03LDZoMXYxaC0xek0xLDZoMXYxaC0xek02LDZoMXYxaC0xek0zLDZoMXYxaC0xek00LDZoMXYxaC0xeiIvPjxwYXRoIGZpbGw9ImhzbCgxMTcgOTAlIDU0JSkiIGQ9Ik0xLDJoMXYxaC0xek02LDJoMXYxaC0xek0xLDNoMXYxaC0xek02LDNoMXYxaC0xek0yLDRoMXYxaC0xek01LDRoMXYxaC0xek0zLDRoMXYxaC0xek00LDRoMXYxaC0xeiIvPjwvc3ZnPg==); width: 24px; height: 24px;"
                  />
                </div>
                <div
                  class="MuiBox-root css-i6bazn"
                >
                  <div
                    class="addressContainer"
                  >
                    <div
                      class="MuiBox-root css-b5p5gz"
                    >
                      <span
                        aria-label="Copy to clipboard"
                        class=""
                        data-mui-internal-clone-element="true"
                        style="cursor: pointer;"
                      >
                        <span>
                          0x4da7e8cca0af1fc2b1b646a5eaa7f74a2b6f5e4c
                        </span>
                      </span>
                    </div>
                    <div
                      class="MuiBox-root css-yjghm1"
                    >
                      <button
                        aria-label=""
                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1o2vr87-MuiButtonBase-root-MuiIconButton-root"
                        data-mui-internal-clone-element="true"
                        data-testid="explorer-btn"
                        href=""
                        rel="noreferrer"
                        tabindex="0"
                        target="_blank"
                        type="button"
                      >
                        <mock-icon
                          aria-hidden="true"
                          classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-11dtfly-MuiSvgIcon-root"
                          focusable="false"
                        />
                        <span
                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                        />
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <li
            class="MuiListItem-root MuiListItem-gutters css-1xt1ued-MuiListItem-root"
            data-testid="approval-item"
          >
            <div
              class="MuiStack-root approvalField css-1kq5d21-MuiStack-root"
            >
              <img
                alt="TST"
                class="image"
                height="32"
                src="/images/common/token-placeholder.svg"
              />
              <div
                class="MuiBox-root css-0"
              >
                <p
                  class="MuiTypography-root MuiTypography-body2 css-13ba1nr-MuiTypography-root"
                >
                  Set TST allowance to
                </p>
                <p
                  class="MuiTypography-root MuiTypography-body1 css-1pqjor9-MuiTypography-root"
                  data-testid="token-amount"
                >
                  420
                </p>
              </div>
            </div>
          </li>
        </div>
      </ul>
    </div>
  </div>
</body>
    at Object.getElementError (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/@testing-library/dom/dist/config.js:37:19)
    at /home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
    at /home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
    at /home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
    at Object.getByText (/home/runner/work/safe-wallet-web/safe-wallet-web/src/components/tx/ApprovalEditor/ApprovalEditor.test.tsx:103:19)
    at Promise.then.completed (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/utils.js:231:10)
    at _callCircusTest (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/run.js:316:40)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at _runTest (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/run.js:252:3)
    at _runTestsForDescribeBlock (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/run.js:121:9)
    at run (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-runner/build/runTest.js:367:16)
    at runTest (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-runner/build/runTest.js:444:34)
    at Object.worker (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-runner/build/testWorker.js:106:12)

Check failure on line 106 in src/components/tx/ApprovalEditor/ApprovalEditor.test.tsx

See this annotation in the file changed.

@github-actions github-actions / Tests annotations (🧪 jest-coverage-report-action)

ApprovalEditor > renders a form if there are no signatures

TestingLibraryElementError: Unable to find an element with the text: 0xbf7f...0bfe. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      class="container MuiBox-root css-rxas85"
    >
      <div>
        <p
          class="MuiTypography-root MuiTypography-body1 css-1hvxk4z-MuiTypography-root"
        >
          Allow access to tokens?
        </p>
        <p
          class="MuiTypography-root MuiTypography-body2 css-ceebrx-MuiTypography-root"
        >
          This allows the spender to spend the specified amount of your tokens.
        </p>
      </div>
      <ul
        class="MuiList-root MuiList-padding approvalsList css-h4y409-MuiList-root"
      >
        <div
          class="MuiBox-root css-0"
        >
          <div
            class="MuiStack-root css-1ucnu3w-MuiStack-root"
          >
            <div
              class="MuiStack-root approvalField css-19jd1d1-MuiStack-root"
            >
              <p
                class="MuiTypography-root MuiTypography-body2 css-13ba1nr-MuiTypography-root"
              >
                Spender
              </p>
              <div>
                <div
                  class="container"
                >
                  <div
                    class="avatarContainer"
                    style="width: 24px; height: 24px;"
                  >
                    <div
                      class="icon"
                      style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDgiIHNoYXBlLXJlbmRlcmluZz0ib3B0aW1pemVTcGVlZCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJoc2woNDIgNzElIDUxJSkiIGQ9Ik0wLDBIOFY4SDB6Ii8+PHBhdGggZmlsbD0iaHNsKDI3NyA4OSUgMzQlKSIgZD0iTTEsMGgxdjFoLTF6TTYsMGgxdjFoLTF6TTIsMGgxdjFoLTF6TTUsMGgxdjFoLTF6TTEsMWgxdjFoLTF6TTYsMWgxdjFoLTF6TTIsMWgxdjFoLTF6TTUsMWgxdjFoLTF6TTMsMmgxdjFoLTF6TTQsMmgxdjFoLTF6TTIsM2gxdjFoLTF6TTUsM2gxdjFoLTF6TTEsNGgxdjFoLTF6TTYsNGgxdjFoLTF6TTIsNGgxdjFoLTF6TTUsNGgxdjFoLTF6TTAsNWgxdjFoLTF6TTcsNWgxdjFoLTF6TTEsNWgxdjFoLTF6TTYsNWgxdjFoLTF6TTMsNWgxdjFoLTF6TTQsNWgxdjFoLTF6TTEsNmgxdjFoLTF6TTYsNmgxdjFoLTF6TTIsNmgxdjFoLTF6TTUsNmgxdjFoLTF6TTMsNmgxdjFoLTF6TTQsNmgxdjFoLTF6TTAsN2gxdjFoLTF6TTcsN2gxdjFoLTF6Ii8+PHBhdGggZmlsbD0iaHNsKDY2IDQyJSA2MCUpIiBkPSJNMSwyaDF2MWgtMXpNNiwyaDF2MWgtMXpNMCwzaDF2MWgtMXpNNywzaDF2MWgtMXpNMyw0aDF2MWgtMXpNNCw0aDF2MWgtMXpNMiw1aDF2MWgtMXpNNSw1aDF2MWgtMXpNMCw2aDF2MWgtMXpNNyw2aDF2MWgtMXpNMSw3aDF2MWgtMXpNNiw3aDF2MWgtMXoiLz48L3N2Zz4=); width: 24px; height: 24px;"
                    />
                  </div>
                  <div
                    class="MuiBox-root css-i6bazn"
                  >
                    <div
                      class="addressContainer"
                    >
                      <div
                        class="MuiBox-root css-b5p5gz"
                      >
                        <span
                          aria-label="Copy to clipboard"
                          class=""
                          data-mui-internal-clone-element="true"
                          style="cursor: pointer;"
                        >
                          <span>
                            0xbf7f4c59fccef15c0cfcb1aa7bbf5ca8ef9d0bfe
                          </span>
                        </span>
                      </div>
                      <div
                        class="MuiBox-root css-yjghm1"
                      >
                        <button
                          aria-label=""
                          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1o2vr87-MuiButtonBase-root-MuiIconButton-root"
                          data-mui-internal-clone-element="true"
                          data-testid="explorer-btn"
                          href=""
                          rel="noreferrer"
                          tabindex="0"
                          target="_blank"
                          type="button"
                        >
                          <mock-icon
                            aria-hidden="true"
                            classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-11dtfly-MuiSvgIcon-root"
                            focusable="false"
                          />
                          <span
                            class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                          />
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <li
              class="MuiListItem-root MuiListItem-gutters css-1xt1ued-MuiListItem-root"
              data-testid="approval-item"
            >
              <div
                class="MuiStack-root approvalField css-1kq5d21-MuiStack-root"
              >
                <div
                  class="MuiBox-root css-ct9q29"
                >
                  <img
                    alt="TST"
                    class="image"
                    height="32"
                    src="/images/common/token-placeholder.svg"
                  />
                </div>
                <div
                  class="MuiAutocomplete-root MuiAutocomplete-fullWidth css-1kkal6p-MuiAutocomplete-root"
                >
                  <div
                    class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root css-1z10yd4-MuiFormControl-root-MuiTextField-root"
                  >
                    <label
                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-standard MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-standard css-19tvrld-MuiFormLabel-root-MuiInputLabel-root"
                      data-shrink="true"
                      for=":r4:"
                      id=":r4:-label"
                    >
                      Set TST allowance to
                    </label>
                    <div
                      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiAutocomplete-inputRoot css-nd4g0u-MuiInputBase-root-MuiInput-root"
                    >
                      <input
                        aria-autocomplete="list"
                        aria-expanded="false"
                        aria-invalid="false"
                        autocapitalize="none"
                        autocomplete="off"
                        class="MuiInputBase-input MuiInput-input MuiInputBase-inputSizeSmall approvalAmount css-1653i1n-MuiInputBase-input-MuiInput-input"
                        id=":r4:"
                        name="approvals.0"
                        readonly=""
                        role="combobox"
                        spellcheck="false"
                        type="text"
                        value="420.0"
                      />
                    </div>
                  </div>
                </div>
                <span
                  data-track="modals: Edit approval"
                >
                  <button
                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorBorder MuiIconButton-sizeMedium css-xx60qq-MuiButtonBase-root-MuiIconButton-root"
                    tabindex="0"
                    title="Edit"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-1q0g6p-MuiSvgIcon-root-MuiSvgIcon-root"
                      data-testid="EditOutlinedIcon"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"
                      />
                    </svg>
                    <span
                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                    />
                  </button>
                </span>
              </div>
            </li>
          </div>
        </div>
      </ul>
    </div>
  </div>
</body>
    at Object.getElementError (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/@testing-library/dom/dist/config.js:37:19)
    at /home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
    at /home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
    at /home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
    at Object.getByText (/home/runner/work/safe-wallet-web/safe-wallet-web/src/components/tx/ApprovalEditor/ApprovalEditor.test.tsx:133:19)
    at Promise.then.completed (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/utils.js:231:10)
    at _callCircusTest (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/run.js:316:40)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at _runTest (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/run.js:252:3)
    at _runTestsForDescribeBlock (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/run.js:121:9)
    at run (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-runner/build/runTest.js:367:16)
    at runTest (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-runner/build/runTest.js:444:34)
    at Object.worker (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-runner/build/testWorker.js:106:12)