Merge pull request #44 from expfig/test/12-ComponentTable

test ✅ teste para o componente (Table) para ter cert…
expfig · Jul 19, 2023 · 907f8a3 · 907f8a3
2 parents f27cf08 + 4772d19
commit 907f8a3
Show file tree

Hide file tree

Showing 10 changed files with 265 additions and 21 deletions.
diff --git a/src/components/pagination-footer/interface.ts b/src/components/pagination-footer/interface.ts
@@ -44,6 +44,8 @@ interface IPaginationFooterProps {
 	isLoadingPagination: boolean;
 	onClickNext: (value?: number | any) => void;
 	onClickPreview: (value?: number | any) => void;
+	dataTestIdNext?: string;
+	dataTestIdPreview?: string;
 }
 
 /**

diff --git a/src/components/pagination-footer/pagination-footer.tsx b/src/components/pagination-footer/pagination-footer.tsx
@@ -29,6 +29,8 @@ const PaginationFooter = ({
 	isLoadingPagination,
 	onClickNext,
 	onClickPreview,
+	dataTestIdNext,
+	dataTestIdPreview,
 }: IPaginationFooterProps) => {
 	const theme = useTheme();
 
@@ -50,7 +52,10 @@ const PaginationFooter = ({
 						{pages.length ? (
 							<FooterTable>
 								{pages.length > 1 && (
-									<ButtonPreview onClick={onClickPreview}>
+									<ButtonPreview
+										data-testid={dataTestIdPreview}
+										onClick={onClickPreview}
+									>
 										<FiArrowLeft size={18} color={theme.colors.natural} />
 										<TextSpanLeft>Anterior</TextSpanLeft>
 									</ButtonPreview>
@@ -73,7 +78,10 @@ const PaginationFooter = ({
 								{firstPage === lastpage ? (
 									<></>
 								) : (
-									<ButtonNext onClick={onClickNext}>
+									<ButtonNext
+										data-testid={dataTestIdNext}
+										onClick={onClickNext}
+									>
 										<TextSpanRight>Próximo</TextSpanRight>
 										<FiArrowRight size={18} color={theme.colors.natural} />
 									</ButtonNext>

diff --git a/src/components/table/__mock-data__/mock-table.ts b/src/components/table/__mock-data__/mock-table.ts
@@ -0,0 +1,56 @@
+/**
+ * IMPORTS
+ */
+
+interface IDataPagesProps {
+	url: string;
+	label: string;
+	active: boolean;
+}
+
+const pages: IDataPagesProps[] = [
+	{
+		url: "http://localhost.com.br",
+		active: true,
+		label: "1",
+	},
+	{
+		url: "http://localhost.com.br",
+		active: false,
+		label: "2",
+	},
+];
+
+interface IApprovalRequest {
+	id: string | number;
+	status: string;
+	coil_number: string;
+	trip_number: string;
+	type: string;
+	driver_id: number;
+	driver_name: string;
+	placa: string;
+	group_name: string;
+	created_at: string;
+	created_at_formatted: string;
+}
+const dataTable: IApprovalRequest[] = [
+	{
+		id: 374822,
+		coil_number: "23370945C",
+		status: "aguardando",
+		trip_number: "367217",
+		type: "bobina",
+		driver_id: 77,
+		driver_name: "MARCOS RODRIGO ALMEIDA",
+		placa: "RNG7A17",
+		group_name: "Isauro Neto(B)",
+		created_at: "2023-07-16 16:06:18",
+		created_at_formatted: "16/07/2023 16:06",
+	},
+];
+
+/**
+ * EXPORT
+ */
+export { type IApprovalRequest, type IDataPagesProps, dataTable, pages };
diff --git a/src/components/table/__test__/description.md b/src/components/table/__test__/description.md
@@ -0,0 +1,6 @@
+# TESTE DO COMPONENTE TABLE
+
+1 -> Deve ser possível renderizar o componente de table
+2 -> Deve ser possível renderizar o icone-svg-oval e o texto (Carregando, por favor, aguarde.)
+3 -> Deve ser possível renderizar o titulo da tabela corretamente sendo eles (ID, Data de criação, Status, Viagem, Bobina, Motorista, Placa, Grupo, Tipo)
+4 -> Deve ser possivel chama a função onClickNext e onClickPreview pelo menos uma vez
diff --git a/src/components/table/__test__/tabele.spec.tsx b/src/components/table/__test__/tabele.spec.tsx
@@ -0,0 +1,149 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { ThemeProvider } from "styled-components";
+import { BrowserRouter } from "react-router-dom";
+
+import { render } from "@testing-library/react";
+import userfireEvent from "@testing-library/user-event";
+
+import theme from "../../../global/styles/theme";
+
+// components
+import { Table } from "../table";
+
+// mock-data
+import { pages, dataTable } from "../__mock-data__/mock-table";
+
+const Providers: React.FC = ({ children }: any) => {
+	return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};
+
+describe("Table test of components", () => {
+	it("should render o table component", () => {
+		render(
+			<Table
+				data={[]}
+				pages={[]}
+				firstPage={1}
+				lastPage={2}
+				isLoading={false}
+				onClickNext={(pageCount: number) => {
+					return pageCount;
+				}}
+				onClickPreview={(pageCount: number) => {}}
+			/>,
+			{
+				wrapper: Providers,
+			}
+		);
+	});
+
+	it("should be possible to view the icon and the loading text when the isLoading property is set to false", () => {
+		const { getByTestId, getByText } = render(
+			<Table
+				data={[]}
+				pages={[]}
+				firstPage={1}
+				lastPage={2}
+				isLoading={true}
+				onClickNext={(pageCount: number) => {
+					return pageCount;
+				}}
+				onClickPreview={(pageCount: number) => {}}
+			/>,
+			{
+				wrapper: Providers,
+			}
+		);
+
+		const elementIconSvgOval = getByTestId("oval-loading");
+		const textLoadingPleaseWait = getByText("Carregando, por favor, aguarde.");
+
+		expect(elementIconSvgOval).toBeTruthy();
+
+		expect(textLoadingPleaseWait.textContent).toBe(
+			"Carregando, por favor, aguarde."
+		);
+	});
+
+	it("should be possible to render the title of the table correctly being them (ID, Date created, Status, Trip, Coil, Driver, Plate, Group, Type)", () => {
+		const { getByText } = render(
+			<BrowserRouter>
+				<Table
+					data={dataTable}
+					pages={pages}
+					firstPage={1}
+					lastPage={2}
+					isLoading={false}
+					onClickNext={(pageCount: number) => {
+						return pageCount;
+					}}
+					onClickPreview={(pageCount: number) => {}}
+				/>
+			</BrowserRouter>,
+			{
+				wrapper: Providers,
+			}
+		);
+
+		const ElementTitleID = getByText("ID");
+		const ElementTitleCreatedAt = getByText("Data de criação");
+		const ElementTitleStatus = getByText("Status");
+		const ElementTitleTrip = getByText("Viagem");
+		const ElementTitleCoil = getByText("Bobina");
+		const ElementTitleDriver = getByText("Motorista");
+		const ElementTitleGroup = getByText("Grupo");
+		const ElementTitleType = getByText("Tipo");
+
+		expect(ElementTitleID.textContent).toBe("ID");
+		expect(ElementTitleCreatedAt.textContent).toBe("Data de criação");
+		expect(ElementTitleStatus.textContent).toBe("Status");
+		expect(ElementTitleTrip.textContent).toBe("Viagem");
+		expect(ElementTitleCoil.textContent).toBe("Bobina");
+		expect(ElementTitleDriver.textContent).toBe("Motorista");
+		expect(ElementTitleGroup.textContent).toBe("Grupo");
+		expect(ElementTitleType.textContent).toBe("Tipo");
+	});
+
+	it("must be possible to call the onClickNext function at least once", async () => {
+		const handleMockOnclickNext = jest.fn();
+		const handleMockOnclickPreview = jest.fn();
+
+		const { getByTestId } = render(
+			<BrowserRouter>
+				<Table
+					data={dataTable}
+					pages={pages}
+					firstPage={1}
+					lastPage={2}
+					isLoading={false}
+					onClickNext={(pageCount: number) => {
+						handleMockOnclickNext();
+						return pageCount;
+					}}
+					onClickPreview={(pageCount: number) => {
+						handleMockOnclickPreview();
+					}}
+				/>
+			</BrowserRouter>,
+			{
+				wrapper: Providers,
+			}
+		);
+
+		const elementButtonClickNext = getByTestId("button-clickNext");
+		const elementButtonClickPreview = getByTestId("button-clickPreview");
+
+		await userfireEvent.setup().click(elementButtonClickNext);
+
+		await userfireEvent.setup().click(elementButtonClickPreview);
+
+		// espero que uma função fictícia seja chamada.
+		expect(handleMockOnclickNext).toHaveBeenCalledTimes(1);
+
+		// espero que uma função fictícia seja chamada.
+		expect(handleMockOnclickPreview).toHaveBeenCalledTimes(1);
+	});
+});
diff --git a/src/components/table/interface.ts b/src/components/table/interface.ts
@@ -23,22 +23,22 @@ interface IApprovalRequest {
 	created_at: string;
 	created_at_formatted: string;
 }
+interface IDataPagesProps {
+	url: string;
+	label: string;
+	active: boolean;
+}
 
 interface IDataTableProps {
 	data: IApprovalRequest[];
-	pages: any[];
+	pages: IDataPagesProps[];
 	firstPage: number;
 	lastPage: number;
+	isLoading: boolean;
 	onClickPreview: (page: number) => void;
 	onClickNext: (page: number) => number;
 }
 
-interface IDataPagesProps {
-	url: string;
-	label: string;
-	active: boolean;
-}
-
 /**
  * EXPORTS
  */

diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
@@ -7,8 +7,10 @@ import { useEffect, useState } from "react";
 import { useTheme } from "styled-components";
 
 import { Link } from "react-router-dom";
+
+import { Oval } from "react-loader-spinner";
+
 import { Text } from "../text";
-import { FiLoader } from "react-icons/fi";
 
 // typings
 import { type IDataTableProps, type IDataPagesProps } from "./interface";
@@ -46,6 +48,7 @@ const Table = ({
 	onClickNext,
 	firstPage,
 	lastPage,
+	isLoading = false,
 }: IDataTableProps) => {
 	const theme = useTheme();
 
@@ -58,7 +61,26 @@ const Table = ({
 	return (
 		<Container>
 			<>
-				{pageData.length ? (
+				{isLoading ? (
+					<WrapperLoading>
+						<Oval
+							height={22}
+							width={22}
+							color={theme.colors.blue_80}
+							wrapperClass=""
+							visible={true}
+							ariaLabel="oval-loading"
+							secondaryColor={theme.colors.brown_300}
+							strokeWidth={2}
+							strokeWidthSecondary={2}
+						/>
+						<p style={{ marginTop: 12 }}>
+							<strong style={{ fontSize: 14, color: theme.colors.black_100 }}>
+								Carregando, por favor, aguarde.
+							</strong>
+						</p>
+					</WrapperLoading>
+				) : (
 					<>
 						<TableHtml>
 							<Thead>
@@ -76,7 +98,7 @@ const Table = ({
 							</Thead>
 
 							<Tbody>
-								{data.map(props => (
+								{data?.map(props => (
 									<Tr key={String(props?.id)}>
 										<Td>{props?.id}</Td>
 										<Td>{props?.created_at_formatted}</Td>
@@ -89,7 +111,10 @@ const Table = ({
 										<Td>{hanfleReturnText(props?.trip_number)}</Td>
 										<Td>{hanfleReturnText(props?.coil_number)}</Td>
 										<Td>
-											<Link to={`/aprovacao/${props.id}/${props.driver_id}`}>
+											<Link
+												id="title-driver"
+												to={`/aprovacao/${props.id}/${props.driver_id}`}
+											>
 												{hanfleReturnText(props?.driver_name)}
 											</Link>
 										</Td>
@@ -107,9 +132,11 @@ const Table = ({
 						</TableHtml>
 
 						<>
-							{data.length ? (
+							{pageData?.length ? (
 								<FooterTable>
 									<PaginationFooter
+										dataTestIdNext="button-clickNext"
+										dataTestIdPreview="button-clickPreview"
 										pageData={pageData}
 										firstPage={firstPage}
 										lastpage={lastPage}
@@ -142,13 +169,6 @@ const Table = ({
 							)}
 						</>
 					</>
-				) : (
-					<WrapperLoading>
-						<FiLoader size={34} color={theme.colors.blue_100} />
-						<p style={{ marginTop: 12 }}>
-							<strong>Carregando, por favor, aguade.</strong>
-						</p>
-					</WrapperLoading>
 				)}
 			</>
 		</Container>

diff --git a/src/global/styles/theme.ts b/src/global/styles/theme.ts
@@ -31,6 +31,7 @@ const colors = {
 	yellow_400: "#c59017",
 	yellow_500: "#EAC600",
 	orange_100: "#FFA500",
+	brown_300: "#3c3535",
 };
 
 /**

diff --git a/src/pages/aprovation/aprovation.tsx b/src/pages/aprovation/aprovation.tsx
@@ -237,6 +237,7 @@ const Aprovation = () => {
 							pages={pagesData}
 							firstPage={countPage}
 							lastPage={lastPage}
+							isLoading={false}
 							onClickNext={(pageCount: number) => {
 								handleOnclickPageNextOrPreview("next", Number(pageCount));
 								return pageCount;