Add tests

Author: webdevnerdstuff

src/plugin/__tests__/index.test.ts

@@ -0,0 +1,13 @@
+import { describe, it, expect } from 'vitest';
+import { createVColorField } from '../';
+
+
+describe('Plugin Index', () => {
+	describe('install', () => {
+		it('should return install function', () => {
+			const VColorField = createVColorField();
+
+			expect('install' in VColorField).toBe(true);
+		});
+	});
+});

src/plugin/composables/__tests__/__snapshots__/classes.test.ts.snap

@@ -0,0 +1,27 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Classes Composable > should return class object 1`] = `
+{
+  "v-color-field--card": true,
+  "v-color-field--card-full-width": true,
+}
+`;
+
+exports[`Classes Composable > useCardClasses > should return class object 1`] = `
+{
+  "v-color-field--card": true,
+  "v-color-field--card-full-width": false,
+}
+`;
+
+exports[`Classes Composable > useHintClasses > should return class object 1`] = `
+{
+  "v-color-field--text-field": true,
+}
+`;
+
+exports[`Classes Composable > usePipClasses > should return class object 1`] = `
+{
+  "v-color-field--pip": true,
+}
+`;

src/plugin/composables/__tests__/classes.test.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect } from 'vitest';
+import {
+	usePipClasses,
+	useTextFieldClasses,
+	useHintClasses,
+	useCardClasses
+} from '../classes';
+
+
+describe('Classes Composable', () => {
+
+	describe('usePipClasses', () => {
+		it('should return class object', () => {
+			const classes = usePipClasses();
+
+			expect(classes).toMatchSnapshot();
+		});
+	});
+
+	describe('useTextFieldClasses', () => {
+		it('should return class object', () => {
+			const classes = useTextFieldClasses({
+				readonlyInput: false,
+			});
+
+			expect(classes).toMatchInlineSnapshot(`
+				{
+				  "v-color-field--text-field": true,
+				  "v-color-field--text-field-": false,
+				  "v-color-field--text-field-readonly": false,
+				  "v-color-field--text-field-readonly-input": false,
+				}
+			`);
+		});
+
+		it('should return class object', () => {
+			const classes = useTextFieldClasses({
+				name: 'foobar',
+				readonly: true,
+				readonlyInput: true,
+			});
+
+			expect(classes).toMatchInlineSnapshot(`
+				{
+				  "v-color-field--text-field": true,
+				  "v-color-field--text-field-foobar": true,
+				  "v-color-field--text-field-readonly": true,
+				  "v-color-field--text-field-readonly-input": false,
+				}
+			`);
+		});
+	});
+
+	describe('useHintClasses', () => {
+		it('should return class object', () => {
+			const classes = useHintClasses({
+
+			});
+
+			expect(classes).toMatchSnapshot();
+		});
+	});
+
+	describe('useCardClasses', () => {
+		it('should return class object', () => {
+			const classes = useCardClasses({
+				fullWidth: false,
+			});
+
+			expect(classes).toMatchSnapshot();
+		});
+	});
+
+	it('should return class object', () => {
+		const classes = useCardClasses({
+			fullWidth: true,
+		});
+
+		expect(classes).toMatchSnapshot();
+	});
+});

src/plugin/composables/__tests__/helpers.test.ts

@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest';
+import {
+	useConvertToUnit,
+} from '../helpers';
+
+describe('Helpers Composable', () => {
+	describe('useConvertToUnit', () => {
+		it('should return string with a default px unit', () => {
+			const unit = useConvertToUnit({ value: '10' });
+			expect(unit).toBe('10px');
+		});
+
+		it('should return number with a default px unit', () => {
+			const unit = useConvertToUnit({ value: 10 });
+			expect(unit).toBe('10px');
+		});
+
+		it('should return string with a supplied unit', () => {
+			const unit = useConvertToUnit({ unit: 'em', value: '10' });
+			expect(unit).toBe('10em');
+		});
+
+		it('should return number with a supplied unit', () => {
+			const unit = useConvertToUnit({ unit: 'em', value: 10 });
+			expect(unit).toBe('10em');
+		});
+	});
+});

src/plugin/composables/__tests__/icons.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest';
+// import { inject } from 'vue';
+import {
+	useGetIcon
+} from '../icons';
+
+
+const iconOptions = {
+	defaultSet: 'mdi'
+};
+
+describe('Icon Composable', () => {
+	describe('useGetIcon', () => {
+		it('should return supplied icon value', () => {
+
+			const unit = useGetIcon({
+				icon: 'mdi:mdi-cog',
+				iconOptions,
+				name: 'pip',
+			});
+
+			expect(unit).toMatchInlineSnapshot(`"mdi:mdi-cog"`);
+		});
+
+		it('should return icon value using name', () => {
+			const unit = useGetIcon({
+				icon: undefined,
+				iconOptions,
+				name: 'pip',
+			});
+
+			expect(unit).toMatchInlineSnapshot(`"mdi:mdi-circle"`);
+		});
+
+		it('throws error if vuetify defaultSet is not supplied', () => {
+			expect(() => useGetIcon({
+				icon: undefined,
+				iconOptions: {},
+				name: 'loading',
+			})).toThrowError('[VColorField]: No VColorField default undefined icon set found.');
+		});
+
+		it('throws error if supplied name not found', () => {
+			expect(() => useGetIcon({
+				icon: undefined,
+				iconOptions,
+				name: 'foobar',
+			})).toThrowError('[VColorField]: No foobar icon found.');
+		});
+	});
+});

src/plugin/composables/__tests__/styles.test.ts

@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest';
+import { usePipStyles } from '../styles';
+
+
+describe('Styles Composable', () => {
+	describe('usePipStyles', () => {
+		it('should return pip styles with border and borderRadius', () => {
+			const data = usePipStyles({
+				pipBorder: '1px solid rgb(var(--v-theme-on-surface))',
+				pipBorderRadius: '50%',
+			});
+			expect(data).toMatchInlineSnapshot(`
+				{
+				  "backgroundColor": "rgb(var(--v-theme-on-surface))",
+				  "border": "1px solid rgb(var(--v-theme-on-surface))",
+				  "borderRadius": "50%",
+				  "overflow": "hidden",
+				}
+			`);
+		});
+
+		it('should return pip styles without border and borderRadius', () => {
+			const data = usePipStyles({});
+			expect(data).toMatchInlineSnapshot(`
+				{
+				  "backgroundColor": "transparent",
+				  "overflow": "hidden",
+				}
+			`);
+		});
+	});
+});