diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index a042f803..3314b230 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -45,3 +45,6 @@ jobs: - name: Run tests ๐Ÿงช run: pnpm test + + - name: Run coverage ๐Ÿ“ˆ + run: pnpm coverage diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 08134cf4..3bbf6981 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -101,6 +101,14 @@ Example: $ pnpm test ``` +This project uses [v8](https://v8.dev/blog/javascript-code-coverage) as test coverage provider. Run the following command to check the current coverage. Min coverage rate is at 60% + +Example: + +```sh +$ pnpm coverage +``` + ### Storybook If you are adding a new feature, refactoring or changing the behavior of a component diff --git a/package.json b/package.json index 2c379b17..7545cddc 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "scripts": { "cz": "git-cz", "test": "vitest --no-threads", + "coverage": "vitest run --coverage", "gen:version": "tsx scripts/gen-version.ts", "update:version": "tsx scripts/update-version.ts", "clean": "pnpm clean:dist && pnpm -r --parallel clean", @@ -79,6 +80,7 @@ "@typescript-eslint/eslint-plugin": "5.58.0", "@typescript-eslint/parser": "5.58.0", "@vitejs/plugin-vue": "^4.1.0", + "@vitest/coverage-v8": "^0.32.4", "@vue/test-utils": "^2.3.2", "@vue/tsconfig": "^0.1.3", "chalk": "^5.2.0", @@ -105,7 +107,7 @@ "type-fest": "^2.19.0", "typescript": "^5.0.4", "unplugin-vue-define-options": "^1.3.3", - "vitest": "^0.30.1", + "vitest": "^0.32.4", "vue": "^3.2.47", "vue-router": "^4.1.6", "vue-tsc": "^1.2.0" diff --git a/packages/components/accordion/test/accordion-group.spec.ts b/packages/components/accordion/test/accordion-group.spec.ts index 65f2f9d7..37c18b91 100644 --- a/packages/components/accordion/test/accordion-group.spec.ts +++ b/packages/components/accordion/test/accordion-group.spec.ts @@ -1,3 +1,4 @@ +import { nextTick } from 'vue' import { mount } from '@vue/test-utils' import { describe, it, expect } from 'vitest' import PuikAccordionGroup from '../src/accordion-group.vue' @@ -17,8 +18,11 @@ const factory = (template: string, options: MountingOptions = {}) => { }) } +const rootClass = 'puik-accordion' +const expandedClass = 'puik-accordion--expanded' + const getAccordionGroup = () => wrapper.find('.puik-accordion-group') -const getAccordions = () => wrapper.findAll('.puik-accordion') +const getAccordions = () => wrapper.findAll(`.${rootClass}`) describe('AccordionGroup collapse/expand tests', () => { it('should be a vue instance', () => { @@ -50,7 +54,7 @@ describe('AccordionGroup collapse/expand tests', () => { factory(template) const accordion = getAccordion(wrapper) - expect(accordion.classes()).toContain('puik-accordion--expanded') + expect(accordion.classes()).toContain(expandedClass) }) it('should accordions title have aria-expanded', () => { @@ -113,4 +117,65 @@ describe('AccordionGroup props tests', () => { const group = getAccordionGroup() expect(group.classes()).toContain('puik-accordion-group--contained') }) + it('should change expanded accordion on v-model change', async () => { + const template = ` + + + Content 1 + + + Content 2 + + + Content 3 + + + ` + + factory(template, { + data() { + return { expandedAccordions: 'accordion-1' } + }, + }) + + wrapper.setData({ expandedAccordions: 'accordion-2' }) + await nextTick() + + const accordions = getAccordions() + expect(accordions[1].classes()).toEqual([rootClass, expandedClass]) + expect(accordions[2].classes()).toEqual([rootClass]) + + wrapper.setData({ expandedAccordions: ['accordion-3'] }) + await nextTick() + expect(accordions[1].classes()).toEqual([rootClass]) + expect(accordions[2].classes()).toEqual([rootClass, expandedClass]) + }) + it('should change expanded accordion on click on multiple mode', async () => { + const template = ` + + + Content 1 + + + Content 2 + + + Content 3 + + + ` + + factory(template) + + const accordions = getAccordions() + const accordionButtons = wrapper.findAll('.puik-accordion__header') + + accordionButtons[0].trigger('click') + accordionButtons[1].trigger('click') + await nextTick() + + expect(accordions[0].classes()).toEqual([rootClass, expandedClass]) + expect(accordions[1].classes()).toEqual([rootClass, expandedClass]) + expect(accordions[2].classes()).toEqual([rootClass]) + }) }) diff --git a/packages/components/accordion/test/accordion.spec.ts b/packages/components/accordion/test/accordion.spec.ts index 31de5d60..1605a99d 100644 --- a/packages/components/accordion/test/accordion.spec.ts +++ b/packages/components/accordion/test/accordion.spec.ts @@ -27,6 +27,8 @@ export const getAccordionSubTitle = (component) => component.find('.puik-accordion__header__content__sub-title') export const getAccordionExpandIcon = (component) => component.find('.puik-accordion__header__expand__icon') +export const getAccordionIcon = (component) => + component.find('.puik-accordion__header__icon') describe('Accordion tests', () => { it('should be a vue instance', () => { @@ -136,4 +138,18 @@ describe('Accordion tests', () => { expect(accordion.classes()).toContain('puik-accordion--disabled') expect(getAccordionHeader(accordion).attributes('disabled')).toBeDefined() }) + + it('should have icon', () => { + const icon = 'home' + const template = ` + + + Content + + + ` + factory(template) + + expect(getAccordionIcon(wrapper).text()).toBe(icon) + }) }) diff --git a/packages/components/breadcrumb/test/breadcrumb.spec.ts b/packages/components/breadcrumb/test/breadcrumb.spec.ts index 4a951764..c2f5bcb4 100644 --- a/packages/components/breadcrumb/test/breadcrumb.spec.ts +++ b/packages/components/breadcrumb/test/breadcrumb.spec.ts @@ -48,7 +48,7 @@ describe('Breadcrumb tests', () => { expect(wrapper).toBeTruthy() }) it('should not display without items', () => { - factory({ items: [] }) + factory() expect(wrapper.element.tagName).toBeFalsy() }) it('should first item be A with href', () => { diff --git a/packages/components/menu/src/menu.vue b/packages/components/menu/src/menu.vue index 9c402549..f011b69a 100644 --- a/packages/components/menu/src/menu.vue +++ b/packages/components/menu/src/menu.vue @@ -1,11 +1,12 @@