Skip to content

Commit 92eb606

Browse files
author
Martynas Žilinskas
committed
Updated testing with new regex. Exported to new file basic components used for testing.
1 parent 44ff0e4 commit 92eb606

File tree

7 files changed

+106
-112
lines changed

7 files changed

+106
-112
lines changed

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

Lines changed: 41 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,12 @@
11
import * as React from "react";
2+
import * as ReactDOM from "react-dom";
23
import { shallow, mount } from "enzyme";
34
import { spy } from "sinon";
4-
import * as ReactDOM from "react-dom";
55

6-
import { BaseForm } from "../../src/abstractions/base-form";
7-
import { FormProps } from "../../src/contracts/form";
8-
import { BaseField, BaseFieldState } from "../../src/abstractions/base-field";
9-
import { FieldProps, FieldValue } from "../../src/contracts/field";
106
import { FormStoresHandlerClass, FSHContainer } from "../../src/stores/form-stores-handler";
117
import { FormStore } from "../../src/stores/form-store";
12-
13-
interface MyFormProps extends FormProps {
14-
renderChildren?: boolean;
15-
}
16-
17-
interface MyFormState { }
18-
19-
class MyForm extends BaseForm<MyFormProps, MyFormState> {
20-
static defaultProps: MyFormProps = {
21-
...BaseForm.defaultProps,
22-
renderChildren: true
23-
};
24-
25-
render(): JSX.Element {
26-
return <form>
27-
{this.props.renderChildren ? this.props.children : null}
28-
</form>;
29-
}
30-
}
31-
32-
33-
interface MyFieldProps extends FieldProps {
34-
35-
}
36-
37-
interface MyFieldState extends BaseFieldState { }
38-
39-
class MyField extends BaseField<MyFieldProps, MyFieldState> {
40-
render() {
41-
return <input type="text" onChange={this.onChange} value={this.state.Value} />;
42-
}
43-
44-
onChange: React.FormEventHandler<HTMLInputElement> = (event) => {
45-
const target = event.target as EventTarget & HTMLInputElement;
46-
this.OnValueChange(target.value);
47-
}
48-
49-
protected get RawInitialValue(): FieldValue {
50-
return "";
51-
}
52-
53-
protected get DefaultValue(): FieldValue {
54-
return "";
55-
}
56-
}
8+
import { BasicForm } from "../basic-components/basic-form";
9+
import { BasicField } from "../basic-components/basic-field";
5710

5811
describe("Field Base", () => {
5912
beforeEach(() => {
@@ -66,7 +19,7 @@ describe("Field Base", () => {
6619

6720
it("is rendered outside of Form", () => {
6821
expect(() => shallow(
69-
<MyField name="fieldName"></MyField>
22+
<BasicField name="fieldName"></BasicField>
7023
)).toThrow();
7124
});
7225

@@ -75,9 +28,9 @@ describe("Field Base", () => {
7528
const formId = "FORM_ID";
7629
const fieldName = "fieldName";
7730

78-
mount(<MyForm formId={formId} >
79-
<MyField name="fieldName"></MyField>
80-
</MyForm>);
31+
mount(<BasicForm formId={formId} >
32+
<BasicField name="fieldName"></BasicField>
33+
</BasicForm>);
8134

8235
const formStore = FormStoresHandler.GetStore(formId);
8336
const fieldId = formStore.GetFieldId(fieldName);
@@ -90,9 +43,9 @@ describe("Field Base", () => {
9043
const formId = "FORM_ID";
9144
const fieldName = "fieldName";
9245

93-
let form = mount(<MyForm formId={formId}>
94-
<MyField name="fieldName"></MyField>
95-
</MyForm>);
46+
let form = mount(<BasicForm formId={formId}>
47+
<BasicField name="fieldName"></BasicField>
48+
</BasicForm>);
9649

9750
let formStore = FormStoresHandler.GetStore(formId);
9851
const fieldId = formStore.GetFieldId(fieldName);
@@ -112,9 +65,9 @@ describe("Field Base", () => {
11265
const formId = "FORM_ID";
11366
const fieldName = "fieldName";
11467

115-
let form = mount(<MyForm formId={formId}>
116-
<MyField destroyOnUnmount={true} name="fieldName"></MyField>
117-
</MyForm>);
68+
let form = mount(<BasicForm formId={formId}>
69+
<BasicField destroyOnUnmount={true} name="fieldName"></BasicField>
70+
</BasicForm>);
11871

11972
let formStore = FormStoresHandler.GetStore(formId);
12073
const fieldId = formStore.GetFieldId(fieldName);
@@ -133,42 +86,42 @@ describe("Field Base", () => {
13386
expect(() => {
13487
const fieldName = "fieldName";
13588

136-
mount(<MyForm>
137-
<MyField name={fieldName}></MyField>
138-
<MyField name={fieldName}></MyField>
139-
</MyForm>);
89+
mount(<BasicForm>
90+
<BasicField name={fieldName}></BasicField>
91+
<BasicField name={fieldName}></BasicField>
92+
</BasicForm>);
14093
}).toThrow();
14194
});
14295

14396
it("throws when rendering an empty fieldName", () => {
14497
expect(() => {
145-
mount(<MyForm>
146-
<MyField name=""></MyField>
147-
</MyForm>);
98+
mount(<BasicForm>
99+
<BasicField name=""></BasicField>
100+
</BasicForm>);
148101
}).toThrow();
149102
});
150103

151104
it("throws when rendering an undefined fieldName", () => {
152105
expect(() => {
153-
mount(<MyForm>
154-
<MyField name={undefined as any}></MyField>
155-
</MyForm>);
106+
mount(<BasicForm>
107+
<BasicField name={undefined as any}></BasicField>
108+
</BasicForm>);
156109
}).toThrow();
157110
});
158111

159112
it("throws when rendering a null fieldName", () => {
160113
expect(() => {
161-
mount(<MyForm>
162-
<MyField name={null as any}></MyField>
163-
</MyForm>);
114+
mount(<BasicForm>
115+
<BasicField name={null as any}></BasicField>
116+
</BasicForm>);
164117
}).toThrow();
165118
});
166119

167120
it("renders html without wrappers", () => {
168121
const formId = "FORM_ID";
169-
let form = mount(<MyForm formId={formId}>
170-
<MyField name="fieldName"></MyField>
171-
</MyForm>);
122+
let form = mount(<BasicForm formId={formId}>
123+
<BasicField name="fieldName"></BasicField>
124+
</BasicForm>);
172125

173126
const formDOM = ReactDOM.findDOMNode(form.instance());
174127
expect(formDOM.tagName).toEqual("FORM");
@@ -179,9 +132,9 @@ describe("Field Base", () => {
179132
it("adds event listener to form store when mounts", () => {
180133
const FormStoresHandler = FSHContainer.FormStoresHandler;
181134
const formId = "FORM_ID";
182-
mount(<MyForm formId={formId}>
183-
<MyField name="fieldName"></MyField>
184-
</MyForm>);
135+
mount(<BasicForm formId={formId}>
136+
<BasicField name="fieldName"></BasicField>
137+
</BasicForm>);
185138

186139
const formStore = FormStoresHandler.GetStore(formId);
187140

@@ -191,9 +144,9 @@ describe("Field Base", () => {
191144
it("removes event listener form store when destroyOnUnmount is true and it is unmounted", () => {
192145
const FormStoresHandler = FSHContainer.FormStoresHandler;
193146
const formId = "FORM_ID";
194-
const form = mount(<MyForm formId={formId} >
195-
<MyField name="fieldName" destroyOnUnmount={true}></MyField>
196-
</MyForm>);
147+
const form = mount(<BasicForm formId={formId} >
148+
<BasicField name="fieldName" destroyOnUnmount={true}></BasicField>
149+
</BasicForm>);
197150

198151
const formStore = FormStoresHandler.GetStore(formId);
199152
expect(formStore.listenersCount()).toBe(1);
@@ -213,9 +166,9 @@ describe("Field Base", () => {
213166
spy(FormStore.prototype, "ValueChanged");
214167

215168
const fieldName = "fieldName";
216-
const form = mount(<MyForm formId={formId}>
217-
<MyField name={fieldName}></MyField>
218-
</MyForm>);
169+
const form = mount(<BasicForm formId={formId}>
170+
<BasicField name={fieldName}></BasicField>
171+
</BasicForm>);
219172
const formStore = FSHContainer.FormStoresHandler.GetStore(formId);
220173

221174
expect((FormStore.prototype.ValueChanged as any).callCount).toEqual(0);
@@ -237,9 +190,9 @@ describe("Field Base", () => {
237190
const newValue = "NEW_VALUE";
238191
const fieldName = "fieldName";
239192

240-
const form = mount(<MyForm>
241-
<MyField name={fieldName}></MyField>
242-
</MyForm>);
193+
const form = mount(<BasicForm>
194+
<BasicField name={fieldName}></BasicField>
195+
</BasicForm>);
243196

244197
const input = form.find("input");
245198

‎packages/simplr-forms-core/__tests__/abstractions/base-form.test.tsx

Lines changed: 9 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,8 @@
11
import * as React from "react";
22
import { shallow, mount } from "enzyme";
33

4-
import { BaseForm } from "../../src/abstractions/base-form";
5-
import { FormProps } from "../../src/contracts/form";
64
import { FSHContainer, FormStoresHandlerClass } from "../../src/stores/form-stores-handler";
7-
8-
interface MyProps extends FormProps { }
9-
10-
interface MyState { }
11-
12-
class MyForm extends BaseForm<MyProps, MyState> {
13-
render(): JSX.Element {
14-
return <form>
15-
{this.props.children}
16-
</form>;
17-
}
18-
}
5+
import { BasicForm } from "../basic-components/basic-form";
196

207
describe("Form base", () => {
218
beforeEach(() => {
@@ -25,13 +12,13 @@ describe("Form base", () => {
2512
describe("registers when", () => {
2613
it("formId is undefined and destroyOnUnmount prop is false", () => {
2714
expect(() => shallow(
28-
<MyForm destroyOnUnmount={false}></MyForm>
15+
<BasicForm destroyOnUnmount={false}></BasicForm>
2916
)).toThrow();
3017
});
3118

3219
it("formId is undefined and destroyOnUnmount prop is true", () => {
3320
const FormStoresHandler = FSHContainer.FormStoresHandler;
34-
let form = shallow(<MyForm></MyForm>);
21+
let form = shallow(<BasicForm></BasicForm>);
3522
let formId = (form.instance() as any).FormId;
3623

3724
expect(FormStoresHandler.Exists(formId)).toBe(true);
@@ -41,7 +28,7 @@ describe("Form base", () => {
4128
const FormStoresHandler = FSHContainer.FormStoresHandler;
4229
const FORM_ID = "custom-form-id";
4330
shallow(
44-
<MyForm destroyOnUnmount={true} formId={FORM_ID}></MyForm>
31+
<BasicForm destroyOnUnmount={true} formId={FORM_ID}></BasicForm>
4532
);
4633

4734
expect(FormStoresHandler.Exists(FORM_ID)).toBe(true);
@@ -52,15 +39,15 @@ describe("Form base", () => {
5239
// and destroyOnUnmount true second
5340
const FORM_ID = "custom-form-id";
5441

55-
mount(<MyForm destroyOnUnmount={false} formId={FORM_ID}></MyForm>);
56-
expect(() => mount(<MyForm destroyOnUnmount={true} formId={FORM_ID}></MyForm>)).toThrow();
42+
mount(<BasicForm destroyOnUnmount={false} formId={FORM_ID}></BasicForm>);
43+
expect(() => mount(<BasicForm destroyOnUnmount={true} formId={FORM_ID}></BasicForm>)).toThrow();
5744
});
5845

5946
it("another FormBase registered with the same formId", () => {
6047
// This is to check the case, when form is rendered with destroyOnUnmount false first
6148
// and destroyOnUnmount true second
6249
const FORM_ID = "custom-form-id";
63-
const formComponent = <MyForm destroyOnUnmount={true} formId={FORM_ID}></MyForm>;
50+
const formComponent = <BasicForm destroyOnUnmount={true} formId={FORM_ID}></BasicForm>;
6451

6552
shallow(formComponent);
6653
expect(() => shallow(formComponent)).toThrow();
@@ -70,7 +57,7 @@ describe("Form base", () => {
7057
describe("unregisters when", () => {
7158
it("formId is undefined and destroyOnUnmount prop is true", () => {
7259
const FormStoresHandler = FSHContainer.FormStoresHandler;
73-
let form = shallow(<MyForm></MyForm>);
60+
let form = shallow(<BasicForm></BasicForm>);
7461
let formId = (form.instance() as any).FormId;
7562

7663
form.unmount();
@@ -83,7 +70,7 @@ describe("Form base", () => {
8370
const FormStoresHandler = FSHContainer.FormStoresHandler;
8471
const formId = "custom-form-id";
8572
let form = mount(
86-
<MyForm destroyOnUnmount={true} formId={formId}></MyForm>
73+
<BasicForm destroyOnUnmount={true} formId={formId}></BasicForm>
8774
);
8875

8976
form.unmount();

‎packages/simplr-forms-core/__tests__/basic-components/basic-field.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import * as React from "react";
2+
3+
import { BaseField, BaseFieldState } from "../../src/abstractions/base-field";
4+
import { FieldProps, FieldValue } from "../../src/contracts/field";
5+
6+
export interface MyFieldProps extends FieldProps { }
7+
8+
export interface MyFieldState extends BaseFieldState { }
9+
10+
export class BasicField extends BaseField<MyFieldProps, MyFieldState> {
11+
render() {
12+
return <input type="text" onChange={this.onChange} value={this.state.Value} />;
13+
}
14+
15+
onChange: React.FormEventHandler<HTMLInputElement> = (event) => {
16+
const target = event.target as EventTarget & HTMLInputElement;
17+
this.OnValueChange(target.value);
18+
}
19+
20+
protected get RawInitialValue(): FieldValue {
21+
return "";
22+
}
23+
24+
protected get DefaultValue(): FieldValue {
25+
return "";
26+
}
27+
}

‎packages/simplr-forms-core/__tests__/basic-components/basic-form.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import * as React from "react";
2+
3+
import { BaseForm } from "../../src/abstractions/base-form";
4+
import { FormProps } from "../../src/contracts/form";
5+
6+
export interface MyFormProps extends FormProps {
7+
renderChildren?: boolean;
8+
}
9+
10+
export interface MyFormState { }
11+
12+
export class BasicForm extends BaseForm<MyFormProps, MyFormState> {
13+
static defaultProps: MyFormProps = {
14+
...BaseForm.defaultProps,
15+
renderChildren: true
16+
};
17+
18+
render(): JSX.Element {
19+
return <form>
20+
{this.props.renderChildren ? this.props.children : null}
21+
</form>;
22+
}
23+
}

‎packages/simplr-forms-core/__tests__/stores/form-stores-handler.test.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { FSHContainer, FormStoresHandlerClass } from "../../src/stores/form-stores-handler";
22

33
describe("Form stores handler", () => {
4-
54
it("returns next store unique formId", () => {
65
let storesHandler = new FormStoresHandlerClass();
76
let a = storesHandler.NextStoreId();
@@ -85,4 +84,8 @@ describe("Form stores handler", () => {
8584

8685
expect(storesHandler.GetStore(generatedFormId)).toBeTruthy();
8786
});
87+
88+
it("validates field with a promise", () => {
89+
90+
});
8891
});

‎packages/simplr-forms-core/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"transform": {
4444
".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
4545
},
46-
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
46+
"testRegex": "/__tests__\/.*\\.(test|spec).(ts|tsx|js)$",
4747
"moduleFileExtensions": [
4848
"ts",
4949
"tsx",

‎packages/simplr-forms-core/src/stores/form-store.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { FormState, FormStateRecord } from "../contracts/form";
88
import { FormStoreState, FormStoreStateRecord } from "../contracts/form-store";
99
import { FieldsGroupStateRecord } from "../contracts/fields-group";
1010
import { ResolveError } from "../utils/form-error-helpers";
11+
1112
export class FormStore extends ActionEmitter {
1213
constructor(formId: string) {
1314
super();

0 commit comments

Comments
 (0)