test(text-area): unit test and e2e

Author: alvarosabu

demos/vue-3/src/router/index.ts

@@ -52,6 +52,17 @@ const routes: Array<RouteRecordRaw> = [
     component: () =>
       import(/* webpackChunkName: "text-fields" */ '../views/SelectFields.vue'),
   },
+  {
+    path: '/textarea-fields',
+    name: 'TextArea Fields',
+    meta: {
+      title: 'TextArea Fields',
+    },
+    component: () =>
+      import(
+        /* webpackChunkName: "text-fields" */ '../views/TextAreaFields.vue'
+      ),
+  },
   {
     path: '/login',
     name: 'Login',

demos/vue-3/src/views/Home.vue

@@ -61,6 +61,11 @@ export default defineComponent({
             route: '/select-fields',
             tags: ['select-field'],
           },
+          {
+            name: 'Textarea Fields',
+            route: '/textarea-fields',
+            tags: ['textarea-field'],
+          },
           {
             name: 'Login',
             route: '/login',

demos/vue-3/src/views/TextAreaFields.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="page container">
+    <div class="mx-auto w-full sm:w-2/3 relative mb-24">
+      <div
+        class="absolute inset-0 bg-gradient-to-r from-blue-400 to-green-200 shadow-xl transform -skew-y-3 sm:skew-y-0 sm:-rotate-3 sm:rounded-3xl"
+      ></div>
+      <div class="relative card p-6 bg-white">
+        <dynamic-form
+          :form="form"
+          @submitted="handleSubmit"
+          @change="valueChanged"
+          @error="handleError"
+        />
+        <button
+          data-cy="submit"
+          class="btn bg-green-500 text-white hover:bg-green-700 mt-4"
+          submit="true"
+          :form="form?.id"
+        >
+          Submit
+        </button>
+      </div>
+    </div>
+    <div class="mx-auto w-full sm:w-2/3"><Console :content="formValues" /></div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  FormValidator,
+  Validator,
+  TextAreaField,
+  required,
+  FormOptions,
+  minLength,
+  maxLength,
+} from '@/';
+import { computed, defineComponent, reactive } from 'vue';
+import Console from '../components/Console.vue';
+
+const components = {
+  Console,
+};
+/* } from '../../dist/as-dynamic-forms.esm'; */
+export default defineComponent({
+  name: 'TextAreaFieldsDemo',
+  components,
+  setup() {
+    const formValues = reactive({});
+    const minLengthValidator: FormValidator = Validator({
+      validator: minLength(10),
+      text: 'Text must be greater than 10 characters long',
+    });
+
+    const form = computed(() => ({
+      id: 'text-fields-demo',
+      fields: {
+        bio: TextAreaField({
+          label: 'Bio',
+        }),
+        aboutMe: TextAreaField({
+          label: 'About Me',
+          validations: [
+            Validator({ validator: required, text: 'This field is required' }),
+          ],
+        }),
+        interests: TextAreaField({
+          label: 'Interests',
+          col: 5,
+          rows: 10,
+          validations: [Validator(minLengthValidator)],
+        }),
+        disabled: TextAreaField({
+          label: 'Disabled',
+          value:
+            'Arepa ipsum dolor amet risus pretium polar ni lava ni presta la batea ¿Vas a seguir Abigail? ron!',
+          disabled: true,
+        }),
+      },
+    }));
+
+    function handleSubmit(values) {
+      console.log('Values Submitted', values);
+    }
+
+    function valueChanged(values) {
+      Object.assign(formValues, values);
+      console.log('Values', values);
+    }
+
+    function handleError(errors) {
+      console.error('Errors', errors);
+    }
+
+    return {
+      form,
+      formValues,
+      handleSubmit,
+      valueChanged,
+      handleError,
+    };
+  },
+});
+</script>

src/components/text-area-input/TextAreaInput.spec.ts

@@ -0,0 +1,123 @@
+import { mount } from '@vue/test-utils';
+import TextAreaInput from './TextAreaInput.vue';
+import { FieldControl, TextAreaField, Validator, required } from '../../index';
+
+describe('TextAreaInput', () => {
+  let cmp;
+
+  beforeEach(() => {
+    cmp = mount(TextAreaInput, {
+      props: {
+        control: FieldControl({
+          name: 'test-input',
+          ...TextAreaField({
+            label: 'Test Textarea',
+          }),
+        }),
+      },
+    });
+  });
+
+  test('renders an textarea element', () => {
+    const textarea = cmp.find('textarea');
+    expect(textarea.exists()).toBe(true);
+  });
+
+  test(`renders an textarea with class 'form-control'`, () => {
+    const textarea = cmp.find('textarea');
+    expect(textarea.classes()).toContain('form-control');
+  });
+
+  test(`renders an textarea with id equal to field name`, () => {
+    const textarea = cmp.find('textarea');
+    expect(textarea.attributes('id')).toBe('test-input');
+  });
+
+  test(`textarea gets disabled when form control does it`, async () => {
+    await cmp.setProps({
+      control: FieldControl({
+        name: 'test-input',
+        ...TextAreaField({
+          label: 'Test Textarea',
+          disabled: true,
+        }),
+      }),
+    });
+    const textarea = cmp.find('textarea');
+    expect(textarea.attributes('disabled')).toBe('');
+  });
+
+  test(`renders a required textarea`, async () => {
+    await cmp.setProps({
+      control: FieldControl({
+        name: 'test-input',
+        ...TextAreaField({
+          label: 'Test Textarea',
+          validations: [
+            Validator({ validator: required, text: 'This field is required' }),
+          ],
+        }),
+      }),
+    });
+    const textarea = cmp.find('textarea');
+    expect(textarea.attributes('required')).toBe('');
+  });
+
+  test(`sets ariaRequired when required`, async () => {
+    await cmp.setProps({
+      control: FieldControl({
+        name: 'test-input',
+        ...TextAreaField({
+          label: 'Test Textarea',
+          validations: [
+            Validator({ validator: required, text: 'This field is required' }),
+          ],
+        }),
+      }),
+    });
+    const textarea = cmp.find('textarea');
+    expect(textarea.attributes('ariarequired')).toBeTruthy;
+  });
+
+  test(`renders a readonly textarea`, async () => {
+    await cmp.setProps({
+      control: FieldControl({
+        name: 'test-input',
+        ...TextAreaField({
+          label: 'Test Textarea',
+          readonly: true,
+        }),
+      }),
+    });
+    const textarea = cmp.find('textarea');
+    expect(textarea.attributes('readonly')).toBe('');
+  });
+
+  test(`renders an textarea with aria labels`, async () => {
+    await cmp.setProps({
+      control: FieldControl({
+        name: 'test-input',
+        ...TextAreaField({
+          label: 'Test Textarea',
+          ariaLabel: 'Im a test input',
+        }),
+      }),
+    });
+    const textarea = cmp.find('textarea');
+    expect(textarea.attributes('arialabel')).toBe('Im a test input');
+  });
+
+  test('emits an event when blur', async () => {
+    const textarea = cmp.find('textarea');
+    await textarea.trigger('blur');
+
+    expect(cmp.emitted()).toHaveProperty('blur');
+  });
+
+  test('emits an event when focus', async () => {
+    const textarea = cmp.find('textarea');
+    await textarea.trigger('focus');
+
+    expect(cmp.emitted()).toHaveProperty('focus');
+  });
+});

src/components/text-area-input/TextAreaInput.vue

@@ -16,7 +16,10 @@ export default defineComponent({
   inheritAttrs: false,
   props,
   setup(props, { emit }) {
-    const { onInput, onChange, onFocus, onBlur } = useInputEvents(props, emit);
+    const { onInput, onChange, onFocus, onBlur, getClasses } = useInputEvents(
+      props,
+      emit,
+    );
     const {
       isRequired,
       errorMessages,
@@ -27,7 +30,7 @@ export default defineComponent({
       h('textarea', {
         id: props.control.name,
         name: props.control.name || '',
-        class: ['form-control'],
+        class: getClasses.value,
         value: props.control.value,
         rows: props.control.rows,
         cols: props.control.cols,