From 82365835036e92d836314b3db7631b1ca0784ba0 Mon Sep 17 00:00:00 2001 From: git-mahade Date: Fri, 1 Dec 2023 23:35:48 +0600 Subject: [PATCH 1/5] button --- src/App.vue | 10 +- src/assets/icons/LoadingSpinner.vue | 58 +++++++++ src/components/DButton.vue | 93 ++++++++------ src/components/__tests__/DButton.spec.ts | 147 +++++++++++++++-------- 4 files changed, 216 insertions(+), 92 deletions(-) create mode 100644 src/assets/icons/LoadingSpinner.vue diff --git a/src/App.vue b/src/App.vue index a0d7a19..cf531c5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,9 @@ + + diff --git a/src/assets/icons/LoadingSpinner.vue b/src/assets/icons/LoadingSpinner.vue new file mode 100644 index 0000000..20c7738 --- /dev/null +++ b/src/assets/icons/LoadingSpinner.vue @@ -0,0 +1,58 @@ + + + diff --git a/src/components/DButton.vue b/src/components/DButton.vue index da02763..563fc1c 100644 --- a/src/components/DButton.vue +++ b/src/components/DButton.vue @@ -1,50 +1,63 @@ + + diff --git a/src/components/__tests__/DButton.spec.ts b/src/components/__tests__/DButton.spec.ts index 0ec0695..2842d10 100644 --- a/src/components/__tests__/DButton.spec.ts +++ b/src/components/__tests__/DButton.spec.ts @@ -1,58 +1,107 @@ -import { describe, it, expect } from 'vitest'; -import { mount } from '@vue/test-utils'; -import Button from '../DButton.vue'; +import { describe, it, expect } from 'vitest' +import { mount } from '@vue/test-utils' +import Button from '../DButton.vue' describe('DButton.vue', () => { - it('emits a click event when clicked', async () => { + it('emits a click event when clicked on the button', async () => { const wrapper = mount(Button, { props: { - color: 'blue', - size: 'md', - }, - slots: { - default: 'Click Me', - }, - }); - - await wrapper.trigger('click'); - expect(wrapper.emitted()).toHaveProperty('click'); - }); - - it('has the correct default classes', () => { - const wrapper = mount(Button); - expect(wrapper.classes()).toContain('rounded'); - expect(wrapper.classes()).toContain('bg-blue-500'); - expect(wrapper.classes()).toContain('text-md'); - expect(wrapper.classes()).toContain('px-4'); - expect(wrapper.classes()).toContain('py-2'); - }); - - it('displays the slot content', () => { + name: 'Click Me', + type: 'button' + } + }) + + await wrapper.trigger('click') + expect(wrapper.emitted()).toHaveProperty('click') + }) + + it('renders a button with the correct default classes', () => { const wrapper = mount(Button, { - slots: { - default: 'Click Me', - }, - }); - expect(wrapper.text()).toContain('Click Me'); - }); - - it('applies the size classes correctly', () => { + props: { + name: 'Click Me', + type: 'button' + } + }) + + expect(wrapper.find('button').classes()).toContain('border') + expect(wrapper.find('button').classes()).toContain('px-1') + expect(wrapper.find('button').classes()).toContain('pb-0.5') + }) + + it('renders a button with the correct dynamic classes', async () => { const wrapper = mount(Button, { props: { - size: 'lg', - }, - }); - expect(wrapper.classes()).toContain('text-lg'); - expect(wrapper.classes()).toContain('px-6'); - expect(wrapper.classes()).toContain('py-3'); - }); - - it('applies the color classes correctly', () => { + name: 'Click Me', + type: 'button', + block: true, + disabled: false, + loading: false + } + }) + + expect(wrapper.find('button').classes()).toContain('w-full') + expect(wrapper.find('button').classes()).not.toContain('cursor-not-allowed') + expect(wrapper.find('button').classes()).not.toContain('opacity-70') + + await wrapper.setProps({ disabled: true }) + }) + + it('renders a button with loading spinner when loading is true', async () => { const wrapper = mount(Button, { props: { - color: 'red', - }, - }); - expect(wrapper.classes()).toContain('bg-red-500'); - }); -}); + name: 'Click Me', + type: 'button', + loading: true + } + }) + + // Simulate async action completion + await wrapper.setProps({ loading: false }) + + // Ensure button text is rendered + expect(wrapper.find('button span').text()).toContain('Click Me') + }) + + it('emits a click event when clicked on the anchor', async () => { + const wrapper = mount(Button, { + props: { + name: 'Click Me', + href: 'https://example.com' + } + }) + + await wrapper.trigger('click') + expect(wrapper.emitted()).toHaveProperty('click') + }) + + it('renders an anchor with the correct default classes', () => { + const wrapper = mount(Button, { + props: { + name: 'Click Me', + href: 'https://example.com' + } + }) + + expect(wrapper.find('a').classes()).toContain('border') + expect(wrapper.find('a').classes()).toContain('px-1') + expect(wrapper.find('a').classes()).toContain('pb-0.5') + }) + + it('renders an anchor with the correct dynamic classes', async () => { + const wrapper = mount(Button, { + props: { + name: 'Click Me', + href: 'https://example.com', + block: true, + disabled: false, + loading: false + } + }) + + expect(wrapper.find('a').classes()).toContain('w-full') + expect(wrapper.find('a').classes()).not.toContain('cursor-not-allowed') + expect(wrapper.find('a').classes()).not.toContain('opacity-70') + + await wrapper.setProps({ disabled: true }) + }) +}) From 808a6e1c97acf6e24c75e2528c7875fcdecf8dac Mon Sep 17 00:00:00 2001 From: git-mahade Date: Fri, 1 Dec 2023 23:47:31 +0600 Subject: [PATCH 2/5] button --- src/App.vue | 4 +- src/components/DButton.vue | 18 ++--- src/components/__tests__/DButton.spec.ts | 91 ++++++++---------------- 3 files changed, 42 insertions(+), 71 deletions(-) diff --git a/src/App.vue b/src/App.vue index cf531c5..55825b0 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,7 +1,9 @@ - - diff --git a/src/components/__tests__/DButton.spec.ts b/src/components/__tests__/DButton.spec.ts index 2842d10..437632c 100644 --- a/src/components/__tests__/DButton.spec.ts +++ b/src/components/__tests__/DButton.spec.ts @@ -3,11 +3,12 @@ import { mount } from '@vue/test-utils' import Button from '../DButton.vue' describe('DButton.vue', () => { - it('emits a click event when clicked on the button', async () => { + it('emits a click event when clicked', async () => { const wrapper = mount(Button, { props: { - name: 'Click Me', - type: 'button' + name: 'Click me', + type: 'button', + value: 'Click me' } }) @@ -16,72 +17,33 @@ describe('DButton.vue', () => { }) it('renders a button with the correct default classes', () => { - const wrapper = mount(Button, { - props: { - name: 'Click Me', - type: 'button' - } - }) - - expect(wrapper.find('button').classes()).toContain('border') - expect(wrapper.find('button').classes()).toContain('px-1') - expect(wrapper.find('button').classes()).toContain('pb-0.5') + const wrapper = mount(Button) + expect(wrapper.classes()).toContain('border') + expect(wrapper.classes()).toContain('px-1') + expect(wrapper.classes()).toContain('pb-0.5') }) it('renders a button with the correct dynamic classes', async () => { - const wrapper = mount(Button, { - props: { - name: 'Click Me', - type: 'button', - block: true, - disabled: false, - loading: false - } - }) - - expect(wrapper.find('button').classes()).toContain('w-full') - expect(wrapper.find('button').classes()).not.toContain('cursor-not-allowed') - expect(wrapper.find('button').classes()).not.toContain('opacity-70') - + const wrapper = mount(Button) await wrapper.setProps({ disabled: true }) }) - it('renders a button with loading spinner when loading is true', async () => { + it('displays the slot content for the button', () => { const wrapper = mount(Button, { - props: { - name: 'Click Me', - type: 'button', - loading: true + slots: { + default: 'Click me' } }) - - // Simulate async action completion - await wrapper.setProps({ loading: false }) - - // Ensure button text is rendered - expect(wrapper.find('button span').text()).toContain('Click Me') - }) - - it('emits a click event when clicked on the anchor', async () => { - const wrapper = mount(Button, { - props: { - name: 'Click Me', - href: 'https://example.com' - } - }) - - await wrapper.trigger('click') - expect(wrapper.emitted()).toHaveProperty('click') + expect(wrapper.text()).toContain('Click me') }) it('renders an anchor with the correct default classes', () => { const wrapper = mount(Button, { props: { - name: 'Click Me', - href: 'https://example.com' + href: 'https://example.com', + target: '_blank' } }) - expect(wrapper.find('a').classes()).toContain('border') expect(wrapper.find('a').classes()).toContain('px-1') expect(wrapper.find('a').classes()).toContain('pb-0.5') @@ -90,18 +52,23 @@ describe('DButton.vue', () => { it('renders an anchor with the correct dynamic classes', async () => { const wrapper = mount(Button, { props: { - name: 'Click Me', href: 'https://example.com', - block: true, - disabled: false, - loading: false + target: '_blank' } }) - - expect(wrapper.find('a').classes()).toContain('w-full') - expect(wrapper.find('a').classes()).not.toContain('cursor-not-allowed') - expect(wrapper.find('a').classes()).not.toContain('opacity-70') - await wrapper.setProps({ disabled: true }) }) + + it('displays the slot content for the anchor', () => { + const wrapper = mount(Button, { + props: { + href: 'https://example.com', + target: '_blank' + }, + slots: { + default: 'Click me' + } + }) + expect(wrapper.text()).toContain('Click me') + }) }) From 52acdef021c196b6edc8515383a3c681f3c75805 Mon Sep 17 00:00:00 2001 From: git-mahade Date: Sat, 2 Dec 2023 00:03:33 +0600 Subject: [PATCH 3/5] button --- src/App.vue | 8 -------- src/components/DButton.vue | 6 +++--- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/src/App.vue b/src/App.vue index 55825b0..ef16a8e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,11 +1,3 @@ - - diff --git a/src/components/DButton.vue b/src/components/DButton.vue index d3fede5..5e89ae7 100644 --- a/src/components/DButton.vue +++ b/src/components/DButton.vue @@ -3,7 +3,7 @@ v-if="!href" :type="type" class="border px-1 pb-0.5" - :class="{ 'w-full': block, 'cursor-not-allowed opacity-70': loading }" + :class="{ 'w-full': block, 'opacity-70 cursor-not-allowed': disabled || loading }" :disabled="disabled || loading" :autofocus="autofocus" @click="handleClick" @@ -20,10 +20,10 @@ Date: Wed, 13 Dec 2023 15:46:51 +0600 Subject: [PATCH 4/5] button --- src/App.vue | 18 ++++++++++++++- src/components/{DButton.vue => DxhButton.vue} | 22 +++++++++---------- .../{DButton.spec.ts => DxhButton.spec.ts} | 4 ++-- src/index.ts | 4 ++-- 4 files changed, 32 insertions(+), 16 deletions(-) rename src/components/{DButton.vue => DxhButton.vue} (86%) rename src/components/__tests__/{DButton.spec.ts => DxhButton.spec.ts} (96%) diff --git a/src/App.vue b/src/App.vue index ef16a8e..df7b110 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,3 +1,19 @@ + + diff --git a/src/components/DButton.vue b/src/components/DxhButton.vue similarity index 86% rename from src/components/DButton.vue rename to src/components/DxhButton.vue index 5e89ae7..854fe65 100644 --- a/src/components/DButton.vue +++ b/src/components/DxhButton.vue @@ -43,17 +43,17 @@ import { defineProps, defineEmits } from 'vue' import Spinner from '../assets/icons/LoadingSpinner.vue' -const props = defineProps([ - 'name', - 'type', - 'value', - 'href', - 'target', - 'disabled', - 'block', - 'autofocus', - 'loading' -]) +const props = defineProps<{ + name?: string + type?: 'submit' | 'reset' + value?: string + href?: any + target?: string + disabled?: boolean + block?: boolean + autofocus?: boolean + loading?: boolean +}>() const emit = defineEmits(['click']) diff --git a/src/components/__tests__/DButton.spec.ts b/src/components/__tests__/DxhButton.spec.ts similarity index 96% rename from src/components/__tests__/DButton.spec.ts rename to src/components/__tests__/DxhButton.spec.ts index 437632c..dd186bb 100644 --- a/src/components/__tests__/DButton.spec.ts +++ b/src/components/__tests__/DxhButton.spec.ts @@ -1,13 +1,13 @@ import { describe, it, expect } from 'vitest' import { mount } from '@vue/test-utils' -import Button from '../DButton.vue' +import Button from '../DxhButton.vue' describe('DButton.vue', () => { it('emits a click event when clicked', async () => { const wrapper = mount(Button, { props: { name: 'Click me', - type: 'button', + type: 'submit', value: 'Click me' } }) diff --git a/src/index.ts b/src/index.ts index ee2ff8d..2d1e802 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,4 @@ -import DButton from "./components/DButton.vue" +import DxhButton from './components/DxhButton.vue' import DInput from "./components/DInput.vue" -export default {DButton, DInput} \ No newline at end of file +export default { DxhButton, DInput } \ No newline at end of file From b34b469f5b12203a524a2035ca610b0919f6dd70 Mon Sep 17 00:00:00 2001 From: git-mahade Date: Wed, 13 Dec 2023 15:47:34 +0600 Subject: [PATCH 5/5] button --- src/App.vue | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/src/App.vue b/src/App.vue index df7b110..ef16a8e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,19 +1,3 @@ - -