mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-18 21:16:47 +00:00
Maurice
6019b3ed4e
The mobile screen shares useAtlas, so it inherits the switch state; it gets its own compact toggle next to the bucket-list button. Search now labels a planned country as such instead of calling it visited, the stats card hangs the planned count off the country total, and the suggestion list keeps places you have actually been at the top.
77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { describe, it, expect, vi } from 'vitest';
|
|
import userEvent from '@testing-library/user-event';
|
|
import { render, screen } from '../../../helpers/render';
|
|
import MAtlasSearch from '../../../../src/mobile/screens/atlas/MAtlasSearch';
|
|
|
|
// FE-MOB-ATLAS-001 onwards
|
|
|
|
const options = [
|
|
{ code: 'DE', label: 'Germany' },
|
|
{ code: 'FR', label: 'France' },
|
|
{ code: 'JP', label: 'Japan' },
|
|
];
|
|
|
|
function renderSearch(overrides: Partial<React.ComponentProps<typeof MAtlasSearch>> = {}) {
|
|
const props: React.ComponentProps<typeof MAtlasSearch> = {
|
|
open: true,
|
|
onClose: () => {},
|
|
options,
|
|
suggestions: [{ code: 'JP', label: 'Japan' }],
|
|
isVisited: () => false,
|
|
isPlanned: () => false,
|
|
isOnBucketList: () => false,
|
|
onSelect: () => {},
|
|
...overrides,
|
|
};
|
|
return render(<MAtlasSearch {...props} />);
|
|
}
|
|
|
|
describe('MAtlasSearch', () => {
|
|
it('FE-MOB-ATLAS-001: shows suggestions while empty and filters countries as you type', async () => {
|
|
renderSearch();
|
|
|
|
expect(screen.getByText('Japan')).toBeInTheDocument();
|
|
expect(screen.queryByText('Germany')).not.toBeInTheDocument();
|
|
|
|
await userEvent.type(screen.getByPlaceholderText('Search a country...'), 'germ');
|
|
|
|
expect(screen.getByText('Germany')).toBeInTheDocument();
|
|
expect(screen.queryByText('Japan')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-MOB-ATLAS-002: tapping a result reports the country code for the fly-to', async () => {
|
|
const onSelect = vi.fn();
|
|
renderSearch({ onSelect });
|
|
|
|
await userEvent.type(screen.getByPlaceholderText('Search a country...'), 'fran');
|
|
await userEvent.click(screen.getByText('France'));
|
|
|
|
expect(onSelect).toHaveBeenCalledWith('FR');
|
|
});
|
|
|
|
it('FE-MOB-ATLAS-003: renders nothing while closed', () => {
|
|
renderSearch({ open: false });
|
|
expect(screen.queryByPlaceholderText('Search a country...')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-MOB-ATLAS-004: a country you only plan to visit is labelled planned, not visited (#1048)', async () => {
|
|
renderSearch({ isPlanned: (code) => code === 'DE' });
|
|
|
|
await userEvent.type(screen.getByPlaceholderText('Search a country...'), 'germ');
|
|
|
|
expect(screen.getByText('Planned')).toBeInTheDocument();
|
|
expect(screen.queryByText('Visited')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-MOB-ATLAS-005: having been there wins over the planned and bucket labels', async () => {
|
|
renderSearch({ isVisited: () => true, isPlanned: () => true, isOnBucketList: () => true });
|
|
|
|
await userEvent.type(screen.getByPlaceholderText('Search a country...'), 'germ');
|
|
|
|
expect(screen.getByText('Visited')).toBeInTheDocument();
|
|
expect(screen.queryByText('Planned')).not.toBeInTheDocument();
|
|
expect(screen.queryByText('Bucket List')).not.toBeInTheDocument();
|
|
});
|
|
});
|