From bcc30c271830ccce671275bbd001d3a7d98b511d Mon Sep 17 00:00:00 2001 From: wouter-adriaens Date: Wed, 24 Jan 2024 09:41:58 +0100 Subject: [PATCH] #203 Fix adres tests --- src/__tests__/OeAdres.cy.ts | 86 ++++++++++++++++++++++++++----------- 1 file changed, 60 insertions(+), 26 deletions(-) diff --git a/src/__tests__/OeAdres.cy.ts b/src/__tests__/OeAdres.cy.ts index 765065cc..e0e66b1d 100644 --- a/src/__tests__/OeAdres.cy.ts +++ b/src/__tests__/OeAdres.cy.ts @@ -1,12 +1,16 @@ import { mount } from 'cypress/vue'; -import { defineComponent } from 'vue'; +import { defineComponent, useAttrs } from 'vue'; import OeAdres from '@components/smart/OeAdres.vue'; import type { IAdresConfig } from '@models/adres'; describe('Adres', () => { const TestComponent = defineComponent({ components: { OeAdres }, - template: '', + setup() { + const attrs = useAttrs(); + return { attrs }; + }, + template: '', }); it('renders', () => { @@ -23,20 +27,20 @@ describe('Adres', () => { mount(TestComponent); }); - it('has an input label land - required', () => { - getLabel('land').should('have.text', 'Land(verplicht)'); + it('has an input label land', () => { + getLabel('land').should('have.text', 'Land'); }); - it('has an input label gemeente - required', () => { - getLabel('gemeente').should('have.text', 'Gemeente(verplicht)'); + it('has an input label gemeente', () => { + getLabel('gemeente').should('have.text', 'Gemeente'); }); - it('has an input label postcode - required', () => { - getLabel('postcode').should('have.text', 'Postcode(verplicht)'); + it('has an input label postcode', () => { + getLabel('postcode').should('have.text', 'Postcode'); }); - it('has an input label straat - required', () => { - getLabel('straat').should('have.text', 'Straat(verplicht)'); + it('has an input label straat', () => { + getLabel('straat').should('have.text', 'Straat'); }); it('has an input label huisnummer', () => { @@ -139,8 +143,8 @@ describe('Adres', () => { getMultiSelect('straat').parent().should('have.class', 'vl-multiselect--error'); getFormError('straat').should('have.text', 'Het veld straat is verplicht.'); - getMultiSelect('huisnummer').parent().should('not.have.class', 'vl-multiselect--error'); - getFormError('huisnummer').should('not.exist'); + getMultiSelect('huisnummer').parent().should('have.class', 'vl-multiselect--error'); + getFormError('huisnummer').should('have.text', 'Het veld huisnummer is verplicht.'); getMultiSelect('busnummer').parent().should('not.have.class', 'vl-multiselect--error'); getFormError('busnummer').should('not.exist'); @@ -307,8 +311,8 @@ describe('Adres', () => { getTextInput('straat').should('have.class', 'vl-input-field--error'); getFormError('straat').should('have.text', 'Het veld straat is verplicht.'); - getTextInput('huisnummer').should('not.have.class', 'vl-input-field--error'); - getFormError('huisnummer').should('not.exist'); + getTextInput('huisnummer').should('have.class', 'vl-input-field--error'); + getFormError('huisnummer').should('have.text', 'Het veld huisnummer is verplicht.'); getTextInput('busnummer').should('not.have.class', 'vl-input-field--error'); getFormError('busnummer').should('not.exist'); @@ -316,6 +320,36 @@ describe('Adres', () => { }); }); + describe('form - show required annotation per field', () => { + beforeEach(() => { + mount(TestComponent, { props: { showRequiredPerField: true } }); + }); + + it('has an input label land', () => { + getLabel('land').should('have.text', 'LandVERPLICHT'); + }); + + it('has an input label gemeente', () => { + getLabel('gemeente').should('have.text', 'GemeenteVERPLICHT'); + }); + + it('has an input label postcode', () => { + getLabel('postcode').should('have.text', 'PostcodeVERPLICHT'); + }); + + it('has an input label straat', () => { + getLabel('straat').should('have.text', 'StraatVERPLICHT'); + }); + + it('has an input label huisnummer', () => { + getLabel('huisnummer').should('have.text', 'HuisnummerVERPLICHT'); + }); + + it('has an input label busnummer', () => { + getLabel('busnummer').should('have.text', 'Busnummer'); + }); + }); + describe('form - 2-way binding', () => { it('fills in the predefined values', () => { mount(TestComponent, { @@ -451,12 +485,12 @@ describe('Adres', () => { }); }); - it('has an input label land - required', () => { - getLabel('land').should('have.text', 'Land(verplicht)'); + it('has an input label land', () => { + getLabel('land').should('have.text', 'Land'); }); - it('has an input label gemeente - required', () => { - getLabel('gemeente').should('have.text', 'Gemeente(verplicht)'); + it('has an input label gemeente', () => { + getLabel('gemeente').should('have.text', 'Gemeente'); }); it('has an input label postcode', () => { @@ -526,28 +560,28 @@ describe('Adres', () => { }); }); - it('has an input label land - required', () => { - getLabel('land').should('have.text', 'Land(verplicht)'); + it('has an input label land', () => { + getLabel('land').should('have.text', 'Land'); }); - it('has an input label gemeente - required', () => { - getLabel('gemeente').should('have.text', 'Gemeente(verplicht)'); + it('has an input label gemeente', () => { + getLabel('gemeente').should('have.text', 'Gemeente'); }); it('has an input label postcode', () => { - getLabel('postcode').should('have.text', 'Postcode(verplicht)'); + getLabel('postcode').should('have.text', 'Postcode'); }); it('has an input label straat', () => { - getLabel('straat').should('have.text', 'Straat(verplicht)'); + getLabel('straat').should('have.text', 'Straat'); }); it('has an input label huisnummer', () => { - getLabel('huisnummer').should('have.text', 'Huisnummer(verplicht)'); + getLabel('huisnummer').should('have.text', 'Huisnummer'); }); it('has an input label busnummer', () => { - getLabel('busnummer').should('have.text', 'Busnummer(verplicht)'); + getLabel('busnummer').should('have.text', 'Busnummer'); }); it('triggers required validation after fields are touched and emptied', () => {