116 lines
3.6 KiB
TypeScript
116 lines
3.6 KiB
TypeScript
import {expect, test, it} from 'vitest';
|
|
import {render, fireEvent} from '@testing-library/react';
|
|
import {t} from '@/scripts/i18n';
|
|
import Viewer, {PICTURES_COUNT} from '@/components/Viewer';
|
|
|
|
test('custom footer', () => {
|
|
const {queryByText} = render(<Viewer isAlex={false}>footer</Viewer>);
|
|
expect(queryByText('footer')).toBeInTheDocument();
|
|
});
|
|
|
|
describe('indicator', () => {
|
|
it('hidden by default', () => {
|
|
const {queryByText} = render(<Viewer skin='skin' isAlex={false}/>);
|
|
expect(queryByText(t('general.skin'))).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('nothing', () => {
|
|
const {queryByText} = render(<Viewer showIndicator isAlex/>);
|
|
expect(queryByText(t('general.skin'))).not.toBeInTheDocument();
|
|
expect(queryByText(t('general.cape'))).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('skin only', () => {
|
|
const {queryByText} = render(
|
|
<Viewer showIndicator skin='skin' isAlex={false}/>,
|
|
);
|
|
expect(queryByText(t('general.skin'))).toBeInTheDocument();
|
|
expect(queryByText(t('general.cape'))).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('cape only', () => {
|
|
const {queryByText} = render(
|
|
<Viewer showIndicator cape='cape' isAlex={false}/>,
|
|
);
|
|
expect(queryByText(t('general.skin'))).not.toBeInTheDocument();
|
|
expect(queryByText(t('general.cape'))).toBeInTheDocument();
|
|
});
|
|
|
|
it('skin and cape', () => {
|
|
const {queryByText} = render(
|
|
<Viewer showIndicator skin='skin' cape='cape' isAlex={false}/>,
|
|
);
|
|
expect(
|
|
queryByText(`${t('general.skin')} & ${t('general.cape')}`),
|
|
).toBeInTheDocument();
|
|
expect(queryByText(t('general.skin'))).not.toBeInTheDocument();
|
|
expect(queryByText(t('general.cape'))).not.toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('actions', () => {
|
|
it('toggle animation', () => {
|
|
const component = <Viewer isAlex={false}/>;
|
|
const {getByTitle} = render(component);
|
|
fireEvent.click(getByTitle(`${t('general.switchAnimation')}`)); // Should start running
|
|
fireEvent.click(getByTitle(`${t('general.switchAnimation')}`)); // Should start flying
|
|
fireEvent.click(getByTitle(`${t('general.switchAnimation')}`)); // Should be idle
|
|
fireEvent.click(getByTitle(`${t('general.switchAnimation')}`)); // Should start walking
|
|
});
|
|
|
|
it('toggle rotation', () => {
|
|
const {getByTitle} = render(<Viewer isAlex={false}/>);
|
|
fireEvent.click(getByTitle(t('general.rotation'))); // Should stop rotation
|
|
fireEvent.click(getByTitle(t('general.rotation'))); // Should start rotation
|
|
});
|
|
|
|
it('toggle pause', () => {
|
|
const {getByTitle} = render(<Viewer isAlex={false}/>);
|
|
const icon = getByTitle(t('general.pauseAnimation'));
|
|
fireEvent.click(icon);
|
|
expect(icon).toHaveClass('fa-play');
|
|
});
|
|
});
|
|
|
|
describe('background', () => {
|
|
it('white', () => {
|
|
const {getByTitle} = render(<Viewer isAlex={false}/>);
|
|
fireEvent.click(getByTitle(t('colors.white')));
|
|
});
|
|
|
|
it('black', () => {
|
|
const {getByTitle} = render(<Viewer isAlex={false}/>);
|
|
fireEvent.click(getByTitle(t('colors.black')));
|
|
});
|
|
|
|
it('white', () => {
|
|
const {getByTitle} = render(<Viewer isAlex={false}/>);
|
|
fireEvent.click(getByTitle(t('colors.gray')));
|
|
});
|
|
|
|
it('previous picture', () => {
|
|
const {getByTitle} = render(<Viewer isAlex={false}/>);
|
|
fireEvent.click(getByTitle(t('colors.prev')));
|
|
fireEvent.click(getByTitle(t('colors.prev')));
|
|
});
|
|
|
|
it('next picture', () => {
|
|
const {getByTitle} = render(<Viewer isAlex={false}/>);
|
|
|
|
fireEvent.click(getByTitle(t('colors.next')));
|
|
fireEvent.click(getByTitle(t('colors.next')));
|
|
|
|
Array.from({length: PICTURES_COUNT - 1}).forEach(() => {
|
|
fireEvent.click(getByTitle(t('colors.next')));
|
|
});
|
|
});
|
|
|
|
it('default for dark mode', () => {
|
|
document.body.classList.add('dark-mode');
|
|
|
|
render(<Viewer isAlex={false}/>);
|
|
|
|
document.body.classList.remove('dark-mode');
|
|
});
|
|
});
|