Mini ch 5

src/components/App/App.jsx

@@ -9,6 +9,7 @@ import { Router } from 'react-router-dom';
 import { 
   SET_CURRENT_VIDEO_PLAYBACK, 
   SET_IS_FIRST_LOAD, 
+  SET_SESSION, 
   SET_VIDEOS_LIST, 
   SWITCH_THEME 
 } from '../../reducers/actionTypes';
@@ -65,7 +66,8 @@ function App() {
       { ...getThemeConfig(), 
         search,
         videosList,
-        playVideoById: (id) => dispatch({type: SET_CURRENT_VIDEO_PLAYBACK, payload: id}) 
+        playVideoById: (id) => dispatch({type: SET_CURRENT_VIDEO_PLAYBACK, payload: id}),
+        setUserSession: (data) => dispatch({type: SET_SESSION, payload: data}),
       }
     }>
       <Router history={history}>

src/components/Login/Login.jsx

@@ -0,0 +1,66 @@
+import React, { useContext, useState } from "react";
+import styled from "styled-components";
+import loginService from '../../services/loginService';
+import AppContext from "../../providers/AppContext";
+import TextField from "../../ui/TextField/TextField";
+import Button from "../../ui/Button/Button";
+import { useHistory } from "react-router";
+
+const StyledLogin = styled.div`
+    padding: 4px;
+    margin: 4px;
+    height: 400px;
+    width: 400px;
+    background: ${ ({theme}) => theme.color.surface };
+    color: ${ ({theme}) => theme.color.fontPrimary };
+`
+
+const StyledSection = styled.div`
+    display: grid;
+    height: min-content;
+`;
+
+const Login = () => {
+    const { push } = useHistory();
+    const { theme, setUserSession } = useContext(AppContext);
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+
+    const loginAttempt = async () => {
+        const response = await loginService(username, password);
+        setUserSession(response);
+        push({ pathname: "/home" });
+    }
+
+    return (<StyledLogin role="form" theme={theme}>
+                <StyledSection>
+                    <label htmlFor="username">Usuario</label>
+                    <TextField 
+                        id="username" 
+                        name="username"
+                        data-testid="username-input"
+                        onChange={(username) => setUsername(username)}
+                    />
+                </StyledSection>
+                <StyledSection>
+                    <label htmlFor="password">Usuario</label>
+                    <TextField 
+                        id="password" 
+                        name="password"
+                        data-testid="password-input"
+                        type="password"
+                        onChange={(password) => setPassword(password)}
+                    />
+                </StyledSection>
+                <StyledSection>
+                    <Button 
+                        data-testid="login-button"
+                        onClick={loginAttempt}
+                    >
+                        Ingresar
+                    </Button>
+                </StyledSection>
+            </StyledLogin>);
+}
+
+export default Login;

src/components/Login/Login.spec.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { act, render } from '@testing-library/react';
+import Login from './Login'
+import { darkTheme, lightTheme } from '../../providers/themes';
+import { contextWrapper, routerWrapper } from '../../utils';
+import AppContext from '../../providers/AppContext';
+import { fireEvent, getByTestId } from '@testing-library/dom';
+
+const build = async (Component = <Login/>, theme = lightTheme) => {
+    const contextValue = { theme, setUserSession: jest.fn() };
+    let routeWrap;
+    let container;
+    await act(async () => {
+        const wrappedContext = contextWrapper(AppContext, contextValue, Component);
+        routeWrap = await routerWrapper(wrappedContext);
+        container = render(routeWrap.wrap).container;
+    });
+    return { 
+        container,
+        history: () => routeWrap.history,
+        usernameInput: () => getByTestId(container, 'username-input'),
+        passwordInput: () => getByTestId(container, 'password-input'),
+        loginButton: () => getByTestId(container, 'login-button'),
+    };
+};
+
+describe('Login screen', () => {
+    it('renders with lightTheme props', async () => {
+        const built = await build();
+        const { firstChild } = built.container;
+        expect(firstChild).toHaveStyle(`background: ${lightTheme.color.surface}`);
+        expect(firstChild).toHaveStyle(`color: ${lightTheme.color.fontPrimary}`);
+    });
+
+    it('renders with lightTheme props', async () => {
+        const built = await build(<Login/>, darkTheme);
+        const { firstChild } = built.container;
+        expect(firstChild).toHaveStyle(`background: ${darkTheme.color.surface}`);
+        expect(firstChild).toHaveStyle(`color: ${darkTheme.color.fontPrimary}`);
+    });
+
+    it('contains "username" and "password" inputs', async () => {
+        const built = await build();
+        const { usernameInput, passwordInput, loginButton } = built;
+        expect(usernameInput()).toBeDefined();
+        expect(passwordInput()).toBeDefined();
+        expect(loginButton()).toBeDefined();
+    });
+
+    it('redirects to home on successful login', async () => {
+        const REAL_USERNAME = "wizeline";
+        const REAL_PASSWORD = "Rocks!";
+        const built = await build();
+        const { 
+            usernameInput, 
+            passwordInput, 
+            loginButton, 
+            history 
+        } = built;
+
+        fireEvent.change(usernameInput(), { target: { value: REAL_USERNAME } });
+        fireEvent.change(passwordInput(), { target: { value: REAL_PASSWORD } });
+        await act(async () => {
+            fireEvent.click(loginButton());
+        })
+        expect(history().location.pathname).toBe("/home");
+
+    });
+})

src/components/Login/Login.test.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Login from './Login'
+import { lightTheme } from '../../providers/themes';
+import { contextWrapper } from '../../utils';
+import AppContext from '../../providers/AppContext';
+
+const build = (Component = <Login/>, theme = lightTheme) => {
+    const contextValue = { theme };
+    const wrappedContext = contextWrapper(AppContext, contextValue, Component);
+    const { container } = render(wrappedContext);
+    return { container };
+};
+
+describe('Login screen', () => {
+    it('renders with default properties', () => {
+        const { firstChild } = build().container;
+        expect(firstChild).toMatchSnapshot();
+        expect(firstChild).toHaveStyle('width: 400px');
+        expect(firstChild).toHaveStyle('height: 400px');
+        expect(firstChild).toHaveStyle('margin: 4px');
+        expect(firstChild).toHaveStyle('padding: 4px');
+    })
+})

src/components/Login/__snapshots__/Login.test.jsx.snap

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Login screen renders with default properties 1`] = `
+<div
+  class="sc-htpNat TqAvr"
+  role="form"
+>
+  <div
+    class="sc-bxivhb YvQhC"
+  >
+    <label
+      for="username"
+    >
+      Usuario
+    </label>
+    <input
+      class="sc-bdVaJa fkGYjX"
+      data-testid="username-input"
+      id="username"
+      name="username"
+    />
+  </div>
+  <div
+    class="sc-bxivhb YvQhC"
+  >
+    <label
+      for="password"
+    >
+      Usuario
+    </label>
+    <input
+      class="sc-bdVaJa fkGYjX"
+      data-testid="password-input"
+      id="password"
+      name="password"
+      type="password"
+    />
+  </div>
+  <div
+    class="sc-bxivhb YvQhC"
+  >
+    <button
+      class="sc-bwzfXH mRSDS"
+      data-testid="login-button"
+    >
+      Ingresar
+    </button>
+  </div>
+</div>
+`;

src/reducers/actionTypes.js

@@ -1,4 +1,5 @@
 export const SET_CURRENT_VIDEO_PLAYBACK = "SET_CURRENT_VIDEO_PLAYBACK";
 export const SET_IS_FIRST_LOAD = "SET_IS_FIRST_LOAD";
 export const SET_VIDEOS_LIST = "SET_VIDEOS_LIST";
-export const SWITCH_THEME = "SWITCH_THEME";
+export const SWITCH_THEME = "SWITCH_THEME";
+export const SET_SESSION = "SET_SESSION";

src/reducers/appReducer.js

@@ -1,10 +1,12 @@
 import {
     SET_CURRENT_VIDEO_PLAYBACK,
     SET_IS_FIRST_LOAD,
+    SET_SESSION,
     SET_VIDEOS_LIST,
     SWITCH_THEME
 } from './actionTypes'
 
+const USER_SESSION_KEY = "user_session";
 export const appReducer = (state, action) => {
     const { type, payload } = action;
     switch(type) {
@@ -18,6 +20,9 @@ export const appReducer = (state, action) => {
             let isLightTheme = !state.isLightTheme;
             return ({ ...state, isLightTheme }); 
         };
+        case SET_SESSION: 
+            window.sessionStorage.setItem(USER_SESSION_KEY, JSON.stringify(payload));
+            return ({ ...state, userSession: window.sessionStorage.getItem(USER_SESSION_KEY) });
         default: return state;
     } 
 }

src/reducers/appReducer.spec.jsx

@@ -1,11 +1,14 @@
-import { appReducer } from './appReducer'
+import { appReducer } from './appReducer';
+import { userMockedData } from '../utils/';
 import {
     SET_CURRENT_VIDEO_PLAYBACK,
     SET_IS_FIRST_LOAD,
     SET_VIDEOS_LIST,
-    SWITCH_THEME
-} from './actionTypes'
+    SWITCH_THEME,
+    SET_SESSION,
+} from './actionTypes';
 
+const USER_SESSION_KEY = "user_session";
 const deepCopy = (stateObject) => JSON.parse(JSON.stringify(stateObject));
 const originalState = {
     videosList: [],
@@ -68,5 +71,19 @@ describe("app reducer", () => {
         const action = { type: '?' };
         let objectResult = appReducer(stateCopy, action);
         expect(JSON.stringify(objectResult)).toEqual(JSON.stringify(originalState))
-    }); 
+    });
+
+    it('mutates `sessionData` storing session data on window only',() => {
+        const stateCopy = deepCopy(originalState);
+        const EXPECTED_SESSION_DATA = userMockedData;
+        const action = { type: SET_SESSION, payload: EXPECTED_SESSION_DATA };
+        let objectResult = appReducer(stateCopy, action);
+
+        expect(objectResult.videosList).toEqual(originalState.videosList);
+        expect(objectResult.currentVideoId).toEqual(objectResult.currentVideoId);
+        expect(objectResult.isLightTheme).toEqual(originalState.isLightTheme);
+        expect(objectResult.isFirstLoad).toEqual(originalState.isFirstLoad);
+        expect(objectResult.userSession).toEqual(JSON.stringify(EXPECTED_SESSION_DATA));
+        expect(window.sessionStorage.getItem(USER_SESSION_KEY)).toBe(JSON.stringify(EXPECTED_SESSION_DATA));
+    });
 });

src/services/loginService.js

@@ -0,0 +1,8 @@
+import { userMockedData } from '../utils/'
+const loginService = async (username, password) => new Promise((resolve, reject) => {
+    if (username === 'wizeline' && password === 'Rocks!'){ resolve(userMockedData); }
+    reject(new Error('Username or password invalid'));
+});
+
+
+export default loginService;

src/services/loginService.spec.jsx

@@ -0,0 +1,24 @@
+import loginService from './loginService';
+
+describe('loginService', () => {
+    it('returns error if bad userame and password is specified', async () => {
+        const FAKE_USERNAME = 'you_lost';
+        const FAKE_PASSWORD = 'the_game';
+        try{
+            await loginService(FAKE_USERNAME, FAKE_PASSWORD);
+        }catch(reason){
+            expect(reason.message).toBe("Username or password invalid");
+        }
+    });
+
+    it('returns "mockedUser" when real username and password is specified', async () => {
+        const REAL_USERNAME = 'wizeline';
+        const REAL_PASSWORD = 'Rocks!';
+        try{
+            const response = loginService(REAL_USERNAME, REAL_PASSWORD);
+            expect(JSON.stringify(response)).toEqual(JSON.stringify(response));
+        }catch{
+            return { passed: false };
+        }
+    });
+});

src/ui/Button/Button.jsx

@@ -0,0 +1,19 @@
+import React, { useContext } from "react";
+import styled from "styled-components";
+import AppContext from "../../providers/AppContext";
+
+const StyledButton = styled.button`
+    border-radius: 8px;
+    background: ${({theme}) => theme.color.secondary };
+    color: ${({theme}) => theme.color.fontPrimary };
+`;
+
+const Button = (props) => {
+    const { theme } = useContext(AppContext);
+    const condensedProps = { ...props, theme };
+    return (<StyledButton {...condensedProps}>
+        { props.children }
+    </StyledButton>);
+} 
+
+export default Button;