blessing-skin-server/resources/assets/tests/components/EmailSuggestion.test.tsx
Zephyr Lykos 9524a234cf
cleanup: wip 3.1
mostly misc cleanups
2024-02-24 23:01:32 +08:00

76 lines
2.6 KiB
TypeScript

import {expect, test} from 'vitest';
import React, {useState} from 'react';
import {render, fireEvent} from '@testing-library/react';
import {on} from '@/scripts/event';
import EmailSuggestion from '@/components/EmailSuggestion';
function Wrapper() {
const [email, setEmail] = useState('');
return <EmailSuggestion value={email} onChange={setEmail}/>;
}
test('basic typing', () => {
const {getByDisplayValue, queryByText} = render(<Wrapper/>);
const input = getByDisplayValue('');
fireEvent.input(input, {target: {value: 'abc'}});
fireEvent.focus(input);
expect(queryByText('abc@qq.com')).toBeInTheDocument();
expect(queryByText('abc@163.com')).toBeInTheDocument();
expect(queryByText('abc@gmail.com')).toBeInTheDocument();
expect(queryByText('abc@hotmail.com')).toBeInTheDocument();
fireEvent.input(input, {target: {value: ''}});
expect(queryByText('abc@qq.com')).not.toBeInTheDocument();
});
test('apply suggestion', () => {
const {getByDisplayValue, getByText} = render(<Wrapper/>);
const input = getByDisplayValue('');
fireEvent.input(input, {target: {value: 'abc'}});
fireEvent.focus(input);
fireEvent.click(getByText('abc@hotmail.com'));
expect(input).toHaveValue('abc@hotmail.com');
});
test('do not suggest when `at` is existed', () => {
const {getByDisplayValue, queryByText} = render(<Wrapper/>);
const input = getByDisplayValue('');
fireEvent.input(input, {target: {value: 'abc@outlook.com'}});
fireEvent.focus(input);
expect(queryByText('abc@outlook.com@qq.com')).not.toBeInTheDocument();
expect(queryByText('abc@outlook.com@163.com')).not.toBeInTheDocument();
expect(queryByText('abc@outlook.com@gmail.com')).not.toBeInTheDocument();
expect(queryByText('abc@outlook.com@hotmail.com')).not.toBeInTheDocument();
});
test('display suggestions when typing with configured domain names', () => {
const {getByDisplayValue, queryByText} = render(<Wrapper/>);
const input = getByDisplayValue('');
fireEvent.input(input, {target: {value: 'abc@hotmail.com'}});
fireEvent.focus(input);
expect(queryByText('abc@qq.com')).toBeInTheDocument();
expect(queryByText('abc@163.com')).toBeInTheDocument();
expect(queryByText('abc@gmail.com')).toBeInTheDocument();
expect(queryByText('abc@hotmail.com')).toBeInTheDocument();
});
test('events', () => {
const off = on('emailDomainsSuggestion', (names: Set<string>) => {
names.add('outlook.com');
});
const {getByDisplayValue, queryByText} = render(<Wrapper/>);
const input = getByDisplayValue('');
fireEvent.input(input, {target: {value: 'abc'}});
fireEvent.focus(input);
expect(queryByText('abc@outlook.com')).toBeInTheDocument();
off();
});