feat(project): deps update

package.json

@@ -6,7 +6,7 @@
   "author": "JW Player",
   "private": true,
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=18.13.0"
   },
   "scripts": {
     "prepare": "husky install",
@@ -71,9 +71,8 @@
     "@codeceptjs/configure": "^0.8.0",
     "@commitlint/cli": "^12.1.1",
     "@commitlint/config-conventional": "^12.1.1",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
     "@types/dompurify": "^2.3.4",
     "@types/ini": "^1.3.31",
     "@types/jwplayer": "^8.2.13",
@@ -88,7 +87,7 @@
     "@types/react-infinite-scroller": "^1.2.3",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",
-    "@vitejs/plugin-react": "^1.0.7",
+    "@vitejs/plugin-react": "^4.0.4",
     "@vitest/coverage-v8": "^0.33.0",
     "allure-commandline": "^2.17.2",
     "codeceptjs": "3.4.1",
@@ -103,7 +102,7 @@
     "faker": "^5.5.1",
     "husky": "^6.0.0",
     "i18next-parser": "^8.0.0",
-    "jsdom": "^19.0.0",
+    "jsdom": "^22.1.0",
     "lint-staged": "^10.5.4",
     "luxon": "^3.2.1",
     "npm-run-all": "^4.1.5",
@@ -125,13 +124,13 @@
     "tsconfig-paths": "^4.1.0",
     "typescript": "^4.3.4",
     "vi-fetch": "^0.8.0",
-    "vite": "^4.4.0",
+    "vite": "^4.4.8",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-pwa": "^0.14.0",
-    "vite-plugin-static-copy": "^0.13.0",
-    "vite-plugin-stylelint": "^4.0.1",
-    "vitest": "^0.32.3",
+    "vite-plugin-static-copy": "^0.17.0",
+    "vite-plugin-stylelint": "^4.3.0",
+    "vitest": "^0.34.1",
     "workbox-build": "^6.5.4",
     "workbox-window": "^6.5.4"
   },

src/components/Epg/Epg.tsx

@@ -39,13 +39,13 @@ export default function Epg({ channels, onChannelClick, onProgramClick, channel,
 
   // Epg
   const { highlightColor, backgroundColor } = config.styling;
-  const { getEpgProps, getLayoutProps, onScrollToNow, onScrollLeft, onScrollRight } = usePlanByEpg(
+  const { getEpgProps, getLayoutProps, onScrollToNow, onScrollLeft, onScrollRight } = usePlanByEpg({
     channels,
     sidebarWidth,
     itemHeight,
     highlightColor,
     backgroundColor,
-  );
+  });
   const catchupHoursDict = useMemo(() => Object.fromEntries(channels.map((channel) => [channel.id, channel.catchupHours])), [channels]);
 
   return (

src/components/LanguageMenu/LanguageMenu.test.tsx

@@ -28,8 +28,8 @@ describe('<LanguageMenu>', () => {
     const currentLanguage = languages[1];
     const { queryByText } = renderWithRouter(<LanguageMenu languages={languages} currentLanguage={currentLanguage} onClick={() => undefined} />);
 
-    expect(queryByText('English')).toBeInTheDOM();
-    expect(queryByText('español')).toBeInTheDOM();
+    expect(queryByText('English')).toBeInTheDocument();
+    expect(queryByText('español')).toBeInTheDocument();
   });
 
   test('renders languages and calls the onClick callback with the correct language code', () => {

src/components/LoginForm/LoginForm.test.tsx

@@ -1,13 +1,41 @@
 import React from 'react';
-import { fireEvent } from '@testing-library/react';
+import { fireEvent, act, render } from '@testing-library/react';
 
 import LoginForm from './LoginForm';
 
-import { renderWithRouter } from '#test/testUtils';
+import { createWrapper, waitForWithFakeTimers } from '#test/testUtils';
+
+vi.mock('../SocialButton/SocialButton.tsx', () => ({
+  default: (props: { href: string }) => {
+    return <a href={props.href}>Social Button</a>;
+  },
+}));
+
+vi.mock('#src/stores/AccountController', async () => ({
+  getSocialLoginUrls: vi.fn(() => [
+    {
+      twitter: 'https://staging-v2.inplayer.com/',
+    },
+    {
+      facebook: 'https://www.facebook.com/',
+    },
+    {
+      google: 'https://accounts.google.com/',
+    },
+  ]),
+}));
 
 describe('<LoginForm>', () => {
-  test('renders and matches snapshot', () => {
-    const { container } = renderWithRouter(
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test('renders and matches snapshot', async () => {
+    const { container } = render(
       <LoginForm
         onSubmit={vi.fn()}
         onChange={vi.fn()}
@@ -18,13 +46,16 @@ describe('<LoginForm>', () => {
         errors={{}}
         submitting={false}
       />,
+      { wrapper: createWrapper() },
     );
 
+    await waitForWithFakeTimers();
+
     expect(container).toMatchSnapshot();
   });
 
-  test('sets the correct values in the form fields', () => {
-    const { getByLabelText } = renderWithRouter(
+  test('sets the correct values in the form fields', async () => {
+    const { getByLabelText } = render(
       <LoginForm
         onSubmit={vi.fn()}
         onChange={vi.fn()}
@@ -35,14 +66,17 @@ describe('<LoginForm>', () => {
         errors={{}}
         submitting={false}
       />,
+      { wrapper: createWrapper() },
     );
 
+    await waitForWithFakeTimers();
+
     expect(getByLabelText('login.email')).toHaveValue('[email protected]');
     expect(getByLabelText('login.password')).toHaveValue('mypassword');
   });
 
-  test('sets the correct errors in the form fields', () => {
-    const { queryByText } = renderWithRouter(
+  test('sets the correct errors in the form fields', async () => {
+    const { queryByText } = render(
       <LoginForm
         onSubmit={vi.fn()}
         onChange={vi.fn()}
@@ -53,15 +87,18 @@ describe('<LoginForm>', () => {
         errors={{ email: 'Email error', password: 'Password error', form: 'Form error' }}
         submitting={false}
       />,
+      { wrapper: createWrapper() },
     );
 
+    await waitForWithFakeTimers();
+
     expect(queryByText('Email error')).toBeDefined();
     expect(queryByText('Password error')).toBeDefined();
     expect(queryByText('Form error')).toBeDefined();
   });
 
-  test('disables the submit button when submitting is true', () => {
-    const { getByRole } = renderWithRouter(
+  test('disables the submit button when submitting is true', async () => {
+    const { getByRole } = render(
       <LoginForm
         onSubmit={vi.fn()}
         onChange={vi.fn()}
@@ -72,14 +109,18 @@ describe('<LoginForm>', () => {
         errors={{}}
         submitting={true}
       />,
+      { wrapper: createWrapper() },
     );
 
+    await waitForWithFakeTimers();
+
     expect(getByRole('button', { name: 'login.sign_in' })).toBeDisabled();
   });
 
-  test('calls the onSubmit callback when the form gets submitted', () => {
+  test('calls the onSubmit callback when the form gets submitted', async () => {
     const onSubmit = vi.fn();
-    const { getByTestId } = renderWithRouter(
+
+    const { getByTestId } = render(
       <LoginForm
         onSubmit={onSubmit}
         onChange={vi.fn()}
@@ -90,16 +131,22 @@ describe('<LoginForm>', () => {
         errors={{}}
         submitting={true}
       />,
+      { wrapper: createWrapper() },
     );
 
-    fireEvent.submit(getByTestId('login-form'));
+    act(() => {
+      fireEvent.submit(getByTestId('login-form'));
+    });
+
+    await waitForWithFakeTimers();
 
     expect(onSubmit).toBeCalled();
   });
 
-  test('calls the onChange callback when a text field changes', () => {
+  test('calls the onChange callback when a text field changes', async () => {
     const onChange = vi.fn();
-    const { getByLabelText } = renderWithRouter(
+
+    const { getByLabelText } = render(
       <LoginForm
         onSubmit={vi.fn()}
         onChange={onChange}
@@ -110,10 +157,15 @@ describe('<LoginForm>', () => {
         errors={{}}
         submitting={true}
       />,
+      { wrapper: createWrapper() },
     );
 
-    fireEvent.change(getByLabelText('login.email'), { target: { value: 'email' } });
-    fireEvent.change(getByLabelText('login.password'), { target: { value: 'password' } });
+    act(() => {
+      fireEvent.change(getByLabelText('login.email'), { target: { value: 'email' } });
+      fireEvent.change(getByLabelText('login.password'), { target: { value: 'password' } });
+    });
+
+    await waitForWithFakeTimers();
 
     expect(onChange).toBeCalledTimes(2);
   });

src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap

@@ -6,6 +6,25 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
     data-testid="login-form"
     novalidate=""
   >
+    <div
+      class="_socialButtonsListContainer_313d0d"
+    >
+      <a
+        href="https://staging-v2.inplayer.com/"
+      >
+        Social Button
+      </a>
+      <a
+        href="https://www.facebook.com/"
+      >
+        Social Button
+      </a>
+      <a
+        href="https://accounts.google.com/"
+      >
+        Social Button
+      </a>
+    </div>
     <h2
       class="_title_7bd5f4"
     >

src/components/TileDock/TileDock.tsx

@@ -48,9 +48,11 @@ const sliceItems = <T,>(items: T[], isMultiPage: boolean, index: number, tilesTo
 
   const sliceFrom: number = index;
   const sliceTo: number = index + tilesToShow * 3;
+
   const cycleModeEndlessCompensation: number = cycleMode === 'endless' ? tilesToShow : 0;
   const listStartClone: T[] = items.slice(0, tilesToShow + cycleModeEndlessCompensation + 1);
   const listEndClone: T[] = items.slice(0 - (tilesToShow + cycleModeEndlessCompensation + 1));
+
   const itemsWithClones: T[] = [...listEndClone, ...items, ...listStartClone];
   const itemsSlice: T[] = itemsWithClones.slice(sliceFrom, sliceTo + 2);