Feat/mini challenge 5

[lesliedayann]

No description provided.

[ghost]

  useLayoutEffect(() => {
    const page = mainPage.current;

    function rotateBackground() {
      const xPercent = random(100);
      const yPercent = random(100);
      page.style.setProperty('--bg-position', `${xPercent}% ${yPercent}%`);
    }
    const intervalId = setInterval(rotateBackground, 3000);
    page.addEventListener('click', rotateBackground);

    return () => {
      clearInterval(intervalId);
      page.removeEventListener('click', rotateBackground);
    };
  }, []);

Good logic, it's ok. Try to abstract this as a way of separate this logic from the component

[ghost]

It's ok, but why enzyme and not testing library?

This should be done with testing library.

[ghost]

const loginResult = loginApi(username, password);
    loginResult
      .then((data) => {
        setErrorSession(false);
        setSessionData(data.id, data.username);
        handleClose();
      })
      .catch(() => {
        setErrorSession(true);
      });

It's ok. You can use async await in order to resolve the promise as well inside of a try catch block, and the code will be more readable

[ghost]

It's not recommended to mix enzyme and testing library utilities on the same test. It could works, but for a developer that is not familiarized with the code, there will be some "wtf" expressions (difficult to understand what is happend)

[ghost]

wrapper = render(
      <AppProvider>
        <BrowserRouter>
          <RelatedVideo
            currentVideoId="nmXMgqjQzls"
            videos={{ items: videoData }}
            path="video"
          />
        </BrowserRouter>
      </AppProvider>
    );

If you are duplicating this code (the Providers and Router wrappers) in other tests, try to figure it out how to encapsulate or abstract that logic and reuse it

[ghost]

Check this way of test the alt value: https://github.com/testing-library/jest-dom#tohaveaccessiblename

[ghost]

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
• 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).

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.