test: init test

test/cypress/components/common/VnSelectOption.spec.js

@@ -0,0 +1,88 @@
+import VnSelectOption from 'src/components/common/VnSelectOption.vue';
+import { ref } from 'vue';
+
+describe.skip('VnSelectOption.vue', () => {
+    const scope = ref({
+        itemProps: {
+            clickable: true,
+            dense: true,
+        },
+        opt: {
+            name: 'Test Label',
+            description: 'Test Caption',
+        },
+    });
+
+    const wrapper = cy.createWrapper({
+        components: { VnSelectOption },
+        template: `
+                <VnSelectOption
+                    :scope="scope"
+                    label="name"
+                    caption="description"
+                />
+            `,
+        setup(scope) {
+            return { scope };
+        },
+    });
+
+    it('renders label correctly', () => {
+        const label = wrapper.findComponent({ name: 'QItemLabel' });
+        expect(label.text()).toBe('Test Label');
+    });
+
+    it('renders caption correctly', () => {
+        const caption = wrapper.findComponent({
+            name: 'QItemLabel',
+            props: { caption: true },
+        });
+        expect(caption.text()).toBe('Test Caption');
+    });
+
+    it('passes itemProps correctly', () => {
+        const item = wrapper.findComponent({ name: 'QItem' });
+        expect(item.props()).toMatchObject(scope.value.itemProps);
+    });
+
+    it('renders the component correctly', () => {
+        cy.mount(VnSelectOption, {
+            props: {
+                scope: scope.value,
+                label: 'name',
+                caption: 'description',
+            },
+        });
+        cy.get('.q-item-label').first().should('contain.text', 'Test Label');
+        cy.get('.q-item-label').last().should('contain.text', 'Test Caption');
+    });
+
+    it('applies itemProps correctly', () => {
+        cy.mount(VnSelectOption, {
+            props: {
+                scope: scope.value,
+                label: 'name',
+                caption: 'description',
+            },
+        });
+        cy.get('.q-item').should('have.class', 'q-item--clickable');
+        cy.get('.q-item').should('have.class', 'q-item--dense');
+    });
+
+    it('handles click event correctly', () => {
+        const onClick = cy.stub();
+        cy.mount(VnSelectOption, {
+            props: {
+                scope: scope.value,
+                label: 'name',
+                caption: 'description',
+                onClick,
+            },
+        });
+        cy.get('.q-item')
+            .click()
+            .then(() => {
+                expect(onClick).to.have.been.calledOnce;
+            });
+    });
+});

test/vitest/__tests__/components/common/VnSelectOption.spec.js

@@ -0,0 +1,45 @@
+import { mount } from '@vue/test-utils';
+import VnSelectOption from './VnSelectOption.vue';
+import { ref } from 'vue';
+describe('VnSelectOption.vue', () => {
+    const scope = ref({
+        itemProps: {
+            clickable: true,
+            dense: true,
+        },
+        opt: {
+            name: 'Test Label',
+            description: 'Test Caption',
+        },
+    });
+    const wrapper = mount({
+        components: { VnSelectOption },
+        template: `
+            <VnSelectOption
+                :scope="scope"
+                label="name"
+                caption="description"
+            />
+        `,
+        setup(scope) {
+            return { scope };
+        },
+    });
+    it('renders label correctly', () => {
+        const label = wrapper.findComponent({ name: 'QItemLabel' });
+        expect(label.text()).toBe('Test Label');
+    });
+
+    it('renders caption correctly', () => {
+        const caption = wrapper.findComponent({
+            name: 'QItemLabel',
+            props: { caption: true },
+        });
+        expect(caption.text()).toBe('Test Caption');
+    });
+
+    it('passes itemProps correctly', () => {
+        const item = wrapper.findComponent({ name: 'QItem' });
+        expect(item.props()).toMatchObject(scope.value.itemProps);
+    });
+});