chore: add testing-library/dom dependency

.depcheckrc.yml

@@ -80,6 +80,7 @@ ignores:
   - '@babel/plugin-transform-logical-assignment-operators'
   # trezor
   - 'ts-mixer'
+  - '@testing-library/dom'
 
 # files depcheck should not parse
 ignorePatterns:

package.json

@@ -505,6 +505,7 @@
     "@storybook/test-runner": "^0.14.1",
     "@storybook/theming": "^7.6.20",
     "@swc/helpers": "^0.5.7",
+    "@testing-library/dom": "^7.31.2",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^10.4.8",
     "@testing-library/react-hooks": "^8.0.1",

ui/components/app/assets/nfts/nft-details/__snapshots__/nft-details.test.js.snap

@@ -182,183 +182,3 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
   </div>
 </div>
 `;
-
-exports[`NFT Details should match minimal props and state snapshot 2`] = `
-<div>
-  <div
-    class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
-  >
-    <div
-      class="mm-box multichain-page__inner-container mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--height-full mm-box--background-color-background-default"
-    >
-      <div
-        class="mm-box multichain-page-content nft-details__content mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--height-full"
-      >
-        <div
-          class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
-        >
-          <button
-            aria-label="Back"
-            class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-alternative mm-box--background-color-transparent mm-box--rounded-lg"
-            data-testid="nft__back"
-          >
-            <span
-              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
-              style="mask-image: url('./images/icons/arrow-left.svg');"
-            />
-          </button>
-          <div>
-            <button
-              aria-label="NFT Options"
-              class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-transparent mm-box--rounded-lg"
-              data-testid="nft-options__button"
-            >
-              <span
-                class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
-                style="mask-image: url('./images/icons/more-vertical.svg');"
-              />
-            </button>
-          </div>
-        </div>
-        <div
-          class="mm-box mm-box--margin-top-1 mm-box--margin-bottom-8 mm-box--display-flex mm-box--justify-content-center"
-        >
-          <div
-            class="mm-box nft-details__nft-item"
-          >
-            <button
-              class="mm-box nft-item__container"
-              data-testid="nft-item"
-            >
-              <div
-                class="mm-box mm-badge-wrapper nft-item__badge-wrapper nft-item__badge-wrapper__clickable mm-box--display-block"
-              >
-                <img
-                  alt="MUNK #1 1"
-                  class="mm-box nft-item__item nft-item__item-image mm-box--display-block mm-box--justify-content-center"
-                  data-testid="nft-image"
-                  src="https://bafybeiclzx7zfjvuiuwobn5ip3ogc236bjqfjzoblumf4pau4ep6dqramu.ipfs.dweb.link"
-                />
-                <div
-                  class="mm-box mm-badge-wrapper__badge-container"
-                  style="top: -4px; right: -4px;"
-                >
-                  <div
-                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network nft-item__network-badge mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
-                    data-testid="nft-network-badge"
-                  >
-                    G
-                  </div>
-                </div>
-              </div>
-            </button>
-          </div>
-        </div>
-        <div
-          class="mm-box"
-        >
-          <div
-            class="mm-box mm-box--display-flex mm-box--align-items-center"
-          >
-            <h3
-              class="mm-box mm-text mm-text--heading-md mm-text--font-weight-bold mm-text--font-style-normal mm-box--color-text-default"
-              data-testid="nft-details__name"
-              style="font-size: 24px;"
-            >
-              MUNK #1
-            </h3>
-          </div>
-          <div
-            class="mm-box nft-details__show-more mm-box--margin-top-2"
-            style="position: relative; overflow: hidden;"
-          >
-            <p
-              class="mm-box mm-text mm-text--body-sm mm-text--font-weight-medium mm-box--color-text-alternative"
-              data-testid="nft-details__description"
-            />
-          </div>
-          <div
-            class="mm-box mm-box--margin-top-4 mm-box--margin-bottom-4 mm-box--display-flex mm-box--gap-4 mm-box--flex-wrap-wrap"
-          />
-          <div
-            class="mm-box mm-box--margin-top-2 mm-box--display-flex mm-box--justify-content-space-between"
-          >
-            <p
-              class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
-            >
-              Contract address
-            </p>
-            <div
-              class="mm-box mm-box--display-flex"
-            >
-              <button
-                class="nft-details__addressButton"
-              >
-                <p
-                  class="mm-box mm-text mm-text--body-sm-medium mm-text--font-style-normal mm-box--color-primary-default"
-                >
-                  0xDc738...06414
-                </p>
-              </button>
-              <button
-                aria-label="copy"
-                class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-flex-end mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-lg"
-                data-testid="nft-address-copy"
-              >
-                <span
-                  class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
-                  style="mask-image: url('./images/icons/copy.svg');"
-                />
-              </button>
-            </div>
-          </div>
-          <div
-            class="mm-box mm-box--margin-top-2 mm-box--display-flex mm-box--justify-content-space-between"
-          >
-            <p
-              class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
-            >
-              Token ID
-            </p>
-            <p
-              class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
-            >
-              1
-            </p>
-          </div>
-          <div
-            class="mm-box mm-box--margin-top-2 mm-box--display-flex mm-box--justify-content-space-between"
-          >
-            <p
-              class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
-            >
-              Token standard
-            </p>
-            <p
-              class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
-            >
-              ERC721
-            </p>
-          </div>
-          <div
-            class="mm-box mm-box--margin-top-4 mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap"
-          >
-
-          </div>
-          <div
-            class="mm-box mm-box--margin-top-4"
-          >
-            <h6
-              class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
-            >
-              Disclaimer: MetaMask pulls the media file from the source url. This url sometimes gets changed by the marketplace on which the NFT was minted.
-            </h6>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`NFT Details should match minimal props and state snapshot 3`] = `<div />`;

ui/components/app/assets/nfts/nft-details/__snapshots__/nft-full-image.test.js.snap

@@ -80,5 +80,3 @@ exports[`NFT full image should match snapshot 1`] = `
   </div>
 </div>
 `;
-
-exports[`NFT full image should match snapshot 2`] = `<div />`;

ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap

@@ -442,11 +442,3 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
   </div>
 </body>
 `;
-
-exports[`Connect More Accounts Modal should render correctly 2`] = `
-<body>
-  <div
-    id="popover-content"
-  />
-</body>
-`;

ui/pages/confirmations/components/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap

@@ -115,5 +115,3 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
   </div>
 </div>
 `;
-
-exports[`ConfirmLegacyGasDisplay should match snapshot 2`] = `<div />`;