diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/EmptyNpmPackageSearch/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/EmptyNpmPackageSearch/index.js index 9ee608e02d..8f0aef1f5f 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/components/EmptyNpmPackageSearch/index.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/EmptyNpmPackageSearch/index.js @@ -8,7 +8,7 @@ import { EmptyNpmPackageGrid } from './EmptyNpmPackageGrid'; const EmptyNpmPackageSearch = ({ content }) => { return ( - + diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js index 082d5aac47..a12c021367 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js @@ -50,7 +50,6 @@ const NpmPackagesFilters = ({ } onClick={handleToggle} size="S" diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesGrid/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesGrid/index.js index 633402b4a1..c70953b8d0 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesGrid/index.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesGrid/index.js @@ -49,7 +49,7 @@ const NpmPackagesGrid = ({ } return ( - + {npmPackages.map((npmPackage) => ( svg { - height: 12px; - width: 12px; -} - -.c13 > svg > g, -.c13 > svg path { - fill: #ffffff; -} - -.c13[aria-disabled='true'] { - pointer-events: none; -} - -.c13:after { - -webkit-transition-property: all; - transition-property: all; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; - border-radius: 8px; - content: ''; - position: absolute; - top: -4px; - bottom: -4px; - left: -4px; - right: -4px; - border: 2px solid transparent; -} - -.c13:focus-visible { - outline: none; -} - -.c13:focus-visible:after { - border-radius: 8px; - content: ''; - position: absolute; - top: -5px; - bottom: -5px; - left: -5px; - right: -5px; - border: 2px solid #4945ff; -} - -.c50 { - height: 2rem; - border: 1px solid #dcdce4; - background: #ffffff; -} - -.c50 svg { - height: 0.75rem; - width: auto; -} - -.c50[aria-disabled='true'] { - border: 1px solid #dcdce4; - background: #eaeaef; -} - -.c50[aria-disabled='true'] .c8 { - color: #666687; -} - -.c50[aria-disabled='true'] svg > g, -.c50[aria-disabled='true'] svg path { - fill: #666687; -} - -.c50[aria-disabled='true']:active { - border: 1px solid #dcdce4; - background: #eaeaef; -} - -.c50[aria-disabled='true']:active .c8 { - color: #666687; -} - -.c50[aria-disabled='true']:active svg > g, -.c50[aria-disabled='true']:active svg path { - fill: #666687; -} - -.c50:hover { - background-color: #f6f6f9; -} - -.c50:active { - background-color: #eaeaef; -} - -.c50 .c8 { - color: #32324d; -} - -.c50 svg > g, -.c50 svg path { - fill: #32324d; -} - -.c73 { - height: 2rem; - border: 1px solid #d9d8ff; - background: #f0f0ff; -} - -.c73 svg { - height: 0.75rem; - width: auto; -} - -.c73[aria-disabled='true'] { - border: 1px solid #dcdce4; - background: #eaeaef; -} - -.c73[aria-disabled='true'] .c8 { - color: #666687; -} - -.c73[aria-disabled='true'] svg > g, -.c73[aria-disabled='true'] svg path { - fill: #666687; -} - -.c73[aria-disabled='true']:active { - border: 1px solid #dcdce4; - background: #eaeaef; -} - -.c73[aria-disabled='true']:active .c8 { - color: #666687; -} - -.c73[aria-disabled='true']:active svg > g, -.c73[aria-disabled='true']:active svg path { - fill: #666687; -} - -.c73:hover { - background-color: #ffffff; -} - -.c73:active { - background-color: #ffffff; - border: 1px solid #4945ff; -} - -.c73:active .c8 { - color: #4945ff; -} - -.c73:active svg > g, -.c73:active svg path { - fill: #4945ff; -} - -.c73 .c8 { - color: #271fe0; -} - -.c73 svg > g, -.c73 svg path { - fill: #271fe0; -} - -.c29 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c41 { - border: 1px solid #dcdce4; - min-height: 2rem; - outline: none; - box-shadow: 0; - -webkit-transition-property: border-color,box-shadow,fill; - transition-property: border-color,box-shadow,fill; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; -} - -.c41[aria-disabled='true'] { - color: #666687; -} - -.c41:focus-visible { - outline: none; -} - -.c41:focus-within { - border: 1px solid #4945ff; - box-shadow: #4945ff 0px 0px 0px 2px; -} - -.c47 > svg { - width: 0.375rem; -} - -.c47 > svg > path { - fill: #666687; -} - -.c45 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; -} - -.c46 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - gap: 4px; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} - -.c97[data-state='checked'] .c8 { - font-weight: bold; - color: #4945ff; -} - -.c65 { - height: 1px; - border: none; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.c35 { - border: none; - border-radius: 4px; - padding-bottom: 0.65625rem; - padding-left: 0; - padding-right: 16px; - padding-top: 0.65625rem; - color: #32324d; - font-weight: 400; - font-size: 0.875rem; - display: block; - width: 100%; - background: inherit; -} - -.c35::-webkit-input-placeholder { - color: #8e8ea9; - opacity: 1; -} - -.c35::-moz-placeholder { - color: #8e8ea9; - opacity: 1; -} - -.c35:-ms-input-placeholder { - color: #8e8ea9; - opacity: 1; -} - -.c35::placeholder { - color: #8e8ea9; - opacity: 1; -} - -.c35[aria-disabled='true'] { - color: inherit; -} - -.c35:focus { - outline: none; - box-shadow: none; -} - -.c31 { - border: 1px solid #dcdce4; - border-radius: 4px; - background: #ffffff; - outline: none; - box-shadow: 0; - -webkit-transition-property: border-color,box-shadow,fill; - transition-property: border-color,box-shadow,fill; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; -} - -.c31:focus-within { - border: 1px solid #4945ff; - box-shadow: #4945ff 0px 0px 0px 2px; -} - -.c52 { - display: grid; - grid-template-columns: repeat(12,1fr); - gap: 16px; -} - -.c53 { - grid-column: span 4; - max-width: 100%; -} - -.c0 { - display: grid; - grid-template-columns: 1fr; -} - -.c2 { - overflow-x: hidden; -} - -.c3:focus-visible { - outline: none; -} - -.c81 { - padding: 12px; - border-radius: 4px; - -webkit-text-decoration: none; - text-decoration: none; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - outline: none; -} - -.c81:after { - -webkit-transition-property: all; - transition-property: all; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; - border-radius: 8px; - content: ''; - position: absolute; - top: -4px; - bottom: -4px; - left: -4px; - right: -4px; - border: 2px solid transparent; -} - -.c81:focus-visible { - outline: none; -} - -.c81:focus-visible:after { - border-radius: 8px; - content: ''; - position: absolute; - top: -5px; - bottom: -5px; - left: -5px; - right: -5px; - border: 2px solid #4945ff; -} - -.c83 { - padding: 12px; - border-radius: 4px; - box-shadow: 0px 1px 4px rgba(33,33,52,0.1); - -webkit-text-decoration: none; - text-decoration: none; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - outline: none; -} - -.c83:after { - -webkit-transition-property: all; - transition-property: all; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; - border-radius: 8px; - content: ''; - position: absolute; - top: -4px; - bottom: -4px; - left: -4px; - right: -4px; - border: 2px solid transparent; -} - -.c83:focus-visible { - outline: none; -} - -.c83:focus-visible:after { - border-radius: 8px; - content: ''; - position: absolute; - top: -5px; - bottom: -5px; - left: -5px; - right: -5px; - border: 2px solid #4945ff; -} - -.c84 { - color: #271fe0; - background: #ffffff; -} - -.c84:hover { - box-shadow: 0px 1px 4px rgba(33,33,52,0.1); -} - -.c86 { - color: #32324d; -} - -.c86:hover { - box-shadow: 0px 1px 4px rgba(33,33,52,0.1); -} - -.c82 { - font-size: 0.6875rem; - pointer-events: none; -} - -.c82 svg path { - fill: #c0c0cf; -} - -.c82:focus svg path, -.c82:hover svg path { - fill: #c0c0cf; -} - -.c88 { - font-size: 0.6875rem; -} - -.c88 svg path { - fill: #666687; -} - -.c88:focus svg path, -.c88:hover svg path { - fill: #4a4a6a; -} - -.c34 { - font-size: 0.8rem; -} - -.c34 path { - fill: #32324d; -} - -.c26 { - border-radius: 4px; - box-shadow: 0px 1px 4px rgba(33,33,52,0.1); - outline: none; - box-shadow: 0; - -webkit-transition-property: border-color,box-shadow,fill; - transition-property: border-color,box-shadow,fill; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; -} - -.c26:focus-within .c33 path { - fill: #4945ff; -} - -.c26 .c30 { - border: 1px solid transparent; -} - -.c26 .c30:focus-within { - border: 1px solid #4945ff; - box-shadow: #4945ff 0px 0px 0px 2px; -} - -.c21 { - border-bottom: 2px solid #4945ff; -} - -.c23 { - border-bottom: 2px solid transparent; -} - -.c19[aria-disabled='true'] { - cursor: not-allowed; -} - -.c14 { - -webkit-text-decoration: none; - text-decoration: none; - border: 1px solid #dcdce4; - background: #ffffff; -} - -.c14[aria-disabled='true'] { - border: 1px solid #dcdce4; - background: #eaeaef; -} - -.c14[aria-disabled='true'] .c8 { - color: #666687; -} - -.c14[aria-disabled='true'] svg > g, -.c14[aria-disabled='true'] svg path { - fill: #666687; -} - -.c14[aria-disabled='true']:active { - border: 1px solid #dcdce4; - background: #eaeaef; -} - -.c14[aria-disabled='true']:active .c8 { - color: #666687; -} - -.c14[aria-disabled='true']:active svg > g, -.c14[aria-disabled='true']:active svg path { - fill: #666687; -} - -.c14:hover { - background-color: #f6f6f9; -} - -.c14:active { - background-color: #eaeaef; -} - -.c14 .c8 { - color: #32324d; -} - -.c14 svg > g, -.c14 svg path { - fill: #32324d; -} - -.c92 { - margin-right: 24px; -} - -.c92 svg { - width: 2rem; - height: 2rem; -} - -.c95 { - word-break: break-all; -} - -.c51 { - height: 2rem; -} - -.c66 { - width: 0.75rem; - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); -} - -.c71 { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; -} - -.c37 { - font-weight: 500; -} - -.c37 span { - font-size: 0.75rem; -} - -.c37 label { - border: 0; - -webkit-clip: rect(0 0 0 0); - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -@media (max-width:68.75rem) { - .c53 { - grid-column: span 6; - } -} - -@media (max-width:34.375rem) { - .c53 { - grid-column: span 12; - } -} - -
-
-
-
-
-
-
-

- Marketplace -

-
- - - - Submit plugin - - -
-

- Get more out of Strapi -

-
-
-
-
-
-
- - -
-
-
-
-
- -
-
-
- -
- -
-
-
-
-
-
-
-
-
- - -
-
-
-
- -
-
-
-
-
-
-
-
-
- Comments logo -
- - -

- - 323 - -

-
- -

- - 1123 - -

-
-
-
-

-
- Comments -
-

-
-
-

- Powerful Strapi based comments moderation tool for you and your users -

-
-
-
- - - More - - - - -
-
-
-
-
-
-
- Config Sync logo -
- -

- - 0 - -

-
-
-
-

-
- Config Sync - -
- - - -
- -
-

-
-
-

- Migrate your config data across environments using the CLI or Strapi admin panel. -

-
-
-
- - - More - - - - -
- -
- -
-
-
-
-
-
-
- Content Versioning logo -
- -

- - 0 - -

-
-
-
-

-
- Content Versioning -
-

-
-
-

- This plugin enables you to versioning Content Types. It allows multiple draft versions✅ Keeps history of all changes (with time travel) ✅ -

-
-
-
- - - More - - - - -
- -
- -
-
-
-
-
-
-
- Documentation logo -
- - -

- - 49130 - -

-
- -

- - 7492 - -

-
-
-
-

-
- Documentation - -
- Made by Strapi -
- -
-

-
-
-

- Create an OpenAPI Document and visualize your API with SWAGGER UI -

-
-
-
- - - More - - - -
- - - - - Installed - -
-
-
-
-
-
-
-
- Transformer logo -
- -

- - 0 - -

-
-
-
-

-
- Transformer -
-

-
-
-

- A plugin for Strapi Headless CMS that provides the ability to transform the API response. -

-
-
-
- - - More - - - - -
- -
- -
-
-
-
-
-
-
-
-
-
-
-
- -
-
- - Entries per page - -
- -
-
-
- -
-
- - - - -
-
-
- - Documentation - - - - -
- - Tell us what plugin you are looking for and we'll let our community plugin developers know in case they are in search for inspiration! - -
-
- -
-
-
-
-
-`; diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js b/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js index f68aa44398..a76c2b65e4 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js @@ -1,33 +1,22 @@ import React from 'react'; -import { fixtures } from '@strapi/admin-test-utils'; import { lightTheme, ThemeProvider } from '@strapi/design-system'; -import { TrackingProvider, useAppInfo, useTracking } from '@strapi/helper-plugin'; -import { fireEvent, render, screen, within } from '@testing-library/react'; +import { NotificationsProvider, useAppInfo, useTracking } from '@strapi/helper-plugin'; +import { fireEvent, render as renderRTL, screen, waitFor, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { createMemoryHistory } from 'history'; import { IntlProvider } from 'react-intl'; import { QueryClient, QueryClientProvider } from 'react-query'; -import { Provider } from 'react-redux'; -import { Router } from 'react-router-dom'; -import { createStore } from 'redux'; +import { MemoryRouter } from 'react-router-dom'; -import useNavigatorOnLine from '../../../hooks/useNavigatorOnLine'; -import MarketPlacePage from '../index'; +import { MarketPlacePage } from '../index'; import server from './server'; -const toggleNotification = jest.fn(); - jest.mock('../../../hooks/useNavigatorOnLine', () => jest.fn(() => true)); jest.mock('@strapi/helper-plugin', () => ({ ...jest.requireActual('@strapi/helper-plugin'), useTracking: jest.fn(() => ({ trackUsage: jest.fn() })), - useNotification: jest.fn(() => { - return toggleNotification; - }), - CheckPagePermissions: ({ children }) => children, useAppInfo: jest.fn(() => ({ autoReload: true, dependencies: { @@ -39,10 +28,9 @@ jest.mock('@strapi/helper-plugin', () => ({ })), })); -const setup = (props) => ({ - ...render(, { +const render = (props) => ({ + ...renderRTL(, { wrapper({ children }) { - const history = createMemoryHistory(); const client = new QueryClient({ defaultOptions: { queries: { @@ -52,30 +40,23 @@ const setup = (props) => ({ }); return ( - state, { - admin_app: { permissions: fixtures.permissions.app }, - })} - > - - - - - {children} - - - - - + + + + + {children} + + + + ); }, }), - user: userEvent.setup(), }); const waitForReload = async () => { - await screen.findByTestId('marketplace-results'); + await waitFor(() => expect(screen.queryByText('Loading content...')).not.toBeInTheDocument()); }; describe('Marketplace page - layout', () => { @@ -91,34 +72,21 @@ describe('Marketplace page - layout', () => { const trackUsage = jest.fn(); useTracking.mockImplementationOnce(() => ({ trackUsage })); - const { container } = setup(); + const { queryByText, getByRole } = render(); 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); + + expect(queryByText('You are offline')).toEqual(null); // Shows the sort button - const sortButton = screen.getByRole('combobox', { name: /Sort by/i }); - expect(sortButton).toBeVisible(); + expect(getByRole('combobox', { name: /Sort by/i })).toBeVisible(); // Shows the filters button - const filtersButton = screen.getByText(/Filters/i).closest('button'); - expect(filtersButton).toBeVisible(); - }); - - it('renders the offline layout', async () => { - useNavigatorOnLine.mockReturnValueOnce(false); - const { getByText } = setup(); - - const offlineText = getByText('You are offline'); - - expect(offlineText).toBeVisible(); + expect(getByRole('button', { name: 'Filters' })).toBeVisible(); }); it('disables the button and shows compatibility tooltip message when version provided', async () => { - const { findByTestId, findAllByTestId } = setup(); + const { findByTestId, findAllByTestId } = render(); const alreadyInstalledCard = (await findAllByTestId('npm-package-card')).find((div) => div.innerHTML.includes('Transformer') @@ -137,7 +105,7 @@ describe('Marketplace page - layout', () => { }); it('shows compatibility tooltip message when no version provided', async () => { - const { findByTestId, findAllByTestId, user } = setup(); + const { findByTestId, findAllByTestId, user } = render(); const alreadyInstalledCard = (await findAllByTestId('npm-package-card')).find((div) => div.innerHTML.includes('Config Sync') @@ -147,7 +115,7 @@ describe('Marketplace page - layout', () => { .getByText(/copy install command/i) .closest('button'); - user.hover(button); + await user.hover(button); const tooltip = await findByTestId(`tooltip-Config Sync`); expect(button).not.toBeDisabled(); @@ -165,24 +133,16 @@ describe('Marketplace page - layout', () => { useYarn: true, })); - const { queryByText } = setup(); + const { queryByText, getByText } = render(); await waitForReload(); - // Should display notification - expect(toggleNotification).toHaveBeenCalledWith({ - type: 'info', - message: { - id: 'admin.pages.MarketPlacePage.production', - defaultMessage: 'Manage plugins from the development environment', - }, - }); - expect(toggleNotification).toHaveBeenCalledTimes(1); + expect(getByText('Manage plugins from the development environment')).toBeVisible(); // Should not show install buttons expect(queryByText(/copy install command/i)).toEqual(null); }); it('shows only downloads count and not github stars if there are no or 0 stars and no downloads available for any package', async () => { - const { findByText, findAllByTestId, user } = setup(); + const { findByText, findAllByTestId, user } = render(); const providersTab = (await findByText(/providers/i)).closest('button'); await user.click(providersTab); diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/plugins.test.js b/packages/core/admin/admin/src/pages/MarketplacePage/tests/plugins.test.js index 0fa44d0a16..4b1e460e2c 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/plugins.test.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/plugins.test.js @@ -1,32 +1,23 @@ import React from 'react'; -import { fixtures } from '@strapi/admin-test-utils'; import { lightTheme, ThemeProvider } from '@strapi/design-system'; -import { TrackingProvider } from '@strapi/helper-plugin'; -import { render, screen, within } from '@testing-library/react'; +import { NotificationsProvider } from '@strapi/helper-plugin'; +import { render as renderRTL, screen, waitFor, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { createMemoryHistory } from 'history'; import { IntlProvider } from 'react-intl'; import { QueryClient, QueryClientProvider } from 'react-query'; -import { Provider } from 'react-redux'; -import { Router } from 'react-router-dom'; -import { createStore } from 'redux'; +import { MemoryRouter, Route } from 'react-router-dom'; -import MarketPlacePage from '../index'; +import { MarketPlacePage } from '../index'; import server from './server'; // Increase the jest timeout to accommodate long running tests jest.setTimeout(50000); -const toggleNotification = jest.fn(); jest.mock('../../../hooks/useNavigatorOnLine', () => jest.fn(() => true)); jest.mock('../../../hooks/useDebounce', () => (value) => value); jest.mock('@strapi/helper-plugin', () => ({ ...jest.requireActual('@strapi/helper-plugin'), - useNotification: jest.fn(() => { - return toggleNotification; - }), - CheckPagePermissions: ({ children }) => children, useAppInfo: jest.fn(() => ({ autoReload: true, dependencies: { @@ -38,13 +29,14 @@ jest.mock('@strapi/helper-plugin', () => ({ })); const waitForReload = async () => { - await screen.findByTestId('marketplace-results'); + await waitFor(() => expect(screen.queryByText('Loading content...')).not.toBeInTheDocument()); }; -const setup = (props) => ({ - ...render(, { +let testLocation = null; + +const render = (props) => ({ + ...renderRTL(, { wrapper({ children }) { - const history = createMemoryHistory(); const client = new QueryClient({ defaultOptions: { queries: { @@ -54,25 +46,28 @@ const setup = (props) => ({ }); return ( - state, { - admin_app: { permissions: fixtures.permissions.app }, - })} - > - - - - - {children} - - - - - + + + + + + {children} + { + testLocation = location; + + return null; + }} + /> + + + + + ); }, }), - user: userEvent.setup(), }); @@ -86,32 +81,22 @@ describe('Marketplace page - plugins tab', () => { afterAll(() => server.close()); it('renders the plugins tab', async () => { - const { getByRole, getByText, queryByText } = setup(); + const { getByRole, getByText, queryByText } = render(); await waitForReload(); - // Make sure it defaults to the plugins tab - const button = getByRole('tab', { selected: true }); - const pluginsTabActive = within(button).getByText(/plugins/i); - - const pluginCardText = getByText('Comments'); - const providerCardText = queryByText('Cloudinary'); - const submitPluginText = queryByText('Submit plugin'); - - expect(pluginsTabActive).not.toBe(null); - expect(pluginCardText).toBeVisible(); - expect(submitPluginText).toBeVisible(); - expect(providerCardText).toEqual(null); + expect(getByRole('tab', { selected: true, name: /plugins/i })).toBeInTheDocument(); + expect(getByText('Comments')).toBeVisible(); + expect(queryByText('Cloudinary')).toEqual(null); + expect(getByRole('link', { name: 'Submit plugin' })).toBeVisible(); }); it('should return plugin search results matching the query', async () => { - const { getByPlaceholderText, getByText, queryByText, user } = setup(); + const { getByPlaceholderText, getByText, queryByText, user } = render(); await waitForReload(); - const input = getByPlaceholderText('Search'); - - await user.type(input, 'comment'); + await user.type(getByPlaceholderText('Search'), 'comment'); await waitForReload(); const match = getByText('Comments'); @@ -124,21 +109,19 @@ describe('Marketplace page - plugins tab', () => { }); it('should return empty plugin search results given a bad query', async () => { - const { getByPlaceholderText, getByText, user } = setup(); + const { getByPlaceholderText, getByText, user } = render(); await waitForReload(); - const input = getByPlaceholderText('Search'); const badQuery = 'asdf'; - await user.type(input, badQuery); + await user.type(getByPlaceholderText('Search'), badQuery); await waitForReload(); - const noResult = getByText(`No result for "${badQuery}"`); - expect(noResult).toBeVisible(); + expect(getByText(`No result for "${badQuery}"`)).toBeVisible(); }); it('shows the installed text for installed plugins', async () => { - const { getAllByTestId } = setup(); + const { getAllByTestId } = render(); await waitForReload(); @@ -158,88 +141,63 @@ describe('Marketplace page - plugins tab', () => { }); it('shows plugins filters popover', async () => { - const { getByTestId, getByRole, user } = setup(); + const { getByRole, user } = render(); await waitForReload(); - const filtersButton = getByTestId('filters-button'); - await user.click(filtersButton); + await user.click(getByRole('button', { name: 'Filters' })); - const collectionsButton = getByRole('combobox', { name: 'Collections' }); - const categoriesButton = getByRole('combobox', { name: 'Categories' }); - - expect(collectionsButton).toBeVisible(); - expect(categoriesButton).toBeVisible(); + expect(getByRole('combobox', { name: 'Collections' })).toBeVisible(); + expect(getByRole('combobox', { name: 'Categories' })).toBeVisible(); }); it('shows the collections filter options', async () => { - const { getByTestId, getByRole, user } = setup(); + const { getByRole, user } = render(); await waitForReload(); - const filtersButton = getByTestId('filters-button'); - await user.click(filtersButton); + await user.click(getByRole('button', { name: 'Filters' })); + await user.click(getByRole('combobox', { name: 'Collections' })); - const collectionsButton = getByRole('combobox', { name: 'Collections' }); - await user.click(collectionsButton); - - const mockedServerCollections = { - 'Made by official partners': 9, - 'Made by Strapi': 13, - 'Made by the community': 69, - Verified: 29, - }; - - Object.entries(mockedServerCollections).forEach(([collectionName, count]) => { - const option = getByTestId(`${collectionName}-${count}`); - expect(option).toBeVisible(); + [ + 'Made by official partners (9)', + 'Made by Strapi (13)', + 'Made by the community (69)', + 'Verified (29)', + ].forEach((name) => { + expect(getByRole('option', { name })).toBeVisible(); }); }); it('shows the categories filter options', async () => { - const { getByTestId, getByRole, user } = setup(); + const { getByRole, user } = render(); await waitForReload(); - const filtersButton = getByTestId('filters-button'); - await user.click(filtersButton); + await user.click(getByRole('button', { name: 'Filters' })); + await user.click(getByRole('combobox', { name: 'Categories' })); - const categoriesButton = getByRole('combobox', { name: 'Categories' }); - await user.click(categoriesButton); - - const mockedServerCategories = { - 'Custom fields': 4, - Deployment: 2, - Monitoring: 1, - }; - - Object.entries(mockedServerCategories).forEach(([categoryName, count]) => { - const option = getByTestId(`${categoryName}-${count}`); - expect(option).toBeVisible(); + ['Custom fields (4)', 'Deployment (2)', 'Monitoring (1)'].forEach((name) => { + expect(getByRole('option', { name })).toBeVisible(); }); }); it('filters a collection option', async () => { - const { getByTestId, getAllByTestId, getByText, queryByText, getByRole, user } = setup(); + const { getAllByTestId, getByText, queryByText, getByRole, user } = render(); await waitForReload(); - const filtersButton = getByTestId('filters-button'); - await user.click(filtersButton); - - const collectionsButton = getByRole('combobox', { name: 'Collections' }); - await user.click(collectionsButton); - - const option = getByTestId('Made by Strapi-13'); - await user.click(option); + await user.click(getByRole('button', { name: 'Filters' })); + await user.click(getByRole('combobox', { name: 'Collections' })); + await user.click(getByRole('option', { name: 'Made by Strapi (13)' })); // Close the combobox await user.keyboard('[Escape]'); // Close the popover await user.keyboard('[Escape]'); + await waitForReload(); - const optionTag = getByRole('button', { name: 'Made by Strapi' }); - expect(optionTag).toBeVisible(); + expect(getByRole('button', { name: 'Made by Strapi' })).toBeVisible(); const collectionCards = getAllByTestId('npm-package-card'); expect(collectionCards.length).toEqual(2); @@ -251,18 +209,13 @@ describe('Marketplace page - plugins tab', () => { }); it('filters a category option', async () => { - const { getByTestId, getAllByTestId, getByText, queryByText, getByRole, user } = setup(); + const { getAllByTestId, getByText, queryByText, getByRole, user } = render(); await waitForReload(); - const filtersButton = getByTestId('filters-button'); - await user.click(filtersButton); - - const categoriesButton = getByRole('combobox', { name: 'Categories' }); - await user.click(categoriesButton); - - const option = getByTestId('Custom fields-4'); - await user.click(option); + await user.click(getByRole('button', { name: 'Filters' })); + await user.click(getByRole('combobox', { name: 'Categories' })); + await user.click(getByRole('option', { name: 'Custom fields (4)' })); // Close the combobox await user.keyboard('[Escape]'); // Close the popover @@ -282,44 +235,34 @@ describe('Marketplace page - plugins tab', () => { }); it('filters a category and a collection option', async () => { - const { getByTestId, getByRole, getAllByTestId, getByText, queryByText, user } = setup(); + const { getByRole, getAllByTestId, getByText, queryByText, user } = render(); await waitForReload(); - // When a user clicks the filters button - await user.click(getByTestId('filters-button')); - // They should see a select button for collections with no options selected - const collectionsButton = getByRole('combobox', { name: 'Collections' }); - // When they click the select button - await user.click(collectionsButton); - // They should see a Made by Strapi option - const collectionOption = getByTestId('Made by Strapi-13'); - // When they click the option - await user.click(collectionOption); + await user.click(getByRole('button', { name: 'Filters' })); + await user.click(getByRole('combobox', { name: 'Collections' })); + await user.click(getByRole('option', { name: 'Made by Strapi (13)' })); // Close the combobox await user.keyboard('[Escape]'); // Close the popover await user.keyboard('[Escape]'); - await user.click(getByTestId('filters-button')); + + await user.click(getByRole('button', { name: 'Filters' })); // They should see the collections button indicating 1 option selected expect(getByRole('combobox', { name: 'Collections' })).toHaveTextContent( '1 collection selected' ); // They should the categories button with no options selected - const categoriesButton = getByRole('combobox', { name: 'Categories' }); - await user.click(categoriesButton); - const categoryOption = getByTestId('Custom fields-4'); - await user.click(categoryOption); + await user.click(getByRole('combobox', { name: 'Categories' })); + await user.click(getByRole('option', { name: 'Custom fields (4)' })); // Close the combobox await user.keyboard('[Escape]'); // Close the popover await user.keyboard('[Escape]'); // When the page reloads they should see a tag for the selected option await waitForReload(); - const madeByStrapiTag = getByRole('button', { name: 'Made by Strapi' }); - const customFieldsTag = getByRole('button', { name: 'Custom fields' }); - expect(madeByStrapiTag).toBeVisible(); - expect(customFieldsTag).toBeVisible(); + expect(getByRole('button', { name: 'Made by Strapi' })).toBeVisible(); + expect(getByRole('button', { name: 'Custom fields' })).toBeVisible(); // They should see the correct number of results const filterCards = getAllByTestId('npm-package-card'); expect(filterCards.length).toEqual(4); @@ -336,13 +279,13 @@ describe('Marketplace page - plugins tab', () => { }); it('filters multiple collection options', async () => { - const { getByTestId, getByRole, getAllByTestId, getByText, queryByText, user } = setup(); + const { getByRole, getAllByTestId, getByText, queryByText, user } = render(); await waitForReload(); - await user.click(getByTestId('filters-button')); + await user.click(getByRole('button', { name: 'Filters' })); await user.click(getByRole('combobox', { name: 'Collections' })); - await user.click(getByTestId('Made by Strapi-13')); + await user.click(getByRole('option', { name: 'Made by Strapi (13)' })); // Close the combobox await user.keyboard('[Escape]'); // Close the popover @@ -350,7 +293,7 @@ describe('Marketplace page - plugins tab', () => { await waitForReload(); - await user.click(getByTestId('filters-button')); + await user.click(getByRole('button', { name: 'Filters' })); await user.click(getByRole('combobox', { name: `Collections` })); await user.click(getByRole('option', { name: `Verified (29)` })); // Close the combobox @@ -360,10 +303,8 @@ describe('Marketplace page - plugins tab', () => { await waitForReload(); - const madeByStrapiTag = getByRole('button', { name: 'Made by Strapi' }); - const verifiedTag = getByRole('button', { name: 'Verified' }); - expect(madeByStrapiTag).toBeVisible(); - expect(verifiedTag).toBeVisible(); + expect(getByRole('button', { name: 'Made by Strapi' })).toBeVisible(); + expect(getByRole('button', { name: 'Verified' })).toBeVisible(); expect(getAllByTestId('npm-package-card').length).toEqual(3); expect(getByText('Gatsby Preview')).toBeVisible(); expect(getByText('Config Sync')).toBeVisible(); @@ -371,11 +312,11 @@ describe('Marketplace page - plugins tab', () => { }); it('filters multiple category options', async () => { - const { getByTestId, getByRole, getAllByTestId, getByText, queryByText, user } = setup(); + const { getByRole, getAllByTestId, getByText, queryByText, user } = render(); await waitForReload(); - await user.click(getByTestId('filters-button')); + await user.click(getByRole('button', { name: 'Filters' })); await user.click(getByRole('combobox', { name: 'Categories' })); await user.click(getByRole('option', { name: `Custom fields (4)` })); // Close the combobox @@ -385,7 +326,7 @@ describe('Marketplace page - plugins tab', () => { await waitForReload(); - await user.click(getByTestId('filters-button')); + await user.click(getByRole('button', { name: 'Filters' })); await user.click(getByRole('combobox', { name: `Categories` })); await user.click(getByRole('option', { name: `Monitoring (1)` })); // Close the combobox @@ -395,10 +336,8 @@ describe('Marketplace page - plugins tab', () => { await waitForReload(); - const customFieldsTag = getByRole('button', { name: 'Custom fields' }); - const monitoringTag = getByRole('button', { name: 'Monitoring' }); - expect(customFieldsTag).toBeVisible(); - expect(monitoringTag).toBeVisible(); + expect(getByRole('button', { name: 'Custom fields' })).toBeVisible(); + expect(getByRole('button', { name: 'Monitoring' })).toBeVisible(); expect(getAllByTestId('npm-package-card').length).toEqual(3); expect(getByText('CKEditor 5 custom field')).toBeVisible(); expect(getByText('Sentry')).toBeVisible(); @@ -406,18 +345,13 @@ describe('Marketplace page - plugins tab', () => { }); it('removes a filter option tag', async () => { - const { getByTestId, getByRole, user } = setup(); + const { getByRole, user } = render(); await waitForReload(); - const filtersButton = getByTestId('filters-button'); - await user.click(filtersButton); - - const collectionsButton = getByRole('combobox', { name: 'Collections' }); - await user.click(collectionsButton); - - const option = getByTestId('Made by Strapi-13'); - await user.click(option); + await user.click(getByRole('button', { name: 'Filters' })); + await user.click(getByRole('combobox', { name: 'Collections' })); + await user.click(getByRole('option', { name: 'Made by Strapi (13)' })); // Close the combobox await user.keyboard('[Escape]'); // Close the popover @@ -425,28 +359,22 @@ describe('Marketplace page - plugins tab', () => { await waitForReload(); - const optionTag = getByRole('button', { name: 'Made by Strapi' }); - expect(optionTag).toBeVisible(); - - await user.click(optionTag); - - expect(optionTag).not.toBeVisible(); - // expect(history.location.search).toBe('?page=1'); - }); - - it('only filters in the plugins tab', async () => { - const { getByTestId, getByRole, getAllByTestId, findAllByTestId, user } = setup(); + expect(testLocation.search).toBe('?collections[0]=Made by Strapi&page=1'); + await user.click(getByRole('button', { name: 'Made by Strapi' })); await waitForReload(); - const filtersButton = getByTestId('filters-button'); - await user.click(filtersButton); + expect(testLocation.search).toBe('?page=1'); + }); - const collectionsButton = getByRole('combobox', { name: 'Collections' }); - await user.click(collectionsButton); + it('only filters in the plugins tab', async () => { + const { getByRole, getAllByTestId, findAllByTestId, user } = render(); - const option = getByTestId('Made by Strapi-13'); - await user.click(option); + await waitForReload(); + + await user.click(getByRole('button', { name: 'Filters' })); + await user.click(getByRole('combobox', { name: 'Collections' })); + await user.click(getByRole('option', { name: 'Made by Strapi (13)' })); // Close the combobox await user.keyboard('[Escape]'); // Close the popover @@ -465,33 +393,30 @@ describe('Marketplace page - plugins tab', () => { }); it('shows the correct options on sort select', async () => { - const { getByRole, user } = setup(); + const { getByRole, user } = render(); await waitForReload(); - const sortButton = getByRole('combobox', { name: /Sort by/i }); - - await user.click(sortButton); + await user.click(getByRole('combobox', { name: /Sort by/i })); expect(getByRole('option', { name: 'Alphabetical order' })).toBeVisible(); expect(getByRole('option', { name: 'Newest' })).toBeVisible(); }); it('changes the url on sort option select', async () => { - const { getByRole, user } = setup(); + const { getByRole, user } = render(); await waitForReload(); - const sortButton = getByRole('combobox', { name: /Sort by/i }); - await user.click(sortButton); - + await user.click(getByRole('combobox', { name: /Sort by/i })); await user.click(getByRole('option', { name: 'Newest' })); - // expect(history.location.search).toEqual('?sort=submissionDate:desc&page=1'); + await waitForReload(); + expect(testLocation.search).toEqual('?sort=submissionDate:desc&page=1'); }); it('shows github stars and weekly downloads count for each plugin', async () => { - const { getAllByTestId } = setup(); + const { getAllByTestId } = render(); await waitForReload(); @@ -512,15 +437,13 @@ describe('Marketplace page - plugins tab', () => { }); it('paginates the results', async () => { - const { getByLabelText, getAllByText, getByText, user } = setup(); + const { getByLabelText, getAllByText, getByText, user } = render(); await waitForReload(); // Should have pagination section with 4 pages - const pagination = getByLabelText(/pagination/i); - expect(pagination).toBeVisible(); - const pageButtons = getAllByText(/go to page \d+/i).map((el) => el.closest('a')); - expect(pageButtons.length).toBe(4); + expect(getByLabelText(/pagination/i)).toBeVisible(); + expect(getAllByText(/go to page \d+/i).map((el) => el.closest('a'))).toHaveLength(4); // Can't go to previous page since there isn't one expect(getByText(/go to previous page/i).closest('a')).toHaveAttribute('aria-disabled', 'true'); @@ -528,16 +451,16 @@ describe('Marketplace page - plugins tab', () => { // Can go to next page await user.click(getByText(/go to next page/i).closest('a')); await waitForReload(); - // expect(history.location.search).toBe('?page=2'); + expect(testLocation.search).toBe('?page=2'); // Can go to previous page await user.click(getByText(/go to previous page/i).closest('a')); await waitForReload(); - // expect(history.location.search).toBe('?page=1'); + expect(testLocation.search).toBe('?page=1'); // Can go to specific page await user.click(getByText(/go to page 3/i).closest('a')); await waitForReload(); - // expect(history.location.search).toBe('?page=3'); + expect(testLocation.search).toBe('?page=3'); }); }); diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/providers.test.js b/packages/core/admin/admin/src/pages/MarketplacePage/tests/providers.test.js index ff95e5dc48..f7ddf4e296 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/providers.test.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/providers.test.js @@ -1,32 +1,27 @@ import React from 'react'; -import { fixtures } from '@strapi/admin-test-utils'; import { lightTheme, ThemeProvider } from '@strapi/design-system'; -import { TrackingProvider } from '@strapi/helper-plugin'; -import { render, screen, within } from '@testing-library/react'; +import { NotificationsProvider } from '@strapi/helper-plugin'; +import { render as renderRTL, screen, waitFor, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { createMemoryHistory } from 'history'; import { IntlProvider } from 'react-intl'; import { QueryClient, QueryClientProvider } from 'react-query'; -import { Provider } from 'react-redux'; -import { Router } from 'react-router-dom'; -import { createStore } from 'redux'; +import { MemoryRouter, Route } from 'react-router-dom'; -import MarketPlacePage from '../index'; +import { MarketPlacePage } from '../index'; import server from './server'; // Increase the jest timeout to accommodate long running tests jest.setTimeout(50000); -const toggleNotification = jest.fn(); -jest.mock('../../../hooks/useNavigatorOnLine', () => jest.fn(() => true)); + +/** + * MOCKS + */ jest.mock('../../../hooks/useDebounce', () => (value) => value); +jest.mock('../../../hooks/useNavigatorOnLine', () => jest.fn(() => true)); jest.mock('@strapi/helper-plugin', () => ({ ...jest.requireActual('@strapi/helper-plugin'), - useNotification: jest.fn(() => { - return toggleNotification; - }), - CheckPagePermissions: ({ children }) => children, useAppInfo: jest.fn(() => ({ autoReload: true, dependencies: { @@ -37,12 +32,11 @@ jest.mock('@strapi/helper-plugin', () => ({ })), })); -const setup = (props) => ({ - ...render(, { +let testLocation = null; + +const render = (props) => ({ + ...renderRTL(, { wrapper({ children }) { - const history = createMemoryHistory({ - initialEntries: ['/?npmPackageType=provider&sort=name:asc'], - }); const client = new QueryClient({ defaultOptions: { queries: { @@ -52,21 +46,25 @@ const setup = (props) => ({ }); return ( - state, { - admin_app: { permissions: fixtures.permissions.app }, - })} - > - - - - - {children} - - - - - + + + + + + {children} + { + testLocation = location; + + return null; + }} + /> + + + + + ); }, }), @@ -75,7 +73,7 @@ const setup = (props) => ({ }); const waitForReload = async () => { - await screen.findByTestId('marketplace-results'); + await waitFor(() => expect(screen.queryByText('Loading content...')).not.toBeInTheDocument()); }; describe('Marketplace page - providers tab', () => { @@ -88,7 +86,7 @@ describe('Marketplace page - providers tab', () => { afterAll(() => server.close()); it('renders the providers tab', async () => { - const { getByText, getByRole, queryByText } = setup(); + const { getByText, getByRole, queryByText } = render(); await waitForReload(); @@ -106,7 +104,7 @@ describe('Marketplace page - providers tab', () => { }); it('should return providers search results matching the query', async () => { - const { getByText, getByPlaceholderText, user, queryByText } = setup(); + const { getByText, getByPlaceholderText, user, queryByText } = render(); await waitForReload(); @@ -125,7 +123,7 @@ describe('Marketplace page - providers tab', () => { }); it('should return empty providers search results given a bad query', async () => { - const { getByText, getByPlaceholderText, user } = setup(); + const { getByText, getByPlaceholderText, user } = render(); await waitForReload(); @@ -139,7 +137,7 @@ describe('Marketplace page - providers tab', () => { }); it('shows the installed text for installed providers', async () => { - const { getByRole, user } = setup(); + const { getByRole, user } = render(); await waitForReload(); @@ -163,11 +161,11 @@ describe('Marketplace page - providers tab', () => { }); it('shows providers filters popover', async () => { - const { getByRole, getByTestId, user } = setup(); + const { getByRole, user } = render(); await waitForReload(); - const filtersButton = getByTestId('filters-button'); + const filtersButton = getByRole('button', { name: 'Filters' }); // Only show collections filters on providers const providersTab = getByRole('tab', { name: /providers/i }); @@ -178,42 +176,34 @@ describe('Marketplace page - providers tab', () => { }); it('shows the collections filter options', async () => { - const { getByRole, getByTestId, user } = setup(); + const { getByRole, user } = render(); await waitForReload(); - const filtersButton = getByTestId('filters-button'); + const filtersButton = getByRole('button', { name: 'Filters' }); await user.click(filtersButton); const collectionsButton = getByRole('combobox', { name: 'Collections' }); await user.click(collectionsButton); - const mockedServerCollections = { - 'Made by official partners': 0, - 'Made by Strapi': 6, - 'Made by the community': 2, - Verified: 6, - }; - - Object.entries(mockedServerCollections).forEach(([collectionName, count]) => { - const option = screen.getByTestId(`${collectionName}-${count}`); - expect(option).toBeVisible(); + [ + 'Made by official partners (0)', + 'Made by Strapi (6)', + 'Made by the community (2)', + 'Verified (6)', + ].forEach((name) => { + expect(getByRole('option', { name })).toBeVisible(); }); }); it('filters a collection option', async () => { - const { getAllByTestId, getByRole, getByTestId, getByText, queryByText, user } = setup(); + const { getAllByTestId, getByRole, getByText, queryByText, user } = render(); await waitForReload(); - const filtersButton = getByTestId('filters-button'); - await user.click(filtersButton); - - const collectionsButton = getByRole('combobox', { name: 'Collections' }); - await user.click(collectionsButton); - - const option = getByTestId('Made by Strapi-6'); - await user.click(option); + await user.click(getByRole('button', { name: 'Filters' })); + await user.click(getByRole('combobox', { name: 'Collections' })); + await user.click(getByRole('option', { name: 'Made by Strapi (6)' })); // Close the combobox await user.keyboard('[Escape]'); // Close the popover @@ -221,8 +211,7 @@ describe('Marketplace page - providers tab', () => { await waitForReload(); - const optionTag = getByRole('button', { name: 'Made by Strapi' }); - expect(optionTag).toBeVisible(); + expect(getByRole('button', { name: 'Made by Strapi' })).toBeVisible(); const collectionCards = getAllByTestId('npm-package-card'); expect(collectionCards.length).toEqual(2); @@ -234,13 +223,13 @@ describe('Marketplace page - providers tab', () => { }); it('filters multiple collection options', async () => { - const { getAllByTestId, getByRole, getByTestId, getByText, queryByText, user } = setup(); + const { getAllByTestId, getByRole, getByText, queryByText, user } = render(); await waitForReload(); - await user.click(getByTestId('filters-button')); + await user.click(getByRole('button', { name: 'Filters' })); await user.click(getByRole('combobox', { name: 'Collections' })); - await user.click(getByTestId('Made by Strapi-6')); + await user.click(getByRole('option', { name: 'Made by Strapi (6)' })); // Close the combobox await user.keyboard('[Escape]'); // Close the popover @@ -248,7 +237,7 @@ describe('Marketplace page - providers tab', () => { await waitForReload(); - await user.click(getByTestId('filters-button')); + await user.click(getByRole('button', { name: 'Filters' })); await user.click(getByRole('combobox', { name: `Collections` })); await user.click(getByRole('option', { name: `Verified (6)` })); // Close the combobox @@ -268,46 +257,36 @@ describe('Marketplace page - providers tab', () => { }); it('removes a filter option tag', async () => { - const { getByRole, getByTestId, user } = setup(); + const { getByRole, user } = render(); await waitForReload(); - const filtersButton = getByTestId('filters-button'); - await user.click(filtersButton); + await user.click(getByRole('button', { name: 'Filters' })); + await user.click(getByRole('combobox', { name: 'Collections' })); - const collectionsButton = getByRole('combobox', { name: 'Collections' }); - await user.click(collectionsButton); + await user.click(getByRole('option', { name: 'Made by Strapi (6)' })); - const option = getByTestId('Made by Strapi-6'); - await user.click(option); // Close the combobox await user.keyboard('[Escape]'); // Close the popover await user.keyboard('[Escape]'); + await waitForReload(); - const optionTag = getByRole('button', { name: 'Made by Strapi' }); - expect(optionTag).toBeVisible(); + await user.click(getByRole('button', { name: 'Made by Strapi' })); - await user.click(optionTag); - - expect(optionTag).not.toBeVisible(); - // expect(history.location.search).toBe('?npmPackageType=provider&sort=name:asc&page=1'); + await waitForReload(); + expect(testLocation.search).toBe('?npmPackageType=provider&sort=name:asc&page=1'); }); it('only filters in the providers tab', async () => { - const { getAllByTestId, getByRole, getByTestId, findAllByTestId, findByText, user } = setup(); + const { getAllByTestId, getByRole, findAllByTestId, findByText, user } = render(); await waitForReload(); - const filtersButton = getByTestId('filters-button'); - await user.click(filtersButton); - - const collectionsButton = getByRole('combobox', { name: 'Collections' }); - await user.click(collectionsButton); - - const option = getByTestId('Made by Strapi-6'); - await user.click(option); + await user.click(getByRole('button', { name: 'Filters' })); + await user.click(getByRole('combobox', { name: 'Collections' })); + await user.click(getByRole('option', { name: 'Made by Strapi (6)' })); // Close the combobox await user.keyboard('[Escape]'); // Close the popover @@ -326,7 +305,7 @@ describe('Marketplace page - providers tab', () => { }); it('shows the correct options on sort select', async () => { - const { getByRole, user } = setup(); + const { getByRole, user } = render(); await waitForReload(); @@ -341,7 +320,7 @@ describe('Marketplace page - providers tab', () => { }); it('changes the url on sort option select', async () => { - const { getByRole, user } = setup(); + const { getByRole, user } = render(); await waitForReload(); @@ -351,18 +330,17 @@ describe('Marketplace page - providers tab', () => { const newestOption = getByRole('option', { name: 'Newest' }); await user.click(newestOption); - // expect(history.location.search).toEqual( - // '?npmPackageType=provider&sort=submissionDate:desc&page=1' - // ); + await waitForReload(); + + expect(testLocation.search).toEqual('?npmPackageType=provider&sort=submissionDate:desc&page=1'); }); it('shows github stars and weekly downloads count for each provider', async () => { - const { getByRole, user } = setup(); + const { getByRole, user } = render(); await waitForReload(); - const providersTab = getByRole('tab', { name: /providers/i }); - await user.click(providersTab); + await user.click(getByRole('tab', { name: /providers/i })); const cloudinaryCard = screen .getAllByTestId('npm-package-card') @@ -380,7 +358,7 @@ describe('Marketplace page - providers tab', () => { }); it('paginates the results', async () => { - const { getByText, getByLabelText, getAllByText, user } = setup(); + const { getByText, getByLabelText, getAllByText, user } = render(); await waitForReload(); @@ -396,16 +374,16 @@ describe('Marketplace page - providers tab', () => { // Can go to next page await user.click(getByText(/go to next page/i).closest('a')); await waitForReload(); - // expect(history.location.search).toBe('?npmPackageType=provider&sort=name:asc&page=2'); + expect(testLocation.search).toBe('?npmPackageType=provider&sort=name:asc&page=2'); // Can go to previous page await user.click(getByText(/go to previous page/i).closest('a')); await waitForReload(); - // expect(history.location.search).toBe('?npmPackageType=provider&sort=name:asc&page=1'); + expect(testLocation.search).toBe('?npmPackageType=provider&sort=name:asc&page=1'); // Can go to specific page await user.click(getByText(/go to page 3/i).closest('a')); await waitForReload(); - // expect(history.location.search).toBe('?npmPackageType=provider&sort=name:asc&page=3'); + expect(testLocation.search).toBe('?npmPackageType=provider&sort=name:asc&page=3'); }); });