Skip to content

Commit

Permalink
refactor: clean up some stuff and eslint warnings
Browse files Browse the repository at this point in the history
  • Loading branch information
@EdieLemoine
EdieLemoine committed Oct 3, 2024
1 parent 150d3f9 commit 84a3296
Show file tree
Hide file tree
Showing 5 changed files with 107 additions and 150 deletions.
8 changes: 8 additions & 0 deletions .eslintrc.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,5 +48,13 @@ module.exports = {
'vue/no-bare-strings-in-template': 'off',
},
},
{
files: ['./apps/demo/**/*'],
rules: {
'@typescript-eslint/no-magic-numbers': 'off',
'no-magic-numbers': 'off',
'vue/no-bare-strings-in-template': 'off',
},
},
],
};
47 changes: 9 additions & 38 deletions apps/demo/src/views/FormView.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import {defineComponent, h, nextTick, Suspense, type DefineComponent} from 'vue';
import {describe, it, expect, afterEach} from 'vitest';
import {render, within, waitFor} from '@testing-library/vue';
import {describe, it, expect} from 'vitest';
import {render, within} from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import FormView from './FormView.vue';

Expand All @@ -18,40 +17,9 @@ export const flushPromises = (): Promise<void> => {
});
};

const capitalize = (string: string): string => {
return string.charAt(0).toUpperCase() + string.slice(1);
};

const suspenseWrapper = (componentToWrap: any): DefineComponent => {
return defineComponent({
name: 'SuspenseWrapper',
props: componentToWrap.props,
emits: componentToWrap.emits,
render() {
const props = {
...this.$props,
};
componentToWrap.emits?.forEach((emit: string) => {
props[`on${capitalize(emit)}`] = (...args: any[]) => this.$emit(emit, ...args);
});
const slots = this.$slots;
return h(
'div',
{id: 'root'},
h(Suspense, null, {
default() {
return h(componentToWrap, props, slots);
},
fallback: () => h('div', 'fallback'),
}),
);
},
});
};

describe('FormView', () => {
const renderComponent = async () => {
const component = render(suspenseWrapper(FormView));
const component = render(FormView);
await flushPromises();
return component;
};
Expand All @@ -74,7 +42,8 @@ describe('FormView', () => {
const descriptionFields = getAllByLabelText('Description');
const descriptionField = descriptionFields[0];

const errors = within(descriptionField.parentElement).getByRole('list');
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const errors = within(descriptionField.parentElement!).getByRole('list');
const error = within(errors).getByRole('listitem');
expect(error.innerText).toBe('This is an error from afterSubmit');

Expand All @@ -95,7 +64,8 @@ describe('FormView', () => {
const lastNameFields = getAllByLabelText('Last name');
const lastNameField = lastNameFields[0];

const errors = within(lastNameField.parentElement).getByRole('list');
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const errors = within(lastNameField.parentElement!).getByRole('list');
const error = within(errors).getByRole('listitem');
expect(error.innerText).toBe('This is an error from afterSubmit');

Expand All @@ -116,7 +86,8 @@ describe('FormView', () => {
const lastNameFields = getAllByLabelText('Last name');
const lastNameField = lastNameFields[0];

const errors = within(lastNameField.parentElement).getByRole('list');
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const errors = within(lastNameField.parentElement!).getByRole('list');
const error = within(errors).getByRole('listitem');
expect(error.innerText).toBe('Are you kidding me?');
});
Expand Down
30 changes: 14 additions & 16 deletions apps/demo/src/views/FormView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@

<script lang="ts" setup>
/* eslint-disable @typescript-eslint/naming-convention */
import {computed, h, ref} from 'vue';
import {computed, h, ref, toValue} from 'vue';
import {createField, createForm, type FormInstance} from '@myparcel/vue-form-builder';
import {stringNotContainsValidator} from '../validation/stringNotContainsValidator';
import {stringLengthValidator} from '../validation/stringLengthValidator';
Expand Down Expand Up @@ -168,16 +168,18 @@ const Form = createForm<{
},
afterAddElement(form, field) {
if (field.name === 'firstName') {
form.setValue(field.name, 'Spongebob');
if (field.name !== 'firstName') {
return;
}
form.setValue(field.name, 'Spongebob');
},
afterSubmit: (form: FormInstance) => {
const lastNameField = form.getField('lastName');
lastNameField.errors.value.push('Are you kidding me?');
lastNameField.isValid.value = false;
lastNameField?.addError('Are you kidding me?');
lastNameField?.setInvalid();
},
});
Expand All @@ -200,10 +202,6 @@ const FirstName = createField({
component: TTextInput,
ref: ref('Mr.'),
validators: [stringLengthValidator(2, 12), stringNotContainsValidator(['x', 'y', 'z'])],
afterUpdate(instance) {
const lastNameField = instance.form.getField('firstName');
},
});
const LastName = createField({
Expand Down Expand Up @@ -256,27 +254,27 @@ const form2Classes = computed(() => {
});
const resetForms = () => {
Form.instance.reset();
Form2.instance.reset();
void Form.instance.reset();
void Form2.instance.reset();
};
const onSubmitClick = () => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const descriptionField = Form2.instance.getField('description')!;
descriptionField.errors.value.push('This is an error from afterSubmit');
descriptionField.isValid.value = false;
descriptionField.addError('This is an error from afterSubmit');
descriptionField.setInvalid();
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const lastNameField = Form.instance.getField('lastName')!;
lastNameField.errors.value.push('This is an error from afterSubmit');
lastNameField.isValid.value = false;
lastNameField.addError('This is an error from afterSubmit');
lastNameField.setInvalid();
};
const switchOptional = () => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const field = Form.instance.getField('lastName')!;
field.setOptional(!field.isOptional.value);
field.setOptional(!toValue(field.isOptional));
};
</script>
126 changes: 62 additions & 64 deletions apps/demo/src/views/__snapshots__/FormView.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,89 +1,87 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`FormView > matches the snapshot 1`] = `
"<div id="root">
<div>
<h1>Form demo</h1>
<p> These forms are defined entirely in the template. The components can be placed anywhere in the template. You can even choose to manually place the Label and Errors components as well. </p>
<div class="gap-2 grid grid-cols-2 grid-flow-row mt-4">
<div>
<form id="newForm" class="border-green-500">
<div class="border gap-4 grid grid-auto-rows p-4 rounded-lg">
<h1>Form 1</h1>
<div class="gap-4 grid grid-cols-2">
<div>
<div class="flex flex-col"><label for="firstName">First name</label>
<!--v-if--><input id="firstName" type="text" name="firstName" class="" data-test-id="firstName">
<!--v-if-->
</div><small>Try filling in "Plankton" here</small>
</div>
<div>
<div class="flex flex-col"><label for="middleName">Middle name</label><span> (optioneel)</span><input id="middleName" type="text" name="middleName" class="" data-test-id="middleName">
<!--v-if-->
</div>
</div>
<div class="flex flex-col"><label for="lastName">Last name</label><span> (optioneel)</span><input id="lastName" type="text" name="lastName" class="" data-test-id="lastName">
"<div>
<h1>Form demo</h1>
<p> These forms are defined entirely in the template. The components can be placed anywhere in the template. You can even choose to manually place the Label and Errors components as well. </p>
<div class="gap-2 grid grid-cols-2 grid-flow-row mt-4">
<div>
<form id="newForm" class="border-green-500">
<div class="border gap-4 grid grid-auto-rows p-4 rounded-lg">
<h1>Form 1</h1>
<div class="gap-4 grid grid-cols-2">
<div>
<div class="flex flex-col"><label for="firstName">First name</label>
<!--v-if--><input id="firstName" type="text" name="firstName" class="" data-test-id="firstName">
<!--v-if-->
</div><small>Try filling in "Plankton" here</small>
</div>
<div>
<div class="flex flex-col"><label for="middleName">Middle name</label><span> (optioneel)</span><input id="middleName" type="text" name="middleName" class="" data-test-id="middleName">
<!--v-if-->
</div>
</div>
<div style="display: none;"><label for="email">Email</label>
<div><input id="email" type="text" name="email" class="" data-test-id="email"></div><pre>[]</pre>
<div class="flex flex-col"><label for="lastName">Last name</label><span> (optioneel)</span><input id="lastName" type="text" name="lastName" class="" data-test-id="lastName">
<!--v-if-->
</div>
<div class="flex">
<div class="border-2 flex-col inline-flex mx-auto my-3 px-6 py-3 rounded-lg text-center">
<h4>Are you ready, Spongebob Krabs?</h4>
<div class="gap-4 grid grid-cols-2">
<div><button type="submit" class="inline-flex mt-2 px-5 py-3 rounded-full hover:bg-pink-700 bg-pink-600 text-gray-900 inline-flex mt-2 px-5 py-3 rounded-full transition-colors">
<!--v-if-->🍀Verzenden
</button></div>
<div><button type="button" class="inline-flex mt-2 px-5 py-3 rounded-full hover:bg-pink-700 bg-pink-600 text-gray-900">
<!--v-if--> Fake submit
</button></div>
<div><button type="button" class="inline-flex mt-2 px-5 py-3 rounded-full hover:bg-pink-700 bg-pink-600 text-gray-900">
<!--v-if--> Switch optional
</button></div><button class="-skew-x-12 bg-blue-500 hover:bg-blue-700 hover:font-bold hover:skew-x-12 mt-2 p-3 text-white transition-all" type="reset"> Reset!!! </button>
</div>
</div>
<div style="display: none;"><label for="email">Email</label>
<div><input id="email" type="text" name="email" class="" data-test-id="email"></div><pre>[]</pre>
<!--v-if-->
</div>
<div class="flex">
<div class="border-2 flex-col inline-flex mx-auto my-3 px-6 py-3 rounded-lg text-center">
<h4>Are you ready, Spongebob Krabs?</h4>
<div class="gap-4 grid grid-cols-2">
<div><button type="submit" class="inline-flex mt-2 px-5 py-3 rounded-full hover:bg-pink-700 bg-pink-600 text-gray-900 inline-flex mt-2 px-5 py-3 rounded-full transition-colors">
<!--v-if-->🍀Verzenden
</button></div>
<div><button type="button" class="inline-flex mt-2 px-5 py-3 rounded-full hover:bg-pink-700 bg-pink-600 text-gray-900">
<!--v-if--> Fake submit
</button></div>
<div><button type="button" class="inline-flex mt-2 px-5 py-3 rounded-full hover:bg-pink-700 bg-pink-600 text-gray-900">
<!--v-if--> Switch optional
</button></div><button class="-skew-x-12 bg-blue-500 hover:bg-blue-700 hover:font-bold hover:skew-x-12 mt-2 p-3 text-white transition-all" type="reset"> Reset!!! </button>
</div>
</div>
</div>
</form>
<div class="bg-opacity-5 bg-white mt-4 px-8 py-4 rounded-lg">
<div class="auto-rows-auto gap-2 grid grid-cols-[1fr_3fr] grid-flow-row"><b>Name</b><span>newForm</span><b>isDirty</b><span>true</span><b>isValid</b><span>true</span><b>values</b><pre>{
</div>
</form>
<div class="bg-opacity-5 bg-white mt-4 px-8 py-4 rounded-lg">
<div class="auto-rows-auto gap-2 grid grid-cols-[1fr_3fr] grid-flow-row"><b>Name</b><span>newForm</span><b>isDirty</b><span>true</span><b>isValid</b><span>true</span><b>values</b><pre>{
"firstName": "Spongebob",
"middleName": "Harold",
"lastName": "Krabs",
"email": ""
}</pre><b>Event log</b><textarea class="font-mono w-full" readonly="" rows="10"></textarea></div>
</div>
</div>
<div>
<form id="newForm2" class="border-blue-500">
<div class="border gap-4 grid grid-auto-rows p-4 rounded-lg">
<h1>Form 2</h1>
<p>This form reuses the email field from the first form</p>
<div class="bg-opacity-5 bg-white gap-2 grid grid-auto-rows rounded-lg shadow-lg">
<div class="flex flex-col"><label for="description">Description</label>
<!--v-if--><input id="description" type="text" name="description" class="" data-test-id="description">
<!--v-if-->
</div>
<div class="border border-yellow-300 flex-col inline-flex p-2"><label for="email">Email</label><small>This is the email label</small></div>
<div class="border p-4"> This is a random div, just to show the field's components can be placed anywhere. </div>
<div class="border border-green-500 flex-col inline-flex p-2"><input id="email" type="text" name="email" class="" data-test-id="email"><small>This is the email component itself</small></div>
<div class="border border-purple-500 flex-col inline-flex p-2">
<!--v-if--><small>This is the email Errors component. You won't see it if there are no errors.</small>
</div><button type="reset" class="inline-flex mt-2 px-5 py-3 rounded-full hover:bg-pink-600 border border-pink-600 hover:bg-pink-600 hover:text-white text:pink-600">
<!--v-if--> Default slot!
</button>
</div>
<div>
<form id="newForm2" class="border-blue-500">
<div class="border gap-4 grid grid-auto-rows p-4 rounded-lg">
<h1>Form 2</h1>
<p>This form reuses the email field from the first form</p>
<div class="bg-opacity-5 bg-white gap-2 grid grid-auto-rows rounded-lg shadow-lg">
<div class="flex flex-col"><label for="description">Description</label>
<!--v-if--><input id="description" type="text" name="description" class="" data-test-id="description">
<!--v-if-->
</div>
<div class="border border-yellow-300 flex-col inline-flex p-2"><label for="email">Email</label><small>This is the email label</small></div>
<div class="border p-4"> This is a random div, just to show the field's components can be placed anywhere. </div>
<div class="border border-green-500 flex-col inline-flex p-2"><input id="email" type="text" name="email" class="" data-test-id="email"><small>This is the email component itself</small></div>
<div class="border border-purple-500 flex-col inline-flex p-2">
<!--v-if--><small>This is the email Errors component. You won't see it if there are no errors.</small>
</div><button type="reset" class="inline-flex mt-2 px-5 py-3 rounded-full hover:bg-pink-600 border border-pink-600 hover:bg-pink-600 hover:text-white text:pink-600">
<!--v-if--> Default slot!
</button>
</div>
</form>
<div class="bg-opacity-5 bg-white mt-4 px-8 py-4 rounded-lg">
<div class="auto-rows-auto gap-2 grid grid-cols-[1fr_3fr] grid-flow-row"><b>Name</b><span>newForm2</span><b>isDirty</b><span>false</span><b>isValid</b><span>true</span><b>values</b><pre>{
</div>
</form>
<div class="bg-opacity-5 bg-white mt-4 px-8 py-4 rounded-lg">
<div class="auto-rows-auto gap-2 grid grid-cols-[1fr_3fr] grid-flow-row"><b>Name</b><span>newForm2</span><b>isDirty</b><span>false</span><b>isValid</b><span>true</span><b>values</b><pre>{
"description": "",
"email": ""
}</pre><b>Event log</b><textarea class="font-mono w-full" readonly="" rows="10"></textarea></div>
</div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 84a3296

Please sign in to comment.