envoc-form 5.0.2 → 5.0.5

package/src/__Tests__/RealisticForm.test.tsx

@@ -1,82 +1,82 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import user from '@testing-library/user-event';
-import FormTestBase from './FormTestBase';
-import { Form, StringInputGroup, ValidatedApiResult } from '../';
-import { PersonDto } from '../__Tests__/FormTestBase';
-import StandardFormActions from '../StandardFormActions';
-import { validators } from '../';
-
-const handleSubmitMock = jest.fn((value: PersonDto | FormData) => {
-  //return value;
-  return new Promise<ValidatedApiResult>((res, rej) => {
-    setTimeout(() => {
-      res({});
-    }, 15);
-  });
-});
-
-describe('Realistic Form', () => {
-  it('Validates, resolves validation, submits values', async () => {
-    global.scrollTo = jest.fn();
-    const fullForm = (
-      <FormTestBase handleSubmit={handleSubmitMock}>
-        {({ Field }) => (
-          <>
-            <Field name="name" label="name" Component={StringInputGroup} />
-            <Field
-              name="nameWithIcon"
-              label="Name with Icon"
-              Component={StringInputGroup}
-              validate={validators.required}
-            />
-            <StandardFormActions />
-            <Form.DisplayFormState />
-          </>
-        )}
-      </FormTestBase>
-    );
-
-    render(fullForm);
-    const nameInput = screen.getByLabelText('name');
-    const formSubmitButton = screen.getByRole('button', {
-      name: 'Submit',
-    });
-    //The form should start off with the submit button disabled
-    expect(formSubmitButton).toBeDisabled();
-
-    //Enter a name into the name input
-    user.click(nameInput);
-    user.type(nameInput, 'Travis Overmier');
-    expect(nameInput).toHaveValue('Travis Overmier');
-
-    //Submit should be enabled, click submit
-    expect(formSubmitButton).toBeEnabled();
-    user.click(formSubmitButton);
-
-    //Submit should disable while 'submitting' then re-enable
-    expect(formSubmitButton).toBeDisabled();
-    await waitFor(() => {
-      expect(formSubmitButton).toBeEnabled();
-    });
-
-    //Validation message should appear
-    const nameWithIconInput = screen.getByLabelText('Name with Icon');
-    expect(nameWithIconInput).toHaveErrorMessage('Required');
-
-    //Fill in field, error message goes away
-    user.type(nameWithIconInput, 'Kyle Joiner');
-    user.tab();
-    await waitFor(() => {
-      expect(nameWithIconInput).not.toHaveErrorMessage();
-    });
-
-    //Click the submit button
-    user.click(formSubmitButton);
-    await waitFor(() => {
-      expect(handleSubmitMock).toHaveBeenCalled();
-      expect(JSON.stringify(handleSubmitMock.mock.calls[0][0])).toBe(
-        `{"name":"Travis Overmier","nameWithIcon":"Kyle Joiner"}`
-      );
-    });
-  });
-});
+import { render, screen, waitFor } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import FormTestBase from './FormTestBase';
+import { Form, StringInputGroup, ValidatedApiResult } from '../';
+import { PersonDto } from '../__Tests__/FormTestBase';
+import StandardFormActions from '../StandardFormActions';
+import { validators } from '../';
+
+const handleSubmitMock = jest.fn((value: PersonDto | FormData) => {
+  //return value;
+  return new Promise<ValidatedApiResult>((res, rej) => {
+    setTimeout(() => {
+      res({});
+    }, 15);
+  });
+});
+
+describe('Realistic Form', () => {
+  it('Validates, resolves validation, submits values', async () => {
+    global.scrollTo = jest.fn();
+    const fullForm = (
+      <FormTestBase handleSubmit={handleSubmitMock}>
+        {({ Field }) => (
+          <>
+            <Field name="name" label="name" Component={StringInputGroup} />
+            <Field
+              name="nameWithIcon"
+              label="Name with Icon"
+              Component={StringInputGroup}
+              validate={validators.required}
+            />
+            <StandardFormActions />
+            <Form.DisplayFormState />
+          </>
+        )}
+      </FormTestBase>
+    );
+
+    render(fullForm);
+    const nameInput = screen.getByLabelText('name');
+    const formSubmitButton = screen.getByRole('button', {
+      name: 'Submit',
+    });
+    //The form should start off with the submit button disabled
+    expect(formSubmitButton).toBeDisabled();
+
+    //Enter a name into the name input
+    user.click(nameInput);
+    user.type(nameInput, 'Travis Overmier');
+    expect(nameInput).toHaveValue('Travis Overmier');
+
+    //Submit should be enabled, click submit
+    expect(formSubmitButton).toBeEnabled();
+    user.click(formSubmitButton);
+
+    //Submit should disable while 'submitting' then re-enable
+    expect(formSubmitButton).toBeDisabled();
+    await waitFor(() => {
+      expect(formSubmitButton).toBeEnabled();
+    });
+
+    //Validation message should appear
+    const nameWithIconInput = screen.getByLabelText('Name with Icon');
+    expect(nameWithIconInput).toHaveErrorMessage('Required');
+
+    //Fill in field, error message goes away
+    user.type(nameWithIconInput, 'Kyle Joiner');
+    user.tab();
+    await waitFor(() => {
+      expect(nameWithIconInput).not.toHaveErrorMessage();
+    });
+
+    //Click the submit button
+    user.click(formSubmitButton);
+    await waitFor(() => {
+      expect(handleSubmitMock).toHaveBeenCalled();
+      expect(JSON.stringify(handleSubmitMock.mock.calls[0][0])).toBe(
+        `{"name":"Travis Overmier","nameWithIcon":"Kyle Joiner"}`
+      );
+    });
+  });
+});

package/src/__Tests__/StandardFormActions.test.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import FormTestBase from './FormTestBase';
-import StandardFormActions from '../StandardFormActions';
-
-describe('StandardFormActions', () => {
-  it('renders without crashing', () => {
-    render(<FormTestBase>{() => <StandardFormActions />}</FormTestBase>);
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>{() => <StandardFormActions />}</FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
+import React from 'react';
+import { render } from '@testing-library/react';
+import FormTestBase from './FormTestBase';
+import StandardFormActions from '../StandardFormActions';
+
+describe('StandardFormActions', () => {
+  it('renders without crashing', () => {
+    render(<FormTestBase>{() => <StandardFormActions />}</FormTestBase>);
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>{() => <StandardFormActions />}</FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/__Tests__/SubmitFormButton.test.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import FormTestBase from './FormTestBase';
-import SubmitFormButton from '../SubmitFormButton';
-
-describe('SubmitFormButton', () => {
-  it('renders without crashing', () => {
-    render(<FormTestBase>{() => <SubmitFormButton />}</FormTestBase>);
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>{() => <SubmitFormButton />}</FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
+import React from 'react';
+import { render } from '@testing-library/react';
+import FormTestBase from './FormTestBase';
+import SubmitFormButton from '../SubmitFormButton';
+
+describe('SubmitFormButton', () => {
+  it('renders without crashing', () => {
+    render(<FormTestBase>{() => <SubmitFormButton />}</FormTestBase>);
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>{() => <SubmitFormButton />}</FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/__Tests__/__snapshots__/StandardFormActions.test.tsx.snap

@@ -1,27 +1,27 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StandardFormActions has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-    class="envoc-form-form"
-  >
-    <button
-      aria-label="Submit"
-      class="envoc-form-submit-form-button"
-      disabled=""
-      title="You haven't made any changes"
-      type="submit"
-    >
-      Submit
-    </button>
-     
-    <button
-      class="envoc-form-standard-form-actions-cancel-button"
-      type="button"
-    >
-      Cancel
-    </button>
-  </form>
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StandardFormActions has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+    class="envoc-form-form"
+  >
+    <button
+      aria-label="Submit"
+      class="envoc-form-submit-form-button"
+      disabled=""
+      title="You haven't made any changes"
+      type="submit"
+    >
+      Submit
+    </button>
+     
+    <button
+      class="envoc-form-standard-form-actions-cancel-button"
+      type="button"
+    >
+      Cancel
+    </button>
+  </form>
+</DocumentFragment>
+`;

package/src/__Tests__/__snapshots__/SubmitFormButton.test.tsx.snap

@@ -1,20 +1,20 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SubmitFormButton has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-    class="envoc-form-form"
-  >
-    <button
-      aria-label="Submit"
-      class="envoc-form-submit-form-button"
-      disabled=""
-      title="You haven't made any changes"
-      type="submit"
-    >
-      Submit
-    </button>
-  </form>
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SubmitFormButton has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+    class="envoc-form-form"
+  >
+    <button
+      aria-label="Submit"
+      class="envoc-form-submit-form-button"
+      disabled=""
+      title="You haven't made any changes"
+      type="submit"
+    >
+      Submit
+    </button>
+  </form>
+</DocumentFragment>
+`;

package/src/__Tests__/index.ts

@@ -1,3 +1,3 @@
-import FormTestBase from './FormTestBase';
-
-export { FormTestBase };
+import FormTestBase from './FormTestBase';
+
+export { FormTestBase };

package/src/_variables.scss

@@ -1,11 +1,11 @@
-//These variables are normally in the template directly,
-
-$red: #f86c6b;
-// Couldn't find these variables directly from coreui/bootstrap
-$input-border-color: #c2cfd6;
-$input-border-color--focused: #8ad4ee;
-$input-box-shadow--focused: 0 0 0 0.2rem rgba(32, 168, 216, 0.25);
-
-//Taken from react-select because it fit better in the color scheme and is more readable.
-$input-disabled-background-color: hsl(0, 0%, 95%);
-$input-disabled-border-color: hsl(0, 0%, 90%);
+//These variables are normally in the template directly,
+
+$red: #f86c6b;
+// Couldn't find these variables directly from coreui/bootstrap
+$input-border-color: #c2cfd6;
+$input-border-color--focused: #8ad4ee;
+$input-box-shadow--focused: 0 0 0 0.2rem rgba(32, 168, 216, 0.25);
+
+//Taken from react-select because it fit better in the color scheme and is more readable.
+$input-disabled-background-color: hsl(0, 0%, 95%);
+$input-disabled-border-color: hsl(0, 0%, 90%);