@griddo/ax 11.10.11-rc.0 → 11.10.11

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

@@ -28,927 +28,927 @@ jest.mock("axios");
 const mockedAxios = axios as jest.MockedFunction<typeof axios>;
 
 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: {
-    structuredData: { global: [], sites: [] },
-    categories: { global: [], sites: [] },
-  },
+	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: {
+		structuredData: { global: [], sites: [] },
+		categories: { global: [], sites: [] },
+	},
 };
 
 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 = (
-      <Router history={history}>
-        <ThemeProvider theme={parseTheme(globalTheme)}>
-          <SitesList {...initialState} />
-        </ThemeProvider>
-      </Router>
-    );
-
-    await act(async () => {
-      render(Component, { store });
-    });
-
-    const recentSitesList = screen.getByTestId("recent-sites-list");
-    const recentSitesItems = screen.getAllByTestId("recent-sites-item");
-    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(recentSitesList).toBeTruthy();
-    expect(recentSitesItems.length).toEqual(2);
-    expect(sectionHeader).toBeTruthy();
-    expect(title).toBeTruthy();
-    expect(recentSitesItemsWrapper).toBeTruthy();
-    expect(collapseButton).toBeTruthy();
-    expect(hideLabel).toBeTruthy();
-  });
-
-  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();
-  });
-
-  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,
-      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();
-  });
-
-  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 });
-    });
-
-    const emptyState = screen.getByTestId("empty-state");
-    expect(emptyState).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 });
-    });
-
-    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,
-      sites: {
-        totalItems: 2,
-        sites: [
-          {
-            id: 1,
-            name: "Site 1 long name Site 1 long name Site 1 long name Site 1 long name Site 1 long name Site 1 long name",
-            theme: "default-theme",
-            author: 2,
-            pages: [],
-            updated: true,
-            home: "//cx.dev.griddo.io/pre-griddo/componentfolder",
-            isPublished: false,
-            bigAvatar: "http://images.dev.griddo.io/griddo-site-thumbnail-ec2ab0ba-9424-4424-8f60-222ec746902d_10",
-            favicon: "https://images.dev.griddo.io/by-themascot-1920_2",
-            published: "2021-11-03T10:42:32.000Z",
-            rendering: false,
-            renderingHours: 0,
-            shouldBeUpdated: false,
-            slug: "/griddo-components",
-            smallAvatar: "http://images.dev.griddo.io/griddo-site-thumbnail-ec2ab0ba-9424-4424-8f60-222ec746902d_9",
-            socials: null,
-            thumbnail: "http://images.dev.griddo.io/griddo-site-thumbnail-ec2ab0ba-9424-4424-8f60-222ec746902d_7",
-            timezone: "Pacific/Pago_Pago",
-            deleted: 0,
-            hash: null,
-            languageSites: [146, 178],
-            lastAccess: "2022-09-05T07:34:19.000Z",
-            modified: "2022-06-22T07:17:34.000Z",
-            navigationModules: null,
-          },
-          sitesDataMock.sites[1],
-        ],
-        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");
-    const trimmedName = screen.getAllByTestId("trimmed-item-name");
-    expect(tooltip.length).toBeTruthy();
-    expect(trimmedName.length).toEqual(1);
-  });
-
-  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 });
-    });
-
-    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,
-      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");
-    expect(sitesItemThumbnail.length).toEqual(4);
-  });
+	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 = (
+			<Router history={history}>
+				<ThemeProvider theme={parseTheme(globalTheme)}>
+					<SitesList {...initialState} />
+				</ThemeProvider>
+			</Router>
+		);
+
+		await act(async () => {
+			render(Component, { store });
+		});
+
+		const recentSitesList = screen.getByTestId("recent-sites-list");
+		const recentSitesItems = screen.getAllByTestId("recent-sites-item");
+		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(recentSitesList).toBeTruthy();
+		expect(recentSitesItems.length).toEqual(2);
+		expect(sectionHeader).toBeTruthy();
+		expect(title).toBeTruthy();
+		expect(recentSitesItemsWrapper).toBeTruthy();
+		expect(collapseButton).toBeTruthy();
+		expect(hideLabel).toBeTruthy();
+	});
+
+	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();
+	});
+
+	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,
+			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();
+	});
+
+	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 });
+		});
+
+		const emptyState = screen.getByTestId("empty-state");
+		expect(emptyState).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 });
+		});
+
+		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,
+			sites: {
+				totalItems: 2,
+				sites: [
+					{
+						id: 1,
+						name: "Site 1 long name Site 1 long name Site 1 long name Site 1 long name Site 1 long name Site 1 long name",
+						theme: "default-theme",
+						author: 2,
+						pages: [],
+						updated: true,
+						home: "//cx.dev.griddo.io/pre-griddo/componentfolder",
+						isPublished: false,
+						bigAvatar: "http://images.dev.griddo.io/griddo-site-thumbnail-ec2ab0ba-9424-4424-8f60-222ec746902d_10",
+						favicon: "https://images.dev.griddo.io/by-themascot-1920_2",
+						published: "2021-11-03T10:42:32.000Z",
+						rendering: false,
+						renderingHours: 0,
+						shouldBeUpdated: false,
+						slug: "/griddo-components",
+						smallAvatar: "http://images.dev.griddo.io/griddo-site-thumbnail-ec2ab0ba-9424-4424-8f60-222ec746902d_9",
+						socials: null,
+						thumbnail: "http://images.dev.griddo.io/griddo-site-thumbnail-ec2ab0ba-9424-4424-8f60-222ec746902d_7",
+						timezone: "Pacific/Pago_Pago",
+						deleted: 0,
+						hash: null,
+						languageSites: [146, 178],
+						lastAccess: "2022-09-05T07:34:19.000Z",
+						modified: "2022-06-22T07:17:34.000Z",
+						navigationModules: null,
+					},
+					sitesDataMock.sites[1],
+				],
+				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");
+		const trimmedName = screen.getAllByTestId("trimmed-item-name");
+		expect(tooltip.length).toBeTruthy();
+		expect(trimmedName.length).toEqual(1);
+	});
+
+	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 });
+		});
+
+		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,
+			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");
+		expect(sitesItemThumbnail.length).toEqual(4);
+	});
 });
 
 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 act(async () => {
-      render(Component, { store });
-    });
-    const collapseButton = screen.getByTestId("recent-sites-collapse-button");
-    const hideButtonLabel = screen.getByTestId("recent-sites-hide-label");
-
-    expect(collapseButton).toBeTruthy();
-    expect(hideButtonLabel).toBeTruthy();
-
-    fireEvent.click(collapseButton);
-    const showButtonLabel = screen.getByTestId("recent-sites-show-label");
-    expect(showButtonLabel).toBeTruthy();
-  });
-
-  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 });
-    });
-
-    const recentSiteItems = screen.getAllByTestId("recent-sites-item");
-
-    expect(recentSiteItems.length).toEqual(2);
-
-    fireEvent.click(recentSiteItems[0]);
-    await waitFor(() => expect(history.location.pathname).toEqual("/sites/pages"));
-  });
-
-  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 });
-    });
-
-    const gridIconAction = screen.getByTestId("icon-action-Grid2");
-    const listIconAction = screen.getByTestId("icon-action-BulletList");
-    expect(gridIconAction).toBeTruthy();
-    expect(listIconAction).toBeTruthy();
-    await act(async () => {
-      fireEvent.click(listIconAction);
-    });
-    const listSitesItems = screen.getAllByTestId("list-site-item");
-    expect(listSitesItems.length).toEqual(2);
-  });
-
-  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 });
-    });
-
-    const gridIconAction = screen.getByTestId("icon-action-Grid2");
-    const listIconAction = screen.getByTestId("icon-action-BulletList");
-    expect(gridIconAction).toBeTruthy();
-    expect(listIconAction).toBeTruthy();
-    await act(async () => {
-      fireEvent.click(listIconAction);
-    });
-    const listSitesItems = screen.getAllByTestId("list-site-item");
-    expect(listSitesItems.length).toEqual(2);
-
-    fireEvent.click(listSitesItems[0]);
-    await waitFor(() => expect(history.location.pathname).toEqual("/sites/pages"));
-  });
-
-  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 });
-    });
-
-    const gridIconAction = screen.getByTestId("icon-action-Grid2");
-    const listIconAction = screen.getByTestId("icon-action-BulletList");
-    expect(gridIconAction).toBeTruthy();
-    expect(listIconAction).toBeTruthy();
-
-    fireEvent.click(gridIconAction);
-    const allSitesGridFilter = screen.getByTestId("all-sites-grid-filter");
-    const gridSitesItems = screen.queryAllByTestId("grid-site-item");
-    expect(allSitesGridFilter).toBeTruthy();
-    expect(gridSitesItems.length).toEqual(2);
-  });
-
-  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 });
-    });
-
-    const gridSiteItems = screen.getAllByTestId("grid-site-item");
-
-    expect(gridSiteItems.length).toEqual(2);
-
-    await act(async () => {
-      fireEvent.click(gridSiteItems[0]);
-    });
-
-    expect(history.location.pathname).toEqual("/sites/pages");
-  });
-
-  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 });
-    });
-
-    const newButton = screen.getByTestId("button-default");
-    expect(newButton.textContent).toEqual("New");
-    await act(async () => {
-      fireEvent.click(newButton);
-    });
-    const siteModalForm = screen.getByTestId("site-modal-form");
-    expect(siteModalForm).toBeTruthy();
-  });
-
-  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 });
-    });
-
-    const floatingMenuButton = screen.getByTestId("grid-floating-menu-button");
-    expect(floatingMenuButton).toBeTruthy();
-    fireEvent.click(floatingMenuButton);
-    const listItem = screen.getAllByTestId("list-item");
-    expect(listItem.length).toEqual(6);
-    const sortByNameAsc = listItem[0];
-    const sortByNameDesc = listItem[1];
-    const sortByLastAccessDesc = listItem[2];
-    const sortByLastAccessAsc = listItem[3];
-    expect(sortByNameAsc.textContent).toEqual("Ascendent");
-    expect(sortByNameDesc.textContent).toEqual("Descendent");
-    expect(sortByLastAccessDesc.textContent).toEqual("Newest");
-    expect(sortByLastAccessAsc.textContent).toEqual("Oldest");
-  });
-
-  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 });
-    });
-
-    const floatingMenuButton = screen.getByTestId("grid-floating-menu-button");
-    expect(floatingMenuButton).toBeTruthy();
-    fireEvent.click(floatingMenuButton);
-    const listItem = screen.getAllByTestId("list-item");
-    expect(listItem.length).toEqual(6);
-
-    const sortAscendingName = listItem[0];
-    const sortDescendingName = listItem[1];
-    const sortDescendingLastAccess = listItem[2];
-    const sortAscendingLastAccess = listItem[3];
-
-    expect(sortAscendingName.textContent).toEqual("Ascendent");
-    expect(sortDescendingName.textContent).toEqual("Descendent");
-    expect(sortDescendingLastAccess.textContent).toEqual("Newest");
-    expect(sortAscendingLastAccess.textContent).toEqual("Oldest");
-  });
-
-  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 });
-    });
-
-    const floatingMenuButton = screen.getByTestId("grid-floating-menu-button");
-    expect(floatingMenuButton).toBeTruthy();
-    fireEvent.click(floatingMenuButton);
-    const listItem = screen.getAllByTestId("list-item");
-    expect(listItem.length).toEqual(6);
-
-    const sortAscendingName = listItem[0];
-    const sortDescendingName = listItem[1];
-    const sortDescendingLastAccess = listItem[2];
-    const sortAscendingLastAccess = listItem[3];
-
-    expect(sortAscendingName.textContent).toEqual("Ascendent");
-    expect(sortDescendingName.textContent).toEqual("Descendent");
-    expect(sortDescendingLastAccess.textContent).toEqual("Newest");
-    expect(sortAscendingLastAccess.textContent).toEqual("Oldest");
-    const label0 = screen.getByTestId("filter-label");
-    expect(label0.textContent).toEqual("Last access");
-
-    fireEvent.click(sortAscendingName);
-    const label = screen.getByTestId("filter-label");
-    expect(label.textContent).toEqual("Name");
-  });
-
-  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 });
-    });
-
-    const floatingMenuButton = screen.getByTestId("grid-floating-menu-button");
-    expect(floatingMenuButton).toBeTruthy();
-    fireEvent.click(floatingMenuButton);
-    const listItem = screen.getAllByTestId("list-item");
-    expect(listItem.length).toEqual(6);
-    const sortDescendingLastAccess = listItem[2];
-    fireEvent.click(sortDescendingLastAccess);
-    const labelAccess = screen.getByTestId("filter-label");
-    expect(labelAccess.textContent).toEqual("Last access");
-  });
-
-  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 });
-    });
-
-    const floatingMenuButton = screen.getByTestId("grid-floating-menu-button");
-    expect(floatingMenuButton).toBeTruthy();
-    fireEvent.click(floatingMenuButton);
-    const listItem = screen.getAllByTestId("list-item");
-    expect(listItem.length).toEqual(6);
-    const sortDescendinDateCreated = listItem[4];
-    fireEvent.click(sortDescendinDateCreated);
-    const labelAccess = screen.getByTestId("filter-label");
-    expect(labelAccess.textContent).toEqual("Creation date");
-  });
-
-  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 });
-    });
-
-    const gridItems = screen.getAllByTestId("grid-site-item");
-    const moreInfoButton = screen.getAllByTestId("more-info-button");
-
-    expect(gridItems[0]).toBeTruthy();
-    fireEvent.click(moreInfoButton[0]);
-
-    const actionMenuItem = screen.getAllByTestId("action-menu-item");
-    expect(actionMenuItem.length).toEqual(2);
-    fireEvent.click(actionMenuItem[0]);
-    const deleteModal = screen.getByTestId("delete-modal");
-    expect(deleteModal).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 });
-    });
-
-    const listIconAction = screen.getByTestId("icon-action-BulletList");
-    expect(listIconAction).toBeTruthy();
-    await act(async () => {
-      fireEvent.click(listIconAction);
-    });
-    const listItems = screen.getAllByTestId("list-site-item");
-    const moreInfoButton = screen.getAllByTestId("more-info-button");
-
-    expect(listItems[0]).toBeTruthy();
-    fireEvent.click(moreInfoButton[0]);
-
-    const actionMenuItem = screen.getAllByTestId("action-menu-item");
-    expect(actionMenuItem.length).toEqual(2);
-    fireEvent.click(actionMenuItem[0]);
-    const deleteModal = screen.getByTestId("delete-modal");
-    expect(deleteModal).toBeTruthy();
-  });
-
-  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 });
-    });
-
-    const gridIconAction = screen.getByTestId("icon-action-Grid2");
-    fireEvent.click(gridIconAction);
-
-    const gridItems = screen.getAllByTestId("grid-site-item");
-    const moreInfoButton = screen.getAllByTestId("more-info-button");
-
-    expect(gridItems[0]).toBeTruthy();
-    fireEvent.click(moreInfoButton[0]);
-
-    const actionMenuItem = screen.getAllByTestId("action-menu-item");
-    expect(actionMenuItem.length).toEqual(2);
-    fireEvent.click(actionMenuItem[1]);
-    const publishModal = screen.getByTestId("publish-modal");
-    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 });
-    });
-
-    const listIconAction = screen.getByTestId("icon-action-BulletList");
-    expect(listIconAction).toBeTruthy();
-    await act(async () => {
-      fireEvent.click(listIconAction);
-    });
-    const listItems = screen.getAllByTestId("list-site-item");
-    const moreInfoButton = screen.getAllByTestId("more-info-button");
-
-    expect(listItems[0]).toBeTruthy();
-    fireEvent.click(moreInfoButton[0]);
-
-    const actionMenuItem = screen.getAllByTestId("action-menu-item");
-    expect(actionMenuItem.length).toEqual(2);
-    fireEvent.click(actionMenuItem[1]);
-    const publishModal = screen.getByTestId("publish-modal");
-    expect(publishModal).toBeTruthy();
-  });
+	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 act(async () => {
+			render(Component, { store });
+		});
+		const collapseButton = screen.getByTestId("recent-sites-collapse-button");
+		const hideButtonLabel = screen.getByTestId("recent-sites-hide-label");
+
+		expect(collapseButton).toBeTruthy();
+		expect(hideButtonLabel).toBeTruthy();
+
+		fireEvent.click(collapseButton);
+		const showButtonLabel = screen.getByTestId("recent-sites-show-label");
+		expect(showButtonLabel).toBeTruthy();
+	});
+
+	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 });
+		});
+
+		const recentSiteItems = screen.getAllByTestId("recent-sites-item");
+
+		expect(recentSiteItems.length).toEqual(2);
+
+		fireEvent.click(recentSiteItems[0]);
+		await waitFor(() => expect(history.location.pathname).toEqual("/sites/pages"));
+	});
+
+	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 });
+		});
+
+		const gridIconAction = screen.getByTestId("icon-action-Grid2");
+		const listIconAction = screen.getByTestId("icon-action-BulletList");
+		expect(gridIconAction).toBeTruthy();
+		expect(listIconAction).toBeTruthy();
+		await act(async () => {
+			fireEvent.click(listIconAction);
+		});
+		const listSitesItems = screen.getAllByTestId("list-site-item");
+		expect(listSitesItems.length).toEqual(2);
+	});
+
+	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 });
+		});
+
+		const gridIconAction = screen.getByTestId("icon-action-Grid2");
+		const listIconAction = screen.getByTestId("icon-action-BulletList");
+		expect(gridIconAction).toBeTruthy();
+		expect(listIconAction).toBeTruthy();
+		await act(async () => {
+			fireEvent.click(listIconAction);
+		});
+		const listSitesItems = screen.getAllByTestId("list-site-item");
+		expect(listSitesItems.length).toEqual(2);
+
+		fireEvent.click(listSitesItems[0]);
+		await waitFor(() => expect(history.location.pathname).toEqual("/sites/pages"));
+	});
+
+	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 });
+		});
+
+		const gridIconAction = screen.getByTestId("icon-action-Grid2");
+		const listIconAction = screen.getByTestId("icon-action-BulletList");
+		expect(gridIconAction).toBeTruthy();
+		expect(listIconAction).toBeTruthy();
+
+		fireEvent.click(gridIconAction);
+		const allSitesGridFilter = screen.getByTestId("all-sites-grid-filter");
+		const gridSitesItems = screen.queryAllByTestId("grid-site-item");
+		expect(allSitesGridFilter).toBeTruthy();
+		expect(gridSitesItems.length).toEqual(2);
+	});
+
+	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 });
+		});
+
+		const gridSiteItems = screen.getAllByTestId("grid-site-item");
+
+		expect(gridSiteItems.length).toEqual(2);
+
+		await act(async () => {
+			fireEvent.click(gridSiteItems[0]);
+		});
+
+		expect(history.location.pathname).toEqual("/sites/pages");
+	});
+
+	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 });
+		});
+
+		const newButton = screen.getByTestId("button-default");
+		expect(newButton.textContent).toEqual("New");
+		await act(async () => {
+			fireEvent.click(newButton);
+		});
+		const siteModalForm = screen.getByTestId("site-modal-form");
+		expect(siteModalForm).toBeTruthy();
+	});
+
+	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 });
+		});
+
+		const floatingMenuButton = screen.getByTestId("grid-floating-menu-button");
+		expect(floatingMenuButton).toBeTruthy();
+		fireEvent.click(floatingMenuButton);
+		const listItem = screen.getAllByTestId("list-item");
+		expect(listItem.length).toEqual(6);
+		const sortByNameAsc = listItem[0];
+		const sortByNameDesc = listItem[1];
+		const sortByLastAccessDesc = listItem[2];
+		const sortByLastAccessAsc = listItem[3];
+		expect(sortByNameAsc.textContent).toEqual("Ascendent");
+		expect(sortByNameDesc.textContent).toEqual("Descendent");
+		expect(sortByLastAccessDesc.textContent).toEqual("Newest");
+		expect(sortByLastAccessAsc.textContent).toEqual("Oldest");
+	});
+
+	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 });
+		});
+
+		const floatingMenuButton = screen.getByTestId("grid-floating-menu-button");
+		expect(floatingMenuButton).toBeTruthy();
+		fireEvent.click(floatingMenuButton);
+		const listItem = screen.getAllByTestId("list-item");
+		expect(listItem.length).toEqual(6);
+
+		const sortAscendingName = listItem[0];
+		const sortDescendingName = listItem[1];
+		const sortDescendingLastAccess = listItem[2];
+		const sortAscendingLastAccess = listItem[3];
+
+		expect(sortAscendingName.textContent).toEqual("Ascendent");
+		expect(sortDescendingName.textContent).toEqual("Descendent");
+		expect(sortDescendingLastAccess.textContent).toEqual("Newest");
+		expect(sortAscendingLastAccess.textContent).toEqual("Oldest");
+	});
+
+	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 });
+		});
+
+		const floatingMenuButton = screen.getByTestId("grid-floating-menu-button");
+		expect(floatingMenuButton).toBeTruthy();
+		fireEvent.click(floatingMenuButton);
+		const listItem = screen.getAllByTestId("list-item");
+		expect(listItem.length).toEqual(6);
+
+		const sortAscendingName = listItem[0];
+		const sortDescendingName = listItem[1];
+		const sortDescendingLastAccess = listItem[2];
+		const sortAscendingLastAccess = listItem[3];
+
+		expect(sortAscendingName.textContent).toEqual("Ascendent");
+		expect(sortDescendingName.textContent).toEqual("Descendent");
+		expect(sortDescendingLastAccess.textContent).toEqual("Newest");
+		expect(sortAscendingLastAccess.textContent).toEqual("Oldest");
+		const label0 = screen.getByTestId("filter-label");
+		expect(label0.textContent).toEqual("Last access");
+
+		fireEvent.click(sortAscendingName);
+		const label = screen.getByTestId("filter-label");
+		expect(label.textContent).toEqual("Name");
+	});
+
+	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 });
+		});
+
+		const floatingMenuButton = screen.getByTestId("grid-floating-menu-button");
+		expect(floatingMenuButton).toBeTruthy();
+		fireEvent.click(floatingMenuButton);
+		const listItem = screen.getAllByTestId("list-item");
+		expect(listItem.length).toEqual(6);
+		const sortDescendingLastAccess = listItem[2];
+		fireEvent.click(sortDescendingLastAccess);
+		const labelAccess = screen.getByTestId("filter-label");
+		expect(labelAccess.textContent).toEqual("Last access");
+	});
+
+	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 });
+		});
+
+		const floatingMenuButton = screen.getByTestId("grid-floating-menu-button");
+		expect(floatingMenuButton).toBeTruthy();
+		fireEvent.click(floatingMenuButton);
+		const listItem = screen.getAllByTestId("list-item");
+		expect(listItem.length).toEqual(6);
+		const sortDescendinDateCreated = listItem[4];
+		fireEvent.click(sortDescendinDateCreated);
+		const labelAccess = screen.getByTestId("filter-label");
+		expect(labelAccess.textContent).toEqual("Creation date");
+	});
+
+	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 });
+		});
+
+		const gridItems = screen.getAllByTestId("grid-site-item");
+		const moreInfoButton = screen.getAllByTestId("more-info-button");
+
+		expect(gridItems[0]).toBeTruthy();
+		fireEvent.click(moreInfoButton[0]);
+
+		const actionMenuItem = screen.getAllByTestId("action-menu-item");
+		expect(actionMenuItem.length).toEqual(2);
+		fireEvent.click(actionMenuItem[0]);
+		const deleteModal = screen.getByTestId("delete-modal");
+		expect(deleteModal).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 });
+		});
+
+		const listIconAction = screen.getByTestId("icon-action-BulletList");
+		expect(listIconAction).toBeTruthy();
+		await act(async () => {
+			fireEvent.click(listIconAction);
+		});
+		const listItems = screen.getAllByTestId("list-site-item");
+		const moreInfoButton = screen.getAllByTestId("more-info-button");
+
+		expect(listItems[0]).toBeTruthy();
+		fireEvent.click(moreInfoButton[0]);
+
+		const actionMenuItem = screen.getAllByTestId("action-menu-item");
+		expect(actionMenuItem.length).toEqual(2);
+		fireEvent.click(actionMenuItem[0]);
+		const deleteModal = screen.getByTestId("delete-modal");
+		expect(deleteModal).toBeTruthy();
+	});
+
+	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 });
+		});
+
+		const gridIconAction = screen.getByTestId("icon-action-Grid2");
+		fireEvent.click(gridIconAction);
+
+		const gridItems = screen.getAllByTestId("grid-site-item");
+		const moreInfoButton = screen.getAllByTestId("more-info-button");
+
+		expect(gridItems[0]).toBeTruthy();
+		fireEvent.click(moreInfoButton[0]);
+
+		const actionMenuItem = screen.getAllByTestId("action-menu-item");
+		expect(actionMenuItem.length).toEqual(2);
+		fireEvent.click(actionMenuItem[1]);
+		const publishModal = screen.getByTestId("publish-modal");
+		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 });
+		});
+
+		const listIconAction = screen.getByTestId("icon-action-BulletList");
+		expect(listIconAction).toBeTruthy();
+		await act(async () => {
+			fireEvent.click(listIconAction);
+		});
+		const listItems = screen.getAllByTestId("list-site-item");
+		const moreInfoButton = screen.getAllByTestId("more-info-button");
+
+		expect(listItems[0]).toBeTruthy();
+		fireEvent.click(moreInfoButton[0]);
+
+		const actionMenuItem = screen.getAllByTestId("action-menu-item");
+		expect(actionMenuItem.length).toEqual(2);
+		fireEvent.click(actionMenuItem[1]);
+		const publishModal = screen.getByTestId("publish-modal");
+		expect(publishModal).toBeTruthy();
+	});
 });