Merge pull request #361 from OnroerendErfgoed/develop

release 2.2.0
OnroerendErfgoed · Jan 29, 2025 · 7e19908 · 7e19908
2 parents 2d374c4 + c0bf34d
commit 7e19908
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 25 deletions.
diff --git a/.gitignore b/.gitignore
@@ -24,3 +24,6 @@ typings/
 dist/*
 .DS_Store
 storybook-static/*
+
+# cypress
+cypress/screenshots
diff --git 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",

diff --git 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<IGemeente>();
+        const setValue = (value: IGemeente) => (gemeenteValue.value = value);
+        const gewest = Niscode.VlaamsGewest;
+        return { gemeenteValue, gewest, setValue };
+      },
+      template:
+        '<filter-gemeente api="https://test-geo.onroerenderfgoed.be/" :value="gemeenteValue" :gewest="gewest" @update:value="setValue"/>',
+    });
+
+    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
@@ -22,13 +22,14 @@
 <script setup lang="ts">
 import { VlMultiselect } from '@govflanders/vl-ui-design-system-vue3';
 import { computed, onBeforeMount, ref } from 'vue';
+import { type IFilterGemeenteProps, Niscode } from '@models/index';
 import { CrabApiService } from '@services/crab-api.service';
-import type { IFilterGemeenteProps } from '@models/index';
 import type { IGemeente } from '@models/locatie';
 
 const props = withDefaults(defineProps<IFilterGemeenteProps>(), {
   api: '',
   value: undefined,
+  gewest: undefined,
 });
 const emit = defineEmits(['update:value']);
 
@@ -42,6 +43,19 @@ const gemeenten = ref<IGemeente[]>([]);
 const customGemeenteLabel = (option: IGemeente) => option.naam;
 
 onBeforeMount(async () => {
-  gemeenten.value = await crabApiService.getGemeenten();
+  const data = await crabApiService.getGemeenten();
+  switch (props.gewest) {
+    case Niscode.VlaamsGewest:
+      gemeenten.value = crabApiService.vlaamseGemeenten;
+      break;
+    case Niscode.WaalsGewest:
+      gemeenten.value = crabApiService.waalseGemeenten;
+      break;
+    case Niscode.BrusselsHoofdstedelijkGewest:
+      gemeenten.value = crabApiService.brusselseGemeenten;
+      break;
+    default:
+      gemeenten.value = data;
+  }
 });
 </script>
diff --git 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
@@ -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<typeof FilterGemeente> = {
@@ -20,12 +21,20 @@ const meta: Meta<typeof FilterGemeente> = {
   },
   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,
+  },
+};