#63 changed adres name again

OnroerendErfgoed · Aug 7, 2023 · 7544e3e · 7544e3e
1 parent 5436e5f
commit 7544e3e
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 47 deletions.
diff --git a/src/__tests__/AdresComponent.cy.ts → src/__tests__/OeAdres.cy.ts b/src/__tests__/AdresComponent.cy.ts → src/__tests__/OeAdres.cy.ts
@@ -1,12 +1,12 @@
 import { mount } from 'cypress/vue';
 import { defineComponent } from 'vue';
-import AdresComponent from '@components/smart/AdresComponent.vue';
-import type { IAdresComponentConfig } from '@models/adres-component';
+import OeAdres from '@components/smart/OeAdres.vue';
+import type { IAdresConfig } from '@models/adres';
 
-describe('Adres CRAB', () => {
+describe('Adres', () => {
   const TestComponent = defineComponent({
-    components: { AdresComponent },
-    template: '<Suspense><AdresComponent/></Suspense>',
+    components: { OeAdres },
+    template: '<Suspense><OeAdres/></Suspense>',
   });
 
   it('renders', () => {
@@ -97,11 +97,11 @@ describe('Adres CRAB', () => {
       });
 
       it('fills in the form', () => {
-        fillInAdresComponentBelgium();
+        fillInOeAdresBelgium();
       });
 
       it('clears the form when changing country', () => {
-        fillInAdresComponentBelgium();
+        fillInOeAdresBelgium();
 
         getMultiSelect('land').select(2).select(1);
 
@@ -113,7 +113,7 @@ describe('Adres CRAB', () => {
       });
 
       it('shows huisnummers textinput when street fetch throws a 404', () => {
-        fillInAdresComponentBelgium();
+        fillInOeAdresBelgium();
 
         cy.intercept('GET', 'https://test-geo.onroerenderfgoed.be/adressenregister/straten/**/adressen', {
           statusCode: 404,
@@ -126,7 +126,7 @@ describe('Adres CRAB', () => {
       });
 
       it('triggers required validation after fields are touched and emptied', () => {
-        fillInAdresComponentBelgium();
+        fillInOeAdresBelgium();
 
         getMultiSelect('land').select(2).select(1);
 
@@ -278,11 +278,11 @@ describe('Adres CRAB', () => {
 
     describe('country selection other', () => {
       it('fills in the form', () => {
-        fillInAdresComponentOther();
+        fillInOeAdresOther();
       });
 
       it('clears the form when changing country', () => {
-        fillInAdresComponentOther();
+        fillInOeAdresOther();
 
         getMultiSelect('land').select(3);
 
@@ -294,7 +294,7 @@ describe('Adres CRAB', () => {
       });
 
       it('triggers required validation after fields are touched and emptied', () => {
-        fillInAdresComponentOther();
+        fillInOeAdresOther();
 
         getMultiSelect('land').select(3);
 
@@ -342,7 +342,7 @@ describe('Adres CRAB', () => {
             },
           },
         }),
-        template: '<Suspense><AdresComponent v-model:adres="adres"/></Suspense>',
+        template: '<Suspense><OeAdres v-model:adres="adres"/></Suspense>',
       });
 
       getMultiSelect('land').find(':selected').should('have.text', 'België');
@@ -378,7 +378,7 @@ describe('Adres CRAB', () => {
             },
           },
         }),
-        template: '<Suspense><AdresComponent v-model:adres="adres"/></Suspense>',
+        template: '<Suspense><OeAdres v-model:adres="adres"/></Suspense>',
       }).then(({ component }) => {
         getMultiSelect('gemeente').click();
         getMultiSelect('gemeente').find('.multiselect__input').type('Lummen');
@@ -412,7 +412,7 @@ describe('Adres CRAB', () => {
 
       mount(TestComponent, {
         data: () => ({ api }),
-        template: '<Suspense><AdresComponent :api="api"/></Suspense>',
+        template: '<Suspense><OeAdres :api="api"/></Suspense>',
       }).then(() => {
         cy.wait('@dataGetLanden').then((intercept) => {
           expect(intercept.request.url).to.equal('https://test.be/adressenregister/landen');
@@ -423,7 +423,7 @@ describe('Adres CRAB', () => {
 
   describe('form - custom config', () => {
     describe('applies custom configuration to free-text fields - land and gemeente required', () => {
-      const config: IAdresComponentConfig = {
+      const config: IAdresConfig = {
         land: {
           required: true,
         },
@@ -447,7 +447,7 @@ describe('Adres CRAB', () => {
       beforeEach(() => {
         mount(TestComponent, {
           data: () => ({ config }),
-          template: '<Suspense><AdresComponent :config="config"/></Suspense>',
+          template: '<Suspense><OeAdres :config="config"/></Suspense>',
         });
       });
 
@@ -476,7 +476,7 @@ describe('Adres CRAB', () => {
       });
 
       it('triggers required validation after fields are touched and emptied', () => {
-        fillInAdresComponentOther();
+        fillInOeAdresOther();
 
         getMultiSelect('land').select(3);
 
@@ -498,7 +498,7 @@ describe('Adres CRAB', () => {
     });
 
     describe('applies custom configuration to free-text fields - all required', () => {
-      const config: IAdresComponentConfig = {
+      const config: IAdresConfig = {
         land: {
           required: true,
         },
@@ -522,7 +522,7 @@ describe('Adres CRAB', () => {
       beforeEach(() => {
         mount(TestComponent, {
           data: () => ({ config }),
-          template: '<Suspense><AdresComponent :config="config"/></Suspense>',
+          template: '<Suspense><OeAdres :config="config"/></Suspense>',
         });
       });
 
@@ -551,7 +551,7 @@ describe('Adres CRAB', () => {
       });
 
       it('triggers required validation after fields are touched and emptied', () => {
-        fillInAdresComponentOther();
+        fillInOeAdresOther();
 
         getMultiSelect('land').select(3);
 
@@ -573,7 +573,7 @@ describe('Adres CRAB', () => {
     });
 
     describe('applies custom configuration to multi-select fields - all required', () => {
-      const config: IAdresComponentConfig = {
+      const config: IAdresConfig = {
         land: {
           required: true,
         },
@@ -597,12 +597,12 @@ describe('Adres CRAB', () => {
       beforeEach(() => {
         mount(TestComponent, {
           data: () => ({ config }),
-          template: '<Suspense><AdresComponent :config="config"/></Suspense>',
+          template: '<Suspense><OeAdres :config="config"/></Suspense>',
         });
       });
 
       it('triggers required validation after fields are touched and emptied', () => {
-        fillInAdresComponentBelgium();
+        fillInOeAdresBelgium();
 
         getMultiSelect('land').select(3).select(1);
 
@@ -627,7 +627,7 @@ describe('Adres CRAB', () => {
   describe('form - specific country', () => {
     beforeEach(() => {
       mount(TestComponent, {
-        template: '<Suspense><AdresComponent countryId="BE" v-model:adres="adres"/></Suspense>',
+        template: '<Suspense><OeAdres countryId="BE" v-model:adres="adres"/></Suspense>',
       });
     });
 
@@ -646,7 +646,7 @@ describe('Adres CRAB', () => {
   describe('form - multi select options limit', () => {
     beforeEach(() => {
       mount(TestComponent, {
-        template: '<Suspense><AdresComponent :options-limit="3" v-model:adres="adres"/></Suspense>',
+        template: '<Suspense><OeAdres :options-limit="3" v-model:adres="adres"/></Suspense>',
       });
     });
     it('sets the max amount of items at multi-select elements', () => {
@@ -677,7 +677,7 @@ const getTextInput = (field: string) => cy.dataCy(`input-${field}`);
 const getFormError = (field: string) => cy.dataCy(`form-error-${field}`);
 const getAction = (action: string) => cy.dataCy(`action-${action}`);
 
-const fillInAdresComponentBelgium = () => {
+const fillInOeAdresBelgium = () => {
   // Country selection
   getMultiSelect('land').select(1).find(':selected').should('have.text', 'België');
 
@@ -711,7 +711,7 @@ const fillInAdresComponentBelgium = () => {
   getMultiSelect('busnummer').find('.multiselect__single').should('have.text', '0101');
 };
 
-const fillInAdresComponentOther = () => {
+const fillInOeAdresOther = () => {
   // Country selection
   getMultiSelect('land').select(2).find(':selected').should('have.text', 'Duitsland');
 

diff --git a/src/components/smart/AdresComponent.vue → src/components/smart/OeAdres.vue b/src/components/smart/AdresComponent.vue → src/components/smart/OeAdres.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="adres-component">
+  <div class="oe-adres">
     <VlProperties>
       <VlPropertiesTitle data-cy="title-adres">Adres</VlPropertiesTitle>
       <VlPropertiesList>
@@ -331,7 +331,7 @@ import {
   VlPropertiesTitle,
   VlSelect,
 } from '@govflanders/vl-ui-design-system-vue3';
-import type { IAdresComponentProps } from '@models/adres-component';
+import type { IAdresProps } from '@models/adres';
 import type { IAdres, IGemeente, ILand, ILocatieAdres, IPostinfo, IStraat } from '@models/locatie';
 import { CrabApiService } from '@services/crab-api.service';
 import { requiredIf } from '@utils/i18n-validators';
@@ -341,7 +341,7 @@ import { AxiosError } from 'axios';
 import { pick, sortBy, uniqBy } from 'lodash';
 import { computed, onMounted, ref, watch } from 'vue';
 
-const props = withDefaults(defineProps<IAdresComponentProps>(), {
+const props = withDefaults(defineProps<IAdresProps>(), {
   config: () => ({
     land: { required: true },
     gemeente: { required: true },
@@ -677,7 +677,7 @@ const resetFreeTextState = () => {
 </script>
 
 <style lang="scss" scoped>
-.adres-component {
+.oe-adres {
   .vl-properties__label {
     max-width: 100%;
   }
@@ -689,3 +689,4 @@ const resetFreeTextState = () => {
   }
 }
 </style>
+@models/adres
diff --git a/src/components/smart/index.ts b/src/components/smart/index.ts
@@ -1,6 +1,6 @@
-import AdresComponent from './AdresComponent.vue';
+import OeAdres from './OeAdres.vue';
 import FilterAanduidingsobject from './FilterAanduidingsobject.vue';
 import FilterGemeente from './FilterGemeente.vue';
 import FilterProvincie from './FilterProvincie.vue';
 
-export { AdresComponent, FilterAanduidingsobject, FilterGemeente, FilterProvincie };
+export { OeAdres, FilterAanduidingsobject, FilterGemeente, FilterProvincie };
diff --git a/src/models/adres-component.ts → src/models/adres.ts b/src/models/adres-component.ts → src/models/adres.ts
@@ -1,14 +1,14 @@
 import type { ILocatieAdres } from '@models/locatie';
 
-export interface IAdresComponentProps {
+export interface IAdresProps {
   api?: string;
-  config?: IAdresComponentConfig;
+  config?: IAdresConfig;
   countryId?: string;
   adres?: ILocatieAdres;
   optionsLimit?: number;
 }
 
-export interface IAdresComponentConfig {
+export interface IAdresConfig {
   land?: IConfigOption;
   gemeente?: IConfigOption;
   postcode?: IConfigOption;

diff --git a/src/models/index.ts b/src/models/index.ts
@@ -1,5 +1,5 @@
 export * from './aanduidingsobject';
-export * from './adres-component';
+export * from './adres';
 export * from './container';
 export * from './dataverantwoordelijke';
 export * from './filter-input';

diff --git a/...art-components/adres-component.stories.ts → ...ries/smart-components/oe-adres.stories.ts b/...art-components/adres-component.stories.ts → ...ries/smart-components/oe-adres.stories.ts
@@ -1,22 +1,22 @@
 import '@/scss/main.scss';
-import AdresComponent from '@components/smart/AdresComponent.vue';
+import OeAdres from '@components/smart/OeAdres.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
 import type { ILocatieAdres } from '@models/locatie';
 
-const meta: Meta<typeof AdresComponent> = {
-  title: 'Smart components/AdresComponent',
-  component: AdresComponent,
+const meta: Meta<typeof OeAdres> = {
+  title: 'Smart components/OeAdres',
+  component: OeAdres,
   tags: ['autodocs'],
   render: (args) => ({
-    components: { AdresComponent },
+    components: { OeAdres },
     inheritAttrs: false,
     setup() {
       return { args };
     },
     template: `
       <div>
       <Suspense>
-        <AdresComponent v-bind="args" @update:adres="onUpdateAdres" />
+        <OeAdres v-bind="args" @update:adres="onUpdateAdres" />
       </Suspense>
       <h3>Adres:</h3>
       <pre>{{ eventOutput }}</pre>
@@ -58,7 +58,7 @@ const meta: Meta<typeof AdresComponent> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof AdresComponent>;
+type Story = StoryObj<typeof OeAdres>;
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
  * See https://storybook.js.org/docs/vue/api/csf
@@ -120,15 +120,15 @@ export const TwoWayBinding: Story = {
     },
   },
   render: ({ adres }: ILocatieAdres) => ({
-    components: { AdresComponent },
+    components: { OeAdres },
     inheritAttrs: false,
     setup() {
       return { adres };
     },
     template: `
       <div>
       <Suspense>
-        <AdresComponent v-model:adres="adres"  @update:adres="onUpdateAdres" />
+        <OeAdres v-model:adres="adres"  @update:adres="onUpdateAdres" />
       </Suspense>
       <h3>Adres:</h3>
       <pre>{{ eventOutput }}</pre>