@abyss-project/commons-front-core 9.4.0 → 9.4.2

package/catalog/pages/index.ts

@@ -27,6 +27,8 @@ import { DateFieldPage } from './DateField';
 import { DateRangeFieldPage } from './DateRangeField';
 import { DrawerPage } from './Drawer';
 import { DropZonePage } from './DropZone';
+import { ExpressionSearchPage } from './ExpressionSearch';
+import { FacetPanelPage } from './FacetPanel';
 import { FilterBarPage } from './FilterBar';
 import { FormFieldPage } from './FormField';
 import { ImportButtonPage } from './ImportButton';
@@ -41,6 +43,7 @@ import { NotificationsMenuPage } from './NotificationsMenu';
 import { NumberFieldPage } from './NumberField';
 import { PageHeaderPage } from './PageHeader';
 import { PageStatePage } from './PageState';
+import { PreviewDrawerPage } from './PreviewDrawer';
 import { ProductTourPage } from './ProductTour';
 import { QRCodeModalPage } from './QRCodeModal';
 import { RichSelectPage } from './RichSelect';
@@ -63,6 +66,7 @@ import { ToastPage } from './Toast';
 import { ToolbarPage } from './Toolbar';
 import { ToolIconPage } from './ToolIcon';
 import { UsageMeterPage } from './UsageMeter';
+import { ValueMenuPage } from './ValueMenu';
 
 /** Every catalog page, by the `component` URL parameter (`catalog-entries.ts`). */
 export const CATALOG_PAGES: Record<string, ComponentType> = {
@@ -94,6 +98,8 @@ export const CATALOG_PAGES: Record<string, ComponentType> = {
   DateRangeField: DateRangeFieldPage,
   Drawer: DrawerPage,
   DropZone: DropZonePage,
+  ExpressionSearch: ExpressionSearchPage,
+  FacetPanel: FacetPanelPage,
   FilterBar: FilterBarPage,
   FormField: FormFieldPage,
   ImportButton: ImportButtonPage,
@@ -108,6 +114,7 @@ export const CATALOG_PAGES: Record<string, ComponentType> = {
   NumberField: NumberFieldPage,
   PageHeader: PageHeaderPage,
   PageState: PageStatePage,
+  PreviewDrawer: PreviewDrawerPage,
   ProductTour: ProductTourPage,
   QRCodeModal: QRCodeModalPage,
   RichSelect: RichSelectPage,
@@ -130,4 +137,5 @@ export const CATALOG_PAGES: Record<string, ComponentType> = {
   Toolbar: ToolbarPage,
   ToolIcon: ToolIconPage,
   UsageMeter: UsageMeterPage,
+  ValueMenu: ValueMenuPage,
 };

package/catalog/specs/captures.spec.ts

@@ -32,6 +32,13 @@ const REACH: Record<
       .click();
     await expect(page.getByRole('dialog')).toBeVisible();
   },
+  // The value of a list (six actions): the menu lists every action with its label.
+  'menu-open': async (page) => {
+    await page.getByRole('button', { name: /Actions sur requestId/ }).click();
+    const menu = page.getByRole('menu').or(page.getByRole('dialog'));
+    await expect(menu).toBeVisible();
+    await expect(menu.getByRole('menuitem')).toHaveCount(6);
+  },
   // The first top bar trigger of the page: the notifications bell or the account avatar.
   'panel-open': async (page) => {
     await page.locator('[aria-haspopup]').first().click();

package/catalog/specs/expression-search-scroll.spec.ts

@@ -0,0 +1,33 @@
+import { expect, test } from '@playwright/test';
+import { ThemeMode } from '../../src/theme/tokens/primitives';
+import { openCatalogPage } from './catalog-page';
+
+// ExpressionSearch in a narrow field: the underlined character of a syntax error must be inside
+// the visible part of the field when the error appears (jsdom has no layout, so this is checked
+// in a real browser).
+
+const PHONE = { width: 390, height: 844 };
+
+test('the underlined error character is in view in a 390 px field', async ({
+  page,
+}) => {
+  await openCatalogPage(page, 'ExpressionSearch', ThemeMode.Light, PHONE);
+  const mark = page.locator('[data-expression-error]').first();
+  const input = page.getByRole('combobox').nth(1);
+  await expect(mark).toBeAttached();
+
+  const box = async (locator: typeof mark) => {
+    const rect = await locator.evaluate((element) => {
+      const { left, right } = element.getBoundingClientRect();
+      return { left, right };
+    });
+    return rect;
+  };
+  const markBox = await box(mark);
+  const inputBox = await box(input);
+  expect(await input.evaluate((element) => element.scrollLeft)).toBeGreaterThan(
+    0,
+  );
+  expect(markBox.left).toBeGreaterThanOrEqual(inputBox.left - 1);
+  expect(markBox.right).toBeLessThanOrEqual(inputBox.right + 1);
+});

package/catalog/specs/preview-drawer-trail.spec.ts

@@ -0,0 +1,38 @@
+import { expect, test } from '@playwright/test';
+import { ThemeMode } from '../../src/theme/tokens/primitives';
+import { openCatalogPage } from './catalog-page';
+
+// PreviewDrawer: the catalog opens four levels on arrival (request, session, log, release). The
+// trail lists all four on a desktop and folds to « … » and the last two on a phone.
+
+const trailItems = (page: Parameters<typeof openCatalogPage>[0]) =>
+  page
+    .getByRole('navigation', { name: 'Fil des aperçus' })
+    .getByRole('listitem');
+
+test('the trail lists the four levels at 1440 px', async ({ page }) => {
+  await openCatalogPage(page, 'PreviewDrawer', ThemeMode.Light, {
+    width: 1440,
+    height: 900,
+  });
+  await expect(trailItems(page)).toHaveText([
+    'GET /api/invoices',
+    'Session b41d07ce',
+    'Log e7a90b14',
+    'Version 2.14.0',
+  ]);
+});
+
+test('the trail folds to an ellipsis and the last two levels at 390 px', async ({
+  page,
+}) => {
+  await openCatalogPage(page, 'PreviewDrawer', ThemeMode.Light, {
+    width: 390,
+    height: 844,
+  });
+  await expect(trailItems(page)).toHaveText([
+    '…',
+    'Log e7a90b14',
+    'Version 2.14.0',
+  ]);
+});

package/catalog/specs/write-capture-index.ts

@@ -25,6 +25,7 @@ const STATE_LABEL: Record<CaptureState, string> = {
   'list-open': ', liste ouverte',
   'calendar-open': ', calendrier ouvert',
   'panel-open': ', panneau ouvert',
+  'menu-open': ', menu ouvert',
 };
 
 const describe = (capture: Capture): string =>