Merge pull request #129 from nschroeter/accept-placeholder-elements

placeholder elements are now accepted without printing annoying warnings

Author: giorgosart

src/lib/EasyDropdown.jsx

@@ -33,7 +33,10 @@ EasyDropdown.propTypes = {
     PropTypes.string,
     PropTypes.number
   ]),
-  placeholder: PropTypes.string,
+  placeholder: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ]),
   attributes: PropTypes.object,
   cssClassPrefix: PropTypes.string,
   onFocus: PropTypes.func,

src/lib/EasyDropdown.test.js

@@ -29,10 +29,20 @@ describe('EasyDropdown', () => {
   it('should use the default placeholder', () => {
     expect(wrapper.find('select>option:first-child').text()).toEqual(Globals.DEFAULT_SELECT_PLACEHOLDER);
   });
-  it('should use the placeholder provided', () => {
+  it('should use the placeholder string provided', () => {
     wrapper.setProps({placeholder: "test"});
     expect(wrapper.find('select>option:first-child').text()).toEqual("test");
   });
+  it('should use the placeholder element provided', () => {
+    let err = jest.spyOn(global.console, 'error');
+    wrapper.setProps({placeholder: <span>test</span>});
+
+    expect(wrapper.find('select>option:first-child').text()).toEqual("test");
+    expect(err).not.toHaveBeenCalled();
+
+    err.mockReset();
+    err.mockRestore();
+  });
 
   it('should render 2 + 1 options including the disabled default one', () => {
     expect(wrapper.find('select>option')).toHaveLength(3);

src/lib/EasyEdit.jsx

@@ -506,7 +506,10 @@ EasyEdit.propTypes = {
   ]),
   deleteButtonStyle: PropTypes.string,
   buttonsPosition: PropTypes.oneOf(['after', 'before']),
-  placeholder: PropTypes.string,
+  placeholder: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ]),
   onCancel: PropTypes.func,
   onDelete: PropTypes.func,
   onValidate: PropTypes.func,

src/lib/EasyEdit.test.js

@@ -427,4 +427,20 @@ describe('EasyEdit', () => {
     wrapper.setProps({ value: "Updated Value", editMode: false });
     expect((wrapper.state().tempValue)).toEqual('Updated Value');
   });
+
+  it('should render a placeholder element', () => {
+    let err = jest.spyOn(global.console, 'error');
+    wrapper = shallow(
+        <EasyEdit
+            type="text"
+            onSave={saveFn}
+            onCancel={cancelFn}
+            placeholder={<span>test</span>}
+        />);
+    expect(wrapper.find('div.easy-edit-wrapper').text()).toEqual("test");
+    expect(err).not.toHaveBeenCalled();
+
+    err.mockReset();
+    err.mockRestore();
+  });
 });

src/lib/EasyInput.jsx

@@ -26,7 +26,10 @@ EasyInput.propTypes = {
   type: PropTypes.string.isRequired,
   onChange: PropTypes.func,
   value: PropTypes.string,
-  placeholder: PropTypes.string,
+  placeholder: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ]),
   attributes: PropTypes.object,
   cssClassPrefix: PropTypes.string,
   onFocus: PropTypes.func,

src/lib/EasyInput.test.js

@@ -36,6 +36,16 @@ describe('EasyInput', () => {
     expect(wrapper.find('input').props().placeholder).toEqual('TEST');
   });
 
+  it('should render a placeholder element', () => {
+    let err = jest.spyOn(global.console, 'error');
+    wrapper.setProps({placeholder: <span>TEST</span>});
+    expect(wrapper.find('input').props().placeholder).toEqual(<span>TEST</span>);
+    expect(err).not.toHaveBeenCalled();
+
+    err.mockReset();
+    err.mockRestore();
+  });
+
   it('should not show a placeholder if there is a value available', () => {
     wrapper.setProps({value: 'Test'});
     expect(wrapper.find('input').props().value).toEqual('Test');

src/lib/EasyParagraph.jsx

@@ -23,7 +23,10 @@ const EasyParagraph = (props) => {
 EasyParagraph.propTypes = {
   onChange: PropTypes.func,
   value: PropTypes.string,
-  placeholder: PropTypes.string,
+  placeholder: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ]),
   attributes: PropTypes.object,
   cssClassPrefix: PropTypes.string,
   onBlur: PropTypes.func,

src/lib/EasyParagraph.test.js

@@ -33,6 +33,17 @@ describe('EasyParagraph', () => {
     expect(wrapper.find('textarea').props().placeholder).toEqual('TEST');
   });
 
+  it('should use the provided placeholder element', () => {
+    let err = jest.spyOn(global.console, 'error');
+
+    wrapper.setProps({placeholder: <span>TEST</span>});
+    expect(wrapper.find('textarea').props().placeholder).toEqual(<span>TEST</span>);
+    expect(err).not.toHaveBeenCalled();
+
+    err.mockReset();
+    err.mockRestore();
+  });
+
   it('should not show a placeholder if there is a value available', () => {
     wrapper.setProps({value: 'Test'});
     expect(wrapper.find('textarea').props().value).toEqual('Test');