Merge pull request #4908 from nazaninreihani/nazanin/app_2_components…

…_tests_elements

Nazanin/app_2_components_tests_elements

src/javascript/app_2/App/Components/Elements/Calendar/__tests__/calender.spec.js

@@ -1,10 +1,11 @@
-import React      from 'react';
-import { expect } from 'chai';
+import React            from 'react';
+import { expect }       from 'chai';
 import { 
     configure, 
-    shallow }     from 'enzyme';
-import Adapter    from 'enzyme-adapter-react-16'; // TODO: move this to a test config file
-import Calendar   from '../index';
+    shallow }           from 'enzyme';
+import Adapter          from 'enzyme-adapter-react-16'; // TODO: move this to a test config file
+import Calendar         from '../index';
+import { testChildren } from '../../../../../test_helper';
 
 configure({ adapter: new Adapter() }); // TODO: move this to a test config file
 
@@ -14,4 +15,5 @@ describe('<Calendar />', () => {
         const wrapper = shallow(<Calendar />);
         expect(wrapper).to.have.length(1);
     });
+    // TODO: Add calender tests
 });

src/javascript/app_2/App/Components/Elements/ErrorBox/__tests__/error_box.spec.js

@@ -0,0 +1,22 @@
+import React                  from 'react';
+import { expect }             from 'chai';
+import { configure, shallow } from 'enzyme';
+import Adapter                from 'enzyme-adapter-react-16';
+import ErrorBox               from '../error_box.jsx';
+import { testChildren }       from '../../../../../test_helper';
+
+configure({ adapter: new Adapter() });
+
+describe('ErrorBox', () => {
+    it('should render one <ErrorBox /> component', () => {
+        const wrapper = shallow(<ErrorBox />);
+        expect(wrapper).to.have.length(1);
+    });
+    it('should render children when passed in', () => {
+        testChildren(<ErrorBox />);
+    });
+    it('should render header as passed to it', () => {
+        const wrapper = shallow(<ErrorBox header='This is a header' />);
+        expect(wrapper.find('.page-error-header').text()).to.be.eql('This is a header');
+    });
+});

src/javascript/app_2/App/Components/Elements/Notifications/__tests__/empty_notification.spec.js

@@ -0,0 +1,19 @@
+import React                  from 'react';
+import { expect }             from 'chai';
+import { configure, shallow } from 'enzyme';
+import Adapter                from 'enzyme-adapter-react-16';
+import { EmptyNotification }  from '../empty_notification';
+import { IconBell } from 'Assets/Header/NavBar';
+
+configure({ adapter: new Adapter() });
+
+describe('Notifications', () => {
+    it('should render one <EmptyNotification /> component', () => {
+        const wrapper = shallow(<EmptyNotification />);
+        expect(wrapper).to.have.length(1);
+    });
+    it('should render IconBell', () => {
+        const wrapper = shallow(<EmptyNotification />);
+        expect(wrapper.find(IconBell).exists()).to.be.true;
+    });
+});

src/javascript/app_2/App/Components/Elements/Notifications/__tests__/notifications.spec.js

@@ -0,0 +1,23 @@
+import React                  from 'react';
+import { expect }             from 'chai';
+import { configure, shallow } from 'enzyme';
+import Adapter                from 'enzyme-adapter-react-16';
+import { Notifications }      from '../notifications.jsx';
+import { EmptyNotification }  from '../empty_notification';
+
+configure({ adapter: new Adapter() });
+
+describe('Notifications', () => {
+    it('should render one <Notifications /> component', () => {
+        const wrapper = shallow(<Notifications />);
+        expect(wrapper).to.have.length(1);
+    });
+    it('should render .no-notifications-container when the list is not passed', () => {
+        const wrapper = shallow(<Notifications />);
+        expect(wrapper.find(EmptyNotification).exists()).to.be.true;
+    });
+    it('should not render .no-notifications-container when the list is passed', () => {
+        const wrapper = shallow(<Notifications list={['First', 'Second', 'Third']} />);
+        expect(wrapper.find(EmptyNotification).exists()).to.be.false;
+    });
+});

src/javascript/app_2/App/Components/Elements/Notifications/empty_notification.jsx

@@ -0,0 +1,19 @@
+import React        from 'react';
+import { localize } from '_common/localize';
+import { IconBell } from 'Assets/Header/NavBar';
+
+const EmptyNotification = () => (
+    <div className='no-notifications-container'>
+        <div className='notification-message'>
+            <div className='bell-icon'>
+                <IconBell />
+            </div>
+            <div>
+                <h4>{localize('No Notifications')}</h4>
+                <span className='no-notifications-message'>{localize('You have yet to receive any notifications')}</span>
+            </div>
+        </div>
+    </div>
+);
+
+export { EmptyNotification };

src/javascript/app_2/App/Components/Elements/Notifications/notifications.jsx

@@ -1,8 +1,7 @@
-import PropTypes           from 'prop-types';
-import React               from 'react';
-import { localize }        from '_common/localize';
-import { IconBell }        from 'Assets/Header/NavBar';
-import { DrawerItem }      from '../Drawer';
+import PropTypes             from 'prop-types';
+import React                 from 'react';
+import { EmptyNotification } from './empty_notification.jsx';
+import { DrawerItem }        from '../Drawer';
 
 const Notifications = ({ list }) => (
     <React.Fragment>
@@ -14,24 +13,14 @@ const Notifications = ({ list }) => (
                     </React.Fragment>
                 ))
                 :
-                <div className='no-notifications-container'>
-                    <div className='notification-message'>
-                        <div className='bell-icon'>
-                            <IconBell />
-                        </div>
-                        <div>
-                            <h4>{localize('No Notifications')}</h4>
-                            <span className='no-notifications-message'>{localize('You have yet to receive any notifications')}</span>
-                        </div>
-                    </div>
-                </div>
+                <EmptyNotification />
         }
 
     </React.Fragment>
 );
 
 Notifications.propTypes = {
-    'list': PropTypes.object,
+    list: PropTypes.object,
 };
 
 export { Notifications };

src/javascript/app_2/App/Components/Elements/SettingsDialog/__tests__/language_dialog.spec.js

@@ -0,0 +1,30 @@
+import React                  from 'react';
+import { expect }             from 'chai';
+import { configure, shallow } from 'enzyme';
+import Adapter                from 'enzyme-adapter-react-16';
+import LanguageDialog         from '../language_dialog.jsx';
+
+configure({ adapter: new Adapter() });
+
+describe('LanguageDialog', () => {
+    it('should render one <LanguageDialog /> component', () => {
+        const wrapper = shallow(<LanguageDialog />);
+        expect(wrapper).to.have.length(1);
+    });
+    it('should have .show when is_visible is true and is_settings_on is true', () => {
+        const wrapper = shallow(<LanguageDialog is_visible={true} is_settings_on={true} />);
+        expect(wrapper.find('.show').exists()).to.be.true;
+    });
+    it('should not have .show when is_visible is true and is_settings_on is false', () => {
+        const wrapper = shallow(<LanguageDialog is_visible={true} is_settings_on={false} />);
+        expect(wrapper.find('.show').exists()).to.be.false;
+    });
+    it('should not have .show when is_visible is false and is_settings_on is true', () => {
+        const wrapper = shallow(<LanguageDialog is_visible={false} is_settings_on={true} />);
+        expect(wrapper.find('.show').exists()).to.be.false;
+    });
+    it('should not have .show when is_visible is false and is_settings_on is false', () => {
+        const wrapper = shallow(<LanguageDialog is_visible={false} is_settings_on={false} />);
+        expect(wrapper.find('.show').exists()).to.be.false;
+    });
+});

src/javascript/app_2/App/Components/Elements/SettingsDialog/__tests__/settings_control.spec.js

@@ -0,0 +1,18 @@
+import React                  from 'react';
+import { expect }             from 'chai';
+import { configure, shallow } from 'enzyme';
+import Adapter                from 'enzyme-adapter-react-16';
+import SettingsControl        from '../settings_control.jsx';
+import { testChildren }       from '../../../../../test_helper';
+
+configure({ adapter: new Adapter() });
+
+describe('SettingsControl', () => {
+    it('should render one <SettingsControl /> component', () => {
+        const wrapper = shallow(<SettingsControl />);
+        expect(wrapper).to.have.length(1);
+    });
+    it('should render children when passed in', () => {
+        testChildren(<SettingsControl />);
+    });
+});

src/javascript/app_2/App/Components/Elements/SettingsDialog/__tests__/settings_dialog.spec.js

@@ -0,0 +1,30 @@
+import React                  from 'react';
+import { expect }             from 'chai';
+import { configure, shallow } from 'enzyme';
+import Adapter                from 'enzyme-adapter-react-16';
+import SettingsDialog         from '../settings_dialog.jsx';
+
+configure({ adapter: new Adapter() });
+
+describe('SettingsDialog', () => {
+    it('should render one <SettingsDialog /> component', () => {
+        const wrapper = shallow(<SettingsDialog />);
+        expect(wrapper).to.have.length(1);
+    });
+    it('should have .show when is_open is true in props', () => {
+        const wrapper = shallow(<SettingsDialog is_open={true} />);
+        expect(wrapper.hasClass('show')).to.be.true;
+    });
+    it('should not have .show when is_open is false in props', () => {
+        const wrapper = shallow(<SettingsDialog is_open={false} />);
+        expect(wrapper.hasClass('show')).to.be.false;
+    });
+    it('should have .hide when is_language_dialog_visible is true in props', () => {
+        const wrapper = shallow(<SettingsDialog is_language_dialog_visible={true} />);
+        expect(wrapper.find('.hide').exists()).to.be.true;
+    });
+    it('should not have .hide when is_language_dialog_visible is false in props', () => {
+        const wrapper = shallow(<SettingsDialog is_language_dialog_visible={false} />);
+        expect(wrapper.find('.hide').exists()).to.be.false;
+    });
+});

src/javascript/app_2/App/Components/Elements/ToastMessage/__tests__/close_button.spec.jsx

@@ -0,0 +1,18 @@
+import React                  from 'react';
+import { expect }             from 'chai';
+import { configure, shallow } from 'enzyme';
+import Adapter                from 'enzyme-adapter-react-16';
+import CloseButton            from '../close_button.jsx';
+
+configure({ adapter: new Adapter() });
+
+describe('CloseButton', () => {
+    it('should render one <CloseButton /> component', () => {
+        const wrapper = shallow(<CloseButton />);
+        expect(wrapper).to.have.length(1);
+    });
+    it('should render one <CloseButton /> component', () => {
+        const wrapper = shallow(<CloseButton />);
+        expect(wrapper.prop('onClick').isRequired).to.be.true();
+    });
+});

src/javascript/app_2/App/Components/Elements/ToastMessage/__tests__/toast.spec.jsx

@@ -0,0 +1,14 @@
+import React                  from 'react';
+import { expect }             from 'chai';
+import { configure, shallow } from 'enzyme';
+import Adapter                from 'enzyme-adapter-react-16';
+import Toast                  from '../toast.jsx';
+
+configure({ adapter: new Adapter() });
+
+describe('Toast', () => {
+    it('should render one <Toast /> component', () => {
+        const wrapper = shallow(<Toast />);
+        expect(wrapper).to.have.length(1);
+    });
+});

src/javascript/app_2/App/Components/Elements/ToastMessage/__tests__/transition.spec.js

@@ -0,0 +1,18 @@
+import React                  from 'react';
+import { expect }             from 'chai';
+import { configure, shallow } from 'enzyme';
+import Adapter                from 'enzyme-adapter-react-16';
+import Transition             from '../transition.jsx';
+import { testChildren }       from '../../../../../test_helper';
+
+configure({ adapter: new Adapter() });
+
+describe('Transition', () => {
+    it('should render one <Transition /> component', () => {
+        const wrapper = shallow(<Transition />);
+        expect(wrapper).to.have.length(1);
+    });
+    it('should render children when passed in', () => {
+        testChildren(<Transition />);
+    });
+});

src/javascript/app_2/App/Components/Elements/ToastMessage/close_button.jsx

@@ -10,7 +10,7 @@ const CloseButton = ({ onClick }) => (
 );
 
 CloseButton.propTypes = {
-    onClick: PropTypes.func,
+    onClick: PropTypes.func.isRequired,
 };
 
 export default CloseButton;

src/javascript/app_2/App/Components/Elements/ToggleButton/__tests__/toggle_button.spec.js

@@ -3,7 +3,7 @@ import { shallow }  from 'enzyme';
 import React        from 'react';
 import { fake }     from 'sinon';
 import ToggleButton from '../toggle_button.jsx';
-import Button       from '../../../Form/button.jsx';
+import Button       from 'App/Components/Form/button.jsx';
 
 describe('<ToggleButton />', () => {
     it('should render a <Button /> element', () => {

src/javascript/app_2/App/Components/Elements/__tests__/localize.spec.js

@@ -0,0 +1,24 @@
+import React                  from 'react';
+import { expect }             from 'chai';
+import { configure, shallow } from 'enzyme';
+import Adapter                from 'enzyme-adapter-react-16';
+import Localize               from '../localize.jsx';
+
+configure({ adapter: new Adapter() });
+
+describe('Localize', () => {
+    it('should render one <Localize /> component', () => {
+        const str = 'something without replacer';
+        const wrapper = shallow(<Localize str={str} />);
+        expect(wrapper).to.have.length(1);
+    });
+    it('should render with replacers', () => {
+        const str = 'something with [_1] replacer [_2]';
+        const replacers = {
+            '1_2': <a className='a-cool-classname' />,
+        };
+        const wrapper = shallow(<Localize str={str} replacers={replacers} />);
+        expect(wrapper).to.have.length(1);
+        expect(wrapper.find('.a-cool-classname').exists()).to.be.true;
+    });
+});

src/javascript/app_2/App/Components/Elements/__tests__/login_prompt.spec.js

@@ -0,0 +1,14 @@
+import React                  from 'react';
+import { expect }             from 'chai';
+import { configure, shallow } from 'enzyme';
+import Adapter                from 'enzyme-adapter-react-16';
+import LoginPrompt            from '../login_prompt.jsx';
+
+configure({ adapter: new Adapter() });
+
+describe('LoginPrompt', () => {
+    it('should render one <LoginPrompt /> component', () => {
+        const wrapper = shallow(<LoginPrompt />);
+        expect(wrapper).to.have.length(1);
+    });
+});