@griddo/ax 11.14.2-rc.0 → 11.14.2

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

@@ -1,263 +1,107 @@
-import React from "react";
-import axios from "axios";
+import { Router } from "react-router-dom";
 
-import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
+import Sites, { type ISitesProps } from "@ax/modules/Sites";
+import { history } from "@ax/routes";
+import globalTheme from "@ax/themes/theme.json";
+
+import axios from "axios";
 import { mock } from "jest-mock-extended";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
-import { Router } from "react-router-dom";
-
-import { history } from "@ax/routes";
-import globalTheme from "@ax/themes/theme.json";
-import Sites, { ISitesProps } from "@ax/modules/Sites";
+import { ThemeProvider } from "styled-components";
 
-import { render, cleanup, screen, act } from "../../../../config/jest/test-utils";
+import { act, cleanup, render, screen } from "../../../../config/jest/test-utils";
+import { structuredDataResponse } from "./../../../__mocks__/axios/SitesList";
 import { sitesDataMock, userDataMock } from "./../../../__mocks__/store/SitesList";
-import { sitesResponse, structuredDataResponse } from "./../../../__mocks__/axios/SitesList";
 
 afterEach(cleanup);
 jest.mock("axios");
 const mockedAxios = axios as jest.MockedFunction<typeof axios>;
 
+const mockStore = configureStore([thunk]);
 const defaultProps = mock<ISitesProps>();
-describe("Sites module rendering", () => {
-	it("should render loading component when is loading", async () => {
-		mockedAxios.mockResolvedValue(sitesResponse);
-		mockedAxios.mockResolvedValue(structuredDataResponse);
-
-		const initialStore = {
-			app: {
-				isLoading: true,
-				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,
-			},
-			structuredData: { global: [], sites: [] },
-		};
-
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-
-		const initialState = { ...initialStore, ...defaultProps };
 
-		const Component = (
+const baseStore = {
+	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: sitesDataMock,
+	structuredData: { global: [], sites: [] },
+};
+
+const renderSites = async (storeData = baseStore) => {
+	const store = mockStore(storeData);
+	await act(async () => {
+		render(
 			<Router history={history}>
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<Sites {...initialState} />
+					<Sites {...{ ...storeData, ...defaultProps }} />
 				</ThemeProvider>
-			</Router>
+			</Router>,
+			{ store },
 		);
-
-		await act(async () => {
-			render(Component, { store });
-		});
-
-		const loadingComponent = screen.getByTestId("loading-wrapper");
-
-		expect(loadingComponent).toBeTruthy();
 	});
+};
 
-	it("should render recent sites list when there are recent sites", async () => {
-		mockedAxios.mockResolvedValue(sitesResponse);
-		mockedAxios.mockResolvedValue(structuredDataResponse);
-
-		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: sitesDataMock,
-			structuredData: { global: [], sites: [] },
-		};
-
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-
-		const initialState = { ...initialStore, ...defaultProps };
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<Sites {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
+beforeEach(() => {
+	mockedAxios.mockResolvedValue(structuredDataResponse);
+});
 
-		await act(async () => {
-			render(Component, { store });
+describe("Sites module rendering", () => {
+	it("should render loading component when is loading", async () => {
+		await renderSites({
+			...baseStore,
+			app: { ...baseStore.app, isLoading: true },
+			sites: { totalItems: 0, sites: [], recentSites: [], config: sitesDataMock.config },
 		});
 
-		const recentSitesList = screen.getByTestId("recent-sites-list");
-		const sectionHeader = screen.getByTestId("recent-sites-header");
-		const title = screen.getByTestId("recent-sites-title");
-		const recentSitesItemsWrapper = screen.getByTestId("recent-sites-items-wrapper");
-		const collapseButton = screen.getByTestId("recent-sites-collapse-button");
-		const hideLabel = screen.getByTestId("recent-sites-hide-label");
+		expect(screen.getByTestId("loading-wrapper")).toBeTruthy();
+	});
 
-		expect(recentSitesList).toBeTruthy();
-		expect(sectionHeader).toBeTruthy();
-		expect(title).toBeTruthy();
-		expect(recentSitesItemsWrapper).toBeTruthy();
-		expect(collapseButton).toBeTruthy();
-		expect(hideLabel).toBeTruthy();
+	it("should render recent sites list when there are recent sites", async () => {
+		await renderSites();
+
+		expect(screen.getByTestId("recent-sites-list")).toBeTruthy();
+		expect(screen.getByTestId("recent-sites-header")).toBeTruthy();
+		expect(screen.getByTestId("recent-sites-title")).toBeTruthy();
+		expect(screen.getByTestId("recent-sites-items-wrapper")).toBeTruthy();
+		expect(screen.getByTestId("recent-sites-collapse-button")).toBeTruthy();
+		expect(screen.getByTestId("recent-sites-hide-label")).toBeTruthy();
 	});
 
 	it("should render default sites list view", async () => {
-		mockedAxios.mockResolvedValue(sitesResponse);
-		mockedAxios.mockResolvedValue(structuredDataResponse);
-
-		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: sitesDataMock,
-			structuredData: { global: [], sites: [] },
-		};
-
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-
-		const initialState = { ...initialStore, ...defaultProps };
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<Sites {...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 renderSites();
+
+		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 () => {
-		mockedAxios.mockResolvedValue(sitesResponse);
-		mockedAxios.mockResolvedValue(structuredDataResponse);
-
-		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: 2,
-				sites: sitesDataMock.sites,
-				recentSites: [],
-				config: sitesDataMock.config,
-			},
-			structuredData: { global: [], sites: [] },
-		};
-
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-
-		const initialState = { ...initialStore, ...defaultProps };
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<Sites {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
+		await renderSites({
+			...baseStore,
+			sites: { totalItems: 2, sites: sitesDataMock.sites, recentSites: [], config: sitesDataMock.config },
 		});
 
-		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 () => {
-		mockedAxios.mockResolvedValue(sitesResponse);
-		mockedAxios.mockResolvedValue(structuredDataResponse);
-
-		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,
-			},
-			structuredData: { global: [], sites: [] },
-		};
-
-		const middlewares: any = [thunk];
-		const mockStore = configureStore(middlewares);
-		const store = mockStore(initialStore);
-
-		const initialState = { ...initialStore, ...defaultProps };
-
-		const Component = (
-			<Router history={history}>
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<Sites {...initialState} />
-				</ThemeProvider>
-			</Router>
-		);
-
-		await act(async () => {
-			render(Component, { store });
+		await renderSites({
+			...baseStore,
+			sites: { totalItems: 0, sites: [], recentSites: [], config: sitesDataMock.config },
 		});
 
-		const emptyState = screen.getByTestId("empty-state");
-		expect(emptyState).toBeTruthy();
+		expect(screen.getByTestId("empty-state")).toBeTruthy();
 	});
 });

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

@@ -1,33 +1,38 @@
-import React from "react";
-
-import { ThemeProvider } from "styled-components";
-import { screen, cleanup, act } from "@testing-library/react";
-import { render } from "../../../../../../../config/jest/test-utils";
 import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import type { IBulkHeaderProps } from "@ax/modules/Sites/SitesList/ListView/BulkHeader";
+import BulkHeader from "@ax/modules/Sites/SitesList/ListView/BulkHeader";
+import globalTheme from "@ax/themes/theme.json";
+
+import { act, cleanup, screen } from "@testing-library/react";
 import { 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 BulkHeader, { IBulkHeaderProps } from "@ax/modules/Sites/SitesList/ListView/BulkHeader";
+import { render } from "../../../../../../../config/jest/test-utils";
 import { defaultStore } from "./../../../../../../__mocks__/store/GenericStore";
 
-import globalTheme from "@ax/themes/theme.json";
-
 afterEach(cleanup);
 
-const middlewares: any = [thunk];
-const mockStore = configureStore(middlewares);
-const store = mockStore(defaultStore);
-
+const store = configureStore([thunk])(defaultStore);
 const defaultProps = mock<IBulkHeaderProps>();
 
 describe("BulkHeader component rendering", () => {
 	it("should render table header", async () => {
 		defaultProps.showBulk = false;
 		defaultProps.checkState = { isAllSelected: false, indeterminate: false };
-		defaultProps.filterValues = { order: "lastAccess-desc", liveStatus: "all" };
-		defaultProps.sortedListStatus = { isAscending: false, sortedByTitle: false, sortedByLastAccess: true };
+		defaultProps.filterValues = {
+			order: [{ value: "lastAccess-desc", label: "lastAccess-desc" }],
+			liveStatus: [{ value: "all", label: "All" }],
+		};
+		defaultProps.sortedListStatus = {
+			isAscending: false,
+			sortedByTitle: false,
+			sortedByLastAccess: true,
+			sortedByDateCreated: false,
+		};
 		defaultProps.totalItems = 22;
 
 		await act(async () => {
@@ -39,8 +44,7 @@ describe("BulkHeader component rendering", () => {
 			);
 		});
 
-		const tableHeader = screen.getByTestId("sites-table-header");
-		expect(tableHeader).toBeTruthy();
+		expect(screen.getByTestId("sites-table-header")).toBeTruthy();
 	});
 
 	it("should render bulk header", async () => {