import { mount } from '@vue/test-utils';
import { describe, expect, it } from 'vitest';
import { AppInput } from '@components/common/input';


describe('输入框', () => {
	expect(AppInput).toBeTruthy();
	it('disabled', async () => {
		const wrapper = mount(AppInput, {
			props: {
				disabled: true,
			},
		});
		const inputElm = wrapper.find('input')
    	expect(inputElm.element.disabled).not.toBeNull()
	});
	it('readOnly', async () => {
		const wrapper = mount(AppInput, {
			props: {
				readOnly: true,
			},
		});
		const inputElm = wrapper.find('input')
    	expect(inputElm.element.readOnly).not.toBeNull()
	});
	it('placeholder', () => {
		const wrapper = mount(AppInput, {
			props: {
				placeholder: '提示信息',
			},
		});
		const inputElm = wrapper.find('input')
    	expect(inputElm.element.placeholder).toBe('提示信息')
	});
	it('type', () => {
		const wrapper = mount(AppInput, {
			props: {
				type: 'password',
			},
		});
		const inputElm = wrapper.find('input')
    	expect(inputElm.element.type).toBe('password')
	});
	it('maxLength', () => {
		const wrapper = mount(AppInput, {
			props: {
				maxLength: 10,
			},
		});
		const inputElm = wrapper.find('input')
    	expect(inputElm.element.maxLength).toEqual(10);
	});
	it('showMaxLength', () => {
		const wrapper = mount(AppInput, {
			props: {
				showMaxLength: true,
			},
		});
		expect(wrapper.find('.ant-input-show-count-suffix').exists()).toBeTruthy();
	});
	it('min-max', () => {
		const wrapper = mount(AppInput, {
			props: {
				type: 'number',
				max: 10,
				min: 5,
			},
		});
		const inputElm = wrapper.find('input')
    	expect(inputElm.attributes()['aria-valuemin']).toBe('5');
    	expect(inputElm.attributes()['aria-valuemax']).toBe('10');
	});
	it('precision', () => {
		const wrapper = mount(AppInput, {
			props: {
				type: 'number',
				value: 5,
				precision: 2
			},
		});
		const inputElm = wrapper.find('input')
		const nativeInput = inputElm.element
		expect(nativeInput.value).toMatchInlineSnapshot(`"5.00"`)
	});
	it('valueFormat', () => {
		const wrapper = mount(AppInput, {
			props: {
				value: 9876,
				type: 'number',
				valueFormat: '#,###',
			},
		});
		const inputElm = wrapper.find('input')
		expect(inputElm.element.value).toMatchInlineSnapshot(`"9,876"`)
	});
	it('rows', () => {
		const wrapper = mount(AppInput, {
			props: {
				type: "textarea",
				rows: '10',
			},
		});
		const inputElm = wrapper.find('textarea')
    	expect(inputElm.element.rows).toEqual(10)
	});
	it('size', () => {
		const wrapper = mount(AppInput, {
			props: {
				size: 'large',
			},
		});
		expect(wrapper.find('.ant-input-lg').exists()).toBeTruthy();
	});
	it('unit', () => {
		const wrapper = mount(AppInput, {
			props: {
				value: '100',
				unit: '元'
			},
		});
		const unitEle = wrapper.find('.unit-text')
		expect(unitEle.text()).toEqual('元');
	});
	it('visibilityToggle', () => {
		const wrapper = mount(AppInput, {
			props: {
				type: 'password',
				visibilityToggle: true
			},
		});
		expect(wrapper.find('.ant-input-password-icon').exists()).toBeTruthy()
	});
	it('isTextArea10', () => {
		const wrapper = mount(AppInput, {
			props: {
				type: "textarea",
				isTextArea10: true
			},
		});
		const inputElm = wrapper.find('textarea')
    	expect(inputElm.element.rows).toEqual(10)
	});
	it('beforeLabel-afterLabel', () => {
		const wrapper = mount(AppInput, {
			props: {
				beforeLabel: 'http://',
				afterLabel: '.com',
			},
		});
		expect(wrapper.text()).toEqual('http://.com');
	});
});