@ouestfrance/sipa-bms-ui 7.14.1

package/src/helpers/location.helper.spec.ts

@@ -0,0 +1,195 @@
+import {
+  getNumberFromPathQuery,
+  getStringFromPathQuery,
+  handleValueInSearchParams,
+  saveValuesToPathQuery,
+  writeLocation,
+} from './location.helper';
+
+vi.mock('vue-router', () => ({
+  useRoute: vi.fn(),
+}));
+
+describe('search and filter composable', () => {
+  let previous: any;
+  beforeEach(() => {
+    vi.resetAllMocks();
+    previous = global.window.location;
+    //@ts-ignore
+    delete global.window.location;
+  });
+  afterEach(() => {
+    global.window.location = previous;
+  });
+
+  describe('writeLocation', () => {
+    test('should change current url with correct query parameters', async () => {
+      global.window.location = {
+        ...previous,
+        protocol: 'https:',
+        host: 'localhost/',
+        pathname: 'path',
+        search: '?query=toto',
+      };
+
+      const replaceStateSpy = vi
+        .spyOn(global.window.history, 'replaceState')
+        .mockImplementation(() => {});
+
+      const expectedUrl = 'https://localhost/path?param=value';
+      const searchParams = new URLSearchParams('');
+      searchParams.set('param', 'value');
+      writeLocation(searchParams);
+      expect(replaceStateSpy).toBeCalledWith(
+        { path: expectedUrl },
+        '',
+        expectedUrl,
+      );
+    });
+  });
+
+  describe('handleValueInSearchParams', () => {
+    test('should delete existing searchParam if no longer exists', () => {
+      const searchParams = new URLSearchParams('param=value&second=toto');
+      const result = handleValueInSearchParams(searchParams, 'param', '');
+      expect(result.toString()).toEqual('second=toto');
+    });
+    test('should not add searchParam if no value', () => {
+      const searchParams = new URLSearchParams('param=value&second=toto');
+      const result = handleValueInSearchParams(searchParams, 'third', '');
+      expect(result.toString()).toEqual('param=value&second=toto');
+    });
+    test('should modify searchParam if value', () => {
+      const searchParams = new URLSearchParams('param=value&second=toto');
+      const result = handleValueInSearchParams(searchParams, 'second', 'titi');
+      expect(result.toString()).toEqual('param=value&second=titi');
+    });
+    test('should add searchParam if value not present', () => {
+      const searchParams = new URLSearchParams('param=value&second=toto');
+      const result = handleValueInSearchParams(searchParams, 'third', 'titi');
+      expect(result.toString()).toEqual('param=value&second=toto&third=titi');
+    });
+  });
+
+  describe('getNumberFromPathQuery', () => {
+    it('should return null if no entry in url', () => {
+      global.window.location = {
+        ...previous,
+        protocol: 'https:',
+        host: 'localhost/',
+        pathname: 'path',
+        search: '',
+      };
+      expect(getNumberFromPathQuery('table-size')).toEqual(null);
+    });
+    it('should return null if entry is not a number in url', () => {
+      global.window.location = {
+        ...previous,
+        protocol: 'https:',
+        host: 'localhost/',
+        pathname: 'path',
+        search: '?table-size=toto',
+      };
+      expect(getNumberFromPathQuery('table-size')).toEqual(null);
+    });
+    it('should return value if entry is a number in url', () => {
+      global.window.location = {
+        ...previous,
+        protocol: 'https:',
+        host: 'localhost/',
+        pathname: 'path',
+        search: '?table-size=5',
+      };
+      expect(getNumberFromPathQuery('table-size')).toEqual(5);
+    });
+  });
+
+  describe('getStringFromPathQuery', () => {
+    it('should return null if no entry in url', () => {
+      global.window.location = {
+        ...previous,
+        protocol: 'https:',
+        host: 'localhost/',
+        pathname: 'path',
+        search: '',
+      };
+      expect(getStringFromPathQuery('table-size')).toEqual(null);
+    });
+    it('should return value if entry is a number in url', () => {
+      global.window.location = {
+        ...previous,
+        protocol: 'https:',
+        host: 'localhost/',
+        pathname: 'path',
+        search: '?table-size=5',
+      };
+      expect(getStringFromPathQuery('table-size')).toEqual('5');
+    });
+  });
+
+  describe('saveValuesToPathQuery', () => {
+    it('should write value in query and push history', () => {
+      global.window.location = {
+        ...previous,
+        protocol: 'https:',
+        host: 'localhost/',
+        pathname: 'path',
+        search: '?query=toto',
+      };
+
+      const replaceStateSpy = vi
+        .spyOn(global.window.history, 'replaceState')
+        .mockImplementation(() => {});
+
+      saveValuesToPathQuery([{ key: 'key', value: 'value' }]);
+      expect(replaceStateSpy).toHaveBeenCalledWith(
+        { path: 'https://localhost/path?query=toto&key=value' },
+        '',
+        'https://localhost/path?query=toto&key=value',
+      );
+    });
+    it('should replace value in query and push history', () => {
+      global.window.location = {
+        ...previous,
+        protocol: 'https:',
+        host: 'localhost/',
+        pathname: 'path',
+        search: '?key=toto',
+      };
+
+      const replaceStateSpy = vi
+        .spyOn(global.window.history, 'replaceState')
+        .mockImplementation(() => {});
+
+      saveValuesToPathQuery([{ key: 'key', value: 'value' }]);
+      expect(replaceStateSpy).toHaveBeenCalledWith(
+        { path: 'https://localhost/path?key=value' },
+        '',
+        'https://localhost/path?key=value',
+      );
+    });
+    it('should replace values in query and push history', () => {
+      global.window.location = {
+        ...previous,
+        protocol: 'https:',
+        host: 'localhost/',
+        pathname: 'path',
+        search: '?key=toto',
+      };
+
+      const replaceStateSpy = vi
+        .spyOn(global.window.history, 'replaceState')
+        .mockImplementation(() => {});
+
+      saveValuesToPathQuery([
+        { key: 'key', value: 'value' },
+        { key: 'key0', value: 'value0' },
+      ]);
+      expect(replaceStateSpy).toHaveBeenCalledWith(
+        { path: 'https://localhost/path?key=value&key0=value0' },
+        '',
+        'https://localhost/path?key=value&key0=value0',
+      );
+    });
+  });
+});

package/src/helpers/location.helper.ts

@@ -0,0 +1,53 @@
+export const getCurrentLocation = (): Location => {
+  return window.location;
+};
+
+export const getCurrentHistory = (): History => {
+  return window.history;
+};
+
+export const writeLocation = (searchParams: URLSearchParams): void => {
+  const location = getCurrentLocation();
+  let newurl = location.protocol + '//' + location.host + location.pathname;
+  if (searchParams.toString()) {
+    newurl += '?' + searchParams.toString();
+  }
+  getCurrentHistory().replaceState({ path: newurl }, '', newurl);
+};
+
+export const handleValueInSearchParams = (
+  searchParams: URLSearchParams,
+  key: string,
+  value: string,
+): URLSearchParams => {
+  if (searchParams.get(key) && !value) {
+    searchParams.delete(key);
+  } else if (value) {
+    searchParams.set(key, value);
+  }
+  return searchParams;
+};
+
+export const getStringFromPathQuery = (key: string): string | null => {
+  const searchParams = new URLSearchParams(getCurrentLocation().search);
+  return searchParams.get(key);
+};
+
+export const getNumberFromPathQuery = (key: string): number | null => {
+  const value = getStringFromPathQuery(key);
+  if (value) {
+    const valueAsNumber = Number(value);
+    return Number.isNaN(valueAsNumber) ? null : valueAsNumber;
+  }
+  return null;
+};
+
+export const saveValuesToPathQuery = (
+  values: { key: string; value: string }[],
+): void => {
+  let searchParams = new URLSearchParams(getCurrentLocation().search);
+  values.forEach((val) => {
+    searchParams = handleValueInSearchParams(searchParams, val.key, val.value);
+  });
+  writeLocation(searchParams);
+};

package/src/helpers/problem.helper.spec.ts

@@ -0,0 +1,21 @@
+import { describe, expect, test } from 'vitest';
+import { isProblem } from './problem.helper';
+
+describe('problem helper', () => {
+  describe('isProblem', () => {
+    test('should return false if no object', () => {
+      expect(isProblem(undefined)).toEqual(false);
+    });
+    test('should return false if object has no type', () => {
+      expect(isProblem({ toto: 'coucou' })).toEqual(false);
+    });
+    test('should return false if object type does not include correct origin', () => {
+      expect(isProblem({ type: 'http://host.com' })).toEqual(false);
+    });
+    test('should return true if object is a problem', () => {
+      expect(
+        isProblem({ type: 'https://problems.bms.live/toto' }),
+      ).toEqual(true);
+    });
+  });
+});

package/src/helpers/problem.helper.ts

@@ -0,0 +1,4 @@
+export const isProblem = (object: any): boolean =>
+  !!object?.type &&
+  typeof object.type === 'string' &&
+  object.type.includes('https://problems.bms.live');

package/src/helpers/string.helper.spec.ts

@@ -0,0 +1,186 @@
+import {
+  convertStringToCaption,
+  isEmptyStringOrNotDefined,
+  isExternalLink,
+  sanitizeString,
+  searchString,
+  sanitizeHtml,
+  getValueByPath,
+} from '@/helpers/string.helper';
+import { test } from 'vitest';
+import { Caption } from '@/models/caption.model';
+
+describe('test utils helpers methods', () => {
+  describe('isEmptyStringOrNotDefined', () => {
+    test.each([
+      ['', true],
+      [null, true],
+      [undefined, true],
+      ['  ', false],
+      [[], false],
+      [[1], false],
+      [{}, false],
+      [1, false],
+      [{ test: true }, false],
+    ])(
+      'should test isEmptyStringOrNotDefined and for %o should return %o',
+      (value, result) => {
+        expect(isEmptyStringOrNotDefined(value)).equal(result);
+      },
+    );
+  });
+
+  describe('isExternalLink', () => {
+    test.each([
+      ['', false],
+      [null, false],
+      [undefined, false],
+      ['  ', false],
+      [{ to: true }, false],
+      ['https://wwww.truc.com', true],
+    ])(
+      'should test isExternalLink and for %o should return %o',
+      (value, result) => {
+        //@ts-ignore
+        expect(isExternalLink(value)).equal(result);
+      },
+    );
+  });
+
+  describe('searchString', () => {
+    test.each([
+      ['', 'val', false],
+      [null, 'val', false],
+      [undefined, 'val', false],
+      ['value', 'val', true],
+      ['Value', 'val', true],
+      ['vàlué', 'val', true],
+      ['vàlué', 'vàl', true],
+      ['value', 'toto', false],
+      ['value', '', true],
+      ['value', null, false],
+      ['value', undefined, false],
+    ])(
+      'In string %o should search string %o and return %o',
+      (value, searchText, result) => {
+        expect(searchString(value, searchText)).equal(result);
+      },
+    );
+  });
+
+  describe('sanitizeString', () => {
+    test.each([
+      ['', ''],
+      [null, ''],
+      [undefined, ''],
+      ['àéö', 'aeo'],
+      ['A éö', 'a eo'],
+    ])('for value %o should return %o', (value, result) => {
+      expect(sanitizeString(value)).equal(result);
+    });
+  });
+
+  describe('convertStringToCaption', () => {
+    test.each([
+      ['This is a string', { label: 'This is a string', mode: 'default' }],
+      [{ label: 'this is a caption' }, { label: 'this is a caption' }],
+    ])('for value %o should return %o', (value, result) => {
+      const resultFromHelper = convertStringToCaption(value);
+      expect(resultFromHelper.label).equal((result as Caption).label);
+      expect(resultFromHelper.mode).equal((result as Caption).mode);
+    });
+  });
+
+  describe('sanitizeHtml', () => {
+    it('supprime les balises non autorisées', () => {
+      const input =
+        '<script>alert("malveillant");</script><p>Texte autorisé</p>';
+      const output = '<p>Texte autorisé</p>';
+      expect(sanitizeHtml(input)).toBe(output);
+    });
+
+    it('conserve les balises autorisées', () => {
+      const input =
+        '<p>Texte avec <strong>du gras</strong> et <a href="https://example.com">un lien</a>.</p>';
+      const output =
+        '<p>Texte avec <strong>du gras</strong> et <a href="https://example.com">un lien</a>.</p>';
+      expect(sanitizeHtml(input)).toBe(output);
+    });
+
+    it('supprime les événements inline', () => {
+      const input = '<span onclick="alert(\'danger\')">Texte dangereux</span>';
+      const output = '<span>Texte dangereux</span>';
+      expect(sanitizeHtml(input)).toBe(output);
+    });
+
+    it('supprime les styles inline', () => {
+      const input = '<p style="color:red;">Texte avec style</p>';
+      const output = '<p>Texte avec style</p>';
+      expect(sanitizeHtml(input)).toBe(output);
+    });
+
+    it('supprime les URLs malveillantes', () => {
+      const input = '<a href="javascript:alert(\'danger\')">Lien dangereux</a>';
+      const output = '<a>Lien dangereux</a>';
+      expect(sanitizeHtml(input)).toBe(output);
+    });
+
+    it('supprime les images avec des sources dangereuses', () => {
+      const input = '<img src="javascript:alert(\'danger\')">';
+      const output = '';
+      expect(sanitizeHtml(input)).toBe(output);
+    });
+
+    it('gère le HTML vide', () => {
+      const input = '';
+      const output = '';
+      expect(sanitizeHtml(input)).toBe(output);
+    });
+
+    it('gère du texte sans HTML', () => {
+      const input = 'Texte brut';
+      const output = 'Texte brut';
+      expect(sanitizeHtml(input)).toBe(output);
+    });
+  });
+
+  describe('getValueByPath', () => {
+    const obj = {
+      one: {
+        two: {
+          tree: 'vrai!',
+          four: null,
+        },
+        empty: {},
+      },
+    };
+
+    test('accès à une valeur existante', () => {
+      expect(getValueByPath(obj, 'one.two.tree')).toBe('vrai!');
+    });
+
+    test('accès à une clé inexistante', () => {
+      expect(getValueByPath(obj, 'one.two.fake')).toBeUndefined();
+    });
+
+    test('accès à une clé partiellement manquante', () => {
+      expect(getValueByPath(obj, 'one.nothing.tree')).toBeUndefined();
+    });
+
+    test('accès à un chemin vide', () => {
+      expect(getValueByPath(obj, '')).toBe(obj);
+    });
+
+    test('accès à un chemin "root"', () => {
+      expect(getValueByPath(obj, '.')).toBe(obj);
+    });
+
+    test('accès à une clé avec valeur nulle', () => {
+      expect(getValueByPath(obj, 'one.two.four')).toBeNull();
+    });
+
+    test('accès à un objet vide', () => {
+      expect(getValueByPath(obj, 'one.empty')).toEqual({});
+    });
+  });
+});

package/src/helpers/string.helper.ts

@@ -0,0 +1,83 @@
+import { Caption } from '@/models/caption.model';
+import { StatusType } from '..';
+import { RouteLocationRaw } from 'vue-router';
+
+export const searchString = (item: any, searchText: any): boolean => {
+  return (
+    !isEmptyStringOrNotDefined(item) &&
+    searchText !== null &&
+    searchText !== undefined &&
+    sanitizeString(item).includes(sanitizeString(searchText))
+  );
+};
+
+export const getValueByPath = (obj: any, path: string) => {
+  if (path === '' || path === '.') {
+    return obj;
+  }
+  return path.split('.').reduce((acc, key) => acc?.[key], obj);
+};
+
+export const isEmptyStringOrNotDefined = (value: any): boolean => {
+  return ['', null, undefined].includes(value);
+};
+
+export const isExternalLink = (link: string | RouteLocationRaw | null) =>
+  !!link && typeof link === 'string' && (link as string).startsWith('http');
+
+export const sanitizeString = (str: any): string => {
+  if (!str) {
+    return '';
+  }
+  return str
+    .toString()
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/\p{Diacritic}/gu, '');
+};
+
+export const sanitizeHtml = (html: string) => {
+  const allowedTags = [
+    'b',
+    'i',
+    'em',
+    'strong',
+    'a',
+    'p',
+    'ul',
+    'li',
+    'ol',
+    'span',
+  ]; // Liste des balises autorisées
+  const tempDiv = document.createElement('div');
+  tempDiv.innerHTML = html;
+
+  // Parcourir tous les enfants de l'élément temporaire
+  const elements = tempDiv.querySelectorAll('*');
+  elements.forEach((el) => {
+    // Supprimer les balises non autorisées
+    if (!allowedTags.includes(el.tagName.toLowerCase())) {
+      el.remove();
+    } else {
+      // Nettoyer les attributs dangereux pour les balises autorisées
+      Array.from(el.attributes).forEach((attr) => {
+        const attrName = attr.name.toLowerCase();
+        if (attrName.startsWith('on') || attrName === 'style') {
+          el.removeAttribute(attrName); // Supprime les événements inline et les styles
+        } else if (attrName === 'href' || attrName === 'src') {
+          // Valider les URLs (interdire "javascript:" et autres schémas dangereux)
+          if (attr.value.toLowerCase().startsWith('javascript:')) {
+            el.removeAttribute(attrName);
+          }
+        }
+      });
+    }
+  });
+  return tempDiv.innerHTML; // Renvoie le HTML nettoyé
+};
+
+export const convertStringToCaption = (caption: string | Caption): Caption => {
+  return typeof caption !== 'string'
+    ? caption
+    : { label: caption, mode: StatusType.Default };
+};

package/src/helpers/table.helper.spec.ts

@@ -0,0 +1,141 @@
+import {
+  enforceActionsColumnHeader,
+  getFiltersAsQueryParams,
+} from '@/helpers/table.helper';
+import { TableHeader } from '@/models';
+
+const bmsUiFilters = {
+  size: 25,
+  offset: 0,
+  page: 0,
+  search: '1',
+  filters: [
+    {
+      label: 'Origine',
+      key: 'fromPath',
+      type: 'input',
+      value: '/from',
+    },
+    {
+      label: 'Destination',
+      key: 'destination',
+      type: 'input',
+      value: '/you-have-arrived-',
+    },
+    {
+      label: 'Date de création',
+      key: 'created',
+      type: 'betweenDate',
+      inputType: 'date',
+      value: null,
+      valueFrom: '2024-11-22',
+    },
+    {
+      label: "Nombre d'utilisation",
+      key: 'hitCount',
+      type: 'betweenNumber',
+      inputType: 'number',
+      value: null,
+      valueFrom: 2,
+      valueTo: 5,
+    },
+    {
+      label: 'Date de dernière utilisation',
+      key: 'usedAt',
+      type: 'betweenDate',
+      inputType: 'date',
+      value: null,
+    },
+  ],
+  sort: {
+    key: null,
+    value: 'default',
+  },
+};
+const bmsHeaders = [
+  { label: 'Numéro', key: 'id' },
+  { label: 'Name', key: 'name' },
+  { label: 'Type', key: 'type' },
+] as TableHeader[];
+
+describe('test utils table helpers methods', () => {
+  describe('getFiltersAsQueryParams', () => {
+    it('should convert filters as query params', async () => {
+      //@ts-expect-error typage
+      expect(getFiltersAsQueryParams(bmsUiFilters)).toStrictEqual({
+        createdFrom: '2024-11-22T00:00:00.000Z',
+        destination: '/you-have-arrived-',
+        fromPath: '/from',
+        hitCountFrom: 2,
+        hitCountTo: 5,
+        page: 0,
+        search: '1',
+        size: 25,
+      });
+    });
+    it('should be resiliente', async () => {
+      //@ts-expect-error test avec object inattendu
+      expect(getFiltersAsQueryParams(null)).toStrictEqual({
+        page: 0,
+        size: 0,
+      });
+      //@ts-expect-error test avec object inattendu
+      expect(getFiltersAsQueryParams(undefined)).toStrictEqual({
+        page: 0,
+        size: 0,
+      });
+    });
+  });
+  describe('enforceActionsColumnHeader', () => {
+    it('should not change the input whotout actions column', async () => {
+      expect(enforceActionsColumnHeader(bmsHeaders)).toStrictEqual(bmsHeaders);
+    });
+    it('should center and add default size for actions column', async () => {
+      const headers = [...bmsHeaders];
+      headers.push({
+        label: 'Action',
+        key: 'action',
+        action: true,
+      });
+      expect(
+        enforceActionsColumnHeader(headers)[headers.length - 1].label,
+      ).toStrictEqual('Action');
+      expect(
+        enforceActionsColumnHeader(headers)[headers.length - 1].width,
+      ).toStrictEqual('75px');
+      expect(
+        enforceActionsColumnHeader(headers)[headers.length - 1].align,
+      ).toStrictEqual('center');
+    });
+    it('should not override your center and width preference', async () => {
+      const headers = [...bmsHeaders];
+      headers.push({
+        label: 'Action',
+        key: 'action',
+        action: true,
+        width: 'doNotTouch',
+        align: 'end',
+      });
+      expect(
+        enforceActionsColumnHeader(headers)[headers.length - 1].label,
+      ).toStrictEqual('Action');
+      expect(
+        enforceActionsColumnHeader(headers)[headers.length - 1].width,
+      ).toStrictEqual('doNotTouch');
+      expect(
+        enforceActionsColumnHeader(headers)[headers.length - 1].align,
+      ).toStrictEqual('end');
+    });
+    it('should put actions at the end of the headers', async () => {
+      const headers = [...bmsHeaders];
+      headers.unshift({
+        label: 'Action',
+        key: 'action',
+        action: true,
+      });
+      expect(
+        enforceActionsColumnHeader(headers)[headers.length - 1].label,
+      ).toStrictEqual('Action');
+    });
+  });
+});