Commit f057e0ae authored by Asaad Mahmood's avatar Asaad Mahmood Committed by Harrison Healey
Browse files

MM-12996/MM-13229 - Updating modals on mobile and fixing plugin button on mobile (#2086)

* MM-12996 - Updating modals on mobile

* Updating snapshots

* Updating test

* Updating test

* Updating tests

* Update unit tests for MobileChannelHeaderPlug
parent dbe7bbe3
......@@ -40,18 +40,22 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with one extended
isDropdown={false}
theme={Object {}}
>
<button
className="navbar-toggle navbar-right__icon"
onClick={[Function]}
<li
className="flex-parent--center"
>
<span
className="icon navbar-plugin-button"
<button
className="navbar-toggle navbar-right__icon"
onClick={[Function]}
>
<i
className="fa fa-anchor"
/>
</span>
</button>
<span
className="icon navbar-plugin-button"
>
<i
className="fa fa-anchor"
/>
</span>
</button>
</li>
</MobileChannelHeaderPlug>
`;
......@@ -75,18 +79,22 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with one extended
isDropdown={true}
theme={Object {}}
>
<button
className="navbar-toggle navbar-right__icon"
onClick={[Function]}
<li
className="flex-parent--center"
>
<span
className="icon navbar-plugin-button"
<button
className="navbar-toggle navbar-right__icon"
onClick={[Function]}
>
<i
className="fa fa-anchor"
/>
</span>
</button>
<span
className="icon navbar-plugin-button"
>
<i
className="fa fa-anchor"
/>
</span>
</button>
</li>
</MobileChannelHeaderPlug>
`;
......
......@@ -28,14 +28,16 @@ export default class MobileChannelHeaderPlug extends React.PureComponent {
createButton(plug) {
return (
<button
className='navbar-toggle navbar-right__icon'
onClick={() => this.fireAction(plug)}
>
<span className='icon navbar-plugin-button'>
{plug.icon}
</span>
</button>
<li className='flex-parent--center'>
<button
className='navbar-toggle navbar-right__icon'
onClick={() => this.fireAction(plug)}
>
<span className='icon navbar-plugin-button'>
{plug.icon}
</span>
</button>
</li>
);
}
......
......@@ -26,6 +26,9 @@ describe('plugins/MobileChannelHeaderPlug', () => {
/>
);
expect(wrapper).toMatchSnapshot();
// Render nothing
expect(wrapper.find('li').exists()).toBe(false);
});
test('should match snapshot with one extended component', () => {
......@@ -40,10 +43,11 @@ 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);
// Render a single list item containing a button
expect(wrapper.find('li')).toHaveLength(1);
expect(wrapper.find('button')).toHaveLength(1);
wrapper.instance().fireAction = jest.fn();
wrapper.find('button').first().simulate('click');
expect(wrapper.instance().fireAction).toHaveBeenCalledTimes(1);
expect(wrapper.instance().fireAction).toBeCalledWith(testPlug);
......@@ -60,6 +64,9 @@ describe('plugins/MobileChannelHeaderPlug', () => {
/>
);
expect(wrapper).toMatchSnapshot();
// Render nothing
expect(wrapper.find('li').exists()).toBe(false);
});
test('should match snapshot with no extended component, in dropdown', () => {
......@@ -73,6 +80,9 @@ describe('plugins/MobileChannelHeaderPlug', () => {
/>
);
expect(wrapper).toMatchSnapshot();
// Render nothing
expect(wrapper.find('li').exists()).toBe(false);
});
test('should match snapshot with one extended component, in dropdown', () => {
......@@ -87,9 +97,9 @@ 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);
// Render a single list item containing a button
expect(wrapper.find('li')).toHaveLength(1);
expect(wrapper.find('button')).toHaveLength(1);
});
test('should match snapshot with two extended components, in dropdown', () => {
......@@ -104,9 +114,12 @@ describe('plugins/MobileChannelHeaderPlug', () => {
);
expect(wrapper).toMatchSnapshot();
// Render a two list items containing anchors
expect(wrapper.find('li')).toHaveLength(2);
expect(wrapper.find('button')).toHaveLength(0);
expect(wrapper.find('a')).toHaveLength(2);
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);
......
......@@ -32,6 +32,11 @@
display: flex;
}
.flex-parent--center {
display: flex;
justify-content: center;
}
.browser--ie & {
.navbar-default {
.navbar-brand {
......
......@@ -1558,9 +1558,24 @@
}
.more-modal {
.modal-content {
display: flex;
flex-direction: column;
}
.modal-header {
flex: 0 0 56px;
}
.modal-body {
max-height: calc(100vh - 62px);
padding-bottom: 5px;
flex: 1 1 auto;
max-height: 100%;
display: flex;
}
.filtered-user-list {
flex: 1 1 auto;
height: auto;
}
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment