Add tests

Author: webdevnerdstuff

.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
 		'vite.build.config.ts',
 		'vite.config.ts',
 		'*.bk.vue',
+		'*.spec.ts',
 	],
 	overrides: [
 		{

package.json

@@ -20,7 +20,8 @@
 		"prepublishOnly": "npm run build",
 		"lint": "eslint src/**/*.{ts,vue} --max-warnings 20",
 		"prepare": "husky install",
-		"test:unit": "vitest"
+		"test:dev": "vitest",
+		"test:all": "vitest --run"
 	},
 	"lint-staged": {
 		"src/**/*.{js,ts,vue}": [

src/plugin/VInlineCheckbox.vue

@@ -5,7 +5,7 @@
 		:style="inlineFieldsContainerStyle"
 	>
 		<div
-			v-if="(!showField && !settings.fieldOnly) || cardField"
+			v-if="(!showField && !fieldOnly) || cardField"
 			:class="displayContainerClass"
 			@click="settings.cell ? toggleField() : undefined"
 		>
@@ -22,12 +22,12 @@
 					>
 						<BooleanIcons
 							v-model="truthyModelValue"
-							:icon-false="settings.iconFalse"
-							:icon-false-color="settings.iconFalseColor"
-							:icon-false-title="settings.iconFalseTitle"
-							:icon-true="settings.iconTrue"
-							:icon-true-color="settings.iconTrueColor"
-							:icon-true-title="settings.iconTrueTitle"
+							:icon-false="iconFalse"
+							:icon-false-color="iconFalseColor"
+							:icon-false-title="iconFalseTitle"
+							:icon-true="iconTrue"
+							:icon-true-color="iconTrueColor"
+							:icon-true-title="iconTrueTitle"
 						/>
 					</div>
 

src/plugin/__tests__/VInlineCheckbox.spec.ts

@@ -0,0 +1,29 @@
+import VInlineCheckbox from '../VInlineCheckbox.vue';
+import { checkboxProps } from '@/plugin/utils/props';
+import { createVuetify } from 'vuetify';
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+
+const vuetify = createVuetify();
+
+const componentProps = Object.assign(checkboxProps, {
+	cardProps: {},
+	item: undefined,
+	modelValue: undefined,
+	required: false,
+});
+
+describe('VInlineCheckbox', () => {
+	const wrapper = mount(VInlineCheckbox, {
+		global: {
+			plugins: [vuetify],
+		},
+	});
+
+	it('testing default component props', () => {
+		const returnedProps = wrapper.getComponent(VInlineCheckbox).props();
+
+		expect(returnedProps).toEqual(componentProps);
+	});
+});

src/plugin/__tests__/VInlineSelect.spec.ts

@@ -0,0 +1,28 @@
+import VInlineSelect from '../VInlineSelect.vue';
+import { createVuetify } from 'vuetify';
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { selectProps } from '@/plugin/utils/props';
+
+
+const vuetify = createVuetify();
+
+const componentProps = Object.assign(selectProps, {
+	cardProps: {},
+	items: [],
+	required: false,
+});
+
+describe('VInlineSelect', () => {
+	const wrapper = mount(VInlineSelect, {
+		global: {
+			plugins: [vuetify],
+		},
+	});
+
+	it('testing default component props', () => {
+		const returnedProps = wrapper.getComponent(VInlineSelect).props();
+
+		expect(returnedProps).toEqual(componentProps);
+	});
+});

src/plugin/__tests__/VInlineSwitch.spec.ts

@@ -0,0 +1,29 @@
+import VInlineSwitch from '../VInlineSwitch.vue';
+import { createVuetify } from 'vuetify';
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { switchProps } from '@/plugin/utils/props';
+
+
+const vuetify = createVuetify();
+
+const componentProps = Object.assign(switchProps, {
+	cardProps: {},
+	item: undefined,
+	modelValue: undefined,
+	required: false,
+});
+
+describe('VInlineSwitch', () => {
+	const wrapper = mount(VInlineSwitch, {
+		global: {
+			plugins: [vuetify],
+		},
+	});
+
+	it('testing default component props', () => {
+		const returnedProps = wrapper.getComponent(VInlineSwitch).props();
+
+		expect(returnedProps).toEqual(componentProps);
+	});
+});

src/plugin/__tests__/VInlineTextField.spec.ts

@@ -0,0 +1,27 @@
+import VInlineTextField from '../VInlineTextField.vue';
+import { createVuetify } from 'vuetify';
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { textFieldProps } from '@/plugin/utils/props';
+
+
+const vuetify = createVuetify();
+
+const componentProps = Object.assign(textFieldProps, {
+	cardProps: {},
+	required: false,
+});
+
+describe('VInlineTextField', () => {
+	const wrapper = mount(VInlineTextField, {
+		global: {
+			plugins: [vuetify],
+		},
+	});
+
+	it('testing default component props', () => {
+		const returnedProps = wrapper.getComponent(VInlineTextField).props();
+
+		expect(returnedProps).toEqual(componentProps);
+	});
+});

src/plugin/__tests__/VInlineTextarea.spec.ts

@@ -0,0 +1,27 @@
+import VInlineTextarea from '../VInlineTextarea.vue';
+import { createVuetify } from 'vuetify';
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { textareaProps } from '@/plugin/utils/props';
+
+
+const vuetify = createVuetify();
+
+const componentProps = Object.assign(textareaProps, {
+	cardProps: {},
+	required: false,
+});
+
+describe('VInlineTextarea', () => {
+	const wrapper = mount(VInlineTextarea, {
+		global: {
+			plugins: [vuetify],
+		},
+	});
+
+	it('testing default component props', () => {
+		const returnedProps = wrapper.getComponent(VInlineTextarea).props();
+
+		expect(returnedProps).toEqual(componentProps);
+	});
+});

src/plugin/__tests__/index.spec.ts

@@ -1,8 +1,7 @@
-// Utilities
 import { describe, it, expect } from 'vitest';
-// import { mount } from '@vue/test-utils';
 import { createVInlineFields } from '@/plugin';
 
+
 describe('framework', () => {
 	describe('install', () => {
 		it('should return install function', () => {

src/plugin/composables/tests/colors.spec.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest';
+import { createVuetify } from 'vuetify';
+import defaultThemes from '@/plugins/theme';
+import { useGetColor } from '@/plugin/composables/colors';
+
+
+describe('Colors Composable', () => {
+	const vuetify = createVuetify({
+		theme: {
+			defaultTheme: 'light',
+			themes: {
+				...defaultThemes,
+			},
+		},
+	});
+
+	const { theme } = vuetify;
+	const hslRed = 'hsl(0 100% 50% / 100%)';
+
+	const checkColors = [
+		'error',
+		'red',
+		'#f00',
+		'rgb(255, 0, 0)',
+		'rgba(255, 0, 0, 100)',
+	];
+
+	describe('useGetColor', () => {
+		checkColors.forEach((color) => {
+			it(`should return HSLA using color string "${color}"`, () => {
+				const responseColor = useGetColor(color, theme);
+
+				expect(responseColor).toBe(hslRed);
+			});
+		});
+	});
+});