From aff51b51ba396c9f15a179cc3968f278fb10868b Mon Sep 17 00:00:00 2001 From: Florian Le Heurte Date: Tue, 13 Jul 2021 15:38:52 +0800 Subject: [PATCH 1/2] chore(LcCheckbox): [ch7086] add unit tests and add action stories --- .../LcCheckbox/LcCheckbox.stories.ts | 7 +- src/components/LcCheckbox/LcCheckbox.vue | 2 + .../LcCheckbox/__tests__/LcCheckbox.spec.ts | 160 ++++++++++++++++++ 3 files changed, 168 insertions(+), 1 deletion(-) create mode 100644 src/components/LcCheckbox/__tests__/LcCheckbox.spec.ts diff --git a/src/components/LcCheckbox/LcCheckbox.stories.ts b/src/components/LcCheckbox/LcCheckbox.stories.ts index 736c0bf..c955bec 100644 --- a/src/components/LcCheckbox/LcCheckbox.stories.ts +++ b/src/components/LcCheckbox/LcCheckbox.stories.ts @@ -1,3 +1,5 @@ +import { action } from '@storybook/addon-actions' + import LcCheckbox from './LcCheckbox' export default { @@ -10,7 +12,10 @@ const Template = (args: any) => ({ setup() { return { args } }, - template: '', + template: '', + methods: { + onChange: action('onChange'), + }, }) export const Base = Template.bind({}) as any diff --git a/src/components/LcCheckbox/LcCheckbox.vue b/src/components/LcCheckbox/LcCheckbox.vue index 3f4d4ee..2f7722a 100644 --- a/src/components/LcCheckbox/LcCheckbox.vue +++ b/src/components/LcCheckbox/LcCheckbox.vue @@ -11,6 +11,7 @@ { backgroundColor: checkbox.color , borderColor: checkbox.color } : { borderColor: checkbox.color }" class="form-tick checkbox-custom" + data-testid="lc-checkbox" > {{ checkbox.label }} @@ -24,6 +25,7 @@ backgroundColor: color, borderColor: color } : { borderColor: color }" class="form-tick checkbox-custom" + data-testid="lc-checkbox" > {{ label }} diff --git a/src/components/LcCheckbox/__tests__/LcCheckbox.spec.ts b/src/components/LcCheckbox/__tests__/LcCheckbox.spec.ts new file mode 100644 index 0000000..98d19e5 --- /dev/null +++ b/src/components/LcCheckbox/__tests__/LcCheckbox.spec.ts @@ -0,0 +1,160 @@ +import { mount } from '@vue/test-utils' +import LcCheckbox from '../LcCheckbox' + +let wrapper: any + +afterEach(() => { + wrapper?.unmount() +}) + +describe('LcCheckbox', () => { + it('is a Vue instance', () => { + wrapper = mount(LcCheckbox, { + props: { + modelValue: false, + name: 'newsletter', + }, + }) + expect(wrapper.vm).toBeTruthy() + }) + + describe('Input behaviour', () => { + beforeEach(() => { + wrapper = mount(LcCheckbox, { + props: { + modelValue: false, + name: 'newsletter', + label: 'Je souhaite recevoir occasionnellement une sélection d’expériences et de maisons.', + }, + }) + }) + it('should emit the event', async() => { + const checkbox = wrapper.find('[data-testid="lc-checkbox"]') + await checkbox.setChecked() + + expect(wrapper.emitted()).toHaveProperty('update:modelValue') + }) + + it('should emit the right value', async() => { + const checkbox = wrapper.find('[data-testid="lc-checkbox"]') + await checkbox.setChecked() + + const changeEvent = wrapper.emitted('update:modelValue') + + expect(changeEvent[0]).toEqual([true]) + }) + + it('should disabled the checkbox button', async() => { + await wrapper.setProps({ disabled: true }) + const checkbox = wrapper.find('[data-testid="lc-checkbox"]') + + expect(checkbox.attributes()).toHaveProperty('disabled') + }) + + it('should render correct color style when unchecked', async() => { + await wrapper.setProps({ color: '#77a6dc' }) + const checkbox = wrapper.find('[data-testid="lc-checkbox"]') + + expect(checkbox.element.style.getPropertyValue('border-color')).toBe('#77a6dc') + expect(checkbox.element.style.getPropertyValue('background-color')).toBe('') + }) + + it('should render correct color style when checked', async() => { + await wrapper.setProps({ color: '#77a6dc' }) + const checkbox = wrapper.find('[data-testid="lc-checkbox"]') + await checkbox.setChecked() + + expect(checkbox.element.style.getPropertyValue('border-color')).toBe('#77a6dc') + expect(checkbox.element.style.getPropertyValue('background-color')).toBe('rgb(119, 166, 220)') + }) + }) + + describe('Multiple input behaviour', () => { + beforeEach(() => { + wrapper = mount(LcCheckbox, { + props: { + modelValue: [], + name: 'schedule', + label: 'Schedule', + fields: [ + { + label: 'Morning', + value: 'morning', + }, + { + label: 'Midday', + value: 'midday', + }, + { + label: 'Evening', + value: 'evening', + }, + ], + }, + }) + }) + + it('should render 3 checkbox', () => { + const checkboxs = wrapper.findAll('[data-testid="lc-checkbox"]') + + expect(checkboxs).toHaveLength(3) + }) + + it('should emit the right value', async() => { + const checkbox = wrapper.findAll('[data-testid="lc-checkbox"]') + await checkbox[0].setChecked() + + const eventEmitted = wrapper.emitted('update:modelValue') + expect(eventEmitted).toHaveLength(1) + + expect(eventEmitted[0][0]).toEqual(['morning']) + }) + + it('should emit the right values', async() => { + const checkbox = wrapper.findAll('[data-testid="lc-checkbox"]') + await checkbox[0].setChecked() + await checkbox[1].setChecked() + + const eventEmitted = wrapper.emitted('update:modelValue') + + expect(eventEmitted).toHaveLength(2) + expect(eventEmitted[0][0]).toEqual(['morning']) + expect(eventEmitted[1][0]).toEqual(['morning', 'midday']) + }) + }) + + describe('Multiple input behaviour custom color', () => { + it('should render correct color style', () => { + wrapper = mount(LcCheckbox, { + props: { + modelValue: [], + name: 'schedule', + label: 'Schedule', + fields: [ + { + label: 'Morning', + value: 'morning', + color: '#cdcdd6', + }, + { + label: 'Midday', + value: 'midday', + color: '#cdcdd6', + }, + { + label: 'Evening', + value: 'evening', + color: '#cdcdd6', + }, + ], + }, + }) + + const checkboxs = wrapper.findAll('[data-testid="lc-checkbox"]') + const firstCheckbox = checkboxs[0] + + expect(firstCheckbox.element.style.getPropertyValue('border-color')).toBe('#cdcdd6') + expect(firstCheckbox.element.style.getPropertyValue('background-color')).toBe('rgb(205, 205, 214)') + }) + }) +}) From c241c56d51edf6d3d5cafef954013047f8fa16e8 Mon Sep 17 00:00:00 2001 From: Florian Le Heurte Date: Thu, 15 Jul 2021 20:27:24 +0800 Subject: [PATCH 2/2] feedback sara --- src/components/LcCheckbox/__tests__/LcCheckbox.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LcCheckbox/__tests__/LcCheckbox.spec.ts b/src/components/LcCheckbox/__tests__/LcCheckbox.spec.ts index 98d19e5..9c316e8 100644 --- a/src/components/LcCheckbox/__tests__/LcCheckbox.spec.ts +++ b/src/components/LcCheckbox/__tests__/LcCheckbox.spec.ts @@ -44,7 +44,7 @@ describe('LcCheckbox', () => { expect(changeEvent[0]).toEqual([true]) }) - it('should disabled the checkbox button', async() => { + it('should disable the checkbox button', async() => { await wrapper.setProps({ disabled: true }) const checkbox = wrapper.find('[data-testid="lc-checkbox"]')