Skip to content

Commit

Permalink
Merge pull request #44 from expfig/test/12-ComponentTable
Browse files Browse the repository at this point in the history
test ✅ teste para o componente (Table) para ter cert…
  • Loading branch information
expfig authored Jul 19, 2023
2 parents f27cf08 + 4772d19 commit 907f8a3
Show file tree
Hide file tree
Showing 10 changed files with 265 additions and 21 deletions.
2 changes: 2 additions & 0 deletions src/components/pagination-footer/interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ interface IPaginationFooterProps {
isLoadingPagination: boolean;
onClickNext: (value?: number | any) => void;
onClickPreview: (value?: number | any) => void;
dataTestIdNext?: string;
dataTestIdPreview?: string;
}

/**
Expand Down
12 changes: 10 additions & 2 deletions src/components/pagination-footer/pagination-footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ const PaginationFooter = ({
isLoadingPagination,
onClickNext,
onClickPreview,
dataTestIdNext,
dataTestIdPreview,
}: IPaginationFooterProps) => {
const theme = useTheme();

Expand All @@ -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>
Expand All @@ -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>
Expand Down
56 changes: 56 additions & 0 deletions src/components/table/__mock-data__/mock-table.ts
Original file line number Diff line number Diff line change
@@ -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 };
6 changes: 6 additions & 0 deletions src/components/table/__test__/description.md
Original file line number Diff line number Diff line change
@@ -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
149 changes: 149 additions & 0 deletions src/components/table/__test__/tabele.spec.tsx
Original file line number Diff line number Diff line change
@@ -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);
});
});
14 changes: 7 additions & 7 deletions src/components/table/interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down
44 changes: 32 additions & 12 deletions src/components/table/table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -46,6 +48,7 @@ const Table = ({
onClickNext,
firstPage,
lastPage,
isLoading = false,
}: IDataTableProps) => {
const theme = useTheme();

Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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}
Expand Down Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions src/global/styles/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ const colors = {
yellow_400: "#c59017",
yellow_500: "#EAC600",
orange_100: "#FFA500",
brown_300: "#3c3535",
};

/**
Expand Down
1 change: 1 addition & 0 deletions src/pages/aprovation/aprovation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,7 @@ const Aprovation = () => {
pages={pagesData}
firstPage={countPage}
lastPage={lastPage}
isLoading={false}
onClickNext={(pageCount: number) => {
handleOnclickPageNextOrPreview("next", Number(pageCount));
return pageCount;
Expand Down
Loading

0 comments on commit 907f8a3

Please sign in to comment.