Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Some updates to Resultset table component #1428

Merged
merged 2 commits into from Dec 30, 2022
Merged

Some updates to Resultset table component #1428

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6efd68f
Fixes in Resultset table
GomezIvann Dec 28, 2022
bd21979
Updating the Resultset table tests
GomezIvann Dec 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 24 additions & 0 deletions lib/src/resultsetTable/Icons.tsx
View file
Open in desktop
@@ -0,0 +1,24 @@
import React from "react";

const icons = {
arrowUp: (
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
</svg>
),
arrowDown: (
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" />
</svg>
),
bothArrows: (
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z" />
</svg>
),
};

export default icons;
75 changes: 50 additions & 25 deletions lib/src/resultsetTable/ResultsetTable.stories.tsx
View file
Open in desktop
Expand Up @@ -4,6 +4,7 @@ import DxcButton from "../button/Button";
import Title from "../../.storybook/components/Title";
import ExampleContainer from "../../.storybook/components/ExampleContainer";
import { userEvent, within } from "@storybook/testing-library";
import styled from "styled-components";

export default {
title: "Resultset Table",
Expand Down Expand Up @@ -48,6 +49,24 @@ const columnsSortable = [
{ displayValue: "City", isSortable: false },
];

const longValues = [
[
{ displayValue: "000000000000000001", sortValue: "000000000000000001" },
{ displayValue: "Peter Larsson González", sortValue: "Peter" },
{ displayValue: "Miami: The city that never sleeps", sortValue: "Miami" },
],
[
{ displayValue: "002", sortValue: "002" },
{ displayValue: "Louis", sortValue: "Louis" },
{ displayValue: "London", sortValue: "London" },
],
[
{ displayValue: "003", sortValue: "003" },
{ displayValue: "Aida", sortValue: "Aida" },
{ displayValue: "Wroclaw", sortValue: "Wroclaw" },
],
];

const rowsSortable = [
[
{ displayValue: "001", sortValue: "001" },
Expand Down Expand Up @@ -167,89 +186,95 @@ export const Chromatic = () => (
<>
<ExampleContainer>
<Title title="Sortable table" theme="light" level={4} />
<DxcResultsetTable columns={columnsSortable} rows={rowsSortable}></DxcResultsetTable>
<DxcResultsetTable columns={columnsSortable} rows={rowsSortable} />
</ExampleContainer>
<ExampleContainer>
<Title title="With action" theme="light" level={4} />
<DxcResultsetTable columns={columns} rows={rowsIcon}></DxcResultsetTable>
<DxcResultsetTable columns={columns} rows={rowsIcon} />
</ExampleContainer>
<ExampleContainer>
<Title title="With items per page option" theme="light" level={4} />
<DxcResultsetTable
columns={columns}
rows={rows}
itemsPerPage={2}
itemsPerPageOptions={[2, 3]}
></DxcResultsetTable>
<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={2} itemsPerPageOptions={[2, 3]} />
</ExampleContainer>
<ExampleContainer>
<Title title="Scroll resultset table" theme="light" level={4} />
<DxcResultsetTable columns={longColumns} rows={longRows}></DxcResultsetTable>
<DxcResultsetTable columns={longColumns} rows={longRows} />
</ExampleContainer>
<ExampleContainer>
<SmallContainer>
<Title title="Small container and text overflow" theme="light" level={4} />
<DxcResultsetTable columns={columnsSortable} rows={longValues} />
</SmallContainer>
</ExampleContainer>
<Title title="Margins" theme="light" level={2} />
<ExampleContainer>
<Title title="Xxsmall" theme="light" level={4} />
<DxcResultsetTable columns={columns} rows={rows} margin={"xxsmall"}></DxcResultsetTable>
<DxcResultsetTable columns={columns} rows={rows} margin={"xxsmall"} />
</ExampleContainer>
<ExampleContainer>
<Title title="Xsmall" theme="light" level={4} />
<DxcResultsetTable columns={columns} rows={rows} margin={"xsmall"}></DxcResultsetTable>
<DxcResultsetTable columns={columns} rows={rows} margin={"xsmall"} />
</ExampleContainer>
<ExampleContainer>
<Title title="Small" theme="light" level={4} />
<DxcResultsetTable columns={columns} rows={rows} margin={"small"}></DxcResultsetTable>
<DxcResultsetTable columns={columns} rows={rows} margin={"small"} />
</ExampleContainer>
<ExampleContainer>
<Title title="Medium" theme="light" level={4} />
<DxcResultsetTable columns={columns} rows={rows} margin={"medium"}></DxcResultsetTable>
<DxcResultsetTable columns={columns} rows={rows} margin={"medium"} />
</ExampleContainer>
<ExampleContainer>
<Title title="Large" theme="light" level={4} />
<DxcResultsetTable columns={columns} rows={rows} margin={"large"}></DxcResultsetTable>
<DxcResultsetTable columns={columns} rows={rows} margin={"large"} />
</ExampleContainer>
<ExampleContainer>
<Title title="Xlarge" theme="light" level={4} />
<DxcResultsetTable columns={columns} rows={rows} margin={"xlarge"}></DxcResultsetTable>
<DxcResultsetTable columns={columns} rows={rows} margin={"xlarge"} />
</ExampleContainer>
<ExampleContainer>
<ExampleContainer expanded>
<Title title="Xxlarge" theme="light" level={4} />
<DxcResultsetTable columns={columns} rows={rows} margin={"xxlarge"}></DxcResultsetTable>
<hr />
<DxcResultsetTable columns={columns} rows={rows} margin={"xxlarge"} />
</ExampleContainer>
</>
);

const SmallContainer = styled.div`
width: 500px;
`;

const ResultsetTableAsc = () => (
<ExampleContainer>
<Title title="Ascendant sorting" theme="light" level={4} />
<DxcResultsetTable columns={columnsSortable} rows={rowsSortable}></DxcResultsetTable>
<DxcResultsetTable columns={columnsSortable} rows={rowsSortable} />
</ExampleContainer>
);

export const AscendentSorting = ResultsetTableAsc.bind({});
AscendentSorting.play = async ({ canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.click(canvas.queryByText("Name"));
const idHeader = canvas.getAllByRole("button")[0];
await userEvent.click(idHeader);
};

const ResultsetTableDesc = () => (
<ExampleContainer>
<Title title="Descendant sorting" theme="light" level={4} />
<DxcResultsetTable columns={columnsSortable} rows={rowsSortable}></DxcResultsetTable>
<DxcResultsetTable columns={columnsSortable} rows={rowsSortable} />
</ExampleContainer>
);

export const DescendantSorting = ResultsetTableDesc.bind({});
DescendantSorting.play = async ({ canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.click(canvas.queryByText("Name"));
await userEvent.click(canvas.queryByText("Name"));
const nameHeader = canvas.getAllByRole("button")[1];
await userEvent.click(nameHeader);
await userEvent.click(nameHeader);
};

const ResultsetTableMiddle = () => (
<ExampleContainer>
<Title title="Middle page" theme="light" level={4} />
<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={2}></DxcResultsetTable>
<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={2} />
</ExampleContainer>
);

Expand All @@ -263,7 +288,7 @@ MiddlePage.play = async ({ canvasElement }) => {
const ResultsetTableLast = () => (
<ExampleContainer>
<Title title="Last page" theme="light" level={4} />
<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={2}></DxcResultsetTable>
<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={2} />
</ExampleContainer>
);

Expand Down
96 changes: 27 additions & 69 deletions lib/src/resultsetTable/ResultsetTable.test.js
View file
Open in desktop
Expand Up @@ -34,7 +34,6 @@ const columns = [
isSortable: false,
},
];

const rows = [
[
{
Expand Down Expand Up @@ -63,9 +62,6 @@ const rows = [
displayValue: "Oviedo",
sortValue: "Oviedo",
},
{
displayValue: "",
},
],
[
{
Expand Down Expand Up @@ -122,9 +118,6 @@ const rows = [
displayValue: "Barcelona",
sortValue: "Barcelona",
},
{
displayValue: "",
},
],
[
{
Expand Down Expand Up @@ -167,9 +160,6 @@ const rows = [
displayValue: "Oviedo",
sortValue: "Oviedo",
},
{
displayValue: "",
},
],
[
{
Expand All @@ -184,12 +174,8 @@ const rows = [
displayValue: "Barcelona",
sortValue: "Barcelona",
},
{
displayValue: "",
},
],
];

const rows2 = [
[
{
Expand Down Expand Up @@ -238,77 +224,59 @@ const rows2 = [
],
];

describe("ResultsetTable component tests", () => {
test("ResultsetTable rendered correctly", () => {
const { getByText } = render(
<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={3}></DxcResultsetTable>
);
describe("Resultset table component tests", () => {
test("Resultset table rendered correctly", () => {
const { getByText } = render(<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={3} />);
expect(getByText("Peter")).toBeTruthy();
});
test("Resultsettable shows as many rows as itemsPerPage", () => {
const { getAllByRole } = render(
<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={3}></DxcResultsetTable>
);
test("Resultset table shows as many rows as itemsPerPage", () => {
const { getAllByRole } = render(<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={3} />);
expect(getAllByRole("row").length - 1).toEqual(3);
});

test("Resultsettable shows rows on second page", () => {
const { getByText, getAllByRole } = render(
<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={3}></DxcResultsetTable>
);
test("Resultset table shows rows on second page", () => {
const { getByText, getAllByRole } = render(<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={3} />);
expect(getByText("Peter")).toBeTruthy();
expect(getByText("Louis")).toBeTruthy();
expect(getByText("Lana")).toBeTruthy();
expect(getAllByRole("row").length - 1).toEqual(3);
const nextButton = getAllByRole("button")[2];
const nextButton = getAllByRole("button")[3];
fireEvent.click(nextButton);
expect(getByText("4 to 6 of 10")).toBeTruthy();
// expect(getByText("Page: 2 of 4")).toBeTruthy();
expect(getByText("Rick")).toBeTruthy();
expect(getByText("Mark")).toBeTruthy();
expect(getByText("Cris")).toBeTruthy();
expect(getAllByRole("row").length - 1).toEqual(3);
});

test("Resultsettable goToPage works as expected", () => {
test("Resultset table goToPage works as expected", () => {
window.HTMLElement.prototype.scrollIntoView = () => {};
window.HTMLElement.prototype.scrollTo = () => {};
const { getByText, getAllByRole, getByRole } = render(
<DxcResultsetTable columns={columns} showGoToPage={true} rows={rows} itemsPerPage={3}></DxcResultsetTable>
const { getByText, getAllByRole } = render(
<DxcResultsetTable columns={columns} showGoToPage={true} rows={rows} itemsPerPage={3} />
);
expect(getByText("Peter")).toBeTruthy();
expect(getByText("Louis")).toBeTruthy();
expect(getByText("Lana")).toBeTruthy();
expect(getAllByRole("row").length - 1).toEqual(3);
const goToPageSelect = getAllByRole("button")[2];
act(() => {
userEvent.click(goToPageSelect);
});
const goToPageSelect = getAllByRole("button")[3];
userEvent.click(goToPageSelect);
const goToPageOption = getByText("2");
act(() => {
userEvent.click(goToPageOption);
});

userEvent.click(goToPageOption);
expect(getByText("4 to 6 of 10")).toBeTruthy();
expect(getByText("Rick")).toBeTruthy();
expect(getByText("Mark")).toBeTruthy();
expect(getByText("Cris")).toBeTruthy();
expect(getAllByRole("row").length - 1).toEqual(3);
});

test("Resultsettable going to the last page shows only one row", () => {
const { getByText, getAllByRole } = render(
<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={3}></DxcResultsetTable>
);
const lastButton = getAllByRole("button")[3];
test("Resultset table going to the last page shows only one row", () => {
const { getByText, getAllByRole } = render(<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={3} />);
const lastButton = getAllByRole("button")[4];
fireEvent.click(lastButton);
expect(getByText("10 to 10 of 10")).toBeTruthy();
expect(getAllByRole("row")).toHaveLength(2);
expect(getByText("Cosmin")).toBeTruthy();
});

test("Resultsettable sort rows by column", () => {
const component = render(<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={3}></DxcResultsetTable>);
test("Resultset table sort rows by column", () => {
const component = render(<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={3} />);
expect(component.queryByText("Peter")).toBeTruthy();
fireEvent.click(component.queryByText("Name"));
expect(component.queryByText("Tina")).not.toBeTruthy();
Expand All @@ -318,29 +286,19 @@ describe("ResultsetTable component tests", () => {
expect(component.queryByText("Tina")).toBeTruthy();
expect(component.queryByText("Cosmin")).not.toBeTruthy();
});
test("Resultsettable change rows should go to first page", () => {
const { queryByText, rerender } = render(
<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={3}></DxcResultsetTable>
);
test("Resultset table change rows should go to first page", () => {
const { queryByText, rerender } = render(<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={3} />);
expect(queryByText("Peter")).toBeTruthy();
rerender(<DxcResultsetTable columns={columns} rows={rows2} itemsPerPage={3}></DxcResultsetTable>);
rerender(<DxcResultsetTable columns={columns} rows={rows2} itemsPerPage={3} />);
expect(queryByText("1 to 3 of 3")).toBeTruthy();
});

test("Resultsettable change itemsPerPage should go to first page", () => {
const { getAllByRole, queryByText, rerender } = render(
<DxcResultsetTable
columns={columns}
rows={rows}
itemsPerPage={3}
itemsPerPageOptions={[2, 3]}
></DxcResultsetTable>
test("Resultset table change itemsPerPage should go to first page", () => {
const { getAllByRole } = render(
<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={3} itemsPerPageOptions={[2, 3]} />
);
const lastButton = getAllByRole("button")[3];
const lastButton = getAllByRole("button")[4];
expect(getAllByRole("row").length - 1).toEqual(3);
fireEvent.click(lastButton);
expect(getAllByRole("row").length - 1).toEqual(1);
rerender(<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={6}></DxcResultsetTable>);
expect(getAllByRole("row").length - 1).toEqual(6);
expect(queryByText("Peter")).toBeTruthy();
});
});