From 6d137939a691934528ddad15460bba5d83c0672b Mon Sep 17 00:00:00 2001 From: Vanderhaegen Cedrik Date: Mon, 20 Jan 2025 10:40:38 +0100 Subject: [PATCH 1/2] set next dev version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 59f866c..48f8ab0 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "main": "./dist/vue-components.umd.js", "module": "./dist/vue-components.es.js", "typings": "./dist/src/main.d.ts", - "version": "2.1.0", + "version": "2.2.0", "exports": { ".": { "import": "./dist/vue-components.es.js", From c0bf34d7fcac31680310aaf7f94deb3f97829bdf Mon Sep 17 00:00:00 2001 From: AxelVerstappen Date: Wed, 29 Jan 2025 11:07:33 +0100 Subject: [PATCH 2/2] Feature/358 filter gemeente component prop gewest (#359) * #358 added gewest prop to FilterGemeente component to limit gemeenten shown if needed * #358 added test case for available and unavailable gemeenten --- .gitignore | 3 + src/__tests__/FilterGemeente.cy.ts | 97 +++++++++++++++---- src/components/smart/FilterGemeente.vue | 18 +++- src/models/filter-input.ts | 2 + .../filter-gemeente.stories.ts | 18 +++- 5 files changed, 114 insertions(+), 24 deletions(-) diff --git a/.gitignore b/.gitignore index e9b024d..2ad5256 100644 --- a/.gitignore +++ b/.gitignore @@ -24,3 +24,6 @@ typings/ dist/* .DS_Store storybook-static/* + +# cypress +cypress/screenshots diff --git a/src/__tests__/FilterGemeente.cy.ts b/src/__tests__/FilterGemeente.cy.ts index b8f3e06..eb2ce8c 100644 --- a/src/__tests__/FilterGemeente.cy.ts +++ b/src/__tests__/FilterGemeente.cy.ts @@ -1,6 +1,8 @@ +/* eslint-disable vue/one-component-per-file */ import FilterGemeente from '../components/smart/FilterGemeente.vue'; import { defineComponent, ref } from 'vue'; import type { IGemeente } from '@models/locatie'; +import { Niscode } from '@models/niscode.enum'; describe('FilterGemeente', () => { describe('default', () => { @@ -21,32 +23,85 @@ describe('FilterGemeente', () => { const onUpdateValueSpy = cy.spy().as('onUpdateValueSpy'); cy.mount(TestComponent, { props: { 'onUpdate:value': onUpdateValueSpy } }).then(({ component }) => { - cy.wait('@dataGetGemeentenVlaamsGewest').then(() => { - cy.dataCy('filter-gemeente').click().find('.multiselect__input').type('Bertem'); - cy.dataCy('filter-gemeente') - .find('.multiselect__element') - .click() - .then(() => { - expect(component.gemeenteValue).to.deep.equal({ - niscode: '24009', - naam: 'Bertem', - provincie: { - niscode: '20001', - }, - status: 'inGebruik', - }); + cy.dataCy('filter-gemeente').click().find('.multiselect__input').type('Bertem'); + cy.dataCy('filter-gemeente') + .find('.multiselect__element') + .click() + .then(() => { + expect(component.gemeenteValue).to.deep.equal({ + niscode: '24009', + naam: 'Bertem', + provincie: { + niscode: '20001', + }, + status: 'inGebruik', }); + }); - cy.get('@onUpdateValueSpy').should('always.have.been.calledWith', { - niscode: '24009', - naam: 'Bertem', - provincie: { - niscode: '20001', - }, - status: 'inGebruik', + cy.get('@onUpdateValueSpy').should('always.have.been.calledWith', { + niscode: '24009', + naam: 'Bertem', + provincie: { + niscode: '20001', + }, + status: 'inGebruik', + }); + }); + }); + }); + + describe('gewest prop', () => { + const TestComponent = defineComponent({ + components: { FilterGemeente }, + setup() { + const gemeenteValue = ref(); + const setValue = (value: IGemeente) => (gemeenteValue.value = value); + const gewest = Niscode.VlaamsGewest; + return { gemeenteValue, gewest, setValue }; + }, + template: + '', + }); + + beforeEach(() => cy.mockAdressenregister()); + + it('fetches gemeenten with gewest constraint, search and assign an available gemeente', () => { + const onUpdateValueSpy = cy.spy().as('onUpdateValueSpy'); + + cy.mount(TestComponent, { props: { 'onUpdate:value': onUpdateValueSpy } }).then(({ component }) => { + cy.dataCy('filter-gemeente').click().find('.multiselect__input').type('Bertem'); + cy.dataCy('filter-gemeente') + .find('.multiselect__element') + .click() + .then(() => { + expect(component.gemeenteValue).to.deep.equal({ + niscode: '24009', + naam: 'Bertem', + provincie: { + niscode: '20001', + }, + status: 'inGebruik', + }); }); + + cy.get('@onUpdateValueSpy').should('always.have.been.calledWith', { + niscode: '24009', + naam: 'Bertem', + provincie: { + niscode: '20001', + }, + status: 'inGebruik', }); }); }); + + it('fetches gemeenten with gewest constraint and search for unavailable gemeente', () => { + cy.mount(TestComponent).then(() => { + cy.dataCy('filter-gemeente').click().find('.multiselect__input').type('Brussel'); + cy.dataCy('filter-gemeente') + .find('.multiselect__option span').first() + .should('have.text', 'Geen resultaten gevonden...') + }); + }); }); }); diff --git a/src/components/smart/FilterGemeente.vue b/src/components/smart/FilterGemeente.vue index 58e0e12..dc91b0c 100644 --- a/src/components/smart/FilterGemeente.vue +++ b/src/components/smart/FilterGemeente.vue @@ -22,13 +22,14 @@ diff --git a/src/models/filter-input.ts b/src/models/filter-input.ts index 55247a9..0aea838 100644 --- a/src/models/filter-input.ts +++ b/src/models/filter-input.ts @@ -1,4 +1,5 @@ import type { IGemeente } from './locatie'; +import { Niscode } from './niscode.enum'; export type TFilterInput = string | IGemeente; @@ -43,6 +44,7 @@ export interface IFilterInputRadioProps { export interface IFilterGemeenteProps { api: string; value?: string; + gewest?: Niscode; } export interface IFilterActorProps { diff --git a/src/stories/smart-components/filter-gemeente.stories.ts b/src/stories/smart-components/filter-gemeente.stories.ts index a27ccb5..3918ab4 100644 --- a/src/stories/smart-components/filter-gemeente.stories.ts +++ b/src/stories/smart-components/filter-gemeente.stories.ts @@ -2,6 +2,7 @@ import '@/scss/main.scss'; import FilterGemeente from '@components/smart/FilterGemeente.vue'; import type { Meta, StoryObj } from '@storybook/vue3'; import type { IGemeente } from '@models/locatie'; +import { Niscode } from '@models/niscode.enum'; // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction const meta: Meta = { @@ -20,12 +21,20 @@ const meta: Meta = { }, tags: ['autodocs'], argTypes: { + gewest: { + control: 'text', + description: 'Gewest niscode', + table: { + type: { summary: 'Niscode' }, + defaultValue: { summary: undefined }, + }, + }, value: { control: 'text', description: 'Current niscode', table: { type: { summary: 'string' }, - defaultValue: { summary: '' }, + defaultValue: { summary: undefined }, }, }, api: { @@ -72,3 +81,10 @@ export const Default: Story = { api: 'https://test-geo.onroerenderfgoed.be/', }, }; + +export const WithGewestConstraint: Story = { + args: { + api: 'https://test-geo.onroerenderfgoed.be/', + gewest: Niscode.VlaamsGewest, + }, +};