[MM-12336 && MM-12299] Add cursor pointer to mobile view plugin butto…

…n and add tests (#1811)

* add cursor pointer to mobile view plugin button and add tests

* add test on fireAction

plugins/mobile_channel_header_plug/mobile_channel_header_plug.jsx

@@ -28,14 +28,14 @@ export default class MobileChannelHeaderPlug extends React.PureComponent {
 
  createButton(plug) {
  return (
- <div
+ <button
  className='navbar-toggle navbar-right__icon pull-right'
  onClick={() => this.fireAction(plug)}
  >
  <span className='icon navbar-plugin-button'>
  {plug.icon}
  </span>
- </div>
+ </button>
  );
  }
 

tests/plugins/__snapshots__/mobile_channel_header_plug.test.jsx.snap

@@ -40,7 +40,7 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with one extended
  isDropdown={false}
  theme={Object {}}
 >
- <div
+ <button
  className="navbar-toggle navbar-right__icon pull-right"
  onClick={[Function]}
  >
@@ -51,7 +51,7 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with one extended
  className="fa fa-anchor"
  />
  </span>
- </div>
+ </button>
 </MobileChannelHeaderPlug>
 `;
 
@@ -75,7 +75,7 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with one extended
  isDropdown={true}
  theme={Object {}}
 >
- <div
+ <button
  className="navbar-toggle navbar-right__icon pull-right"
  onClick={[Function]}
  >
@@ -86,7 +86,7 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with one extended
  className="fa fa-anchor"
  />
  </span>
- </div>
+ </button>
 </MobileChannelHeaderPlug>
 `;
 

tests/plugins/mobile_channel_header_plug.test.jsx

@@ -39,6 +39,14 @@ describe('plugins/MobileChannelHeaderPlug', () => {
  />
  );
  expect(wrapper).toMatchSnapshot();
+
+ wrapper.instance().fireAction = jest.fn();
+ expect(wrapper.find('button').exists()).toEqual(true);
+ expect(wrapper.find('li').exists()).toEqual(false);
+
+ wrapper.find('button').first().simulate('click');
+ expect(wrapper.instance().fireAction).toHaveBeenCalledTimes(1);
+ expect(wrapper.instance().fireAction).toBeCalledWith(testPlug);
  });
 
  test('should match snapshot with two extended components', () => {
@@ -78,6 +86,10 @@ describe('plugins/MobileChannelHeaderPlug', () => {
  />
  );
  expect(wrapper).toMatchSnapshot();
+
+ wrapper.instance().fireAction = jest.fn();
+ expect(wrapper.find('button').exists()).toEqual(true);
+ expect(wrapper.find('li').exists()).toEqual(false);
  });
 
  test('should match snapshot with two extended components, in dropdown', () => {
@@ -91,5 +103,39 @@ describe('plugins/MobileChannelHeaderPlug', () => {
  />
  );
  expect(wrapper).toMatchSnapshot();
+
+ wrapper.instance().fireAction = jest.fn();
+ expect(wrapper.find('button').exists()).toEqual(false);
+ expect(wrapper.find('li').exists()).toEqual(true);
+
+ wrapper.find('a').first().simulate('click');
+ expect(wrapper.instance().fireAction).toHaveBeenCalledTimes(1);
+ expect(wrapper.instance().fireAction).toBeCalledWith(testPlug);
+ });
+
+ test('should call plugin.action on fireAction', () => {
+ const channel = {id: 'channel_id'};
+ const channelMember = {id: 'channel_member_id'};
+ const newTestPlug = {
+ id: 'someid',
+ pluginId: 'pluginid',
+ icon: <i className='fa fa-anchor'/>,
+ action: jest.fn(),
+ dropdownText: 'some dropdown text',
+ };
+
+ const wrapper = mount(
+ <MobileChannelHeaderPlug
+ components={[newTestPlug]}
+ channel={channel}
+ channelMember={channelMember}
+ theme={{}}
+ isDropdown={true}
+ />
+ );
+
+ wrapper.instance().fireAction(newTestPlug);
+ expect(newTestPlug.action).toHaveBeenCalledTimes(1);
+ expect(newTestPlug.action).toBeCalledWith(channel, channelMember);
  });
 });