Add tests, refactor template, add showMenu event

__tests__/App.test.js

@@ -8,20 +8,32 @@ describe('App component', () => {
 
     test('should render the <App /> component', () => {
         const wrapper = shallow( <App /> );
+        expect(wrapper.exists())
     })
 
-    test('should have 4 children components', () => {
+    test('should have children components', () => {
         const wrapper = shallow( <App /> );
-        expect(wrapper.children()).toHaveLength(4);
+        expect(wrapper.children().length).toBeGreaterThan(0);
     })
 
     // examples usage
     test('should mount in a full DOM', () => {
         expect(mount(<App />)).toHaveLength(1);
     })
 
-    test('should render static HTML', () => {
-        expect(render(<App />).text()).toContain('Video')
+    test('should render video html element', () => {
+        const wrapper = shallow(<App />);
+        expect(wrapper.contains('<video>'))
+    })
+
+    test('should change menu state', () => {
+        const wrapper = shallow(<App />);
+        const instance = wrapper.instance();
+
+        expect(wrapper.state('showRedeemableMenu')).toBe(false);
+
+        instance.showRedeemableMenu();
+        expect(wrapper.state('showRedeemableMenu')).toBe(true)
     })
 
 })

__tests__/Redeemable.test.js

@@ -34,4 +34,58 @@ describe('Redeemable Component ', () => {
         expect(wrapper.containsAnyMatchingElements(['<ul /> <li />']));
     })
 
+    test('should filter list of unique price categories ', () => {
+        const menuItems = [
+            {'price_category': 'Embers'},
+            {'price_category': 'Embers'},
+            {'price_category': 'Sparks'},
+            {'price_category': 'Embers'},
+            {'price_category': 'Sparks'}
+        ];
+
+        const wrapper = shallow(<Redeemable />);
+        const instance = wrapper.instance();
+
+        const result = instance.filterPriceCategoriesToMenuItems(menuItems);
+
+        expect(result.length).toEqual(2);
+
+    })
+
+    test('should render button menu item', () => {
+        const menuItems = ['Embers', 'Sparks']
+        const wrapper = shallow(<Redeemable />);
+        const instance = wrapper.instance();
+
+        instance.renderMenubar(menuItems);
+        expect(wrapper.containsAnyMatchingElements('<button> </button>'))
+
+    })
+
+    test('should render redeemable imgs', () => {
+        const redeemable = {
+            img: '../dist/img/r1.gif', 
+            price_category_url: '../dist/img/ember.png'}
+        const wrapper = shallow(<Redeemable />);
+        const instance = wrapper.instance();
+
+        instance.renderItemTemplateWith(redeemable);
+        expect(wrapper.containsAnyMatchingElements('<img>'))
+    })
+
+    test('html should render a list of redeemable items',() => {
+        const redeemables = [
+            { redeemables_id: 1, img: '../dist/img/r1.gif',  price_category_url: '../dist/img/ember.png'},
+            { redeemables_id: 2, img: '../dist/img/r2.gif',  price_category_url: '../dist/img/ember.png'},
+            { redeemables_id: 3, img: '../dist/img/r3.gif',  price_category_url: '../dist/img/ember.png'}
+        ];
+
+        const wrapper = mount(<Redeemable/>);
+        wrapper.setState({redeemables: redeemables})
+
+        expect(wrapper.contains('../dist/img/r1.gif'));
+        expect(wrapper.contains('../dist/img/ember.png'));
+
+    })
+
 })

client/src/components/App.css

@@ -3,6 +3,9 @@
     top: 60px;
     left: 0;
     width: 76vw;
+    font-family: 'Dosis', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 18px;
+    font-weight: 500;
 }
 
 .videoPlayerContainer {
@@ -28,3 +31,8 @@
     bottom: -220px;
     width: 100%;
 }
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 18px;
+}

client/src/components/App.jsx

@@ -2,37 +2,39 @@ import React, { Component } from 'react';
 import VideoPlayer from '../components/player/VideoPlayer.jsx'
 import Redeemable from '../components/redeemable/Redeemable.jsx'
 import VideoFooterBar from '../components/video-footer-bar/VideoFooterBar.jsx'
-import Fake from '../components/fake-layout/Fake.jsx'
+// import Fake from '../components/fake-layout/Fake.jsx'
 
 import style from './App.css';
 
 class App extends Component {
 
     constructor(props) {
         super(props)
-
         this.state = {
-
+            showRedeemableMenu: false
         }
     }
 
+    showRedeemableMenu() {
+        const show = !this.state.showRedeemableMenu;
+        this.setState({showRedeemableMenu: show});
+    }
+
     render() {
+        const { showRedeemableMenu } = this.state;
 
         return (
             <div className={style['container']}>
                 <div className={style.videoPlayerContainer}>
                     <VideoPlayer />
                 </div>
                 <div className={style.redeemableContainer}>
-                    <Redeemable />
+                    { showRedeemableMenu ? <Redeemable /> : null }
                 </div>
                 <div className={style.videoFooterContainer}>
-                    <VideoFooterBar />
+                    <VideoFooterBar onShowRedeemableMenu={this.showRedeemableMenu.bind(this)}/>
                 </div>
 
-                {/* <div className={style.fakeContainer} >
-                    <Fake />
-                </div> */}
                 {/* <div> Video Controls / Settings Component </div> */}
             </div>
         )

client/src/components/fake-layout/Fake.css

@@ -1,14 +1,12 @@
 .parentContainer {
     border: 1px dotted red;
-    height: 60px;
-    width: 100%;
-    font-size: 18px;
+    height: 100%;
+    width: 354px;
 
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: flex-start;
-    align-items: top;
 }
 
 .order1 { order: 1 }
@@ -28,93 +26,21 @@
 .flexGrow932 { flex-basis: 32px; flex-grow: 9;}
 .flexGrow1032 { flex-basis: 32px; flex-grow: 10;}
 
-.childContainer {
-    display: flex;
-    flex-direction: column;
-}
-
-.backgroundFooter {
-    composes: parentContainer;
-    background-color: rgba(86, 97, 115, 1);
-}
 
-/* size of containers */
-.childAvatar { composes: childContainer flexGrow132; }
-.childDescription { composes: childContainer flexGrow1032; }
-.childSkills { 
-    composes: childContainer flexGrow232;
+.menubar {
+    display: flex;
     flex-direction: row;
-    align-items: center;
-    justify-content: left;
-    padding-left: 21px;
-    border-left: 1px solid rgba(255, 255, 255, 0.1);
- }
-
-
-/* applies avatar styles */
-.childAvatar img {
-    height: 60px;
-    width: 60px;
-}
-
-/* applies title and subheading styles */
-.title, 
-.subtitle {
-    color: #000;
-    padding: 4px 0px;
-    margin: 2px 0px;
-}
-
-.title { font-size: 1em; color: #fff}
-.subtitle { font-size: .7em; color: rgba(255, 255, 255, .6)  }
-
-.viewCount {
-    width: 48px;
-    justify-content: flex-end;
-    display: inline-flex;
-    color: #fff;
-    background-color:#212c3d;
-    border-radius: 4px;
-    margin-left: 8px;
-    padding-right: 8px;
-    line-height: 21px;
-
-    position: relative;
-    top: 12px;
-}
-
-/* applies styles to skills  */
-
-
-.childSkills:hover {
-    background: rgba(255, 255, 255, 0.1);
-}
-
-.childSkills img {
-    height: 41px;
-    min-width: 41px;
+    justify-content: space-evenly;
     width: 100%;
 }
 
-.childSkills button {
-    height: 100%;
-    min-height: 60px;
-    width: 100%;
-    text-align: left;
-    padding: 4px 4px;
-
-    color: #fff;
-    font-size: .9em;
-    font-weight: bold;
-    text-transform: uppercase;
+.menubar ul li {
+    display: flex;
+    flex-direction: column;
 
-    background-color: transparent;
-    border: none;
-    box-shadow: none;
+    font-size: .85em;;
 }
 
-.childSkills button:after {
-    content: '^';
-    font-size: 1.1em;
-    padding-left: 8px;
-}
+/* .outerScrollWindow li {
+    composes: flexGrow132;
+} */

client/src/components/fake-layout/Fake.jsx

@@ -10,25 +10,48 @@ class Fake extends Component {
 
     render() {
         return (
-            <div className={styles.backgroundFooter } >
+            <div className={styles.parentContainer} >
+                <div className={styles.parentOverlay}></div>
+                {/* restyle and contain the redeemables window */}
 
-                <div className={styles.childAvatar }>
-                    <img src='../dist/img/avatar64.jpg' />
-                </div>
-
-                <div className={styles.childDescription }>
-                    <p className={styles.title}>xbox is down lets hang in there / Streamloots Partner / #RGS <span className={styles.viewCount}>54</span></p>
-                    <p className={styles.subtitle}>The Jackbox Party Pack 3 <span> 18+ Stream </span></p>
-                </div>
+                <div className={styles.outerScrollWindow}>
+                    <div className={styles.menubar}>
+                        <ul>
+                            <li>[L]</li>
+                            <li>Embers</li>
+                            <li>Sparks</li>
+                            <li>Channel</li>
+                            <li>[R]</li>
+                        </ul>
+                    </div>
 
-                <div className={styles.childSkills }>
-                    <div className={styles.childSkillsImg}>
-                        <img src='../dist/img/skils-icon.svg' />
+                    <div className={styles.innerScrollWindow}>
+                        <div>
+                            <p>subheading</p>
+                        </div>
                     </div>
-                    <div className={styles.flexGrow132}>
-                        <button>Skills</button>
+
+                    <div className={styles.footer}>
+                        <div>
+                            <div>
+                                <li>level</li>
+                            </div>
+                        </div>
+                        <div>
+                            <div>
+                                <li>level</li>
+                            </div>
+                        </div>
+                        <div>
+                            <div>
+                                <li>level</li>
+                            </div>
+                        </div>
                     </div>
+
                 </div>
+
+
             </div>
         )
     }