misskey/packages/frontend/test/components/MkInput.test.ts

64 lines
1.9 KiB
TypeScript

import MkInput from '@/components/MkInput.vue';
import { fireEvent, render } from '@testing-library/vue';
import { components } from '@/components/index.js';
import { directives } from '@/directives/index.js';
import { describe, expect, test, vi } from 'vitest';
import { ComponentProps } from 'vue-component-type-helpers';
describe('MkInput', () => {
function renderMkInput<P extends ComponentProps<typeof MkInput>>(props: P) {
const mkInput = render(MkInput, {
props,
global: { directives, components },
});
const inputElement = mkInput.baseElement.getElementsByTagName('input')[0];
expect(inputElement).not.toBeUndefined();
return { props, mkInput, inputElement };
}
test('keydown', async () => {
const { props, inputElement } = renderMkInput({
modelValue: null,
onKeydown: vi.fn((ev) => {
expect(ev.code).toBe('keyA');
}),
});
await fireEvent.keyDown(inputElement, { code: 'keyA' });
expect(props.onKeydown).toHaveBeenCalledOnce();
});
test('enter', async () => {
const { props, inputElement } = renderMkInput({
modelValue: null,
onEnter: vi.fn((ev) => {
expect(ev.code).toBe('Enter');
}),
});
await fireEvent.keyDown(inputElement, { code: 'Enter' });
expect(props.onEnter).toHaveBeenCalledOnce();
});
test('update', async () => {
const { props, inputElement } = renderMkInput({
modelValue: null,
'onUpdate:modelValue': vi.fn((value) => {
expect(value).toBe('Hello');
}),
});
await fireEvent.update(inputElement, 'Hello');
expect(props['onUpdate:modelValue']).toHaveBeenCalledOnce();
});
test('update (type = "number")', async () => {
const { props, inputElement } = renderMkInput({
modelValue: null,
type: 'number',
'onUpdate:modelValue': vi.fn((value) => {
expect(value).toBe(42);
}),
});
await fireEvent.update(inputElement, '42');
expect(props['onUpdate:modelValue']).toHaveBeenCalledOnce();
});
});