Updated tests (#74)

* Updated form tests. Added needed devDependencies.

* Added BaseFieldsGroup tests.

* Updated BaseFieldTests.

* Added register a field with different value types (Initial, Default, value).

* Added text test. Changed from currentTarget to target in GetValueFromEvent.

* Updated clear test: from sinon spy to stub where needed.

* Added Test render check for text field.

* Updated gulp and undertaker types version.

* Updated tests with transitionalValue.

* Added noEmitHelpers in simplr-validation.

Author: Martynas Žilinskas

packages/simplr-forms-dom/__tests__/components/clear.test.tsx

@@ -20,7 +20,7 @@ describe("Clear button", () => {
     });
 
     it("clears all fields", () => {
-        const callback = sandbox.spy(FormStore.prototype, "ClearFields");
+        const callback = sandbox.stub(FormStore.prototype, "ClearFields");
 
         const wrapper = mount(<Form>
             <Text name="field" />
@@ -33,7 +33,7 @@ describe("Clear button", () => {
     });
 
     it("clears fields by fieldsIds", () => {
-        const callback = sandbox.spy(FormStore.prototype, "ClearFields");
+        const callback = sandbox.stub(FormStore.prototype, "ClearFields");
         let fieldsIds: string[] = [];
         for (let i = 0; i < 5; i++) {
             fieldsIds.push(`text-${i}`);

packages/simplr-forms-dom/__tests__/components/form.test.tsx

@@ -30,7 +30,7 @@ describe("Form", () => {
         mount(<Form formId={formId} onSubmit={submitCallback}></Form>);
 
         const formStore = FSHContainer.FormStoresHandler.GetStore(formId);
-        formStore.InitiateSubmit();
+        formStore.InitiateFormSubmit();
 
         expect(submitCallback.called).toBe(true);
     });

packages/simplr-forms-dom/__tests__/components/text.test.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import * as Sinon from "sinon";
+
+import { FSHContainer, FormStoresHandler } from "simplr-forms/stores";
+import { Form } from "../../src/components/form";
+import { Text } from "../../src/components/text";
+
+describe("Text field", () => {
+    let sandbox: Sinon.SinonSandbox;
+    beforeEach(() => {
+        FSHContainer.SetFormStoresHandler(new FormStoresHandler(), true);
+        sandbox = Sinon.sandbox.create();
+    });
+
+    afterEach(() => {
+        sandbox.restore();
+    });
+
+    it("change value from input", () => {
+        const formId = "formId";
+        const fieldName = "field name";
+        const nextValue = "next value";
+        const wrapper = mount(<Form formId={formId}>
+            <Text name={fieldName} />
+        </Form>);
+
+        const formStore = FSHContainer.FormStoresHandler.GetStore(formId);
+
+        wrapper.find("input").simulate("change", { target: { value: nextValue } });
+
+        expect(wrapper.find("input").props().value).toBe(nextValue);
+        expect(formStore.GetField(fieldName).Value).toBe(nextValue);
+    });
+
+    it("change value triggers onChange callback", () => {
+        const fieldName = "field name";
+        const nextValue = "next value";
+        const callback = Sinon.stub();
+        const wrapper = mount(<Form>
+            <Text name={fieldName} onChange={callback} />
+        </Form>);
+
+        wrapper.find("input").simulate("change", { target: { value: nextValue } });
+
+        expect(callback.called).toBe(true);
+    });
+
+    it("render is defined", () => {
+        const wrapper = mount(<Form>
+            <Text name="field" />
+        </Form>);
+
+        expect(wrapper.find(Text).getDOMNode()).toBeDefined();
+    });
+});

packages/simplr-forms-dom/src/components/text.tsx

@@ -33,7 +33,7 @@ export interface TextProps extends DomFieldProps, HTMLElementProps<HTMLInputElem
 
 export class Text extends BaseDomField<TextProps, BaseDomFieldState, HTMLInputElement> {
     protected GetValueFromEvent(event: React.ChangeEvent<HTMLInputElement>): string {
-        return event.currentTarget.value;
+        return event.target.value;
     }
 
     protected OnChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (event) => {

packages/simplr-forms/__tests__/abstractions/base-field.test.tsx

@@ -17,14 +17,10 @@ describe("Field Base", () => {
         FSHContainer.SetFormStoresHandler(new FormStoresHandler(), true);
     });
 
-    afterEach(function () {
+    afterEach(() => {
         sandbox.restore();
     });
 
-    it("works", () => {
-        expect(true).toBe(true);
-    });
-
     it("is rendered outside of Form", () => {
         expect(() => shallow(
             <MyTestField name="fieldName"></MyTestField>

packages/simplr-forms/__tests__/abstractions/base-fields-group.test.tsx

@@ -1,5 +1,51 @@
+import * as React from "react";
+import { shallow, mount } from "enzyme";
+import * as Sinon from "sinon";
+
+import { TestFieldsGroup } from "../test-components/test-fields-group";
+import { FSHContainer, FormStoresHandler } from "../../src/stores/form-stores-handler";
+import { MyTestForm } from "../test-components/test-form";
+
 describe("Fields Group Base", () => {
-    xit("throws when registering an already existing id", () => {
+    let sandbox: Sinon.SinonSandbox;
+    const formId = "FORM_ID";
+
+    beforeEach(() => {
+        sandbox = Sinon.sandbox.create();
+        FSHContainer.SetFormStoresHandler(new FormStoresHandler(), true);
+    });
+
+    afterEach(() => {
+        sandbox.restore();
+    });
+
+    it("is rendered outside of Form", () => {
+        expect(() => shallow(
+            <TestFieldsGroup name="name"></TestFieldsGroup>
+        )).toThrow();
+    });
+
+    it("registers when rendered inside of a form", () => {
+        const FormStoresHandler = FSHContainer.FormStoresHandler;
+        const fieldsGroupName = "group name";
+
+        mount(<MyTestForm formId={formId} >
+            <TestFieldsGroup name={fieldsGroupName}></TestFieldsGroup>
+        </MyTestForm>);
+
+        const formStore = FormStoresHandler.GetStore(formId);
+
+        expect(formStore.GetState().FieldsGroups.has(fieldsGroupName)).toBe(true);
+    });
+
+    it("throws when registering an already existing id", () => {
+        const fieldsGroupName = "group name";
 
+        expect(() => mount(
+            <MyTestForm formId={formId} >
+                <TestFieldsGroup name={fieldsGroupName}></TestFieldsGroup>
+                <TestFieldsGroup name={fieldsGroupName}></TestFieldsGroup>
+            </MyTestForm>
+        )).toThrow();
     });
 });