@griddo/ax 11.14.1 → 11.14.2-rc.1

package/src/__tests__/modules/Sites/SitesList/SitesList.test.tsx

@@ -1,25 +1,20 @@
-import React from "react";
-import axios from "axios";
 import { Router } from "react-router-dom";
 
-import { CalledWithMock, mock } from "jest-mock-extended";
-import configureStore from "redux-mock-store";
-import thunk from "redux-thunk";
-import { ThemeProvider } from "styled-components";
-
 import { parseTheme } from "@ax/helpers";
+import SitesList, { type ISitesListProps } from "@ax/modules/Sites/SitesList";
 import { history } from "@ax/routes";
 import globalTheme from "@ax/themes/theme.json";
-import { IGetSitesParams, ISettingsForm } from "@ax/types";
-import SitesList, { ISitesListProps } from "@ax/modules/Sites/SitesList";
 
-import { render, cleanup, screen, fireEvent, act, waitFor } from "./../../../../../config/jest/test-utils";
+import axios from "axios";
+import { mock } from "jest-mock-extended";
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
 
-import { sitesDataMock, sitesDataNoThumbnailMock, userDataMock } from "./../../../../__mocks__/store/SitesList";
+import { act, cleanup, fireEvent, render, screen, waitFor } from "./../../../../../config/jest/test-utils";
 import { sitesResponse } from "./../../../../__mocks__/axios/SitesList";
-import { sitesResponseDataPack } from "./../../../../__mocks__/axios/SitesListDataPack";
-import { sitesResponseCategories } from "./../../../../__mocks__/axios/SitesListCategories";
 import { sitesOptions } from "./../../../../__mocks__/axios/SitesListOptions";
+import { sitesDataMock, sitesDataNoThumbnailMock, userDataMock } from "./../../../../__mocks__/store/SitesList";
 
 afterEach(cleanup);
 
@@ -27,6 +22,8 @@ const defaultProps = mock<ISitesListProps>();
 jest.mock("axios");
 const mockedAxios = axios as jest.MockedFunction<typeof axios>;
 
+const mockStore = configureStore([thunk]);
+
 const initialStore = {
 	app: {
 		isLoading: false,
@@ -35,6 +32,7 @@ const initialStore = {
 			{ id: 2, locale: "es_ES", language: "Spanish", label: "ES", isDefault: false },
 		],
 		token: "eyJhbGciOiJIUzI",
+		hasAnimation: true,
 	},
 	users: userDataMock,
 	sites: sitesDataMock,
@@ -44,44 +42,27 @@ const initialStore = {
 	},
 };
 
-describe("Sites module rendering", () => {
-	it("should render recent sites list when there are recent sites", async () => {
-		mockedAxios.mockResolvedValue(sitesResponse);
-		const getSitesMock = jest.fn();
-		const setHistoryPushMock = jest.fn();
-		const saveSettingsMock = jest.fn();
-		const publishSitesBulkMock = jest.fn();
-		const unpublishSitesBulkMock = jest.fn();
-		defaultProps.getSites = getSitesMock as CalledWithMock<void, [params: IGetSitesParams]> &
-			((params: IGetSitesParams) => void);
-		defaultProps.setHistoryPush = setHistoryPushMock as CalledWithMock<
-			void,
-			[path: string, isEditor?: boolean | undefined]
-		>;
-		defaultProps.saveSettings = saveSettingsMock as CalledWithMock<Promise<boolean>, [form: ISettingsForm]> &
-			((form: ISettingsForm) => Promise<boolean>);
-		defaultProps.publishSitesBulk = publishSitesBulkMock as CalledWithMock<void, [ids: number[]]> &
-			((ids: number[]) => void);
-		defaultProps.unpublishSitesBulk = unpublishSitesBulkMock as CalledWithMock<void, [ids: number[]]> &
-			((ids: number[]) => void);
-
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-
-		const initialState = { ...initialStore, ...defaultProps };
-
-		const Component = (
+const renderSitesList = async (storeData: any = initialStore) => {
+	const store = mockStore(storeData);
+	await act(async () => {
+		render(
 			<Router history={history}>
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
+					<SitesList {...{ ...storeData, ...defaultProps }} />
 				</ThemeProvider>
-			</Router>
+			</Router>,
+			{ store },
 		);
+	});
+};
 
-		await act(async () => {
-			render(Component, { store });
-		});
+beforeEach(() => {
+	mockedAxios.mockResolvedValue(sitesResponse);
+});
+
+describe("Sites module rendering", () => {
+	it("should render recent sites list when there are recent sites", async () => {
+		await renderSitesList();
 
 		const recentSitesList = screen.getByTestId("recent-sites-list");
 		const recentSitesItems = screen.getAllByTestId("recent-sites-item");
@@ -101,154 +82,44 @@ describe("Sites module rendering", () => {
 	});
 
 	it("should render default sites list view", async () => {
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-
-		mockedAxios.mockResolvedValue(sitesResponse);
-		const initialState = { ...initialStore, ...defaultProps };
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
-		});
-
-		const sectionHeader = screen.getByTestId("all-sites-header");
-		const title = screen.getByTestId("all-sites-title");
-		const headerIconsWrapper = screen.getByTestId("all-sites-header-icons");
-		const filterSelect = screen.getByTestId("all-sites-grid-filter");
-		const filterSelectLabel = screen.getByTestId("all-sites-grid-filter-label");
-		const sitesGridList = screen.getByTestId("sites-grid-list");
-
-		expect(sectionHeader).toBeTruthy();
-		expect(title).toBeTruthy();
-		expect(headerIconsWrapper).toBeTruthy();
-		expect(filterSelect).toBeTruthy();
-		expect(filterSelectLabel).toBeTruthy();
-		expect(sitesGridList).toBeTruthy();
+		await renderSitesList();
+
+		expect(screen.getByTestId("all-sites-header")).toBeTruthy();
+		expect(screen.getByTestId("all-sites-title")).toBeTruthy();
+		expect(screen.getByTestId("all-sites-header-icons")).toBeTruthy();
+		expect(screen.getByTestId("all-sites-grid-filter")).toBeTruthy();
+		expect(screen.getByTestId("all-sites-grid-filter-label")).toBeTruthy();
+		expect(screen.getByTestId("sites-grid-list")).toBeTruthy();
 	});
 
 	it("should not render recent sites list when recent sites list is empty", async () => {
-		const initialStore = {
-			app: {
-				isLoading: false,
-				globalLangs: [
-					{ id: 4, locale: "en_GB", language: "English", label: "EN", isDefault: true },
-					{ id: 2, locale: "es_ES", language: "Spanish", label: "ES", isDefault: false },
-				],
-				token: "eyJhbGciOiJIUzI",
-			},
-			users: userDataMock,
+		await renderSitesList({
+			...initialStore,
 			sites: { totalItems: 2, sites: sitesDataMock.sites, recentSites: [], config: sitesDataMock.config },
-		};
-
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-		mockedAxios.mockResolvedValue(sitesResponse);
-		const initialState = { ...initialStore, ...defaultProps };
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
 		});
 
-		const recentSitesList = screen.queryByTestId("recent-sites-list");
-
-		expect(recentSitesList).not.toBeTruthy();
+		expect(screen.queryByTestId("recent-sites-list")).not.toBeTruthy();
 	});
 
 	it("should render empty state when no sites", async () => {
-		const initialStore = {
-			app: {
-				isLoading: false,
-				globalLangs: [
-					{ id: 4, locale: "en_GB", language: "English", label: "EN", isDefault: true },
-					{ id: 2, locale: "es_ES", language: "Spanish", label: "ES", isDefault: false },
-				],
-				token: "eyJhbGciOiJIUzI",
-			},
-			users: userDataMock,
-			sites: {
-				totalItems: 0,
-				sites: [],
-				recentSites: [],
-				config: sitesDataMock.config,
-			},
-		};
-
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-
-		mockedAxios.mockResolvedValue(sitesResponse);
-		const initialState = { ...initialStore, ...defaultProps };
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
+		await renderSitesList({
+			...initialStore,
+			sites: { totalItems: 0, sites: [], recentSites: [], config: sitesDataMock.config },
 		});
 
-		const emptyState = screen.getByTestId("empty-state");
-		expect(emptyState).toBeTruthy();
+		expect(screen.getByTestId("empty-state")).toBeTruthy();
 	});
 
 	it("should render full name when length is not too long", async () => {
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-
-		mockedAxios.mockResolvedValue(sitesResponse);
-		const initialState = { ...initialStore, ...defaultProps };
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
-		});
+		await renderSitesList();
 
 		const itemNames = screen.getAllByTestId("sites-item-name");
 		expect(itemNames.length).toEqual(4);
 	});
 
 	it("should render tooltip when full name is too long", async () => {
-		const initialStore = {
-			app: {
-				isLoading: false,
-				globalLangs: [
-					{ id: 4, locale: "en_GB", language: "English", label: "EN", isDefault: true },
-					{ id: 2, locale: "es_ES", language: "Spanish", label: "ES", isDefault: false },
-				],
-				token: "eyJhbGciOiJIUzI",
-			},
-			users: userDataMock,
+		await renderSitesList({
+			...initialStore,
 			sites: {
 				totalItems: 2,
 				sites: [
@@ -284,24 +155,6 @@ describe("Sites module rendering", () => {
 				config: sitesDataMock.config,
 				recentSites: sitesDataMock.recentSites,
 			},
-		};
-
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-		mockedAxios.mockResolvedValue(sitesResponse);
-		const initialState = { ...initialStore, ...defaultProps };
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
 		});
 
 		const tooltip = screen.getAllByTestId("tooltip-component");
@@ -311,58 +164,16 @@ describe("Sites module rendering", () => {
 	});
 
 	it("should render custom thumbnail if site has one", async () => {
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-		mockedAxios.mockResolvedValue(sitesResponse);
-		const initialState = { ...initialStore, ...defaultProps };
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
-		});
+		await renderSitesList();
 
 		const thumbnail = screen.getAllByTestId("sites-item-thumbnail-wrapper");
 		expect(thumbnail.length).toEqual(4);
 	});
 
 	it("should render placeholder if site does not have thumbnail", async () => {
-		const initialStore = {
-			app: {
-				isLoading: false,
-				globalLangs: [
-					{ id: 4, locale: "en_GB", language: "English", label: "EN", isDefault: true },
-					{ id: 2, locale: "es_ES", language: "Spanish", label: "ES", isDefault: false },
-				],
-				token: "eyJhbGciOiJIUzI",
-			},
-			users: userDataMock,
+		await renderSitesList({
+			...initialStore,
 			sites: sitesDataNoThumbnailMock,
-		};
-
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-		mockedAxios.mockResolvedValue(sitesResponse);
-		const initialState = { ...initialStore, ...defaultProps };
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
 		});
 
 		const sitesItemThumbnail = screen.getAllByTestId("sites-item-thumbnail");
@@ -372,23 +183,8 @@ describe("Sites module rendering", () => {
 
 describe("Sites module events", () => {
 	it("should hide recent sites on click collapse button", async () => {
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-		mockedAxios.mockResolvedValue(sitesResponse);
-		const initialState = { ...initialStore, ...defaultProps };
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
+		await renderSitesList();
 
-		await act(async () => {
-			render(Component, { store });
-		});
 		const collapseButton = screen.getByTestId("recent-sites-collapse-button");
 		const hideButtonLabel = screen.getByTestId("recent-sites-hide-label");
 
@@ -402,48 +198,10 @@ describe("Sites module events", () => {
 
 	it("should go to site on click recent site item", async () => {
 		window.HTMLElement.prototype.scrollTo = jest.fn();
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-		const setHistoryPushMock = jest.fn();
-		defaultProps.setHistoryPush = setHistoryPushMock as CalledWithMock<
-			void,
-			[path: string, isEditor?: boolean | undefined]
-		>;
-		const initialState = { ...initialStore, ...defaultProps };
-		mockedAxios.mockImplementation((request: any) => {
-			switch (request.url) {
-				case "undefined/site/3/languages":
-				case "undefined/site/global/metrics":
-				case "undefined/site/3/metrics":
-				case "undefined/site/3/socials":
-				case "undefined/site/undefined/templates":
-				case "undefined/site/3/structured_data":
-					return Promise.resolve(sitesResponse);
-				case "undefined/sites?recentSitesNumber=7&pagination=true&page=1&itemsPerPage=30&order=lastAccess-desc":
-				case "undefined/site/3/data_pack/?status=activated":
-					return Promise.resolve(sitesResponseDataPack);
-				case "undefined/site/undefined/modules":
-					return Promise.resolve(sitesResponseCategories);
-				default:
-					return Promise.reject({ status: 500 });
-			}
-		});
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
 
-		await act(async () => {
-			render(Component, { store });
-		});
+		await renderSitesList();
 
 		const recentSiteItems = screen.getAllByTestId("recent-sites-item");
-
 		expect(recentSiteItems.length).toEqual(2);
 
 		fireEvent.click(recentSiteItems[0]);
@@ -451,23 +209,7 @@ describe("Sites module events", () => {
 	});
 
 	it("should display list view on click list option button", async () => {
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-
-		mockedAxios.mockResolvedValue(sitesResponse);
-		const initialState = { ...initialStore, ...defaultProps };
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
-		});
+		await renderSitesList();
 
 		const gridIconAction = screen.getByTestId("icon-action-Grid2");
 		const listIconAction = screen.getByTestId("icon-action-BulletList");
@@ -482,28 +224,8 @@ describe("Sites module events", () => {
 
 	it("should go to site on click list site item", async () => {
 		window.HTMLElement.prototype.scrollTo = jest.fn();
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-		const setHistoryPushMock = jest.fn();
-		defaultProps.setHistoryPush = setHistoryPushMock as CalledWithMock<
-			void,
-			[path: string, isEditor?: boolean | undefined]
-		>;
-		const initialState = { ...initialStore, ...defaultProps };
-		mockedAxios.mockResolvedValue(sitesResponse);
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
 
-		await act(async () => {
-			render(Component, { store });
-		});
+		await renderSitesList();
 
 		const gridIconAction = screen.getByTestId("icon-action-Grid2");
 		const listIconAction = screen.getByTestId("icon-action-BulletList");
@@ -520,24 +242,7 @@ describe("Sites module events", () => {
 	});
 
 	it("should display grid view on click grid option button", async () => {
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-		const initialState = { ...initialStore, ...defaultProps };
-
-		mockedAxios.mockResolvedValue(sitesResponse);
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
-		});
+		await renderSitesList();
 
 		const gridIconAction = screen.getByTestId("icon-action-Grid2");
 		const listIconAction = screen.getByTestId("icon-action-BulletList");
@@ -552,49 +257,9 @@ describe("Sites module events", () => {
 	});
 
 	it("should go to site on click grid site item", async () => {
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-		const setHistoryPushMock = jest.fn();
-		defaultProps.setHistoryPush = setHistoryPushMock as CalledWithMock<
-			void,
-			[path: string, isEditor?: boolean | undefined]
-		>;
-		const initialState = { ...initialStore, ...defaultProps };
-
-		// mockedAxios.mockResolvedValue(sitesResponse);
-		mockedAxios.mockImplementation((request: any) => {
-			switch (request.url) {
-				case "undefined/site/1/languages":
-				case "undefined/site/1/socials":
-				case "undefined/site/undefined/templates":
-				case "undefined/site/global/metrics":
-				case "undefined/site/1/metrics":
-					return Promise.resolve(sitesResponse);
-				case "undefined/sites?recentSitesNumber=7&pagination=true&page=1&itemsPerPage=30&order=lastAccess-desc":
-				case "undefined/site/1/data_pack/?status=activated":
-				case "undefined/site/1/structured_data":
-					return Promise.resolve(sitesResponseDataPack);
-				case "undefined/site/undefined/modules":
-					return Promise.resolve(sitesResponseCategories);
-				default:
-					return Promise.reject(new Error("not found"));
-			}
-		});
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
-		});
+		await renderSitesList();
 
 		const gridSiteItems = screen.getAllByTestId("grid-site-item");
-
 		expect(gridSiteItems.length).toEqual(2);
 
 		await act(async () => {
@@ -605,24 +270,9 @@ describe("Sites module events", () => {
 	});
 
 	it("should render site modal when clicking new button", async () => {
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-
-		const initialState = { ...initialStore, ...defaultProps };
 		mockedAxios.mockResolvedValue(sitesOptions);
 
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
-		});
+		await renderSitesList();
 
 		const newButton = screen.getByTestId("button-default");
 		expect(newButton.textContent).toEqual("New");
@@ -634,24 +284,7 @@ describe("Sites module events", () => {
 	});
 
 	it("should display filters when clicking sort items button on grid view", async () => {
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-
-		mockedAxios.mockResolvedValue(sitesResponse);
-		const initialState = { ...initialStore, ...defaultProps };
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
-		});
+		await renderSitesList();
 
 		const floatingMenuButton = screen.getByTestId("grid-floating-menu-button");
 		expect(floatingMenuButton).toBeTruthy();
@@ -669,24 +302,7 @@ describe("Sites module events", () => {
 	});
 
 	it("should render filter on grid view", async () => {
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-
-		mockedAxios.mockResolvedValue(sitesResponse);
-		const initialState = { ...initialStore, ...defaultProps };
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
-		});
+		await renderSitesList();
 
 		const floatingMenuButton = screen.getByTestId("grid-floating-menu-button");
 		expect(floatingMenuButton).toBeTruthy();
@@ -706,24 +322,7 @@ describe("Sites module events", () => {
 	});
 
 	it("should change filter's label to name when filtered by name", async () => {
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-
-		mockedAxios.mockResolvedValue(sitesResponse);
-		const initialState = { ...initialStore, ...defaultProps };
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
-		});
+		await renderSitesList();
 
 		const floatingMenuButton = screen.getByTestId("grid-floating-menu-button");
 		expect(floatingMenuButton).toBeTruthy();
@@ -749,23 +348,7 @@ describe("Sites module events", () => {
 	});
 
 	it("should change filter's label to Last access when filtered by lastAccess", async () => {
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-		const initialState = { ...initialStore, ...defaultProps };
-		mockedAxios.mockResolvedValue(sitesResponse);
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
-		});
+		await renderSitesList();
 
 		const floatingMenuButton = screen.getByTestId("grid-floating-menu-button");
 		expect(floatingMenuButton).toBeTruthy();
@@ -779,23 +362,7 @@ describe("Sites module events", () => {
 	});
 
 	it("should change filter's label to Creation Date when filtered by dateCreated", async () => {
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-		const initialState = { ...initialStore, ...defaultProps };
-		mockedAxios.mockResolvedValue(sitesResponse);
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
-		});
+		await renderSitesList();
 
 		const floatingMenuButton = screen.getByTestId("grid-floating-menu-button");
 		expect(floatingMenuButton).toBeTruthy();
@@ -809,23 +376,7 @@ describe("Sites module events", () => {
 	});
 
 	it("should open delete site modal from grid item", async () => {
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-		mockedAxios.mockResolvedValue(sitesResponse);
-		const initialState = { ...initialStore, ...defaultProps };
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
-		});
+		await renderSitesList();
 
 		const gridItems = screen.getAllByTestId("grid-site-item");
 		const moreInfoButton = screen.getAllByTestId("more-info-button");
@@ -841,24 +392,7 @@ describe("Sites module events", () => {
 	});
 
 	it("should open delete site modal from list item", async () => {
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-
-		mockedAxios.mockResolvedValue(sitesResponse);
-		const initialState = { ...initialStore, ...defaultProps };
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
-		});
+		await renderSitesList();
 
 		const listIconAction = screen.getByTestId("icon-action-BulletList");
 		expect(listIconAction).toBeTruthy();
@@ -879,24 +413,7 @@ describe("Sites module events", () => {
 	});
 
 	it("should open publish site modal from grid item", async () => {
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-
-		mockedAxios.mockResolvedValue(sitesResponse);
-		const initialState = { ...initialStore, ...defaultProps };
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
-		});
+		await renderSitesList();
 
 		const gridIconAction = screen.getByTestId("icon-action-Grid2");
 		fireEvent.click(gridIconAction);
@@ -914,25 +431,8 @@ describe("Sites module events", () => {
 		expect(publishModal).toBeTruthy();
 	});
 
-	it("should open delete site modal from list item", async () => {
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-
-		mockedAxios.mockResolvedValue(sitesResponse);
-		const initialState = { ...initialStore, ...defaultProps };
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<SitesList {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
-		});
+	it("should open publish site modal from list item", async () => {
+		await renderSitesList();
 
 		const listIconAction = screen.getByTestId("icon-action-BulletList");
 		expect(listIconAction).toBeTruthy();