Skip to content

Adding test instructions and error test #87

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

Merged
raquelarrojo merged 2 commits into from
Mar 13, 2025
Merged

Adding test instructions and error test #87

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
5abe73f
Adding test instructions and error test
Jialecl Mar 13, 2025
b03ac4b
reverting one of the tests
Jialecl Mar 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 15 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,10 @@ Hooks
| :------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| collectionUrl: `string` | | The URL of the collection resource to be used for the table. `Required` |
| headers: `object` | | Contains the HTTP headers to be sent along with the HTTP requests to the collectionUrl. `Optional` |
| itemsPerPage: `number` | `5` | The amount of items to be displayed per page. Will be used to calculate the `_start` and `_num` query parameters that will be sent to the collection for pagination. `Optional` |
| itemsPerPage: `number` | `5` | The amount of items to be displayed per page. Will be used to calculate the `_start` and `_num` query parameters that will be sent to the collection for pagination. `Optional` |
| asyncHeadersHandler: `() => Promise<object>` | | Async function that will be executed right before every HTTP request in order to retrieve dynamic headers. It must return a promise that resolves into an object with the keys and values of the headers. These headers will be merged with the ones indicated in the `headers` prop. `Optional` |
| columns: `Column[]` | `[]` | Array of objects specifying the columns to be displayed in the table. Each Column object has:<br> - <b>header</b>: Column label to be placed at the table header.<br> - <b>displayProperty</b>: The name of the property in the items summary to be rendered for this column in the table.<br> - <b>sortProperty</b>: The name of the property in the items summary to be used for sorting the table.<br> - <b>onClickItemFunction</b>: Callback function that will be executed when the user clicks an item in that column. The collection item will be passed to this function when executed.<br> - <b>mapFunction</b>: Callback function that must return the value to be rendered in that column for a specific item. The item will be passed to this function as a parameter. |
| hidePaginator: `boolean` | `false` | If true, paginator will not be displayed. `Optional` |
| columns: `Column[]` | `[]` | Array of objects specifying the columns to be displayed in the table. Each Column object has:<br> - <b>header</b>: Column label to be placed at the table header.<br> - <b>displayProperty</b>: The name of the property in the items summary to be rendered for this column in the table.<br> - <b>sortProperty</b>: The name of the property in the items summary to be used for sorting the table.<br> - <b>onClickItemFunction</b>: Callback function that will be executed when the user clicks an item in that column. The collection item will be passed to this function when executed.<br> - <b>mapFunction</b>: Callback function that must return the value to be rendered in that column for a specific item. The item will be passed to this function as a parameter. |
| hidePaginator: `boolean` | `false` | If true, paginator will not be displayed. `Optional` |
| mode: `"default" \| "reduced"` | `"default"` | Determines the visual style and layout of the table:<br> - `"default"`: Standard table size.<br> - `"reduced"`: More compact table with less spacing, suitable for high-density information. `Optional` |

#### HalTable Example
Expand Down Expand Up @@ -177,6 +177,18 @@ Run the build process updating the bundled files inside the dist folder.
nx build halstack-react-hal #`npx nx build halstack-react-hal` if nx is not recognized as a command.
```

To run the tests you need to serve the mock API first

```bash
nx serve-test halstack-react-hal #`npx nx serve-test halstack-react-hal` if nx is not recognized as a command.
```

and then you can run the tests.

```bash
nx test halstack-react-hal #`npx nx test halstack-react-hal` if nx is not recognized as a command.
```

### Example Application

Contained in the `app` folder.
Expand Down
27 changes: 26 additions & 1 deletion lib/src/tests/halTable.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { fireEvent, queryByText, render, waitFor } from "@testing-library/react";
import { fireEvent, render, waitFor } from "@testing-library/react";
import HalTable from "../components/HalTable";

describe("HalTable component tests", () => {
Expand Down Expand Up @@ -115,3 +115,28 @@ describe("HalTable component tests", () => {
await waitFor(() => expect(getByText("Go to page:")).toBeTruthy());
});
});

test("HalTable is rendering error on fetch fail.", async () => {
const onCellClick = jest.fn();
const { getByText } = render(
<HalTable
collectionUrl="http://error"
columns={[
{
header: "identifier",
displayProperty: "identifier",
sortProperty: "identifier",
onClickItemFunction: (item) => onCellClick(item.summary.identifier),
},
{
header: "baseCompany",
displayProperty: "baseCompany",
sortProperty: "baseCompany",
},
]}
/>
);
await waitFor(() => expect(getByText("Error fetching table data.")).toBeTruthy(), {
timeout: 5000,
});
});
Loading