Skip to content

Commit b2ae2c0

Browse files
GuillaumeKESTEMANGuillaumeKESTEMAN
committed
feat(demos): create Employees demo
1 parent 8b0d6f9 commit b2ae2c0

File tree

8 files changed

+154
-2
lines changed

8 files changed

+154
-2
lines changed

‎features/Demos/Employees/Employees.feature‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
Feature: Consultation des collaborateurs
2+
3+
@RG1
4+
Scenario: Affichage de la liste des collaborateurs
5+
Given Je suis un utilisateur connu et connecté avec le profil "Admin"
6+
When J'accède à la page des collaborateurs
7+
Then la page contient un tableau répertoriant la liste des collaborateurs
8+
And le tableau présente des entêtes de tri de colonnes dans l’ordre suivant : "", "Collaborateur 1", "Collaborateur 2"
9+
And le tableau contient 3 lignes avec 3 colonnes dans l'ordre suivant :
10+
| | employee1 | employee2 |
11+
| Contact | James Philips | Marie Beauchamp |
12+
| Position | Directeur des ventes | Manager des ventes |
13+
| Email | jp@1ltd.example.com | marie@2co.example.com |

‎src/App/Routes/Routes.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { RouteSecure } from './RouteSecure';
66

77
const Home = lazy(() => import('pages/Home'));
88
const Members = lazy(() => import('pages/Demos/Members'));
9+
const Employees = lazy(() => import('pages/Demos/Employees'));
910
const MembersNew = lazy(() => import('pages/Demos/MembersNew'));
1011
const ProtectedPage = lazy(() => import('pages/Demos/ProtectedPage'));
1112
const SearchMembers = lazy(() => import('pages/Demos/SearchMembers'));
@@ -61,6 +62,7 @@ const RoutesCmpt = ({ RouteSecureCmpt = RouteSecure }: TRoutesCmpt) => (
6162
<Route path={ROUTE_URLS.MEMBERS} element={<Members />} />
6263
<Route path={ROUTE_URLS.MEMBERSNEW} element={<MembersNew />} />
6364
<Route path={ROUTE_URLS.SEARCHMEMBERS} element={<SearchMembers />} />
65+
<Route path={ROUTE_URLS.EMPLOYEES} element={<Employees />} />
6466
<Route path={ROUTE_URLS.MODAL_CUSTOM} element={<ModalCustom />} />
6567
<Route path={ROUTE_URLS.NOTIFICATION} element={<Notification />} />
6668
<Route path={ROUTE_URLS.ACCORDION} element={<Accordion />} />

‎src/App/Routes/constants.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ROUTE_URL_EMPLOYEES as EMPLOYEES } from 'pages/Demos/Employees/constants';
12
import { ROUTE_URL_MEMBERS as MEMBERS } from 'pages/Demos/Members/constants';
23
import { ROUTE_URL_MEMBERSNEW as MEMBERSNEW } from 'pages/Demos/MembersNew/constants';
34
import { ROUTE_URL_MODAL_CUSTOM as MODAL_CUSTOM } from 'pages/Demos/ModalCustom/constants';
@@ -11,8 +12,8 @@ import { ROUTE_URL_ACTION as ACTION } from 'pages/Demos/Action/constants';
1112
import { ROUTE_URL_ALERT as ALERT } from 'pages/Demos/Alert/constants';
1213
import { ROUTE_URL_BADGE as BADGE } from 'pages/Demos/Badge/constants';
1314
import { ROUTE_URL_BUTTON as BUTTON } from 'pages/Demos/Button/constants';
14-
import { ROUTE_URL_CHECKBOX_INPUT as CHECKBOX_INPUT } from 'pages/Demos/CheckboxInput/constants';
1515
import { ROUTE_URL_CARD as CARD } from 'pages/Demos/Card/constants';
16+
import { ROUTE_URL_CHECKBOX_INPUT as CHECKBOX_INPUT } from 'pages/Demos/CheckboxInput/constants';
1617
import { ROUTE_URL_DATE_INPUT as DATE_INPUT } from 'pages/Demos/DateInput/constants';
1718
import { ROUTE_URL_FILE_INPUT as FILE_INPUT } from 'pages/Demos/FileInput/constants';
1819
import { ROUTE_URL_FOOTER as FOOTER } from 'pages/Demos/Footer/constants';
@@ -35,8 +36,8 @@ import { ROUTE_URL_STEPPER as STEPPER } from 'pages/Demos/Stepper/constants';
3536
import { ROUTE_URL_SWITCH as SWITCH } from 'pages/Demos/Switch/constants';
3637
import { ROUTE_URL_TABLE as TABLE } from 'pages/Demos/Table/constants';
3738
import { ROUTE_URL_TABS as TABS } from 'pages/Demos/Tabs/constants';
38-
import { ROUTE_URL_TEXTAREA_INPUT as TEXTAREA_INPUT } from 'pages/Demos/TextareaInput/constants';
3939
import { ROUTE_URL_TEXT_INPUT as TEXT_INPUT } from 'pages/Demos/TextInput/constants';
40+
import { ROUTE_URL_TEXTAREA_INPUT as TEXTAREA_INPUT } from 'pages/Demos/TextareaInput/constants';
4041
import { ROUTE_URL_TITLE as TITLE } from 'pages/Demos/Title/constants';
4142
import { ROUTE_URL_TITLE_BAR as TITLE_BAR } from 'pages/Demos/TitleBar/constants';
4243

@@ -51,6 +52,7 @@ const URLS_FULL_DEMOS = {
5152
MEMBERS,
5253
MEMBERSNEW,
5354
SEARCHMEMBERS,
55+
EMPLOYEES,
5456
MODAL_CUSTOM,
5557
NOTIFICATION,
5658
};

‎src/Layout/Menu/constants.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ const MENU_ITEMS = [
1212
url: ROUTE_URL.DEMOS,
1313
basePathChildren: ROUTE_URL.DEMOS,
1414
children: [
15+
{
16+
label: 'Collaborateurs',
17+
url: ROUTE_URL.EMPLOYEES,
18+
},
1519
{
1620
label: 'Membres',
1721
url: ROUTE_URL.MEMBERS,

‎src/pages/Demos/Employees/Employees.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import Layout, { type TLayoutPage } from 'Layout';
2+
import Table from 'shared/components/Table';
3+
import { type TItems } from 'shared/components/Table/Body/Body';
4+
import { TABLE_DATA, TABLE_HEADERS, TABLE_ITEMS_TYPE, TITLE, TITLE_BAR } from './constants';
5+
6+
export type TRequests = TLayoutPage & {
7+
requests?: TItems[];
8+
title?: string;
9+
headers?: typeof TABLE_HEADERS;
10+
};
11+
12+
const Employees = ({ requests = TABLE_DATA, titleBar = TITLE_BAR, title = TITLE, headers = TABLE_HEADERS }: TRequests) => (
13+
<Layout propsTitle={{ title: titleBar, backHome: true }}>
14+
<h1 className="af-title--content">{title}</h1>
15+
<Table title={title} items={requests} headers={headers} itemsType={TABLE_ITEMS_TYPE} />
16+
</Layout>
17+
);
18+
19+
export default Employees;

‎src/pages/Demos/Employees/__tests__/Employees.spec.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { defineFeature, loadFeature } from 'jest-cucumber';
2+
import { render, screen } from 'shared/testsUtils/customRender';
3+
import {
4+
JeSuisUnUtilisateurConnuEtConnecteAvecleProfil,
5+
LaPageContientUnTableau,
6+
LeTableauContientLesLignesCorrespondantAuxDonneesRecues,
7+
LeTableauPresenteDesEntetesDeColonnesDansLOrdreSuivant,
8+
} from 'shared/testsUtils/sharedScenarios';
9+
import Employees from '../Employees';
10+
11+
const feature = loadFeature('features/Demos/Employees/Employees.feature');
12+
const tableItemsType = 'collaborateurs';
13+
14+
defineFeature(feature, test => {
15+
let role: string;
16+
17+
test('Affichage de la liste des collaborateurs', ({ given, when, then, and }) => {
18+
JeSuisUnUtilisateurConnuEtConnecteAvecleProfil(given, (roleMock: string) => {
19+
role = roleMock;
20+
});
21+
22+
when("J'accède à la page des collaborateurs", async () => {
23+
render(<Employees />, {}, { role });
24+
expect(await screen.findByText(/Samuel/)).toBeInTheDocument();
25+
});
26+
27+
LaPageContientUnTableau(then, 'la page contient un tableau répertoriant la liste des collaborateurs', tableItemsType);
28+
29+
LeTableauPresenteDesEntetesDeColonnesDansLOrdreSuivant(
30+
and,
31+
/^le tableau présente des entêtes de tri de colonnes dans l’ordre suivant : "(.*)", "(.*)", "(.*)"$/,
32+
tableItemsType,
33+
);
34+
35+
LeTableauContientLesLignesCorrespondantAuxDonneesRecues(
36+
and,
37+
/^le tableau contient (\d+) lignes avec (\d+) colonnes dans l'ordre suivant :$/,
38+
tableItemsType,
39+
);
40+
});
41+
});

‎src/pages/Demos/Employees/constants.ts‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
export const TITLE_BAR = 'Gestion des collaborateurs';
2+
export const TITLE = 'Liste des collaborateurs';
3+
export const ROUTE_URL_EMPLOYEES = 'employees';
4+
export const TABLE_ITEMS_TYPE = 'collaborateurs';
5+
6+
export const TABLE_HEADERS = [
7+
{ id: 'header', key: 'header', isBlank: true },
8+
{ id: 'employee1', key: 'employee1', label: 'Collaborateur 1', field: 'employee1' },
9+
{ id: 'employee2', key: 'employee2', label: 'Collaborateur 2', field: 'employee2' },
10+
];
11+
12+
export const SERVICE_NAME = 'requests';
13+
14+
export const TABLE_DATA = [
15+
{
16+
key: '1',
17+
cols: {
18+
header: {
19+
id: 'contact',
20+
label: 'Contact',
21+
isHeader: true,
22+
},
23+
employee1: {
24+
label: 'James Philips',
25+
headers: 'employee1 contact',
26+
},
27+
employee2: {
28+
label: 'Marie Beauchamp',
29+
headers: 'employee2 contact',
30+
},
31+
},
32+
},
33+
{
34+
key: '2',
35+
cols: {
36+
header: {
37+
id: 'position',
38+
label: 'Position',
39+
isHeader: true,
40+
},
41+
employee1: {
42+
label: 'Directeur des ventes',
43+
headers: 'employee1 position',
44+
},
45+
employee2: {
46+
label: 'Manager des ventes',
47+
headers: 'employee2 position',
48+
},
49+
},
50+
},
51+
{
52+
key: '3',
53+
cols: {
54+
header: {
55+
id: 'email',
56+
label: 'Email',
57+
isHeader: true,
58+
},
59+
employee1: {
60+
label: '[email protected]',
61+
headers: 'employee1 email',
62+
},
63+
employee2: {
64+
label: '[email protected]',
65+
headers: 'employee2 email',
66+
},
67+
},
68+
},
69+
];

‎src/pages/Demos/Employees/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default } from './Employees';
2+
export { ROUTE_URL_EMPLOYEES, TITLE, TITLE_BAR } from './constants';

0 commit comments

Comments
 (0)