43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { describe, expect, it } from 'vitest';
|
|
import { render, screen } from '@testing-library/react';
|
|
import { BadgesGrid } from '../AchievementsPage';
|
|
|
|
const t = (key: string) => key;
|
|
|
|
describe('BadgesGrid', () => {
|
|
it('adds dark mode classes for earned and pending badges', () => {
|
|
render(
|
|
<BadgesGrid
|
|
badges={[
|
|
{
|
|
id: '1',
|
|
title: 'First Upload',
|
|
description: 'Uploaded your first photo',
|
|
earned: true,
|
|
progress: 1,
|
|
target: 1,
|
|
},
|
|
{
|
|
id: '2',
|
|
title: 'Social Star',
|
|
description: 'Received 10 likes',
|
|
earned: false,
|
|
progress: 3,
|
|
target: 10,
|
|
},
|
|
]}
|
|
t={t}
|
|
/>,
|
|
);
|
|
|
|
const earnedCard = screen.getByTestId('badge-card-1');
|
|
expect(earnedCard.className).toContain('dark:from-emerald-400/20');
|
|
expect(earnedCard.className).toContain('dark:text-emerald-50');
|
|
|
|
const pendingCard = screen.getByTestId('badge-card-2');
|
|
expect(pendingCard.className).toContain('bg-card/90');
|
|
expect(pendingCard.className).toContain('border-border/60');
|
|
});
|
|
});
|