Skip to content

Commit c807161

Browse files
PatrickDinhPatrickDinh
authored
chore: snapshot test for transaction visualisation
1 parent cc417e3 commit c807161

File tree

5 files changed

+468
-0
lines changed

5 files changed

+468
-0
lines changed

‎src/features/transactions/components/__snapshots__/transaction-view-visual.FBORGSDC4ULLWHWZUMUFIYQLSDC26HGLTFD7EATQDY37FHCIYBBQ.html‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
<div>
2+
<div
3+
class="relative grid"
4+
style="grid-template-columns: minmax(128px, 128px) repeat(3, 128px); grid-template-rows: repeat(2, 40px);"
5+
>
6+
<div />
7+
<div
8+
class="p-2 flex justify-center"
9+
>
10+
<h1
11+
class="text-l font-semibold"
12+
>
13+
M3IA...OXXM
14+
</h1>
15+
</div>
16+
<div
17+
class="p-2 flex justify-center"
18+
>
19+
<h1
20+
class="text-l font-semibold"
21+
>
22+
KIZL...U5BQ
23+
</h1>
24+
</div>
25+
<div />
26+
<div
27+
class="absolute right-0 -z-10"
28+
style="top: 40px;"
29+
>
30+
<div>
31+
<div
32+
class="p-0"
33+
/>
34+
<div
35+
class="p-0"
36+
style="height: 40px; width: 256px;"
37+
>
38+
<div
39+
class="grid h-full"
40+
style="grid-template-columns: repeat(2, minmax(0, 1fr)); height: 40px;"
41+
>
42+
<div
43+
class="flex justify-center"
44+
>
45+
<div
46+
class="border-muted h-full border-dashed"
47+
style="border-left-width: 2px;"
48+
/>
49+
</div>
50+
<div
51+
class="flex justify-center"
52+
>
53+
<div
54+
class="border-muted h-full border-dashed"
55+
style="border-left-width: 2px;"
56+
/>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
</div>
62+
<div
63+
class="p-0 relative pr-8"
64+
>
65+
<div
66+
class="relative h-full p-0 flex items-center px-0"
67+
style="margin-left: 0px;"
68+
>
69+
<div
70+
class="inline"
71+
style="margin-left: 16px;"
72+
>
73+
FBOR...YBBQ
74+
</div>
75+
</div>
76+
</div>
77+
<div
78+
class="flex items-center justify-center"
79+
data-state="closed"
80+
style="grid-column-start: 2; grid-column-end: 4; color: rgb(126 200 191);"
81+
>
82+
<svg
83+
height="20"
84+
viewBox="0 0 21 21"
85+
width="20"
86+
xmlns="http://www.w3.org/2000/svg"
87+
xmlns:xlink="http://www.w3.org/1999/xlink"
88+
>
89+
<g
90+
transform="matrix(1 0 0 1 -153 -143 )"
91+
>
92+
<path
93+
d="M 163.5 143 C 169.38 143 174 147.62 174 153.5 C 174 159.38 169.38 164 163.5 164 C 157.62 164 153 159.38 153 153.5 C 153 147.62 157.62 143 163.5 143 Z "
94+
fill="currentColor"
95+
fill-rule="nonzero"
96+
stroke="none"
97+
/>
98+
</g>
99+
</svg>
100+
<div
101+
class="relative"
102+
style="width: calc(50.00% - 20px); height: 20px;"
103+
>
104+
<div
105+
class="h-1/2"
106+
style="border-bottom-width: 2px;"
107+
/>
108+
<svg
109+
class="absolute top-0 right-0"
110+
height="19px"
111+
preserveAspectRatio="xMinYMid meet"
112+
viewBox="340 139 1 13"
113+
width="11px"
114+
xmlns="http://www.w3.org/2000/svg"
115+
xmlns:xlink="http://www.w3.org/1999/xlink"
116+
>
117+
<path
118+
d="M 340.3 151.3 L 347 145.3 L 340.3 139.3 L 342.6 145.3 L 340.3 151.3 Z"
119+
fill="currentColor"
120+
fill-rule="nonzero"
121+
stroke="none"
122+
/>
123+
</svg>
124+
</div>
125+
<div
126+
class="absolute z-20 bg-card p-2 text-foreground w-20 text-xs"
127+
>
128+
Payment
129+
<div
130+
class="flex items-center"
131+
>
132+
236.07
133+
<svg
134+
height="1em"
135+
viewBox="0 0 10 10"
136+
width="1em"
137+
xmlns="http://www.w3.org/2000/svg"
138+
xmlns:xlink="http://www.w3.org/1999/xlink"
139+
>
140+
<g
141+
transform="matrix(1 0 0 1 -446 -347 )"
142+
>
143+
<path
144+
d="M 1.7460317460317463 10 L 3.192239858906526 7.495590828924162 L 4.638447971781305 5 L 6.075837742504408 2.495590828924162 L 6.313932980599648 2.0987654320987654 L 6.419753086419753 2.495590828924162 L 6.860670194003527 4.144620811287478 L 6.3668430335097 5 L 4.920634920634921 7.495590828924162 L 3.4832451499118164 10 L 5.211640211640212 10 L 6.657848324514991 7.495590828924162 L 7.4074074074074066 6.1992945326278655 L 7.760141093474426 7.495590828924162 L 8.430335097001764 10 L 9.982363315696649 10 L 9.312169312169312 7.495590828924162 L 8.641975308641975 5 L 8.465608465608465 4.356261022927689 L 9.541446208112875 2.495590828924162 L 7.971781305114638 2.495590828924162 L 7.9188712522045845 2.310405643738977 L 7.372134038800706 0.26455026455026454 L 7.301587301587301 0 L 5.793650793650793 0 L 5.758377425044091 0.05291005291005291 L 4.347442680776014 2.495590828924162 L 2.901234567901235 5 L 1.4638447971781305 7.495590828924162 L 0.017636684303351177 10 L 1.7460317460317463 10 Z "
145+
fill="currentColor"
146+
fill-rule="nonzero"
147+
stroke="none"
148+
transform="matrix(1 0 0 1 446 347 )"
149+
/>
150+
</g>
151+
</svg>
152+
</div>
153+
</div>
154+
<svg
155+
height="20"
156+
viewBox="0 0 21 21"
157+
width="20"
158+
xmlns="http://www.w3.org/2000/svg"
159+
xmlns:xlink="http://www.w3.org/1999/xlink"
160+
>
161+
<g
162+
transform="matrix(1 0 0 1 -153 -143 )"
163+
>
164+
<path
165+
d="M 163.5 143 C 169.38 143 174 147.62 174 153.5 C 174 159.38 169.38 164 163.5 164 C 157.62 164 153 159.38 153 153.5 C 153 147.62 157.62 143 163.5 143 Z "
166+
fill="currentColor"
167+
fill-rule="nonzero"
168+
stroke="none"
169+
/>
170+
</g>
171+
</svg>
172+
</div>
173+
</div>
174+
</div>

‎src/features/transactions/components/__snapshots__/transaction-view-visual.ILDCD5Z64CYSLEZIHBG5DVME2ITJI2DIVZAPDPEWPCYMTRA5SVGA.html‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<div>
2+
<div
3+
class="relative grid"
4+
style="grid-template-columns: minmax(128px, 128px) repeat(2, 128px); grid-template-rows: repeat(2, 40px);"
5+
>
6+
<div />
7+
<div
8+
class="p-2 flex justify-center"
9+
>
10+
<h1
11+
class="text-l font-semibold"
12+
>
13+
TDV4...QNHM
14+
</h1>
15+
</div>
16+
<div />
17+
<div
18+
class="absolute right-0 -z-10"
19+
style="top: 40px;"
20+
>
21+
<div>
22+
<div
23+
class="p-0"
24+
/>
25+
<div
26+
class="p-0"
27+
style="height: 40px; width: 128px;"
28+
>
29+
<div
30+
class="grid h-full"
31+
style="grid-template-columns: repeat(1, minmax(0, 1fr)); height: 40px;"
32+
>
33+
<div
34+
class="flex justify-center"
35+
>
36+
<div
37+
class="border-muted h-full border-dashed"
38+
style="border-left-width: 2px;"
39+
/>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
<div
46+
class="p-0 relative pr-8"
47+
>
48+
<div
49+
class="relative h-full p-0 flex items-center px-0"
50+
style="margin-left: 0px;"
51+
>
52+
<div
53+
class="inline"
54+
style="margin-left: 16px;"
55+
>
56+
ILDC...SVGA
57+
</div>
58+
</div>
59+
</div>
60+
<div
61+
class="flex items-center justify-center relative"
62+
data-state="closed"
63+
style="grid-column-start: 2; grid-column-end: 4; color: rgb(126 200 191);"
64+
>
65+
<svg
66+
height="20"
67+
viewBox="0 0 21 21"
68+
width="20"
69+
xmlns="http://www.w3.org/2000/svg"
70+
xmlns:xlink="http://www.w3.org/1999/xlink"
71+
>
72+
<g
73+
transform="matrix(1 0 0 1 -153 -143 )"
74+
>
75+
<path
76+
d="M 163.5 143 C 169.38 143 174 147.62 174 153.5 C 174 159.38 169.38 164 163.5 164 C 157.62 164 153 159.38 153 153.5 C 153 147.62 157.62 143 163.5 143 Z "
77+
fill="currentColor"
78+
fill-rule="nonzero"
79+
stroke="none"
80+
/>
81+
</g>
82+
</svg>
83+
<div
84+
style="width: calc(50% - 10px); height: 20px;"
85+
>
86+
<svg
87+
class="relative"
88+
height="19px"
89+
preserveAspectRatio="xMinYMid meet"
90+
style=""
91+
viewBox="159 229 7 10"
92+
width="11px"
93+
xmlns="http://www.w3.org/2000/svg"
94+
xmlns:xlink="http://www.w3.org/1999/xlink"
95+
>
96+
<path
97+
d="M 165.8 228.1 L 159.1 234.1 L 165.8 240.1 L 163.5 234.1 L 165.8 228.1 Z"
98+
fill="currentColor"
99+
fill-rule="nonzero"
100+
stroke="none"
101+
/>
102+
</svg>
103+
</div>
104+
<div
105+
class="absolute size-1/2"
106+
style="border-width: 2px; border-radius: 4px; bottom: 1px; right: calc(25% - 4px);"
107+
/>
108+
<div
109+
class="absolute text-foreground right-1/4 w-[40%] flex justify-center"
110+
>
111+
<div
112+
class="w-min pl-1 pr-1 bg-card flex items-center"
113+
>
114+
0
115+
<svg
116+
height="1em"
117+
viewBox="0 0 10 10"
118+
width="1em"
119+
xmlns="http://www.w3.org/2000/svg"
120+
xmlns:xlink="http://www.w3.org/1999/xlink"
121+
>
122+
<g
123+
transform="matrix(1 0 0 1 -446 -347 )"
124+
>
125+
<path
126+
d="M 1.7460317460317463 10 L 3.192239858906526 7.495590828924162 L 4.638447971781305 5 L 6.075837742504408 2.495590828924162 L 6.313932980599648 2.0987654320987654 L 6.419753086419753 2.495590828924162 L 6.860670194003527 4.144620811287478 L 6.3668430335097 5 L 4.920634920634921 7.495590828924162 L 3.4832451499118164 10 L 5.211640211640212 10 L 6.657848324514991 7.495590828924162 L 7.4074074074074066 6.1992945326278655 L 7.760141093474426 7.495590828924162 L 8.430335097001764 10 L 9.982363315696649 10 L 9.312169312169312 7.495590828924162 L 8.641975308641975 5 L 8.465608465608465 4.356261022927689 L 9.541446208112875 2.495590828924162 L 7.971781305114638 2.495590828924162 L 7.9188712522045845 2.310405643738977 L 7.372134038800706 0.26455026455026454 L 7.301587301587301 0 L 5.793650793650793 0 L 5.758377425044091 0.05291005291005291 L 4.347442680776014 2.495590828924162 L 2.901234567901235 5 L 1.4638447971781305 7.495590828924162 L 0.017636684303351177 10 L 1.7460317460317463 10 Z "
127+
fill="currentColor"
128+
fill-rule="nonzero"
129+
stroke="none"
130+
transform="matrix(1 0 0 1 446 347 )"
131+
/>
132+
</g>
133+
</svg>
134+
</div>
135+
</div>
136+
</div>
137+
</div>
138+
</div>

‎src/features/transactions/components/transaction-view-visual.test.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { transactionModelMother } from '@/tests/object-mother/transaction-model'
2+
import { describe, expect, it } from 'vitest'
3+
import { TransactionViewVisual } from './transaction-view-visual'
4+
import { executeComponentTest } from '@/tests/test-component'
5+
import { render, prettyDOM } from '@/tests/testing-library'
6+
import { asPaymentTransaction } from '../mappers/transaction-mappers'
7+
import { TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
8+
9+
// This file maintain the snapshot test for the TransactionViewVisual component
10+
// To add new test case:
11+
// - Add a new object to the object mother
12+
// - Add the new object into the list of items of describe.each
13+
// To update a snapshot:
14+
// - Make the code changes in TransactionViewVisual
15+
// - The snapshot tests will fail
16+
// - Visually inspect (by viewing in the browser) each transactions in the describe.each list and make sure that they are rendered correctly with the new code changes
17+
// - Update the snapshot files by running `vitest -u`. Or if the test runner is running, press `u` to update the snapshots.
18+
describe('transaction-view-visual', () => {
19+
describe.each([
20+
transactionModelMother['mainnet-FBORGSDC4ULLWHWZUMUFIYQLSDC26HGLTFD7EATQDY37FHCIYBBQ'](),
21+
transactionModelMother['mainnet-ILDCD5Z64CYSLEZIHBG5DVME2ITJI2DIVZAPDPEWPCYMTRA5SVGA'](),
22+
])('when rendering transaction %d', (transaction: TransactionResult) => {
23+
it('should match snapshot', () => {
24+
const model = asPaymentTransaction(transaction)
25+
26+
return executeComponentTest(
27+
() => render(<TransactionViewVisual transaction={model} />),
28+
async (component) => {
29+
expect(prettyDOM(component.container, undefined, { highlight: false })).toMatchFileSnapshot(
30+
`__snapshots__/transaction-view-visual.${transaction.id}.html`
31+
)
32+
}
33+
)
34+
})
35+
})
36+
})

0 commit comments

Comments
 (0)