add test and move style in stylesheet

src/pages/HomePage/HomePage.module.css

@@ -8,6 +8,11 @@
     margin-top: 25px;
 }
 
+.sortbyLabel {
+    color: grey;
+    margin-right: 5px;
+    margin-left: 25px;
+}
 
 /* Style The Dropdown Button */
 .dropbtn {

src/pages/HomePage/HomePage.test.js

@@ -1,8 +1,10 @@
 import {shallow} from 'enzyme';
 import React from 'react';
-import {HomePage} from './HomePage';
+import {HomePage, SortBy} from './HomePage';
 import VideoContainer from '../../elements/VideoContainer/VideoContainer';
 import {SearchHandling} from './SearchHandling';
+import exp from "constants";
+import {DefaultTags} from "../../types/GeneralTypes";
 
 describe('<HomePage/>', function () {
     it('renders without crashing ', function () {
@@ -83,6 +85,20 @@ describe('<HomePage/>', function () {
 
         testBtn(tags.first());
     });
+
+    it('test sortby type change', function () {
+        const wrapper = shallow(<HomePage/>);
+
+        // expect those default values
+        expect(wrapper.state().sortby).toBe('Date Added');
+        expect(wrapper.instance().sortState).toBe(SortBy.date);
+        expect(wrapper.instance().tagState).toBe(DefaultTags.all);
+
+        wrapper.instance().onDropDownItemClick(SortBy.name, 'namesort');
+
+        expect(wrapper.state().sortby).toBe('namesort');
+        expect(wrapper.instance().sortState).toBe(SortBy.name);
+    });
 });
 
 describe('<SearchHandling/>', () => {

src/pages/HomePage/HomePage.tsx

@@ -15,7 +15,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faSortDown} from '@fortawesome/free-solid-svg-icons';
 
 // eslint-disable-next-line no-shadow
-enum SortBy {
+export enum SortBy {
     date,
     likes,
     random,
@@ -178,45 +178,17 @@ export class HomePage extends React.Component<Props, state> {
                             />
                         </SideBar>
                         <div>
-                            <span style={{color: 'grey', marginRight: 5}}>Sort By: </span>
+                            <span className={style.sortbyLabel}>Sort By: </span>
                             <div className={style.dropdown}>
                                 <span className={style.dropbtn}>
                                     <span>{this.state.sortby}</span>
                                     <FontAwesomeIcon style={{marginLeft: 3, paddingBottom: 3}} icon={faSortDown} size='1x' />
                                 </span>
                                 <div className={style.dropdownContent}>
-                                    <span
+                                    <span onClick={(): void => this.onDropDownItemClick(SortBy.date, 'Date Added')}>Date Added</span>
-                                        onClick={(): void => {
+                                    <span onClick={(): void => this.onDropDownItemClick(SortBy.likes, 'Most likes')}>Most likes</span>
-                                            this.sortState = SortBy.date;
+                                    <span onClick={(): void => this.onDropDownItemClick(SortBy.random, 'Random')}>Random</span>
-                                            this.setState({sortby: 'Date Added '});
+                                    <span onClick={(): void => this.onDropDownItemClick(SortBy.name, 'Name')}>Name</span>
-                                            this.fetchVideoData();
-                                        }}>
-                                        Date Added
-                                    </span>
-                                    <span
-                                        onClick={(): void => {
-                                            this.sortState = SortBy.likes;
-                                            this.setState({sortby: 'Most likes'});
-                                            this.fetchVideoData();
-                                        }}>
-                                        Most likes
-                                    </span>
-                                    <span
-                                        onClick={(): void => {
-                                            this.sortState = SortBy.random;
-                                            this.setState({sortby: 'Random'});
-                                            this.fetchVideoData();
-                                        }}>
-                                        Random
-                                    </span>
-                                    <span
-                                        onClick={(): void => {
-                                            this.sortState = SortBy.name;
-                                            this.setState({sortby: 'Name'});
-                                            this.fetchVideoData();
-                                        }}>
-                                        Name
-                                    </span>
                                 </div>
                             </div>
                         </div>
@@ -228,6 +200,17 @@ export class HomePage extends React.Component<Props, state> {
             </>
         );
     }
+
+    /**
+     * click handler for sortby dropdown item click
+     * @param type type of sort action
+     * @param name new header title
+     */
+    onDropDownItemClick(type: SortBy, name: string): void {
+        this.sortState = type;
+        this.setState({sortby: name});
+        this.fetchVideoData();
+    }
 }
 
 export default withRouter(HomePage);