[Component Tests] Sidebar

[tomsmith8]

Task

Write unit tests for this file src/components/App/SideBar

Boiler plate example:

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { SideBar } from './SideBar';
import * as AppStoreHooks from '~/stores/useAppStore';

jest.mock('~/stores/useAppStore');

describe('SideBar Component', () => {
  beforeEach(() => {
    AppStoreHooks.useAppStore.mockImplementation(() => [{ sidebarIsOpen: false }, jest.fn()]);
  });

  it('renders the sidebar when sidebarIsOpen is true', () => {
    AppStoreHooks.useAppStore.mockImplementation(() => [{ sidebarIsOpen: true }, jest.fn()]);
    render(<SideBar />);
    expect(screen.getByTestId('sidebar-wrapper')).toBeInTheDocument();
  });

  it('does not render the sidebar when sidebarIsOpen is false', () => {
    render(<SideBar />);
    expect(screen.queryByTestId('sidebar-wrapper')).toBeNull();
  });

  // Additional tests for search functionality, subview handling, etc.
});

Acceptance Criteria

• [ ] Verify that the sidebar is visible when sidebarIsOpen is true.
• [ ] Ensure that the sidebar is not visible when sidebarIsOpen is false.
• [ ] Test that typing into the search bar updates the search term in the application state.
• [ ] Ensure that the clear icon appears when there is a search term and clears the search on click.
• [ ] Verify that the search icon is displayed when there is no search term.
• [ ] Test that scrolling in the sidebar adds a shadow effect to the search area.
• [ ] Verify that the ClipLoader is shown when isLoading is true.
• [ ] Ensure that content (e.g., LatestView or EpisodeSkeleton) is correctly displayed based on the loading state and search term.
• [ ] Ensure that the Trending component is displayed when there is no search term.

[Ekep-Obasi]

@tomsmith8 Could you please assign ?

[tomsmith8]

@Ekep-Obasi any update on this one?

[Fog3211]

@tomsmith8 please assign it to me if Ekep give up it

[arimusdev]

@tomsmith8 assign

[Ekep-Obasi]

@tomsmith, sorry i'd a blocker which is taking me long to figure out You could assign this to anyone

[tomsmith8]

No problem, I've assigned to you @Fog3211 and increased bounty payout size

[takeontom]

@tomsmith, sorry i'd a blocker which is taking me long to figure out You could assign this to anyone

Wrong Tom Smith 🙂

[aliraza556]

Hi @Fog3211, Are you working on this issue? or Not

[Ekep-Obasi]

@Fog3211, If you're facing issues with this. Perhaps you could take a look at the test in the SidebarSubView component. If you give up, I'd love to help.

[tomsmith8]

Keep me posted @Fog3211 if you're having issues or problems let me know or I can reassign

[aliraza556]

Hi @tomsmith8, If the bounty is available, please assign it to me.

[Fog3211]

Keep me posted @Fog3211 if you're having issues or problems let me know or I can reassign

@tomsmith8 Sorry about late, It's difficult for me, please assign it to others

[jordan-ae]

@tomsmith8 i can help @Fog3211

[aliraza556]

Hi @tomsmith8, Assign me

[Ekep-Obasi]

@aliraza556, this issue is overdue Are you working on this or not?

@tomsmith8, I figured out my blocker, if @aliraza556 is facing issues I can get a PR for this today

[tomsmith8]

I will reassign shortly unless Ali has a PR ready. Thanks @Ekep-Obasi

[aliraza556]

Ok @tomsmith8, Assign to @Ekep-Obasi

[Ekep-Obasi]

@tomsmith8, react-testing-library is not meant for these kind of use cases in test 6, since it involves scrolling

• [ ] Test that scrolling in the sidebar adds a shadow effect to the search area. // <-- 6

I'd leave it out