From c7a0368a266e424db5cc11d24510326d7d2015a9 Mon Sep 17 00:00:00 2001 From: lukas Date: Tue, 22 Jun 2021 22:01:35 +0200 Subject: [PATCH] add test and move style in stylesheet --- src/pages/HomePage/HomePage.module.css | 5 +++ src/pages/HomePage/HomePage.test.js | 18 ++++++++- src/pages/HomePage/HomePage.tsx | 51 +++++++++----------------- 3 files changed, 39 insertions(+), 35 deletions(-) diff --git a/src/pages/HomePage/HomePage.module.css b/src/pages/HomePage/HomePage.module.css index 089df77..75f58af 100644 --- a/src/pages/HomePage/HomePage.module.css +++ b/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 { diff --git a/src/pages/HomePage/HomePage.test.js b/src/pages/HomePage/HomePage.test.js index ff493b4..b321b3f 100644 --- a/src/pages/HomePage/HomePage.test.js +++ b/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('', function () { it('renders without crashing ', function () { @@ -83,6 +85,20 @@ describe('', function () { testBtn(tags.first()); }); + + it('test sortby type change', function () { + const wrapper = shallow(); + + // 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('', () => { diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index c3b1774..aa9ee48 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/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 { />
- Sort By: + Sort By:
{this.state.sortby}
- { - this.sortState = SortBy.date; - this.setState({sortby: 'Date Added '}); - this.fetchVideoData(); - }}> - Date Added - - { - this.sortState = SortBy.likes; - this.setState({sortby: 'Most likes'}); - this.fetchVideoData(); - }}> - Most likes - - { - this.sortState = SortBy.random; - this.setState({sortby: 'Random'}); - this.fetchVideoData(); - }}> - Random - - { - this.sortState = SortBy.name; - this.setState({sortby: 'Name'}); - this.fetchVideoData(); - }}> - Name - + this.onDropDownItemClick(SortBy.date, 'Date Added')}>Date Added + this.onDropDownItemClick(SortBy.likes, 'Most likes')}>Most likes + this.onDropDownItemClick(SortBy.random, 'Random')}>Random + this.onDropDownItemClick(SortBy.name, 'Name')}>Name
@@ -228,6 +200,17 @@ export class HomePage extends React.Component { ); } + + /** + * 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);