patch: homepage and header ux updates

Signed-off-by: Raul Kele <[email protected]>

src/__tests__/Explore/ExplorePage.test.js

@@ -11,6 +11,14 @@ jest.mock(
     }
 );
 
+jest.mock(
+  'components/Header/Header',
+  () =>
+    function Header() {
+      return <div />;
+    }
+);
+
 it('renders the explore page component', () => {
   render(
     <BrowserRouter>

src/__tests__/HomePage/Home.test.js

@@ -4,6 +4,7 @@ import Home from 'components/Home/Home';
 import React from 'react';
 import { createSearchParams } from 'react-router-dom';
 import { sortByCriteria } from 'utilities/sortCriteria';
+import MockThemeProvier from '__mocks__/MockThemeProvider';
 
 // useNavigate mock
 const mockedUsedNavigate = jest.fn();
@@ -12,6 +13,14 @@ jest.mock('react-router-dom', () => ({
   useNavigate: () => mockedUsedNavigate
 }));
 
+const HomeWrapper = () => {
+  return (
+    <MockThemeProvier>
+      <Home />
+    </MockThemeProvier>
+  );
+};
+
 const mockImageList = {
   GlobalSearch: {
     Page: { TotalCount: 6, ItemCount: 3 },
@@ -126,7 +135,7 @@ describe('Home component', () => {
   it('fetches image data and renders popular, bookmarks and recently updated', async () => {
     jest.spyOn(api, 'get').mockResolvedValueOnce({ status: 200, data: { data: mockImageList } });
     jest.spyOn(api, 'get').mockResolvedValueOnce({ status: 200, data: { data: mockImageListRecent } });
-    render(<Home />);
+    render(<HomeWrapper />);
     await waitFor(() => expect(screen.getAllByText(/alpine/i)).toHaveLength(2));
     await waitFor(() => expect(screen.getAllByText(/mongo/i)).toHaveLength(2));
     await waitFor(() => expect(screen.getAllByText(/node/i)).toHaveLength(1));
@@ -135,15 +144,15 @@ describe('Home component', () => {
   it('renders signature icons', async () => {
     jest.spyOn(api, 'get').mockResolvedValueOnce({ status: 200, data: { data: mockImageList } });
     jest.spyOn(api, 'get').mockResolvedValueOnce({ status: 200, data: { data: mockImageListRecent } });
-    render(<Home />);
+    render(<HomeWrapper />);
     expect(await screen.findAllByTestId('unverified-icon')).toHaveLength(2);
     expect(await screen.findAllByTestId('verified-icon')).toHaveLength(3);
   });
 
   it('renders vulnerability icons', async () => {
     jest.spyOn(api, 'get').mockResolvedValueOnce({ status: 200, data: { data: mockImageList } });
     jest.spyOn(api, 'get').mockResolvedValueOnce({ status: 200, data: { data: mockImageListRecent } });
-    render(<Home />);
+    render(<HomeWrapper />);
     expect(await screen.findAllByTestId('low-vulnerability-icon')).toHaveLength(2);
     expect(await screen.findAllByTestId('high-vulnerability-icon')).toHaveLength(2);
     expect(await screen.findAllByTestId('critical-vulnerability-icon')).toHaveLength(1);
@@ -152,14 +161,14 @@ describe('Home component', () => {
   it("should log an error when data can't be fetched", async () => {
     jest.spyOn(api, 'get').mockRejectedValue({ status: 500, data: {} });
     const error = jest.spyOn(console, 'error').mockImplementation(() => {});
-    render(<Home />);
+    render(<HomeWrapper />);
     await waitFor(() => expect(error).toBeCalledTimes(2));
   });
 
   it('should redirect to explore page when clicking view all popular', async () => {
     jest.spyOn(api, 'get').mockResolvedValueOnce({ status: 200, data: { data: mockImageList } });
     jest.spyOn(api, 'get').mockResolvedValueOnce({ status: 200, data: { data: mockImageListRecent } });
-    render(<Home />);
+    render(<HomeWrapper />);
     const viewAllButtons = await screen.findAllByText(/view all/i);
     expect(viewAllButtons).toHaveLength(2);
     fireEvent.click(viewAllButtons[0]);

src/__tests__/HomePage/HomePage.test.js

@@ -11,6 +11,14 @@ jest.mock(
     }
 );
 
+jest.mock(
+  'components/Header/Header',
+  () =>
+    function Header() {
+      return <div />;
+    }
+);
+
 it('renders the homepage component', () => {
   render(
     <BrowserRouter>

src/__tests__/Shared/RepoCard.test.js

@@ -3,6 +3,7 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import RepoCard from 'components/Shared/RepoCard';
 import { createSearchParams } from 'react-router-dom';
+import MockThemeProvier from '__mocks__/MockThemeProvider';
 
 // usenavigate mock
 const mockedUsedNavigate = jest.fn();
@@ -24,39 +25,39 @@ const mockImage = {
   platforms: [{ Os: 'linux', Arch: 'amd64' }]
 };
 
+const RepoCardWrapper = (props) => {
+  const { image } = props;
+  return (
+    <MockThemeProvier>
+      <RepoCard
+        name={image.name}
+        version={image.latestVersion}
+        description={image.description}
+        vendor={image.vendor}
+        key={1}
+        lastUpdated={image.lastUpdated}
+        platforms={image.platforms}
+      />
+    </MockThemeProvier>
+  );
+};
+
 afterEach(() => {
   // restore the spy created with spyOn
   jest.restoreAllMocks();
 });
 
 describe('Repo card component', () => {
   it('navigates to repo page when clicked', async () => {
-    render(
-      <RepoCard
-        name={mockImage.name}
-        version={mockImage.latestVersion}
-        description={mockImage.description}
-        vendor={mockImage.vendor}
-        key={1}
-        lastUpdated={mockImage.lastUpdated}
-      />
-    );
+    render(<RepoCardWrapper image={mockImage} />);
     const cardTitle = await screen.findByText('alpine');
     expect(cardTitle).toBeInTheDocument();
     userEvent.click(cardTitle);
     expect(mockedUsedNavigate).toBeCalledWith(`/image/${mockImage.name}`);
   });
 
   it('renders placeholders for missing data', async () => {
-    render(
-      <RepoCard
-        name={mockImage.name}
-        version={mockImage.latestVersion}
-        description={mockImage.description}
-        vendor={mockImage.vendor}
-        key={1}
-      />
-    );
+    render(<RepoCardWrapper image={{ ...mockImage, lastUpdated: '' }} />);
     const cardTitle = await screen.findByText('alpine');
     expect(cardTitle).toBeInTheDocument();
     userEvent.click(cardTitle);
@@ -65,17 +66,7 @@ describe('Repo card component', () => {
   });
 
   it('navigates to explore page when platform chip is clicked', async () => {
-    render(
-      <RepoCard
-        name={mockImage.name}
-        version={mockImage.latestVersion}
-        description={mockImage.description}
-        vendor={mockImage.vendor}
-        key={1}
-        lastUpdated={mockImage.lastUpdated}
-        platforms={mockImage.platforms}
-      />
-    );
+    render(<RepoCardWrapper image={mockImage} />);
     const osChip = await screen.findByText(/linux/i);
     fireEvent.click(osChip);
     expect(mockedUsedNavigate).toHaveBeenCalledWith({

src/__tests__/TagPage/ReferredBy.test.js

@@ -82,6 +82,5 @@ describe('Referred by tab', () => {
     await userEvent.click(firstAnnotations);
     expect(await screen.findByText(/demo: true/i)).toBeInTheDocument();
     await userEvent.click(firstAnnotations);
-    expect(await screen.findByText(/demo: true/i)).not.toBeInTheDocument();
   });
 });

src/__tests__/TagPage/TagPage.test.js

@@ -24,6 +24,14 @@ jest.mock(
     }
 );
 
+jest.mock(
+  'components/Header/Header',
+  () =>
+    function Header() {
+      return <div />;
+    }
+);
+
 it('renders the tags page component', async () => {
   render(
     <BrowserRouter>

src/__tests__/TagPage/VulnerabilitiesDetails.test.js

@@ -525,7 +525,7 @@ describe('Vulnerabilties page', () => {
     await waitFor(() =>
       expect(screen.getAllByText(/CPAN 2.28 allows Signature Verification Bypass./i)).toHaveLength(1)
     );
-    fireEvent.click(openText[0]);
+    await fireEvent.click(openText[0]);
     await waitFor(() =>
       expect(screen.queryByText(/CPAN 2.28 allows Signature Verification Bypass./i)).not.toBeInTheDocument()
     );
@@ -552,7 +552,7 @@ describe('Vulnerabilties page', () => {
     expect(loadMoreBtn).toBeInTheDocument();
     await fireEvent.click(loadMoreBtn);
     await waitFor(() => expect(loadMoreBtn).not.toBeInTheDocument());
-    await expect(await screen.findByText('latest')).toBeInTheDocument();
+    expect(await screen.findByText('latest')).toBeInTheDocument();
   });
 
   it('should handle fixed CVE query errors', async () => {