Skip to content

I
interface
Commit aa77a7a2 authored by Jack Short's avatar Jack Short Committed by GitHub
Browse files
Options

chore: adding snapshot tests for nftCard components (#6410)

parent 67b58968
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 847 additions and 0 deletions
src/nft/components/collection/CollectionAsset.test.tsx 0 → 100644
View file @ aa77a7a2
import { UniformAspectRatios } from 'nft/types'
import { TEST_NFT_ASSET } from 'test-utils/constants'
import { render } from 'test-utils/render'
import { CollectionAsset } from './CollectionAsset'
describe('NftCard', () => {
it('renders correctly', () => {
const { asFragment } = render(
<CollectionAsset
asset={TEST_NFT_ASSET}
isMobile={false}
mediaShouldBePlaying={false}
setCurrentTokenPlayingMedia={() => undefined}
uniformAspectRatio={UniformAspectRatios.square}
setUniformAspectRatio={() => undefined}
setRenderedHeight={() => undefined}
/>
)
expect(asFragment()).toMatchSnapshot()
})
})
src/nft/components/profile/view/ViewMyNftsAsset.test.tsx 0 → 100644
View file @ aa77a7a2
import { TEST_NFT_WALLET_ASSET } from 'test-utils/constants'
import { render } from 'test-utils/render'
import { ViewMyNftsAsset } from './ViewMyNftsAsset'
describe('NftCard', () => {
it('renders correctly', () => {
const { asFragment } = render(
<ViewMyNftsAsset
asset={TEST_NFT_WALLET_ASSET}
mediaShouldBePlaying={false}
setCurrentTokenPlayingMedia={() => undefined}
hideDetails={false}
/>
)
expect(asFragment()).toMatchSnapshot()
})
})
src/nft/components/profile/view/__snapshots__/ViewMyNftsAsset.test.tsx.snap 0 → 100644
View file @ aa77a7a2
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`NftCard renders correctly 1`] = `
<DocumentFragment>
.c2 {
box-sizing: border-box;
margin: 0;
min-width: 0;
}
.c3 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 0;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.c14 {
color: #0D111C;
}
.c9 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.c1 {
position: relative;
pointer-events: auto;
cursor: pointer;
}
.c1:hover {
opacity: 1;
}
.c4 {
overflow: hidden;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.c6 {
width: 100%;
aspect-ratio: 1;
-webkit-transition: 250ms ease -webkit-transform;
-webkit-transition: 250ms ease transform;
transition: 250ms ease transform;
will-change: transform;
object-fit: contain;
visibility: visible;
background: linear-gradient(270deg,#D2D9EE 0%,#FFFFFF 100%);
}
.c7 {
position: relative;
height: 84px;
}
.c10 {
position: absolute;
width: 100%;
padding: 16px 8px 0px;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 8px;
height: 84px;
background: #FFFFFF;
will-change: transform;
-webkit-transition: 250ms ease -webkit-transform;
-webkit-transition: 250ms ease transform;
transition: 250ms ease transform;
}
.c20 {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 8px 0px;
bottom: -32px;
left: 8px;
right: 8px;
color: #F5F6FC;
background: #FB118E;
-webkit-transition: 250ms ease bottom,250ms ease visibility;
transition: 250ms ease bottom,250ms ease visibility;
will-change: transform;
border-radius: 8px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
font-weight: 600 !important;
line-height: 16px;
visibility: hidden;
cursor: pointer;
}
.c20:before {
background-size: 100%;
border-radius: inherit;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
}
.c20:hover:before {
background-color: #98A1C014;
}
.c20:active:before {
background-color: #B8C0DC3d;
}
.c0 {
position: relative;
border-radius: 12px;
background-color: #FFFFFF;
overflow: hidden;
box-shadow: 0px 0px 8px rgba(51,53,72,0.04),1px 2px 4px rgba(51,53,72,0.12);
box-sizing: border-box;
-webkit-box-sizing: border-box;
isolation: isolate;
}
.c0:after {
content: '';
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
border: 1px solid;
border-radius: 12px;
border-color: #D2D9EE;
pointer-events: none;
-webkit-transition: 250ms ease border;
transition: 250ms ease border;
will-change: border;
}
.c0:hover .c19 {
visibility: visible;
bottom: 8px;
}
.c0:hover .c8 {
height: 112px;
-webkit-transform: translateY(-28px);
-ms-transform: translateY(-28px);
transform: translateY(-28px);
}
.c0:hover .c5 {
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
}
.c11 {
gap: 4px;
overflow: hidden;
width: 100%;
padding: 0px 8px;
height: 48px;
}
.c12 {
gap: 8px;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.c13 {
justify-items: center;
overflow: hidden;
white-space: nowrap;
gap: 8px;
}
.c15 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 600 !important;
line-height: 20px;
}
.c16 {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.c17 {
overflow: hidden;
white-space: nowrap;
}
.c18 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 24px;
}
@media screen and (max-width:640px) {
.c10 {
height: 112px;
-webkit-transform: translateY(-28px);
-ms-transform: translateY(-28px);
transform: translateY(-28px);
}
}
@media screen and (max-width:640px) {
.c20 {
visibility: visible;
bottom: 8px;
}
}
@media screen and (max-width:640px) {
}
<div
class="c0"
data-testid="nft-profile-asset"
draggable="false"
>
<div
class="c1"
>
<div
class="c2 c3 c4"
>
<img
class="c5 c6"
draggable="false"
src="https://c.neevacdn.net/image/upload/xyz/T96PksTnWGNh79CrzLn-zpYfqRWtD5wME0MBPL_Md6Q.png"
/>
</div>
</div>
<div
class="c7"
>
<div
class="c8 c9 c10"
>
<div
class="c9 c11"
>
<div
class="c2 c3 c12"
>
<div
class="c2 c3 c13"
>
<div
class="c14 c15 css-zhpkf8"
>
Froggy Friends Official
</div>
<svg
fill="none"
height="16px"
viewBox="0 0 20 20"
width="16px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.52795 13.8056C4.52719 14.4043 4.6712 14.8474 4.95997 15.135C5.24798 15.4233 5.68496 15.5651 6.27091 15.5605H7.57497C7.62945 15.5585 7.68379 15.5676 7.73463 15.5873C7.78547 15.607 7.83176 15.6369 7.87062 15.6752L8.79884 16.5928C9.22054 17.0142 9.63382 17.2237 10.0387 17.2214C10.4436 17.2191 10.8569 17.0096 11.2786 16.5928L12.1954 15.6752C12.2356 15.6365 12.2832 15.6063 12.3354 15.5866C12.3876 15.5669 12.4433 15.558 12.499 15.5605H13.7951C14.3871 15.5613 14.8283 15.4171 15.1186 15.1281C15.4089 14.839 15.5541 14.3959 15.5541 13.7987V12.5014C15.5511 12.389 15.5923 12.2799 15.6687 12.1974L16.5854 11.2798C17.0125 10.86 17.2245 10.4467 17.2214 10.0399C17.2184 9.63305 17.0064 9.21935 16.5854 8.79878L15.6687 7.88115C15.592 7.79886 15.5509 7.68965 15.5541 7.57719V6.2799C15.5533 5.68191 15.4093 5.23878 15.1221 4.95049C14.8348 4.66221 14.3925 4.51806 13.7951 4.51806H12.499C12.4433 4.52036 12.3877 4.51138 12.3355 4.49168C12.2834 4.47197 12.2357 4.44193 12.1954 4.40336L11.2786 3.48574C10.8569 3.06439 10.4436 2.85487 10.0387 2.85717C9.63382 2.85946 9.22054 3.06898 8.79884 3.48574L7.87062 4.40336C7.83164 4.44148 7.78536 4.4713 7.73454 4.49101C7.68373 4.51072 7.62943 4.51993 7.57497 4.51806H6.27091C5.67961 4.51883 5.23995 4.66182 4.95194 4.94705C4.66393 5.23228 4.51992 5.67656 4.51992 6.2799V7.58063C4.52314 7.69309 4.48197 7.80229 4.40533 7.88459L3.48859 8.80222C3.06765 9.22203 2.85718 9.63572 2.85718 10.0433C2.85718 10.4509 3.07033 10.8653 3.49662 11.2867L4.41336 12.2043C4.48979 12.2867 4.53092 12.3958 4.52795 12.5083V13.8056Z"
fill="#FB118E"
/>
<path
d="M9.99737 12.4943C9.86205 12.7005 9.6623 12.8164 9.43032 12.8164C9.19191 12.8164 9.00504 12.7198 8.83106 12.4943L7.31036 10.6385C7.20082 10.5032 7.14282 10.3614 7.14282 10.2068C7.14282 9.88458 7.38768 9.63327 7.70342 9.63327C7.89673 9.63327 8.05138 9.70415 8.20603 9.90391L9.40455 11.4311L11.9498 7.34577C12.0851 7.12669 12.2591 7.02359 12.4524 7.02359C12.7553 7.02359 13.0388 7.23623 13.0388 7.55197C13.0388 7.70017 12.9615 7.85482 12.8777 7.99014L9.99737 12.4943Z"
fill="white"
/>
</svg>
</div>
</div>
<div
class="c2 c3 c16"
>
<div
class="c80 c2 c3 c17"
>
<div
class="c14 c81 c18 css-1jljtub"
>
Froggy Friend #2359
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="c14 c19 c20 css-zhpkf8"
>
List for sale
</div>
</div>
</DocumentFragment>
`;
src/test-utils/constants.ts
View file @ aa77a7a2
import { CurrencyAmount, Percent, Token, TradeType } from '@uniswap/sdk-core'
import { V3Route } from '@uniswap/smart-order-router'
import { FeeAmount, Pool } from '@uniswap/v3-sdk'
import { NftStandard } from 'graphql/data/__generated__/types-and-hooks'
import JSBI from 'jsbi'
import { GenieAsset, Markets, WalletAsset } from 'nft/types'
import { InterfaceTrade } from 'state/routing/types'
export const TEST_TOKEN_1 = new Token(1, '0x0000000000000000000000000000000000000001', 18, 'ABC', 'Abc')
......@@ -55,3 +57,71 @@ export const TEST_TRADE_EXACT_OUTPUT = new InterfaceTrade({
})
export const TEST_ALLOWED_SLIPPAGE = new Percent(2, 100)
export const TEST_NFT_ASSET: GenieAsset = {
id: 'TmZ0QXNzZXQ6MHhlZDVhZjM4ODY1MzU2N2FmMmYzODhlNjIyNGRjN2M0YjMyNDFjNTQ0XzMzMTg=',
address: '0xed5af388653567af2f388e6224dc7c4b3241c544',
notForSale: false,
collectionName: 'Azuki',
imageUrl:
'https://cdn.center.app/1/0xED5AF388653567Af2F388E6224dC7C4b3241C544/3318/50ed67ad647d0aa0cad0b830d136a677efc2fb72a44587bc35f2a5fb334a7fdf.png',
marketplace: Markets.Opensea,
name: 'Azuki #3318',
priceInfo: {
ETHPrice: '15800000000000000000',
baseAsset: 'ETH',
baseDecimals: '18',
basePrice: '15800000000000000000',
},
susFlag: false,
tokenId: '3318',
tokenType: NftStandard.Erc721,
totalCount: 10000,
collectionIsVerified: true,
rarity: {
primaryProvider: 'Rarity Sniper',
providers: [
{
rank: 7079,
provider: 'Rarity Sniper',
},
],
},
creator: {},
}
export const TEST_NFT_WALLET_ASSET: WalletAsset = {
id: 'TmZ0QXNzZXQ6RVRIRVJFVU1fMHgyOTY1MkMyZTlEMzY1NjQzNEJjODEzM2M2OTI1OEM4ZDA1MjkwZjQxXzIzNTk=',
imageUrl: 'https://c.neevacdn.net/image/upload/xyz/T96PksTnWGNh79CrzLn-zpYfqRWtD5wME0MBPL_Md6Q.png',
smallImageUrl:
'https://c.neevacdn.net/image/upload/c_limit,pg_1,h_1200,w_1200/f_webp/xyz/T96PksTnWGNh79CrzLn-zpYfqRWtD5wME0MBPL_Md6Q.webp',
notForSale: true,
priceInfo: {
ETHPrice: '0',
baseAsset: 'ETH',
baseDecimals: '18',
basePrice: '0',
},
name: 'Froggy Friend #2359',
tokenId: '2359',
asset_contract: {
address: '0x29652c2e9d3656434bc8133c69258c8d05290f41',
tokenType: NftStandard.Erc721,
name: 'Froggy Friends Official',
description: '4444 of the friendliest frogs in the metaverse.',
image_url: 'https://i.seadn.io/gcs/files/84483786d97b4d471cb48d224c4c5c91.png?w=500&auto=format',
},
collection: {
address: '0x29652c2e9d3656434bc8133c69258c8d05290f41',
name: 'Froggy Friends Official',
isVerified: true,
imageUrl: 'https://i.seadn.io/gcs/files/84483786d97b4d471cb48d224c4c5c91.png?w=500&auto=format',
twitterUrl: '@FroggyFriendNFT',
},
collectionIsVerified: true,
lastPrice: 0,
floorPrice: 0.0775,
basisPoints: 0,
date_acquired: '1682024661',
sellOrders: [],
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment