Add postLabel prop to FormUnit, add form-row/form-col CSS classes [#1…

…53235458] Signed-off-by: Reid Mitchell <rmitchell@pivotal.io>
pivotal-cf · Nov 30, 2017 · 81ab6a9 · 81ab6a9
1 parent b2acf7f
commit 81ab6a9
Show file tree

Hide file tree

Showing 6 changed files with 205 additions and 132 deletions.
diff --git a/spec/pivotal-ui-react/form/form-col_spec.js b/spec/pivotal-ui-react/form/form-col_spec.js
@@ -9,12 +9,14 @@ class TestInput extends React.Component {
 }
 
 describe('FormCol', () => {
-  let element, onChange;
+  let element, onChange, state, setState;
 
   beforeEach(() => {
     spyOn(React, 'cloneElement').and.callThrough();
     spyOn(crypto, 'randomBytes').and.returnValue('some-unique-string');
     onChange = jasmine.createSpy('onChange');
+    setState = jasmine.createSpy('setState');
+    state = {key: 'value'};
   });
 
   describe('simple case', () => {
@@ -291,8 +293,13 @@ describe('FormCol', () => {
   });
 
   describe('when labelFor', () => {
+    let field;
+
     beforeEach(() => {
+      field = <div className="some-field">a field</div>;
+
       spyOnRender(FormUnit).and.callThrough();
+      React.cloneElement.and.returnValue(field);
     });
 
     describe('is given as a prop', () => {
@@ -302,18 +309,24 @@ describe('FormCol', () => {
         subject = ReactDOM.render(<FormCol {...{
           labelFor: 'some-label',
           retainLabelHeight: true,
-          help: 'Some help text'
+          help: 'Some help text',
+          state,
+          setState
         }}>
           {element}
         </FormCol>, root);
       });
 
       it('uses the given the labelFor', () => {
-        expect(FormUnit).toHaveBeenRenderedWithProps(jasmine.objectContaining({
-          labelFor: 'some-label',
+        expect(FormUnit).toHaveBeenRenderedWithProps({
           retainLabelHeight: true,
+          hasError: undefined,
+          labelFor: 'some-label',
+          state,
+          setState,
+          field,
           help: 'Some help text'
-        }));
+        });
       });
     });
 

diff --git a/spec/pivotal-ui-react/form/form-unit_spec.js b/spec/pivotal-ui-react/form/form-unit_spec.js
@@ -37,8 +37,8 @@ describe('FormUnit', () => {
     });
 
     it('renders the field and label on a grid next to each other', () => {
-      expect('.form-unit .grid .col:eq(0)').toHaveText('Instance Name');
-      expect('.form-unit .grid .col:eq(1)').toHaveText('hello');
+      expect('.form-unit .grid:eq(0) > .col:eq(0)').toHaveText('Instance Name');
+      expect('.form-unit .grid:eq(0) > .col:eq(1)').toHaveText('hello');
     });
   });
 
@@ -89,7 +89,7 @@ describe('FormUnit', () => {
     });
 
     it('puts the classname on the label', () => {
-      expect('.form-unit .label-row').toHaveClass('h4');
+      expect('.form-unit .label-row label').toHaveClass('h4');
     });
   });
 
@@ -102,7 +102,7 @@ describe('FormUnit', () => {
     });
 
     it('sets the "for" on the label', () => {
-      expect('.form-unit .label-row').toHaveAttr('for', 'instance-name');
+      expect('.form-unit .label-row label').toHaveAttr('for', 'instance-name');
     });
   });
 
@@ -119,6 +119,50 @@ describe('FormUnit', () => {
     });
   });
 
+  describe('postLabel', () => {
+    beforeEach(() => {
+      subject::setProps({
+        postLabel: <span className="more-stuff">another label</span>
+      });
+    });
+
+    it('renders the postLabel', () => {
+      expect('.form-unit .label-row .post-label .more-stuff').toHaveText('another label');
+      expect('.form-unit .label-row .post-label').toHaveClass('col-fixed');
+      expect('.form-unit .label-row .post-label').toHaveClass('col-middle');
+    });
+
+    describe('when inline', () => {
+      beforeEach(() => {
+        subject::setProps({inline: true});
+      });
+
+      it('does not render the postLabel', () => {
+        expect('.form-unit .label-row .post-label').not.toExist();
+      });
+    });
+
+    describe('when the postLabel is a function', () => {
+      let postLabel, setState, state;
+
+      beforeEach(() => {
+        postLabel = jasmine.createSpy('postLabel').and.returnValue(<span className="returned">returned</span>);
+        setState = jasmine.createSpy('setState');
+        state = {key: 'value'};
+
+        subject::setProps({postLabel, setState, state});
+      });
+
+      it('calls the postLabel function', () => {
+        expect(postLabel).toHaveBeenCalledWith({setState, state});
+      });
+
+      it('renders the returned node', () => {
+        expect('.form-unit .label-row .post-label .returned').toHaveText('returned');
+      });
+    });
+  });
+
   describe('tooltip', () => {
     beforeEach(() => {
       subject::setProps({