Fix React Component tests

1 files changed, 104 insertions, 0 deletions

diff --git a/test/settings/components/form/PropertiesForm.test.jsx b/test/settings/components/form/PropertiesForm.test.jsx
new file mode 100644
index 0000000..80f60d2
--- /dev/null
+++ b/test/settings/components/form/PropertiesForm.test.jsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactTestRenderer from 'react-test-renderer';
+import ReactTestUtils from 'react-dom/test-utils';
+import PropertiesForm from 'settings/components/form/PropertiesForm'
+
+describe("settings/form/PropertiesForm", () => {
+  describe('render', () => {
+    it('renders PropertiesForm', () => {
+      let types = {
+        mystr: 'string',
+        mynum: 'number',
+        mybool: 'boolean',
+        empty: 'string',
+      }
+      let value = {
+        mystr: 'abc',
+        mynum: 123,
+        mybool: true,
+      };
+
+      let root = ReactTestRenderer.create(
+        <PropertiesForm types={types} value={value} />,
+      ).root
+
+      let input = root.findByProps({ name: 'mystr' });
+      expect(input.props.type).to.equals('text');
+      expect(input.props.value).to.equal('abc');
+
+      input = root.findByProps({ name: 'mynum' });
+      expect(input.props.type).to.equals('number');
+      expect(input.props.value).to.equal(123);
+
+      input = root.findByProps({ name: 'mybool' });
+      expect(input.props.type).to.equals('checkbox');
+      expect(input.props.value).to.equal(true);
+    });
+  });
+
+  describe('onChange', () => {
+    let container;
+
+    beforeEach(() => {
+      container = document.createElement('div');
+      document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+      document.body.removeChild(container);
+      container = null;
+    });
+
+    it('invokes onChange event on text changed', (done) => {
+      ReactTestUtils.act(() => {
+        ReactDOM.render(<PropertiesForm
+          types={{ 'myvalue': 'string' }}
+          value={{ 'myvalue': 'abc' }}
+          onChange={value => {
+            expect(value).to.have.property('myvalue', 'abcd');
+            done();
+          }}
+        />, container);
+      });
+
+      let input = document.querySelector('input[name=myvalue]');
+      input.value = 'abcd'
+      ReactTestUtils.Simulate.change(input);
+    });
+
+    it('invokes onChange event on number changeed', (done) => {
+      ReactTestUtils.act(() => {
+        ReactDOM.render(<PropertiesForm
+          types={{ 'myvalue': 'number' }}
+          value={{ '': 123 }}
+          onChange={value => {
+            expect(value).to.have.property('myvalue', 1234);
+            done();
+          }}
+        />, container);
+      });
+
+      let input = document.querySelector('input[name=myvalue]');
+      input.value = '1234'
+      ReactTestUtils.Simulate.change(input);
+    });
+
+    it('invokes onChange event on checkbox changed', (done) => {
+      ReactTestUtils.act(() => {
+        ReactDOM.render(<PropertiesForm
+          types={{ 'myvalue': 'boolean' }}
+          value={{ 'myvalue': false }}
+          onChange={value => {
+            expect(value).to.have.property('myvalue', true);
+            done();
+          }}
+        />, container);
+      });
+
+      let input = document.querySelector('input[name=myvalue]');
+      input.checked = true;
+      ReactTestUtils.Simulate.change(input);
+    });
+  });
+});