63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { describe, expect, it, vi } from 'vitest';
|
|
import { render, screen } from '@testing-library/react';
|
|
import { MemoryRouter } from 'react-router-dom';
|
|
import { MissionActionCard } from '../HomePage';
|
|
|
|
vi.mock('../../context/EventBrandingContext', () => ({
|
|
useEventBranding: () => ({
|
|
branding: {
|
|
primaryColor: '#FF5A5F',
|
|
secondaryColor: '#FFF8F5',
|
|
buttons: { radius: 12 },
|
|
typography: {},
|
|
fontFamily: 'Montserrat',
|
|
},
|
|
}),
|
|
}));
|
|
|
|
vi.mock('../../lib/emotionTheme', () => ({
|
|
getEmotionTheme: () => ({
|
|
gradientBackground: 'linear-gradient(135deg, #FF5A5F, #FFF8F5)',
|
|
}),
|
|
getEmotionIcon: () => '🙂',
|
|
}));
|
|
|
|
vi.mock('swiper/react', () => ({
|
|
Swiper: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
|
SwiperSlide: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
|
}));
|
|
|
|
vi.mock('swiper/modules', () => ({
|
|
EffectCards: {},
|
|
}));
|
|
|
|
describe('MissionActionCard layout spacing', () => {
|
|
it('uses a tighter min height for the stack container', () => {
|
|
render(
|
|
<MemoryRouter>
|
|
<MissionActionCard
|
|
token="demo"
|
|
mission={{
|
|
id: 1,
|
|
title: 'Demo Mission',
|
|
description: 'Do a demo task.',
|
|
duration: 3,
|
|
emotion: null,
|
|
}}
|
|
loading={false}
|
|
onAdvance={() => {}}
|
|
stack={[]}
|
|
initialIndex={0}
|
|
onIndexChange={() => {}}
|
|
swiperRef={{ current: null }}
|
|
/>
|
|
</MemoryRouter>,
|
|
);
|
|
|
|
const stack = screen.getByTestId('mission-card-stack');
|
|
expect(stack.className).toContain('min-h-[240px]');
|
|
expect(stack.className).toContain('sm:min-h-[260px]');
|
|
});
|
|
});
|