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 Badge',
|
|
description: 'Earned badge',
|
|
earned: true,
|
|
progress: 1,
|
|
target: 1,
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'Second Badge',
|
|
description: 'Pending badge',
|
|
earned: false,
|
|
progress: 0,
|
|
target: 5,
|
|
},
|
|
]}
|
|
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('dark:bg-slate-950/60');
|
|
expect(pendingCard.className).toContain('dark:border-slate-800/70');
|
|
});
|
|
});
|