apphouse/dist/models/Form/FormV2.test.ts

Component library for React that uses observable state management and theme-able components.

import { FormV2, Mode } from './FormV2';

describe('FormV2', () => {
  let form: FormV2;

  beforeEach(() => {
    form = new FormV2({
      fields: [
        { id: 'name', value: 'ceo', type: 'text', input: { label: 'Name' } },
        { id: 'email', value: 'ceo@apphouseinc.com', type: 'email' }
      ],
      title: 'Test Form'
    });
  });

  it('should initialize with initial values', () => {
    expect(form.initialValues).toEqual({
      name: 'ceo',
      email: 'ceo@apphouseinc.com'
    });
  });

  it('should get the form data', () => {
    form.setValue('name', 'John');
    form.setValue('email', 'john@example.com');

    expect(form.data).toEqual({
      name: 'John',
      email: 'john@example.com'
    });
  });

  it('should set field value', () => {
    form.setValue('name', 'John');

    expect(form.getValue('name')).toBe('John');
  });

  // it('should reset the form', () => {
  //   form.setValue('name', 'John');
  //   form.setValue('email', 'john@example.com');

  //   form.reset();

  //   expect(form.getValue('name')).toBe('');
  //   expect(form.getValue('email')).toBe('');
  // });

  it('should add a new field', () => {
    const newField = { id: 'age', label: 'Age', value: '0' };

    form.addField(newField);

    expect(form.fields.values.length).toBe(3);
    expect(form.getValue('age')).toBe('0');
  });

  // it('should duplicate a field', () => {
  //   form.duplicateField('name');

  //   expect(form.fields.values.length).toBe(3);
  //   expect(form.getValue('name')).toBe('');
  //   expect(form.getValue('name_1')).toBe('');
  // });

  it('should remove a field', () => {
    form.removeField('email');

    expect(form.fields.values.length).toBe(1);
    expect(form.getValue('email')).toBeUndefined();
  });

  it('should remove all fields', () => {
    form.removeAllFields();

    expect(form.fields.values.length).toBe(0);
  });

  // it('should get field properties', () => {
  //   const fieldProperties = form.getFieldProperties('name');

  //   expect(fieldProperties?.id).toBe('name');
  //   expect(fieldProperties?.label).toBe('Name');
  //   expect(fieldProperties?.value).toBe('');
  // });

  it('should have a valid form', () => {
    expect(form.valid).toBe(true);
  });

  it('should autofill the form', () => {
    const values = {
      name: 'John',
      email: 'john@example.com'
    };

    form.autofill(values);

    expect(form.getValue('name')).toBe('John');
    expect(form.getValue('email')).toBe('john@example.com');
  });

  it('should have the correct form mode', () => {
    const formWithMode = new FormV2({
      fields: [],
      mode: 'edit' as Mode
    });

    expect(formWithMode.mode).toBe('edit');
  });
});