Update the common layout tests

packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { render, waitFor, waitForElementToBeRemoved, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
-import userEvent from '@testing-library/user-event';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ThemeProvider, lightTheme } from '@strapi/design-system';
 import { useTracking, useAppInfos } from '@strapi/helper-plugin';
@@ -55,40 +54,62 @@ const App = (
   </QueryClientProvider>
 );
 
-describe('Marketplace page', () => {
+const waitForReload = async () => {
+  await waitForElementToBeRemoved(() => screen.getByTestId('loader'));
+  await waitFor(() =>
+    expect(screen.getByRole('heading', { name: /marketplace/i })).toBeInTheDocument()
+  );
+};
+
+describe('Marketplace page - layout', () => {
   beforeAll(() => server.listen());
 
   afterEach(() => server.resetHandlers());
 
   afterAll(() => server.close());
 
-  it('renders and matches the snapshot', async () => {
-    // Check snapshot
-    const { container, getByTestId, getByRole } = render(App);
-    await waitForElementToBeRemoved(() => getByTestId('loader'));
-    await waitFor(() => expect(getByRole('heading', { name: /marketplace/i })).toBeInTheDocument());
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('sends a single tracking event when the user enters the marketplace', () => {
+  it('redners the online layout', async () => {
     const trackUsage = jest.fn();
     useTracking.mockImplementation(() => ({ trackUsage }));
-    render(App);
 
+    const { container } = render(App);
+    await waitForReload();
+    // Check snapshot
+    expect(container.firstChild).toMatchSnapshot();
+    // Calls the tracking event
     expect(trackUsage).toHaveBeenCalledWith('didGoToMarketplace');
     expect(trackUsage).toHaveBeenCalledTimes(1);
+    const offlineText = screen.queryByText('You are offline');
+    expect(offlineText).toEqual(null);
+    // Shows the sort button
+    const sortButton = screen.getByRole('button', { name: /Sort by/i });
+    expect(sortButton).toBeVisible();
+    // Shows the filters button
+    const filtersButton = screen.getByRole('button', { name: /filters/i });
+    expect(filtersButton).toBeVisible();
   });
 
-  it('handles production environment', () => {
+  it('renders the offline layout', async () => {
+    useNavigatorOnLine.mockReturnValueOnce(false);
+    render(App);
+
+    const offlineText = screen.getByText('You are offline');
+
+    expect(offlineText).toBeVisible();
+  });
+
+  it('handles production environment', async () => {
+    client.clear();
     // Simulate production environment
-    useAppInfos.mockImplementationOnce(() => ({
+    useAppInfos.mockImplementation(() => ({
       autoReload: false,
       dependencies: {},
       useYarn: true,
     }));
-    const { queryByText } = render(App);
 
+    render(App);
+
+    await waitForReload();
     // Should display notification
     expect(toggleNotification).toHaveBeenCalledWith({
       type: 'info',
@@ -98,53 +119,8 @@ describe('Marketplace page', () => {
       },
       blockTransition: true,
     });
-
     expect(toggleNotification).toHaveBeenCalledTimes(1);
-
     // Should not show install buttons
-    expect(queryByText(/copy install command/i)).not.toBeInTheDocument();
-  });
-
-  it('shows an online layout', () => {
-    render(App);
-    const offlineText = screen.queryByText('You are offline');
-
-    expect(offlineText).toEqual(null);
-  });
-
-  it('shows the offline layout', () => {
-    useNavigatorOnLine.mockReturnValueOnce(false);
-    render(App);
-    const offlineText = screen.getByText('You are offline');
-
-    expect(offlineText).toBeVisible();
-  });
-
-  it('shows the sort by menu', () => {
-    render(App);
-    const sortButton = screen.getByRole('button', { name: /Sort by/i });
-    expect(sortButton).toBeVisible();
-  });
-
-  it('shows the correct options on sort select', () => {
-    render(App);
-    const sortButton = screen.getByRole('button', { name: /Sort by/i });
-    userEvent.click(sortButton);
-
-    const alphabeticalOption = screen.getByRole('option', { name: 'Alphabetical order' });
-    const newestOption = screen.getByRole('option', { name: 'Newest' });
-
-    expect(alphabeticalOption).toBeVisible();
-    expect(newestOption).toBeVisible();
-  });
-
-  it('changes the url on sort option select', () => {
-    render(App);
-    const sortButton = screen.getByRole('button', { name: /Sort by/i });
-    userEvent.click(sortButton);
-
-    const newestOption = screen.getByRole('option', { name: 'Newest' });
-    userEvent.click(newestOption);
-    expect(history.location.search).toEqual('?sort=submissionDate:desc');
+    expect(screen.queryByText(/copy install command/i)).not.toBeInTheDocument();
   });
 });

packages/core/admin/admin/src/pages/MarketplacePage/tests/plugins.test.js

@@ -56,7 +56,7 @@ const waitForReload = async () => {
   );
 };
 
-describe('Plugins tab', () => {
+describe('Marketplace page - plugins tab', () => {
   let renderedContainer;
   let history;
 
@@ -381,4 +381,24 @@ describe('Plugins tab', () => {
     userEvent.click(screen.getByRole('tab', { name: /plugins/i }));
     expect(collectionCards.length).toBe(2);
   });
+
+  it('shows the correct options on sort select', () => {
+    const sortButton = screen.getByRole('button', { name: /Sort by/i });
+    userEvent.click(sortButton);
+
+    const alphabeticalOption = screen.getByRole('option', { name: 'Alphabetical order' });
+    const newestOption = screen.getByRole('option', { name: 'Newest' });
+
+    expect(alphabeticalOption).toBeVisible();
+    expect(newestOption).toBeVisible();
+  });
+
+  it('changes the url on sort option select', () => {
+    const sortButton = screen.getByRole('button', { name: /Sort by/i });
+    userEvent.click(sortButton);
+
+    const newestOption = screen.getByRole('option', { name: 'Newest' });
+    userEvent.click(newestOption);
+    expect(history.location.search).toEqual('?sort=submissionDate:desc');
+  });
 });

packages/core/admin/admin/src/pages/MarketplacePage/tests/providers.test.js

@@ -277,4 +277,24 @@ describe('Providers tab', () => {
     userEvent.click(screen.getByRole('tab', { name: /providers/i }));
     expect(collectionCards.length).toBe(2);
   });
+
+  it('shows the correct options on sort select', () => {
+    const sortButton = screen.getByRole('button', { name: /Sort by/i });
+    userEvent.click(sortButton);
+
+    const alphabeticalOption = screen.getByRole('option', { name: 'Alphabetical order' });
+    const newestOption = screen.getByRole('option', { name: 'Newest' });
+
+    expect(alphabeticalOption).toBeVisible();
+    expect(newestOption).toBeVisible();
+  });
+
+  it('changes the url on sort option select', () => {
+    const sortButton = screen.getByRole('button', { name: /Sort by/i });
+    userEvent.click(sortButton);
+
+    const newestOption = screen.getByRole('option', { name: 'Newest' });
+    userEvent.click(newestOption);
+    expect(history.location.search).toEqual('?npmPackageType=provider&sort=submissionDate:desc');
+  });
 });