Feature/front end tests

.gitignore

@@ -48,3 +48,6 @@ yarn-error.log*
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+.vscode/launch.json
+.vscode/settings.json

__tests__/client-state/mst.test.ts

@@ -0,0 +1,164 @@
+import { getSnapshot, Instance } from 'mobx-state-tree'
+import { Form } from '../../client-state/models/Form'
+import { FormField } from '../../client-state/models/FormField'
+import { RootStore } from '../../client-state/store'
+import {
+  LegalStatus,
+  LivingCountry,
+  MaritalStatus,
+} from '../../utils/api/definitions/enums'
+import { mockPartialGetRequest } from '../pages/api/factory'
+
+describe('test the mobx state tree nodes', () => {
+  let root: Instance<typeof RootStore>
+  beforeEach(() => {
+    root = RootStore.create({
+      form: {},
+      oas: {},
+      gis: {},
+      afs: {},
+      allowance: {},
+      summary: {},
+    })
+  })
+
+  function fillOutForm(form: Instance<typeof Form>) {
+    form.fields[0].setValue('20000') // income
+    form.fields[1].setValue('65') //age
+    form.fields[2].setValue(MaritalStatus.SINGLE)
+    form.fields[3].setValue(LivingCountry.CANADA)
+    form.fields[4].setValue(LegalStatus.CANADIAN_CITIZEN)
+    form.fields[5].setValue('true') // Lived in Canada whole life
+  }
+
+  async function instantiateFormFields() {
+    return await mockPartialGetRequest({
+      income: '20000' as unknown as number,
+    })
+  }
+
+  it('can add form fields via addField', () => {
+    const form: Instance<typeof Form> = root.form
+
+    expect(form.fields).toHaveLength(0)
+    form.addField({
+      key: 'income',
+      type: 'currency',
+      label: 'What is your net annual income?',
+      category: {
+        key: 'incomeDetails',
+        text: 'Income Details',
+      },
+      order: 1,
+    })
+    expect(form.fields).toHaveLength(1)
+  })
+
+  it('can report if a form field is filled out or not', async () => {
+    const res = await instantiateFormFields()
+    const form: Instance<typeof Form> = root.form
+    form.setupForm(res.body.fieldData)
+    expect(form.fields[0].filled).toBe(false)
+    form.fields[0].setValue('10000')
+    expect(form.fields[0].filled).toBe(true)
+  })
+
+  it('can create a form via an api request', async () => {
+    const res = await instantiateFormFields()
+    const form: Instance<typeof Form> = root.form
+    form.setupForm(res.body.fieldData)
+    expect(form.fields).toHaveLength(6)
+  })
+
+  it("can clear an entire form's fields", async () => {
+    const res = await instantiateFormFields()
+    const form: Instance<typeof Form> = root.form
+    form.setupForm(res.body.fieldData)
+    expect(form.fields).toHaveLength(6)
+    form.removeAllFields()
+    expect(form.fields).toHaveLength(0)
+  })
+
+  it('can clear all values from a form', async () => {
+    const res = await instantiateFormFields()
+    const form: Instance<typeof Form> = root.form
+    form.setupForm(res.body.fieldData)
+    expect(form.fields).toHaveLength(6)
+    form.clearForm()
+
+    for (const field of form.fields) {
+      expect(field.value).toBeNull()
+    }
+  })
+
+  it("can predictably retrieve a form field by it's key", async () => {
+    const form: Instance<typeof Form> = root.form
+    form.addField({
+      key: 'income',
+      type: 'currency',
+      label: 'What is your current annual net income in Canadian Dollars?',
+      category: { key: 'incomeDetails', text: 'Income Details' },
+      order: 1,
+      placeholder: '$20,000',
+      default: undefined,
+      value: null,
+      options: [],
+      error: undefined,
+    })
+
+    const field = form.getFieldByKey('income')
+
+    expect(field.key).toEqual('income')
+    expect(field.label).toEqual(
+      'What is your current annual net income in Canadian Dollars?'
+    )
+  })
+
+  it("can sanitize a form field's value as expected", async () => {
+    const res = await instantiateFormFields()
+    const field: Instance<typeof FormField> = FormField.create(
+      res.body.fieldData[0]
+    )
+    field.setValue('$20,000.00')
+    expect(field.sanitizeInput()).toEqual('20000.00')
+  })
+
+  it('can report on empty fields in a form as expected', async () => {
+    const res = await instantiateFormFields()
+    const form: Instance<typeof Form> = root.form
+    form.setupForm(res.body.fieldData)
+    fillOutForm(form)
+    expect(form.validateAgainstEmptyFields()).toBe(false) // no errors exist
+    form.fields[0].setValue(null)
+    expect(form.validateAgainstEmptyFields()).toBe(true)
+  })
+
+  it('can report on the forms progress', async () => {
+    const res = await instantiateFormFields()
+    const form: Instance<typeof Form> = root.form
+    form.setupForm(res.body.fieldData)
+    expect(form.progress.income).toBe(false)
+    expect(form.progress.personal).toBe(false)
+    expect(form.progress.legal).toBe(false)
+    fillOutForm(form)
+    expect(form.progress.income).toBe(true) // do not store progress in a const, there is a caching point in mst and it needs to be observed directly to re-derive it's state
+    expect(form.progress.personal).toBe(true)
+    expect(form.progress.legal).toBe(true)
+  })
+
+  it('can build a consistent querystring', async () => {
+    const res = await instantiateFormFields()
+    const form: Instance<typeof Form> = root.form
+    form.setupForm(res.body.fieldData)
+    let qs = form.buildQueryStringWithFormData()
+    expect(qs).toBe('livingCountry=CAN') // Canada is selected by default
+    fillOutForm(form)
+    qs = form.buildQueryStringWithFormData()
+    expect(qs).toContain('income=20000')
+    expect(qs).toContain('age=65')
+    expect(qs).toContain('maritalStatus=single')
+    expect(qs).toContain('livingCountry=CAN')
+    expect(qs).toContain('legalStatus=canadianCitizen')
+    expect(qs).toContain('canadaWholeLife=true')
+  })
+})

__tests__/components/ComponentFactory.test.tsx

@@ -0,0 +1,12 @@
+/**
+ * @jest-environment jsdom
+ */
+import '@testing-library/jest-dom'
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+// no data get request renders a lone income field
+
+// data fetch problem
+
+// render full form

__tests__/components/CurrencyField.test.tsx

@@ -0,0 +1,80 @@
+/**
+ * @jest-environment jsdom
+ */
+import '@testing-library/jest-dom'
+import React from 'react'
+import { cleanup, render, screen } from '@testing-library/react'
+import { LanguageProvider, StoreProvider } from '../../components/Contexts'
+import { CurrencyField } from '../../components/Forms/CurrencyField'
+
+describe('CurrencyField component', () => {
+  it('should render an input component that is required component', () => {
+    const props = {
+      name: 'income',
+      label: 'What is your annual net income?',
+      required: true,
+    }
+
+    const ui = (
+      <StoreProvider>
+        <LanguageProvider>
+          <CurrencyField
+            name={props.name}
+            label={props.label}
+            required={props.required}
+          />
+        </LanguageProvider>
+      </StoreProvider>
+    )
+
+    render(ui)
+    const label = screen.getByTestId('currency-input-label')
+    expect(label).toBeInTheDocument()
+    expect(label.tagName).toBe('LABEL')
+    expect(label.textContent).toContain(props.label)
+
+    const field = screen.getByTestId('currency-input')
+    expect(field).toBeInTheDocument()
+    expect(field.tagName).toBe('INPUT')
+    expect(field).toBeDefined()
+    expect(field).toBeRequired()
+  })
+
+  it('should render an input component that is required and has a custom error message', () => {
+    const props = {
+      name: 'income',
+      label: 'What is your annual net income?',
+      error: 'This field is required.',
+      required: true,
+    }
+
+    const ui = (
+      <StoreProvider>
+        <LanguageProvider>
+          <CurrencyField
+            name={props.name}
+            label={props.label}
+            error={props.error}
+            required={props.required}
+          />
+        </LanguageProvider>
+      </StoreProvider>
+    )
+
+    render(ui)
+    const label = screen.getByTestId('currency-input-label')
+    expect(label).toBeInTheDocument()
+    expect(label.tagName).toBe('LABEL')
+    expect(label.textContent).toContain(props.label)
+
+    const field = screen.getByTestId('currency-input')
+    expect(field).toBeInTheDocument()
+    expect(field.tagName).toBe('INPUT')
+    expect(field).toBeDefined()
+    expect(field).toBeRequired()
+
+    const errorLabel = screen.getByRole('alert')
+    expect(errorLabel).toBeDefined()
+    expect(errorLabel.textContent).toBe(props.error)
+  })
+})

__tests__/components/NumberField.test.tsx

@@ -0,0 +1,80 @@
+/**
+ * @jest-environment jsdom
+ */
+import '@testing-library/jest-dom'
+import React from 'react'
+import { cleanup, render, screen } from '@testing-library/react'
+import { LanguageProvider, StoreProvider } from '../../components/Contexts'
+import { NumberField } from '../../components/Forms/NumberField'
+
+describe('NumberField component', () => {
+  it('should render an input component that is required component', () => {
+    const props = {
+      name: 'age',
+      label: 'What is your age?',
+      required: true,
+    }
+
+    const ui = (
+      <StoreProvider>
+        <LanguageProvider>
+          <NumberField
+            name={props.name}
+            label={props.label}
+            required={props.required}
+          />
+        </LanguageProvider>
+      </StoreProvider>
+    )
+
+    render(ui)
+    const label = screen.getByTestId('number-input-label')
+    expect(label).toBeInTheDocument()
+    expect(label.tagName).toBe('LABEL')
+    expect(label.textContent).toContain(props.label)
+
+    const field = screen.getByTestId('number-input')
+    expect(field).toBeInTheDocument()
+    expect(field.tagName).toBe('INPUT')
+    expect(field).toBeDefined()
+    expect(field).toBeRequired()
+  })
+
+  it('should render an input component that is required and has a custom error message', () => {
+    const props = {
+      name: 'age',
+      label: 'What is your age?',
+      error: 'This field is required.',
+      required: true,
+    }
+
+    const ui = (
+      <StoreProvider>
+        <LanguageProvider>
+          <NumberField
+            name={props.name}
+            label={props.label}
+            error={props.error}
+            required={props.required}
+          />
+        </LanguageProvider>
+      </StoreProvider>
+    )
+
+    render(ui)
+    const label = screen.getByTestId('number-input-label')
+    expect(label).toBeInTheDocument()
+    expect(label.tagName).toBe('LABEL')
+    expect(label.textContent).toContain(props.label)
+
+    const field = screen.getByTestId('number-input')
+    expect(field).toBeInTheDocument()
+    expect(field.tagName).toBe('INPUT')
+    expect(field).toBeDefined()
+    expect(field).toBeRequired()
+
+    const errorLabel = screen.getByRole('alert')
+    expect(errorLabel).toBeDefined()
+    expect(errorLabel.textContent).toBe(props.error)
+  })
+})