test(frontend): Add tests for NFT IDB caching

AntonioVentilii · AntonioVentilii · commit a80e264e1f92 · 2026-03-30T16:26:42.000+02:00
Add idb-nfts.api.spec.ts covering serialization, deserialization,
singleton network restoration, roundtrip correctness, and clear.
Extend LoaderNfts.spec.ts with IDB cache integration tests for
cache loading, saving, replacement by live data, and edge cases.

Made-with: Cursor
diff --git a/src/frontend/src/tests/lib/api/idb-nfts.api.spec.ts b/src/frontend/src/tests/lib/api/idb-nfts.api.spec.ts
@@ -0,0 +1,196 @@
+import { ETHEREUM_NETWORK } from '$env/networks/networks.eth.env';
+import { clearIdbNfts, getIdbAllNfts, setIdbAllNfts } from '$lib/api/idb-nfts.api';
+import type { SerializableNft } from '$lib/types/idb-nfts';
+import { mockIdentity, mockPrincipal } from '$tests/mocks/identity.mock';
+import { mockValidErc1155Nft, mockValidErc721Nft } from '$tests/mocks/nfts.mock';
+import * as idbKeyval from 'idb-keyval';
+
+vi.mock('$app/environment', () => ({
+	browser: true
+}));
+
+describe('idb-nfts.api', () => {
+	const mockNfts = [mockValidErc721Nft, mockValidErc1155Nft];
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	describe('setIdbAllNfts', () => {
+		it('should not set NFTs in IDB if identity is nullish', async () => {
+			await setIdbAllNfts({ identity: null, nfts: mockNfts });
+
+			expect(idbKeyval.set).not.toHaveBeenCalled();
+
+			await setIdbAllNfts({ identity: undefined, nfts: mockNfts });
+
+			expect(idbKeyval.set).not.toHaveBeenCalled();
+		});
+
+		it('should serialize and store NFTs in IDB', async () => {
+			await setIdbAllNfts({ identity: mockIdentity, nfts: mockNfts });
+
+			expect(idbKeyval.set).toHaveBeenCalledOnce();
+
+			const [[key, storedNfts]] = vi.mocked(idbKeyval.set).mock.calls;
+
+			expect(key).toBe(mockPrincipal.toText());
+
+			const serialized = storedNfts as SerializableNft[];
+
+			expect(serialized).toHaveLength(2);
+
+			expect(typeof serialized[0].collection.id).toBe('string');
+			expect(typeof serialized[0].collection.network.id).toBe('string');
+			expect(serialized[0].collection.id).toBe(`${mockValidErc721Nft.collection.id.description}`);
+			expect(serialized[0].collection.network.id).toBe(
+				`${mockValidErc721Nft.collection.network.id.description}`
+			);
+		});
+
+		it('should handle empty NFTs list', async () => {
+			await setIdbAllNfts({ identity: mockIdentity, nfts: [] });
+
+			expect(idbKeyval.set).toHaveBeenCalledOnce();
+
+			const [[, storedNfts]] = vi.mocked(idbKeyval.set).mock.calls;
+
+			expect(storedNfts).toEqual([]);
+		});
+
+		it('should preserve non-symbol fields during serialization', async () => {
+			await setIdbAllNfts({ identity: mockIdentity, nfts: [mockValidErc1155Nft] });
+
+			const [[, storedNfts]] = vi.mocked(idbKeyval.set).mock.calls;
+			const [serialized] = storedNfts as SerializableNft[];
+
+			expect(serialized.id).toBe(mockValidErc1155Nft.id);
+			expect(serialized.name).toBe(mockValidErc1155Nft.name);
+			expect(serialized.balance).toBe(mockValidErc1155Nft.balance);
+			expect(serialized.imageUrl).toBe(mockValidErc1155Nft.imageUrl);
+			expect(serialized.acquiredAt).toEqual(mockValidErc1155Nft.acquiredAt);
+			expect(serialized.collection.address).toBe(mockValidErc1155Nft.collection.address);
+			expect(serialized.collection.name).toBe(mockValidErc1155Nft.collection.name);
+			expect(serialized.collection.symbol).toBe(mockValidErc1155Nft.collection.symbol);
+		});
+	});
+
+	describe('getIdbAllNfts', () => {
+		it('should return undefined when no cached data exists', async () => {
+			vi.mocked(idbKeyval.get).mockResolvedValue(undefined);
+
+			const result = await getIdbAllNfts(mockPrincipal);
+
+			expect(result).toBeUndefined();
+			expect(idbKeyval.get).toHaveBeenCalledWith(mockPrincipal.toText(), expect.any(Object));
+		});
+
+		it('should deserialize NFTs restoring Symbol IDs', async () => {
+			const serialized: SerializableNft[] = [
+				{
+					...mockValidErc721Nft,
+					collection: {
+						...mockValidErc721Nft.collection,
+						id: `${mockValidErc721Nft.collection.id.description}`,
+						network: {
+							...mockValidErc721Nft.collection.network,
+							id: `${mockValidErc721Nft.collection.network.id.description}`
+						}
+					}
+				}
+			];
+
+			vi.mocked(idbKeyval.get).mockResolvedValue(serialized);
+
+			const result = await getIdbAllNfts(mockPrincipal);
+
+			expect(result).toHaveLength(1);
+			expect(typeof result?.[0].collection.id).toBe('symbol');
+			expect(typeof result?.[0].collection.network.id).toBe('symbol');
+			expect(result?.[0].collection.id.description).toBe(
+				mockValidErc721Nft.collection.id.description
+			);
+		});
+
+		it('should restore singleton Network for known networks', async () => {
+			const serialized: SerializableNft[] = [
+				{
+					...mockValidErc721Nft,
+					collection: {
+						...mockValidErc721Nft.collection,
+						id: `${mockValidErc721Nft.collection.id.description}`,
+						network: {
+							...ETHEREUM_NETWORK,
+							id: `${ETHEREUM_NETWORK.id.description}`
+						}
+					}
+				}
+			];
+
+			vi.mocked(idbKeyval.get).mockResolvedValue(serialized);
+
+			const result = await getIdbAllNfts(mockPrincipal);
+
+			expect(result?.[0].collection.network.id).toBe(ETHEREUM_NETWORK.id);
+		});
+
+		it('should preserve non-symbol fields during deserialization', async () => {
+			const serialized: SerializableNft[] = [
+				{
+					...mockValidErc1155Nft,
+					collection: {
+						...mockValidErc1155Nft.collection,
+						id: `${mockValidErc1155Nft.collection.id.description}`,
+						network: {
+							...mockValidErc1155Nft.collection.network,
+							id: `${mockValidErc1155Nft.collection.network.id.description}`
+						}
+					}
+				}
+			];
+
+			vi.mocked(idbKeyval.get).mockResolvedValue(serialized);
+
+			const result = await getIdbAllNfts(mockPrincipal);
+			const [nft] = result ?? [];
+
+			expect(nft.id).toBe(mockValidErc1155Nft.id);
+			expect(nft.name).toBe(mockValidErc1155Nft.name);
+			expect(nft.balance).toBe(mockValidErc1155Nft.balance);
+			expect(nft.acquiredAt).toEqual(mockValidErc1155Nft.acquiredAt);
+			expect(nft.collection.address).toBe(mockValidErc1155Nft.collection.address);
+			expect(nft.collection.name).toBe(mockValidErc1155Nft.collection.name);
+		});
+
+		it('should roundtrip serialize then deserialize correctly', async () => {
+			await setIdbAllNfts({ identity: mockIdentity, nfts: mockNfts });
+
+			const [[, storedNfts]] = vi.mocked(idbKeyval.set).mock.calls;
+
+			vi.mocked(idbKeyval.get).mockResolvedValue(storedNfts);
+
+			const result = await getIdbAllNfts(mockPrincipal);
+
+			expect(result).toHaveLength(mockNfts.length);
+
+			result?.forEach((nft, i) => {
+				expect(nft.id).toBe(mockNfts[i].id);
+				expect(nft.name).toBe(mockNfts[i].name);
+				expect(typeof nft.collection.id).toBe('symbol');
+				expect(typeof nft.collection.network.id).toBe('symbol');
+				expect(nft.collection.id.description).toBe(mockNfts[i].collection.id.description);
+				expect(nft.collection.network.id.description).toBe(
+					mockNfts[i].collection.network.id.description
+				);
+			});
+		});
+	});
+
+	describe('clearIdbNfts', () => {
+		it('should clear the NFTs IDB store', async () => {
+			await clearIdbNfts();
+
+			expect(idbKeyval.clear).toHaveBeenCalledExactlyOnceWith(expect.any(Object));
+		});
+	});
+});
diff --git a/src/frontend/src/tests/lib/components/loaders/LoaderNfts.spec.ts b/src/frontend/src/tests/lib/components/loaders/LoaderNfts.spec.ts
@@ -5,6 +5,7 @@ import { erc721CustomTokensStore } from '$eth/stores/erc721-custom-tokens.store'
 import * as extTokenApi from '$icp/api/ext-v2-token.api';
 import { extCustomTokensStore } from '$icp/stores/ext-custom-tokens.store';
 import { mapExtNft } from '$icp/utils/nft.utils';
+import * as idbNftsApi from '$lib/api/idb-nfts.api';
 import LoaderNfts from '$lib/components/loaders/LoaderNfts.svelte';
 import { ethAddressStore } from '$lib/stores/address.store';
 import { nftStore } from '$lib/stores/nft.store';
@@ -294,4 +295,133 @@ describe('LoaderNfts', async () => {
 			});
 		});
 	});
+
+	describe('IDB cache', () => {
+		let getIdbAllNftsSpy: MockInstance;
+		let setIdbAllNftsSpy: MockInstance;
+
+		beforeEach(() => {
+			getIdbAllNftsSpy = vi.spyOn(idbNftsApi, 'getIdbAllNfts');
+			setIdbAllNftsSpy = vi.spyOn(idbNftsApi, 'setIdbAllNfts');
+
+			getIdbAllNftsSpy.mockResolvedValue(undefined);
+			setIdbAllNftsSpy.mockResolvedValue(undefined);
+		});
+
+		it('should load cached NFTs from IDB on first render', async () => {
+			const cachedNfts = [mockErc721Nft1, mockErc721Nft2];
+			getIdbAllNftsSpy.mockResolvedValue(cachedNfts);
+
+			erc721CustomTokensStore.setAll([{ data: mockedEnabledAzukiToken, certified: false }]);
+
+			mockGetNftsForOwner.mockResolvedValueOnce([mockErc721Nft1]);
+
+			render(LoaderNfts);
+
+			await waitFor(() => {
+				expect(getIdbAllNftsSpy).toHaveBeenCalledExactlyOnceWith(mockPrincipal);
+			});
+		});
+
+		it('should not call getIdbAllNfts when identity is nullish', async () => {
+			mockAuthStore(null);
+
+			render(LoaderNfts);
+
+			await waitFor(() => {
+				expect(getIdbAllNftsSpy).not.toHaveBeenCalled();
+			});
+		});
+
+		it('should populate store with cached NFTs before live data arrives', async () => {
+			const cachedNfts = [mockErc721Nft1, mockErc721Nft2];
+			getIdbAllNftsSpy.mockResolvedValue(cachedNfts);
+
+			erc721CustomTokensStore.setAll([{ data: mockedEnabledAzukiToken, certified: false }]);
+
+			mockGetNftsForOwner.mockImplementation(
+				() =>
+					new Promise((resolve) => {
+						setTimeout(() => resolve([mockErc721Nft3]), 100);
+					})
+			);
+
+			render(LoaderNfts);
+
+			await waitFor(() => {
+				const storeValue = get(nftStore);
+
+				expect(storeValue).toEqual(expect.arrayContaining(cachedNfts));
+			});
+		});
+
+		it('should save NFTs to IDB after live data is loaded', async () => {
+			getIdbAllNftsSpy.mockResolvedValue(undefined);
+
+			erc721CustomTokensStore.setAll([{ data: mockedEnabledAzukiToken, certified: false }]);
+
+			mockGetNftsForOwner.mockResolvedValueOnce([mockErc721Nft1]);
+
+			render(LoaderNfts);
+
+			await waitFor(() => {
+				expect(setIdbAllNftsSpy).toHaveBeenCalled();
+
+				const { calls } = setIdbAllNftsSpy.mock;
+				const [lastCall] = calls[calls.length - 1];
+
+				expect(lastCall.identity).toBe(mockIdentity);
+				expect(lastCall.nfts.length).toBeGreaterThan(0);
+			});
+		});
+
+		it('should replace cached NFTs with live data via setAllByNetwork', async () => {
+			const cachedNft = {
+				...mockErc721Nft1,
+				name: 'Cached Name'
+			};
+			getIdbAllNftsSpy.mockResolvedValue([cachedNft]);
+
+			erc721CustomTokensStore.setAll([{ data: mockedEnabledAzukiToken, certified: false }]);
+
+			const liveNft = { ...mockErc721Nft1, name: 'Live Name' };
+			mockGetNftsForOwner.mockResolvedValueOnce([liveNft]);
+
+			render(LoaderNfts);
+
+			await waitFor(() => {
+				const storeValue = get(nftStore);
+
+				expect(storeValue).toEqual([liveNft]);
+			});
+		});
+
+		it('should skip cache loading on subsequent loads', async () => {
+			getIdbAllNftsSpy.mockResolvedValue([mockErc721Nft1]);
+
+			erc721CustomTokensStore.setAll([{ data: mockedEnabledAzukiToken, certified: false }]);
+
+			mockGetNftsForOwner.mockResolvedValue([mockErc721Nft1]);
+
+			render(LoaderNfts);
+
+			await waitFor(() => {
+				expect(getIdbAllNftsSpy).toHaveBeenCalledOnce();
+			});
+		});
+
+		it('should handle empty cache gracefully', async () => {
+			getIdbAllNftsSpy.mockResolvedValue([]);
+
+			erc721CustomTokensStore.setAll([{ data: mockedEnabledAzukiToken, certified: false }]);
+
+			mockGetNftsForOwner.mockResolvedValueOnce([mockErc721Nft1]);
+
+			render(LoaderNfts);
+
+			await waitFor(() => {
+				expect(get(nftStore)).toEqual([mockErc721Nft1]);
+			});
+		});
+	});
 });
