Mini ch 5 #66

cylcrow · 2021-03-26T21:32:57Z

What this PR do?

Performs tasks for mini challenge 5

Any background context you want to provide?

⚠️ ⚠️ ⚠️ ⚠️ ⚠️ Lots of new features, tests and components. 🚀 🧪 : 🔥

How should this be manually tested?

running tests
Or enter here

Screenshots

Test coverage

NOTE: If videos doesn't load it could be due to exceeded YouTube Data API quota.

OMG! 😃

- Removed unnecessary files - Added first tests - Added first components - Added dependencies for testing

…not yet created components

…cription

- First iteration for base components - Modified Header structure: created StyledSection component to a better arrangement of components

- Added card component - Added HomeVideos component - Added tests for new added components - Added/refactored styles for HomeVideo and Card component - Refactored tests for Card component

…ests refactor to comply just with react-testing-library

- Added roles to elements to improve accesibility - Refactored tests to find elements by role instead of their id

- ✨ Added theming prototype - ✅ Added first specs to test integration with theming

- Changed directory name 'Base' to 'ui', indicating that files contained here will be for general UI integration - Updated tests in Card component

- Refactored code - Moved mocked files to a new folder - Mocked API calls - Created tests for custom hooks

- Added test for YT playback frame - Added component for youtube playback

- Added SmallVideoCard component - Added RelatedVideoList component - Added styles for each new component - Added tests for each new component

- Removed unnecesary code from VideoPlayerContainer - Added tests to assert small captions video change - Improved code format

- Added AppContext to share global context - Moved theme spec to AppContext - Moved useSearch to App.jsx component - Added appReducer for global context: AppContext - Deleted unnecessary files

- Added test for useReducer, googleMockedAPIObject files - Prevented props passing from parent componenst to child componenst using context props - Reformated code on some files

… components

- Added tests for loginService - Added tests for login screen - Added test for functionality to redirect to /home on successful login

- Added Page404 component and tests

- Optimized VideoPlayerContainer to avoid re-renders on pushing on same route

- Context value passed to hide/show favorite buttons - Added routes for logged user

jparciga

Mini-Challenge 5 Feedback

Excellent job Andrés 👏🏻👏🏻👏🏻 !!! You applied all the concepts covered during the Bootcamp and even more!! Your code is very well structured and organized, you really followed a TDD approach in your project and you tested almost every single functionality and use-case, I'm really impressed and I'm pretty sure that you already are and continue to be an excellent engineer, congratulations 🙌🏻🎉🍾 !!

Acceptance Criteria

✅ All the sections have their own route.
✅ Navigation across the sections is implemented correctly.
✅ The Global State is persistent across all the sections.
✅ The "Mocked Authentication" mechanism works correctly.
✅ The "session data" is stored in the Global Context correctly.
✅ Videos can be added to the Favorites list.
✅ Videos can be removed from the Favorites list.
✅ Navigation to Favorite Videos View using a private route is implemented correctly (only authenticated users should access this section).
✅ Navigation to the Favorite Video Details View using a private route is implemented correctly (only authenticated users should access this section).
½ Information for the selected favorite video is displayed correctly -> Video details information is missing underneath the player:

✅ The list of other favorite videos in the Favorite Video Details View is displayed.
✅ 🙌🏻. Testing coverage is above 70%. (Please include a screenshot of the code coverage report in your PR description). -> Awesome job implementing almost every test-case possible for your components, reducers, utils, etc.

Just a few tests failed, but don't worry you already achieved the desired coverage for this demo project :)

Bonus Points

✅ The Add/remove from favorites button should appear when the user passes the mouse over the video card in the list.
✅ Integrate with a real authentication provider (such as Auth0, OAuth, or Firebase).
✅ A 404 section is shown when a route is not found.
✅ The Login View is implemented as a modal using React Portals.

jparciga · 2021-03-30T21:52:24Z

src/components/Layout/Header.spec.jsx

+  it('fires user search until presses enter', async () => {
    const EXPECTED_TEXT = 'Hello, ';
    const TRIGGER_TYPING = 'there';
-    const { searchInput, contextValue } = build();
+    const built = await build();
+    const { searchInput, history, contextValue } = built;
    fireEvent.change(searchInput(), { target: { value: TRIGGER_TYPING } });
    fireEvent.change(searchInput(), { target: { value: EXPECTED_TEXT } });
    expect(searchInput().value).toBe(EXPECTED_TEXT);
    expect(contextValue.search).not.toHaveBeenCalled();
    fireEvent.keyPress(searchInput(), { key: 'Enter', code: 13, charCode: 13 });
+    expect(history().location.pathname).toBe("/home");
    expect(contextValue.search).toHaveBeenCalled();
  });


Nice test case 👌🏻

jparciga · 2021-03-30T22:06:08Z

src/ui/Button/Button.spec.jsx

+describe('Button', () => {
+
+    it('Shows specified text', () => {
+        const EXPECTED_TEXT = 'Test text'
+        const { firstChild } = build(<Button>{EXPECTED_TEXT}</Button>).container;
+        expect(firstChild).toHaveTextContent(EXPECTED_TEXT);
+    })
+
+    it('Has passed id', () => {
+        const EXPECTED_ID = 'button-id';
+        const { firstChild } = build(<Button id={EXPECTED_ID}/>).container;
+        expect(firstChild).toHaveProperty('id', EXPECTED_ID);
+    })
+
+    it('renders with light theme', () => {
+        const { firstChild } = build().container;
+        expect(firstChild).toHaveStyle(`background: ${lightTheme.color.secondary}`);
+        expect(firstChild).toHaveStyle(`color: ${lightTheme.color.fontPrimary}`);
+    });
+
+    it('renders with dark theme', () => {
+        const { firstChild } = build(<Button/>, darkTheme).container;
+        expect(firstChild).toHaveStyle(`background: ${darkTheme.color.secondary}`);
+        expect(firstChild).toHaveStyle(`color: ${darkTheme.color.fontPrimary}`);
+    });
+
+    it('triggers onClick', () => {
+        const mockedFunction = jest.fn();
+        const { firstChild } = build(<Button onClick={mockedFunction}/>).container;
+        fireEvent.click(firstChild);
+        expect(mockedFunction).toHaveBeenCalledTimes(1);
+    });
+


Great way to test your component 👍🏻

jparciga · 2021-03-30T23:30:43Z

src/reducers/headerReducer.spec.jsx

+    it('mutates "sidebarOpen" only', () => {
+        const EXPECTED_VALUE = true;
+        const passedState = deepCopy(initialState);
+        const stateResult = headerReducer(passedState, { type: SET_SIDEBAR_OPEN, payload: EXPECTED_VALUE });
+        expect(stateResult.sidebarOpen).toBe(EXPECTED_VALUE);
+        expect(stateResult.avatarMenuOpen).toBe(passedState.avatarMenuOpen);
+        expect(stateResult.loginFormOpen).toBe(passedState.loginFormOpen);
+    });
+
+    it('mutates "avatarMenuOpen" only', () => {
+        const EXPECTED_VALUE = true;
+        const passedState = deepCopy(initialState);
+        const stateResult = headerReducer(passedState, { type: SET_AVATAR_MENU_OPEN, payload: EXPECTED_VALUE });
+        expect(stateResult.sidebarOpen).toBe(passedState.sidebarOpen);
+        expect(stateResult.avatarMenuOpen).toBe(EXPECTED_VALUE);
+        expect(stateResult.loginFormOpen).toBe(passedState.loginFormOpen);
+    });
+
+    it('mutates "loginFormOpen" only', () => {
+        const EXPECTED_VALUE = true;
+        const passedState = deepCopy(initialState);
+        const stateResult = headerReducer(passedState, { type: SET_LOGIN_FORM_OPEN, payload: EXPECTED_VALUE });
+        expect(stateResult.sidebarOpen).toBe(passedState.sidebarOpen);
+        expect(stateResult.avatarMenuOpen).toBe(passedState.avatarMenuOpen);
+        expect(stateResult.loginFormOpen).toBe(EXPECTED_VALUE);
+    });
+
+    it('Does not mutate anyting when action type is not recognized', () => {
+        const EXPECTED_VALUE = true;
+        const passedState = deepCopy(initialState);
+        const stateResult = headerReducer(passedState, { type: '?', payload: EXPECTED_VALUE });
+        expect(stateResult.sidebarOpen).toBe(passedState.sidebarOpen);
+        expect(stateResult.avatarMenuOpen).toBe(passedState.avatarMenuOpen);
+        expect(stateResult.loginFormOpen).toBe(passedState.loginFormOpen);
+    });


jparciga · 2021-03-31T00:11:07Z

src/components/App/App.spec.jsx

+  it('applies "light" theme if none selected', async () => {
+    const wrapper = await build();
+    expect(wrapper.LayoutWrapper()).toHaveStyle(
+      `background: ${lightTheme.color.background}`
+    );
+  });
+
+  it('changes "light" theme to "dark" theme', async () => {
+    const wrapper = await build();
+
+    expect(wrapper.LayoutWrapper()).toHaveStyle(
+      `background: ${lightTheme.color.background}`
+    );
+    await act(async () => {
+      fireEvent.click(wrapper.ThemeSwitch());
+    });
+    expect(wrapper.LayoutWrapper()).toHaveStyle(
+      `background: ${darkTheme.color.background}`
+    );
+  });
+
+  it('shows videos list after successful fetch', async () => {
+    const built = (await build());
+    const { videosList } = built;
+    expect(videosList()).toHaveLength(youtubeMockedData.items.length);
+  });
+
+  it('shows  "No hay videos :/" legend after failed fetch', async () => {
+    global.gapi = googleMockedAPIObject(false);
+    const built = (await build());
+    const { noVideosAvailableCaption } = built;
+    expect( noVideosAvailableCaption() ).toBeTruthy();    
+  });
+
+  it('waits until `gapi` object is defined before first search', async () => {
+    global.gapi = undefined;
+    const built = await build();
+
+    await for400Miliseconds();
+    global.gapi = googleMockedAPIObject();
+    await act( async () => { await for400Miliseconds(); });
+
+    const { videosList } = built; 
+    expect(videosList()).toHaveLength(youtubeMockedData.items.length);
+  });
+
+  it('shows "Couldn\'t load videos" when "gapi" object is not loaded after 1 second', async () => {
+    global.gapi = undefined;
+    const built = await build();
+
+    await for400Miliseconds();
+    await for400Miliseconds();
+
+    await act( async () => { 
+      await for400Miliseconds();
+      global.gapi = googleMockedAPIObject(); 
+    });
+
+    const { noVideosAvailableCaption } = built; 
+    expect(noVideosAvailableCaption()).toBeTruthy();
+  });


Excellent 👏🏻

cylcrow and others added 30 commits February 19, 2021 16:16

✅ ➕ 🎨 🔥 Fork, cleanup and first tests and component's creation

a8b259f

- Removed unnecessary files - Added first tests - Added first components - Added dependencies for testing

🚧 ✅ 🎨 Added tests to assert components default styling and stubs for …

6466b34

…not yet created components

♻️ Refactored names to comply with the specified in the challenge des…

dca62d2

…cription

♻️ ✅ ✨ 💄 Added base components located in Header component

07be5b1

- First iteration for base components - Modified Header structure: created StyledSection component to a better arrangement of components

✨ ♻️ ✅ 💄 Added Card component

d48c4e1

✨ ♻️ ✅ 💄 Added Card component

88e5f76

- Added card component - Added HomeVideos component - Added tests for new added components - Added/refactored styles for HomeVideo and Card component - Refactored tests for Card component

💄 🎨 Polished styles for Card component

a3c7089

testing-libraries-cleanup: ♻️ Removed unnecesary dependencies after t…

f7b8cf8

…ests refactor to comply just with react-testing-library

🍱 ♿ ♻️ Added roles to each element

e5c9eac

- Added roles to elements to improve accesibility - Refactored tests to find elements by role instead of their id

✅ ♻️ ✨ Added theming prototype

4547dca

- ✨ Added theming prototype - ✅ Added first specs to test integration with theming

🚧 ♻️ Added theme wrapper for testing purposes

436964f

♻️ 🏗️ 🚧 Components isolation

991f0b5

- Changed directory name 'Base' to 'ui', indicating that files contained here will be for general UI integration - Updated tests in Card component

♻️ ✨ ♿ ⚗️ Added VideoCards

be967d3

♻️ ♿ 🚧 Improved accesibility for Card components

7ed4920

✨ 🔥 🚚 ♻️ 🎨 🐛 ✅ Added youtube API

671b550

- Refactored code - Moved mocked files to a new folder - Mocked API calls - Created tests for custom hooks

♻️ 🎨 ✨ 🚚 Adding youtube playback iframe

233f180

- Added test for YT playback frame - Added component for youtube playback

♻️ 🐛 ✨ ✅ Added video player and video change

0fb5003

- Added SmallVideoCard component - Added RelatedVideoList component - Added styles for each new component - Added tests for each new component

✨ 🐛 🚧 Added VideoPlayer feature to return to HomeVideos on search

c1c945a

✅ 🔥 🎨 Added remaining tests for mini ch 3

d3123dc

- Removed unnecesary code from VideoPlayerContainer - Added tests to assert small captions video change - Improved code format

🔥 ♻️ ✅ Removed unnecessary ThemeContext from styled-components

510fd3a

♻️ 🔥 ✅ Added reducer for App, removed unnecessary files

cb565b0

- Added AppContext to share global context - Moved theme spec to AppContext - Moved useSearch to App.jsx component - Added appReducer for global context: AppContext - Deleted unnecessary files

🔥 ✅ Updated properties names

c7c7f5e

- Added test for useReducer, googleMockedAPIObject files - Prevented props passing from parent componenst to child componenst using context props - Reformated code on some files

🐛 ✅ Solved issues loading videos by id on iframe

bbf8b0d

🎨 💄 ✅ Added test for theme behavior for TextField and Header components

56c3147

🎨 💄 ✅ Added test for theme behavior for CardDescription and CardTitle…

bb045c2

… components

🎨 💄 ✅ Added test for theme behavior for SmallVideoCard component

9fb8e46

♻️ ✅ 🎨 Added tests for youtube search service

f3239a6

♻️ Moved generic components to higher path

6a31647

✨ ♻️ 🚧 Added routes for each feature

24ac659

✨ Added login screen

1380c53

- Added tests for loginService - Added tests for login screen - Added test for functionality to redirect to /home on successful login

cylcrow force-pushed the mini-ch-5 branch 2 times, most recently from c94c67e to 77ab3cb Compare March 29, 2021 21:10

Andrés Campos Hernández added 12 commits March 29, 2021 15:13

♻️ ⚡ 🐛 Fixed bug when videoId was updated on VideoPlayerContainer

a529834

- Added Page404 component and tests

🐛 Solved bug loading videos VideoPlayer>Home>VideoPlayer

d35c358

✨ ♻️ ✅ Added Overlay and Menu components

5a2f82a

✨ ♻️ ✅ Added Sidebar and buttons with functionality

2e93c5b

✨ ♻️ ✅ Added favorites Add/Remove feature

7de97f4

- Optimized VideoPlayerContainer to avoid re-renders on pushing on same route

✨ ♻️ ✅ Added tests and features to show UI corresponding to logged user

fb5c606

🐛 Solved issues parsing/saving data from/to localStorage/sessionStorage

b4808e1

♻️ 🔥 Moved feature to generic component

c27bcd8

♻️ 🔥 ✅ Moved VideoPlayerContainer to generic component

49e9010

✨ ♻️ ✅ Added login to a react portal

72a6c2e

✨ ♻️ ✅ Added favorites button to SmallCardCaptions

cd471e9

✨ ♻️ ✅ Added private routes

ffa05de

cylcrow force-pushed the mini-ch-5 branch 4 times, most recently from f94b608 to 5b8c5b2 Compare March 30, 2021 19:43

✨ ♻️ 🚀 Added last features

c8fff2a

- Context value passed to hide/show favorite buttons - Added routes for logged user

cylcrow force-pushed the mini-ch-5 branch from 5b8c5b2 to c8fff2a Compare March 30, 2021 20:25

jparciga reviewed Mar 31, 2021

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mini ch 5 #66

Mini ch 5 #66

cylcrow commented Mar 26, 2021 •

edited

Loading

jparciga left a comment

jparciga Mar 30, 2021

jparciga Mar 30, 2021

jparciga Mar 30, 2021

jparciga Mar 31, 2021

Mini ch 5 #66

Are you sure you want to change the base?

Mini ch 5 #66

Conversation

cylcrow commented Mar 26, 2021 • edited Loading

What this PR do?

Any background context you want to provide?

How should this be manually tested?

Screenshots

jparciga left a comment

Choose a reason for hiding this comment

Mini-Challenge 5 Feedback

Acceptance Criteria

Bonus Points

jparciga Mar 30, 2021

Choose a reason for hiding this comment

jparciga Mar 30, 2021

Choose a reason for hiding this comment

jparciga Mar 30, 2021

Choose a reason for hiding this comment

jparciga Mar 31, 2021

Choose a reason for hiding this comment

cylcrow commented Mar 26, 2021 •

edited

Loading