feat: enable playwright on the CI (#1109)

* feat: enable playwright on the CI

* fix: remove  syntax error

* feat: write first playwright test

* fix: add unit test and remove scss file

* fix: migrate to typescript and CSS

* fix: remove .only

* feat: add unit test

* feat: migrate scss

* fix: solve stylelint issue

* fix: migrate scss

* fix: remove some SCSS, add unit test, remove unused props, and migrate component to typescript

* fix: remove screen.debug

.github/workflows/playwright.yml

@@ -4,7 +4,6 @@ on:
     branches: [main, master]
 jobs:
   playwright:
-    if: false
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
@@ -27,7 +26,7 @@ jobs:
           test-command: 'chmod 777 ./playwright/db/init.sh && ./playwright/db/init.sh && npx playwright test'
       - uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
-        with: I 
+        with:
           name: playwright-report
           path: playwright-report/
           retention-days: 30

package.json

@@ -67,7 +67,7 @@
 		"stylelint": "^16.11.0",
 		"stylelint-config-standard": "^36.0.1",
 		"typescript-eslint": "^8.13.0",
-		"vite": "^6.0.3",
+		"vite": "^6.0.6",
 		"vite-envs": "^4.4.10",
 		"vite-tsconfig-paths": "^5.1.4",
 		"vitest": "^2.1.8"

playwright/operations/families.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test';
+
+test('Should create a new family', async ({ page }) => {
+	await page.goto('/');
+	await page.getByRole('link', { name: 'Operations' }).click();
+	await page.getByRole('link', { name: 'Families' }).click();
+	await page.getByRole('link', { name: 'New' }).click();
+	await page.getByLabel('Intitulé*').click();
+	await page.getByLabel('Intitulé*').fill('Familie 1');
+	await page.getByLabel('Title*').click();
+	await page.getByLabel('Title*').fill('Familie 2');
+	await page.getByLabel('Thème').click();
+	await page.getByLabel('Thème').fill('Theme 1');
+	await page.getByLabel('Theme').click();
+	await page.getByLabel('Theme').fill('Theme 2');
+	await page.getByRole('button', { name: 'Save' }).click();
+	await expect(page.locator('h2')).toContainText('Familie 1');
+	await page.getByText('Display second language').click();
+	await expect(page.locator('h2')).toContainText('" Familie 2 "');
+	await page.getByRole('link', { name: 'Families' }).click();
+	await expect(page.locator('#root-app')).toContainText('1 result');
+	await expect(page.getByRole('link', { name: 'Familie 1' })).toBeVisible();
+});

src/packages/components/application-title/index.css

@@ -0,0 +1,31 @@
+.application-title {
+	background: #45374e;
+	padding-bottom: 0.5em;
+	padding-top: 0.5em;
+}
+
+.application-title .application-title-container {
+	width: 50%;
+	margin: auto;
+}
+
+.application-title .application-title-wrapper {
+	display: flex;
+	margin: auto;
+}
+
+.application-title img {
+	width: 25%;
+}
+
+.application-title h1 {
+	color: white;
+	font-size: 15.3pt;
+	float: right;
+	margin: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	flex-grow: 1;
+}

src/packages/components/application-title/index.tsx

@@ -1,6 +1,6 @@
 import { createAllDictionary } from '@utils/dictionnary';
 
-import './index.scss';
+import './index.css';
 
 const { D } = createAllDictionary({
 	welcome: {
@@ -11,8 +11,8 @@ const { D } = createAllDictionary({
 export const ApplicationTitle = () => {
 	return (
 		<header className="application-title">
-			<div className="application-title__container">
-				<div className="application-title__wrapper">
+			<div className="application-title-container">
+				<div className="application-title-wrapper">
 					<h1>
 						<img src="/img/logo.svg" alt="application logo" />
 						{D.welcome}

src/packages/components/back-to-top/index.scss → src/packages/components/back-to-top/index.css

@@ -12,13 +12,13 @@ button.sticky-top {
 	line-height: 18px;
 	text-align: center;
 	color: white;
+}
 
-	&.block {
-		display: block !important;
-	}
+button.sticky-top.block {
+	display: block !important;
+}
 
-	span {
-		text-transform: uppercase;
-		font-weight: 700;
-	}
+button.sticky-top span {
+	text-transform: uppercase;
+	font-weight: 700;
 }

src/packages/components/back-to-top/index.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import { createAllDictionary } from '@utils/dictionnary';
 
-import './index.scss';
+import './index.css';
 
 const className = 'sticky-top';
 

src/packages/components/buttons/button.css

@@ -0,0 +1,16 @@
+.bauhaus-btn {
+	background-color: var(--color-3);
+	color: white;
+	width: 100%;
+	margin-bottom: 0.5em;
+}
+
+.bauhaus-btn:hover {
+	color: white;
+}
+
+.bauhaus-btn:focus,
+.bauhaus-btn:hover:not([disabled]) {
+	background-color: var(--color-2);
+	color: white;
+}

src/packages/components/buttons/button.tsx

@@ -1,7 +1,7 @@
 import { ComponentProps, PropsWithChildren, ReactNode } from 'react';
 
 import { Link } from '../link';
-import './button.scss';
+import './button.css';
 
 const DEFAULT_CLASSES: string[] = [];
 

src/packages/components/check-second-lang/index.tsx

@@ -1,7 +1,7 @@
 import { useSecondLang } from '@utils/hooks/second-lang';
 
 import { createAllDictionary } from '../../utils/dictionnary';
-import './index.scss';
+import './index.css';
 
 const { D } = createAllDictionary({
 	displayLg2: {

src/packages/components/filter-toggle-buttons/filter-toggle-buttons.css

@@ -0,0 +1,7 @@
+.bauhaus-filter-toggle-buttons {
+	margin-bottom: 1em;
+}
+
+.bauhaus-filter-toggle-buttons-btn-active {
+	border: 2px var(--color-3) solid;
+}

src/packages/components/filter-toggle-buttons/filter-toggle-buttons.spec.tsx

@@ -0,0 +1,78 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import FilterToggleButtons from '.';
+import { BOTH, DOCUMENT, LINK } from '../../modules-operations/document/utils';
+
+describe('FilterToggleButtons Component', () => {
+	const mockHandleSelection = vi.fn();
+
+	const setup = (currentValue: string) => {
+		const options = [
+			[BOTH, 'Both'],
+			[DOCUMENT, 'Document'],
+			[LINK, 'Link'],
+		] as [typeof BOTH | typeof DOCUMENT | typeof LINK, string][];
+
+		render(
+			<FilterToggleButtons
+				options={options}
+				currentValue={currentValue}
+				handleSelection={mockHandleSelection}
+			/>,
+		);
+	};
+
+	afterEach(() => {
+		vi.restoreAllMocks();
+		mockHandleSelection.mockClear();
+	});
+
+	it('should render the correct number of buttons', () => {
+		setup(BOTH);
+		const buttons = screen.getAllByRole('button');
+		expect(buttons).toHaveLength(3);
+	});
+
+	it('should apply the active class to the selected button', () => {
+		setup(DOCUMENT);
+		const activeButton = screen.getByText('Document');
+		expect(activeButton).toHaveClass(
+			'bauhaus-filter-toggle-buttons-btn-active',
+		);
+	});
+
+	it('should not apply the active class to unselected buttons', () => {
+		setup(DOCUMENT);
+		const unselectedButton = screen.getByText('Both');
+		expect(unselectedButton).not.toHaveClass(
+			'bauhaus-filter-toggle-buttons-btn-active',
+		);
+	});
+
+	it('should call handleSelection with the correct value when a button is clicked', () => {
+		setup(BOTH);
+		const button = screen.getByText('Link');
+		fireEvent.click(button);
+		expect(mockHandleSelection).toHaveBeenCalledWith(LINK);
+	});
+
+	it('should render button labels correctly', () => {
+		setup(BOTH);
+		expect(screen.getByText('Both')).toBeDefined();
+		expect(screen.getByText('Document')).toBeDefined();
+		expect(screen.getByText('Link')).toBeDefined();
+	});
+
+	it('should handle empty options gracefully', () => {
+		render(
+			<FilterToggleButtons
+				options={[]}
+				currentValue={BOTH}
+				handleSelection={mockHandleSelection}
+			/>,
+		);
+		const buttons = screen.queryAllByRole('button');
+		expect(buttons).toHaveLength(0);
+	});
+});

src/packages/components/filter-toggle-buttons/index.tsx

@@ -1,5 +1,5 @@
 import { BOTH, DOCUMENT, LINK } from '../../modules-operations/document/utils';
-import './filter-toggle-buttons.scss';
+import './filter-toggle-buttons.css';
 
 interface FilterToggleButtonsTypes {
 	options: [typeof BOTH | typeof DOCUMENT | typeof LINK, string][];
@@ -24,7 +24,7 @@ const FilterToggleButtons = ({
 							type="button"
 							className={`btn btn-default ${
 								currentValue === value
-									? 'bauhaus-filter-toggle-buttons__btn-active'
+									? 'bauhaus-filter-toggle-buttons-btn-active'
 									: ''
 							}`}
 							onClick={() => handleSelection(value)}

src/packages/model/concepts/concept.ts

@@ -1,11 +1,29 @@
+import {
+	BROADER,
+	IS_REPLACED_BY,
+	NARROWER,
+	REFERENCES,
+	RELATED,
+	SUCCEED,
+} from '@sdk/constants';
+
 import { linkTypes } from '../../modules-concepts/utils/links';
 
 export interface ConceptGeneral {
+	id: string;
 	prefLabelLg1: string;
 	prefLabelLg2: string;
+	altLabelLg1?: string[] | string;
+	altLabelLg2?: string[] | string;
 	conceptVersion: string;
 	creator: string;
+	contributor: string;
 	disseminationStatus: string;
+	created: string;
+	modified: string;
+	isValidated: string;
+	valid: boolean;
+	additionalMaterial?: string;
 }
 
 export interface ConceptNotes {
@@ -19,11 +37,26 @@ export interface ConceptNotes {
 	editorialNoteLg2?: string;
 }
 
-export type Concept = ConceptGeneral & ConceptNotes;
+export interface Concept {
+	general: ConceptGeneral;
+	notes: ConceptNotes;
+	links: Link[];
+}
+
+export interface Links {
+	[NARROWER]: Link[];
+	[BROADER]: Link[];
+	[REFERENCES]: Link[];
+	[SUCCEED]: Link[];
+	[RELATED]: Link[];
+	[IS_REPLACED_BY]: Link[];
+	closeMatch: Link[];
+}
 
 export interface Link {
 	id: string;
 	typeOfLink: keyof typeof linkTypes;
 	prefLabelLg1: string;
 	prefLabelLg2: string;
+	urn: string;
 }

src/packages/modules-classifications/edition/index.jsx

@@ -81,7 +81,6 @@ export const Component = () => {
 			<PageTitleBlock
 				titleLg1={classification?.general?.prefLabelLg1}
 				titleLg2={classification?.general?.prefLabelLg2}
-				secondLang={true}
 			/>
 
 			<form