MkInputのテスト

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

@@ -0,0 +1,63 @@
+import MkInput from '@/components/MkInput.vue';
+import { fireEvent, render, screen } 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();
+	});
+});