typo3-typescript-sources 14.3.5 → 14.3.7

package/backend/localization/steps/target-language-step.ts

@@ -37,24 +37,19 @@ export class TargetLanguageStep implements WizardStepInterface, WizardStepValueI
   constructor(private readonly context: LocalizationContext) {
     this.task = new Task(this.context.wizard, {
       task: async ([recordType, recordUid]: [string, number]): Promise<LocalizationLanguageRecord[]> => {
-        try {
-          const response = await new AjaxRequest(TYPO3.settings.ajaxUrls.wizard_localization_get_targets).withQueryArguments({
-            recordType: recordType,
-            recordUid: recordUid,
-          }).get();
-          let targetLanguages: LocalizationLanguageRecord[] = await response.resolve();
-
-          // Filter to only the predefined target language if one exists vsia property
-          const predefinedTargetLanguage = this.context.targetLanguage;
-          if (predefinedTargetLanguage != null) {
-            targetLanguages = targetLanguages.filter(lang => lang.uid === predefinedTargetLanguage);
-          }
-
-          return targetLanguages;
-        } catch (error) {
-          console.warn('Failed to fetch target languages:', error);
-          return [];
+        const response = await new AjaxRequest(TYPO3.settings.ajaxUrls.wizard_localization_get_targets).withQueryArguments({
+          recordType: recordType,
+          recordUid: recordUid,
+        }).get();
+        let targetLanguages: LocalizationLanguageRecord[] = await response.resolve();
+
+        // Filter to only the predefined target language if one exists vsia property
+        const predefinedTargetLanguage = this.context.targetLanguage;
+        if (predefinedTargetLanguage != null) {
+          targetLanguages = targetLanguages.filter(lang => lang.uid === predefinedTargetLanguage);
         }
+
+        return targetLanguages;
       },
       args: () => [this.context.recordType, this.context.recordUid],
       autoRun: false

package/backend/modal.ts

@@ -16,6 +16,7 @@ import { customElement, property, state, query } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap, type StyleInfo } from 'lit/directives/style-map.js';
 import { classesArrayToClassInfo } from '@typo3/core/lit-helper';
 import RegularEvent from '@typo3/core/event/regular-event';
 import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
@@ -23,6 +24,7 @@ import type { AbstractAction } from './action-button/abstract-action';
 import type { ModalResponseEvent } from '@typo3/backend/modal-interface';
 import { SeverityEnum } from './enum/severity';
 import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import Persistent from '@typo3/backend/storage/persistent';
 import Severity from './severity';
 import '@typo3/backend/element/icon-element';
 import '@typo3/backend/element/spinner-element';
@@ -121,6 +123,7 @@ export interface Configuration {
   staticBackdrop: boolean;
   hideCloseButton: boolean;
   hideHeader: boolean;
+  resizeIdentifier: string;
 }
 
 type PartialConfiguration = Partial<Omit<Configuration, 'buttons'> & { buttons: Array<Partial<Button>> }>;
@@ -129,6 +132,8 @@ let uniqueIdCounter = 0;
 
 @customElement('typo3-backend-modal')
 export class ModalElement extends LitElement {
+  private static readonly RESIZE_MIN_WIDTH = 400;
+
   @property({ type: String, reflect: true }) modalTitle: string = '';
   @property({ type: String, reflect: true }) content: string = '';
   @property({ type: String, reflect: true }) type: Types = Types.default;
@@ -140,10 +145,13 @@ export class ModalElement extends LitElement {
   @property({ type: Boolean }) hideHeader: boolean = false;
   @property({ type: Array }) additionalCssClasses: Array<string> = [];
   @property({ type: Array, attribute: false }) buttons: Array<Button> = [];
+  @property({ type: String, attribute: 'resize-identifier' }) resizeIdentifier: string = '';
 
   @state() templateResultContent: TemplateResult | JQuery | Element | DocumentFragment = null;
   @state() activeButton: Button = null;
   @query('dialog', true) dialog: HTMLDialogElement;
+  @state() private modalWidth?: number;
+  @state() private resizing: boolean = false;
 
   public callback: ModalCallbackFunction = null;
   public ajaxCallback: ModalCallbackFunction = null;
@@ -151,6 +159,7 @@ export class ModalElement extends LitElement {
   public userData: { [key: string]: any } = {};
 
   private readonly uniqueId: number;
+  private resizeReferencePosition: number = 0;
   #size: Sizes | SizeConfig = Sizes.default;
 
   constructor() {
@@ -196,6 +205,13 @@ export class ModalElement extends LitElement {
     }
   }
 
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    if (this.isResizable()) {
+      this.loadPersistedWidth();
+    }
+  }
+
   public setContent(content: TemplateResult | JQuery | Element | DocumentFragment): void {
     this.templateResultContent = content;
   }
@@ -256,6 +272,7 @@ export class ModalElement extends LitElement {
   }
 
   protected override render(): TemplateResult {
+    const resizable = this.isResizable();
     const classes: ClassInfo = classesArrayToClassInfo([
       'modal',
       't3js-modal',
@@ -264,11 +281,18 @@ export class ModalElement extends LitElement {
       `modal-severity-${Severity.getCssClass(this.severity)}`,
       ...this.getSizeClasses(),
       `modal-position-${this.position}`,
+      ...(resizable ? ['modal-resizable'] : []),
+      ...(this.resizing ? ['modal-resizing'] : []),
       ...this.additionalCssClasses,
     ]);
+    const dialogStyles: StyleInfo = {};
+    if (resizable && this.modalWidth) {
+      dialogStyles['--typo3-modal-width'] = `${this.modalWidth}px`;
+    }
     return html`
       <dialog
           class=${classMap(classes)}
+          style=${styleMap(dialogStyles)}
           aria-labelledby=${ifDefined(this.hideHeader ? undefined : `t3-modal-header-${this.uniqueId}`)}
           aria-label=${ifDefined(this.hideHeader ? this.modalTitle : undefined)}
           closedby=${this.hideCloseButton ? 'none' : 'closerequest'}
@@ -276,6 +300,7 @@ export class ModalElement extends LitElement {
           @cancel=${this.handleDialogCancel}
           @click=${this.handleDialogClick}
       >
+        ${resizable ? html`<div class="modal-resize-handle" @pointerdown=${this.startResize}></div>` : nothing}
         ${this.hideHeader ? nothing : html`
           <div class="modal-header t3js-modal-header">
             <div class="modal-header-title t3js-modal-title" id="t3-modal-header-${this.uniqueId}">${this.modalTitle}</div>
@@ -480,6 +505,99 @@ export class ModalElement extends LitElement {
       { transform: 'translateX(0px)' },
     ], 150);
   }
+
+  /**
+   * Currently only "sheet" positioned modals (drawers docked to the viewport edge)
+   * support resizing, as it is the only position with a single free-floating edge.
+   */
+  private isResizable(): boolean {
+    return this.position === Positions.sheet;
+  }
+
+  private getResizePersistenceKey(): string | null {
+    if (!this.resizeIdentifier) {
+      return null;
+    }
+    return `resize.${this.resizeIdentifier}.modal`;
+  }
+
+  private loadPersistedWidth(): void {
+    const key = this.getResizePersistenceKey();
+    if (!key) {
+      return;
+    }
+    const stored = Persistent.get(key);
+    if (stored) {
+      const width = parseInt(stored, 10);
+      if (!isNaN(width) && width > 0) {
+        this.modalWidth = width;
+      }
+    }
+  }
+
+  private persistWidth(): void {
+    const key = this.getResizePersistenceKey();
+    if (key && this.modalWidth) {
+      Persistent.set(key, String(this.modalWidth));
+    }
+  }
+
+  private getMaxWidth(): number {
+    const computedMaxWidth = parseFloat(getComputedStyle(this.dialog).maxWidth);
+    return Number.isNaN(computedMaxWidth) ? window.innerWidth : computedMaxWidth;
+  }
+
+  private isRtl(): boolean {
+    return getComputedStyle(this).direction === 'rtl';
+  }
+
+  /**
+   * A "sheet" is docked to the inline-end edge (via margin-inline-end: 0), so its
+   * free edge to grab and drag is always the inline-start edge, in both directions.
+   */
+  private readonly startResize = (event: PointerEvent) => {
+    if (event.button !== 0) {
+      return;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+
+    const rect = this.dialog.getBoundingClientRect();
+    this.resizeReferencePosition = this.isRtl() ? rect.left : rect.right;
+
+    this.resizing = true;
+    const target = event.target as HTMLElement;
+    target.setPointerCapture(event.pointerId);
+    target.addEventListener('pointermove', this.handlePointerMove);
+    target.addEventListener('pointerup', this.handlePointerUp);
+    target.addEventListener('pointercancel', this.handlePointerUp);
+    target.addEventListener('lostpointercapture', this.handlePointerUp);
+  };
+
+  private readonly handlePointerMove = (event: PointerEvent) => {
+    if (!this.resizing) {
+      return;
+    }
+
+    const maxWidth = this.getMaxWidth();
+    let width = this.isRtl()
+      ? Math.round(event.clientX - this.resizeReferencePosition)
+      : Math.round(this.resizeReferencePosition - event.clientX);
+
+    width = Math.max(ModalElement.RESIZE_MIN_WIDTH, Math.min(width, maxWidth));
+    this.modalWidth = width;
+    this.dialog.style.setProperty('--typo3-modal-width', `${width}px`);
+  };
+
+  private readonly handlePointerUp = (event: PointerEvent) => {
+    const target = event.currentTarget as HTMLElement;
+    target.removeEventListener('pointermove', this.handlePointerMove);
+    target.removeEventListener('pointerup', this.handlePointerUp);
+    target.removeEventListener('pointercancel', this.handlePointerUp);
+    target.removeEventListener('lostpointercapture', this.handlePointerUp);
+    this.resizing = false;
+    this.persistWidth();
+  };
 }
 
 declare global {
@@ -517,7 +635,8 @@ class Modal {
     ajaxCallback: null,
     staticBackdrop: false,
     hideCloseButton: false,
-    hideHeader: false
+    hideHeader: false,
+    resizeIdentifier: '',
   };
 
   constructor() {
@@ -691,6 +810,9 @@ class Modal {
     configuration.hideCloseButton = configuration.hideCloseButton || this.defaultConfiguration.hideCloseButton;
     configuration.staticBackdrop = configuration.staticBackdrop || this.defaultConfiguration.staticBackdrop;
     configuration.hideHeader = configuration.hideHeader || this.defaultConfiguration.hideHeader;
+    configuration.resizeIdentifier = typeof configuration.resizeIdentifier === 'string'
+      ? configuration.resizeIdentifier
+      : this.defaultConfiguration.resizeIdentifier;
 
     return this.generate(configuration);
   }
@@ -813,6 +935,7 @@ class Modal {
     currentModal.hideCloseButton = configuration.hideCloseButton;
     currentModal.staticBackdrop = configuration.staticBackdrop;
     currentModal.hideHeader = configuration.hideHeader;
+    currentModal.resizeIdentifier = configuration.resizeIdentifier;
     if (configuration.callback) {
       currentModal.callback = configuration.callback;
     }

package/backend/module-docheader.ts

@@ -0,0 +1,58 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import DocumentService from '@typo3/core/document-service';
+
+enum Selectors {
+  wrapper = '.module-docheader-wrapper',
+  navigation = '.t3js-module-docheader-navigation',
+}
+
+/**
+ * Module: @typo3/backend/module-docheader
+ *
+ * Publishes the measured docheader heights as CSS custom properties, because
+ * both bars wrap and the stylesheet cannot know how much of it stays pinned.
+ */
+class ModuleDocHeader {
+  private readonly resizeObserver: ResizeObserver;
+  private wrapper: HTMLElement | null = null;
+  private navigation: HTMLElement | null = null;
+
+  constructor() {
+    this.resizeObserver = new ResizeObserver((): void => this.publish());
+    DocumentService.ready().then((): void => this.observe());
+  }
+
+  private observe(): void {
+    this.wrapper = document.querySelector(Selectors.wrapper);
+    if (this.wrapper === null) {
+      return;
+    }
+
+    this.navigation = this.wrapper.querySelector(Selectors.navigation);
+    // observing delivers an initial record, which is what publishes the first values
+    this.resizeObserver.observe(this.wrapper);
+    if (this.navigation !== null) {
+      this.resizeObserver.observe(this.navigation);
+    }
+  }
+
+  private publish(): void {
+    const style = document.documentElement.style;
+    style.setProperty('--module-docheader-height', `${this.wrapper.getBoundingClientRect().height}px`);
+    style.setProperty('--module-docheader-navigation-height', `${this.navigation?.getBoundingClientRect().height ?? 0}px`);
+  }
+}
+
+export default new ModuleDocHeader();

package/backend/page-wizard/steps/position-step.ts

@@ -80,6 +80,7 @@ export class PositionStep implements WizardStepInterface, WizardStepValueInterfa
         .activePageId="${currentValue?.pageUid}"
         .insertPosition="${currentValue?.insertPosition}"
         @typo3:page-position-select-tree:insert-position-change=${(event: CustomEvent) => this.handleInsertPositionChange(event)}
+        @typo3:page-position-select-tree:insert-position-confirm=${() => this.handleInsertPositionConfirm()}
       >
       </typo3-backend-component-page-position-select>
     `;
@@ -141,6 +142,10 @@ export class PositionStep implements WizardStepInterface, WizardStepValueInterfa
     });
   }
 
+  private handleInsertPositionConfirm(): void {
+    this.context.dispatchAutoAdvance();
+  }
+
   private initSummaryTask(): void {
     this.summaryTask = new Task(this.context.wizard, {
       task: async ([pageUid]: [number]): Promise<PageDetail> => {

package/backend/tests/form-engine/element/extra/select-box-filter-test.ts

@@ -0,0 +1,215 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import SelectBoxFilter from '@typo3/backend/form-engine/element/extra/select-box-filter.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+describe('@typo3/backend/form-engine/element/extra/select-box-filter', () => {
+  let root: HTMLElement;
+  let filterField: HTMLInputElement | HTMLSelectElement;
+
+  const optionLabels: string[] = ['Crème brûlée', 'Müller', 'Sirup (Vanille)', 'Cremeschnitte', 'Tiramisu'];
+
+  const options = (labels: string[]): string => labels.map((label: string): string => `<option>${label}</option>`).join('');
+
+  const mount = (selectContent: string, filterMarkup: string = '<input type="text" class="t3js-formengine-multiselect-filter-textfield">'): void => {
+    root = document.createElement('div');
+    root.innerHTML = `
+      <div class="form-wizards-wrap">
+        ${filterMarkup}
+        <select multiple>${selectContent}</select>
+      </div>`;
+    document.body.appendChild(root);
+    new SelectBoxFilter(root.querySelector('select[multiple]'));
+  };
+
+  afterEach((): void => {
+    root.remove();
+  });
+
+  const visibleOptions = (): string[] => Array
+    .from(root.querySelectorAll('select[multiple] option'))
+    .filter((option: HTMLOptionElement): boolean => !option.hidden)
+    .map((option: HTMLOptionElement): string => option.textContent);
+
+  const filterBy = (value: string): void => {
+    filterField.value = value;
+    filterField.dispatchEvent(new Event('input', { bubbles: true }));
+  };
+
+  describe('text field', () => {
+    beforeEach((): void => {
+      mount(options(optionLabels));
+      filterField = root.querySelector('.t3js-formengine-multiselect-filter-textfield');
+    });
+
+    it('shows all options for an empty filter', (): void => {
+      filterBy('');
+      expect(visibleOptions()).to.eql(optionLabels);
+    });
+
+    it('matches case insensitively', (): void => {
+      filterBy('MÜLLER');
+      expect(visibleOptions()).to.eql(['Müller']);
+    });
+
+    it('matches a plain substring anywhere in the label', (): void => {
+      filterBy('schnitte');
+      expect(visibleOptions()).to.eql(['Cremeschnitte']);
+    });
+
+    it('matches labels with diacritics when typing without them', (): void => {
+      filterBy('creme');
+      expect(visibleOptions()).to.eql(['Crème brûlée', 'Cremeschnitte']);
+    });
+
+    it('matches labels without diacritics when typing with them', (): void => {
+      filterBy('crèm');
+      expect(visibleOptions()).to.eql(['Crème brûlée', 'Cremeschnitte']);
+    });
+
+    it('treats regular expression meta characters as literal text', (): void => {
+      filterBy('(Vanille)');
+      expect(visibleOptions()).to.eql(['Sirup (Vanille)']);
+    });
+
+    it('hides everything when nothing matches', (): void => {
+      filterBy('.*');
+      expect(visibleOptions()).to.eql([]);
+    });
+  });
+
+  describe('Latin letters that do not decompose', () => {
+    const labels: string[] = ['Straße', 'Müller', 'Ærø', 'Łódź'];
+
+    beforeEach((): void => {
+      mount(options(labels));
+      filterField = root.querySelector('.t3js-formengine-multiselect-filter-textfield');
+    });
+
+    it('finds the sharp s when it is typed as a double s', (): void => {
+      filterBy('strasse');
+      expect(visibleOptions()).to.eql(['Straße']);
+    });
+
+    it('finds the sharp s when it is typed as written', (): void => {
+      filterBy('straße');
+      expect(visibleOptions()).to.eql(['Straße']);
+    });
+
+    it('finds the slashed o and the ligature typed as ASCII', (): void => {
+      filterBy('aero');
+      expect(visibleOptions()).to.eql(['Ærø']);
+    });
+
+    it('finds the stroked l typed as a plain l', (): void => {
+      filterBy('lodz');
+      expect(visibleOptions()).to.eql(['Łódź']);
+    });
+
+    it('does not resolve an umlaut to its transcription', (): void => {
+      filterBy('mueller');
+      expect(visibleOptions()).to.eql([]);
+    });
+  });
+
+  describe('characters the editor cannot see in the label', () => {
+    const nbsp = 'Cr\u00e8me\u00a0br\u00fbl\u00e9e';
+    const softHyphen = 'Do\u00adnau';
+    const zeroWidth = 'Ti\u200bramisu';
+    const labels: string[] = [nbsp, softHyphen, zeroWidth];
+
+    beforeEach((): void => {
+      mount(options(labels));
+      filterField = root.querySelector('.t3js-formengine-multiselect-filter-textfield');
+    });
+
+    it('matches across a no-break space when a plain space is typed', (): void => {
+      filterBy('creme brulee');
+      expect(visibleOptions()).to.eql([nbsp]);
+    });
+
+    it('matches across a soft hyphen', (): void => {
+      filterBy('donau');
+      expect(visibleOptions()).to.eql([softHyphen]);
+    });
+
+    it('matches across a zero width space', (): void => {
+      filterBy('tiramisu');
+      expect(visibleOptions()).to.eql([zeroWidth]);
+    });
+  });
+
+  describe('scripts whose combining marks carry meaning', () => {
+    // Thai vowel signs are nonspacing marks, but they distinguish syllables rather
+    // than accent them. Removing them would fold these three labels into one and
+    // the filter would stop narrowing anything for Thai.
+    const labels: string[] = ['กิน', 'กีฬา', 'กุญแจ'];
+
+    beforeEach((): void => {
+      mount(options(labels));
+      filterField = root.querySelector('.t3js-formengine-multiselect-filter-textfield');
+    });
+
+    it('keeps Thai vowel signs, so the filter still narrows', (): void => {
+      filterBy('กิ');
+      expect(visibleOptions()).to.eql(['กิน']);
+    });
+  });
+
+  describe('predefined filter items', () => {
+    beforeEach((): void => {
+      mount(
+        options(optionLabels),
+        `<select class="t3js-formengine-multiselect-filter-dropdown">
+          <option value=""></option>
+          <option value="creme">creme</option>
+        </select>`
+      );
+      filterField = root.querySelector('.t3js-formengine-multiselect-filter-dropdown');
+    });
+
+    it('applies a predefined filter value on change', (): void => {
+      filterField.value = 'creme';
+      filterField.dispatchEvent(new Event('change', { bubbles: true }));
+      expect(visibleOptions()).to.eql(['Crème brûlée', 'Cremeschnitte']);
+    });
+  });
+
+  describe('option groups', () => {
+    beforeEach((): void => {
+      mount(`
+        <optgroup label="Desserts">${options(['Crème brûlée', 'Tiramisu'])}</optgroup>
+        <optgroup label="Namen">${options(['Müller'])}</optgroup>`);
+      filterField = root.querySelector('.t3js-formengine-multiselect-filter-textfield');
+    });
+
+    const visibleGroups = (): string[] => Array
+      .from(root.querySelectorAll('optgroup'))
+      .filter((group: HTMLOptGroupElement): boolean => !group.hidden)
+      .map((group: HTMLOptGroupElement): string => group.label);
+
+    it('hides a group once all of its options are filtered away', (): void => {
+      filterBy('creme');
+      expect(visibleOptions()).to.eql(['Crème brûlée']);
+      expect(visibleGroups()).to.eql(['Desserts']);
+    });
+
+    it('shows every group again for an empty filter', (): void => {
+      filterBy('creme');
+      filterBy('');
+      expect(visibleGroups()).to.eql(['Desserts', 'Namen']);
+    });
+  });
+});

package/backend/tests/form-engine/element/select-tree-test.ts

@@ -0,0 +1,121 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+// Imported for its side effect, the module registers the custom element used below
+import '@typo3/backend/form-engine/element/select-tree.js';
+import type { SelectTree } from '@typo3/backend/form-engine/element/select-tree.js';
+import type { TreeNodeInterface } from '@typo3/backend/tree/tree-node.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+describe('@typo3/backend/form-engine/element/select-tree', () => {
+  let tree: SelectTree;
+
+  const createNode = (identifier: string, name: string, parents: string[]): TreeNodeInterface => {
+    return <TreeNodeInterface><unknown>{
+      identifier,
+      name,
+      parents,
+      depth: parents.length,
+      __parents: parents,
+      __treeIdentifier: identifier,
+      __processed: true,
+      __hidden: false,
+      __expanded: false,
+    };
+  };
+
+  beforeEach((): void => {
+    tree = <SelectTree>document.createElement('typo3-backend-form-selecttree');
+    tree.nodes = [
+      createNode('root', 'Root', []),
+      createNode('vanilla', 'Vanille', ['root']),
+      createNode('syrup', 'Sirup (Vanille)', ['root']),
+      createNode('cocoa', 'Kakao', ['root', 'syrup']),
+    ];
+  });
+
+  const visibleNodes = (): string[] => tree.nodes
+    .filter((node: TreeNodeInterface): boolean => node.identifier !== 'root' && !node.__hidden)
+    .map((node: TreeNodeInterface): string => node.name);
+
+  it('matches case insensitively', (): void => {
+    tree.filter('VANILLE');
+    expect(visibleNodes()).to.eql(['Vanille', 'Sirup (Vanille)', 'Kakao']);
+  });
+
+  it('treats regular expression meta characters as literal text', (): void => {
+    tree.filter('(Vanille)');
+    expect(visibleNodes()).to.eql(['Sirup (Vanille)', 'Kakao']);
+  });
+
+  it('does not throw on an unbalanced meta character', (): void => {
+    expect((): void => tree.filter('(')).to.not.throw();
+    expect(visibleNodes()).to.eql(['Sirup (Vanille)', 'Kakao']);
+  });
+
+  it('shows all nodes for an empty search term', (): void => {
+    tree.filter('');
+    expect(visibleNodes()).to.eql(['Vanille', 'Sirup (Vanille)', 'Kakao']);
+  });
+
+  it('hides everything when nothing matches', (): void => {
+    tree.filter('Erdbeere');
+    expect(visibleNodes()).to.eql([]);
+  });
+
+  describe('folding of the search term and the node names', () => {
+    beforeEach((): void => {
+      tree.nodes = [
+        createNode('root', 'Root', []),
+        createNode('creme', 'Crème brûlée', ['root']),
+        createNode('cremeschnitte', 'Cremeschnitte', ['root']),
+        createNode('strasse', 'Straße', ['root']),
+      ];
+    });
+
+    it('matches a name with diacritics when they are not typed', (): void => {
+      tree.filter('creme');
+      expect(visibleNodes()).to.eql(['Crème brûlée', 'Cremeschnitte']);
+    });
+
+    it('matches a name without diacritics when they are typed', (): void => {
+      tree.filter('crèm');
+      expect(visibleNodes()).to.eql(['Crème brûlée', 'Cremeschnitte']);
+    });
+
+    it('matches a Latin letter that does not decompose by its ASCII spelling', (): void => {
+      tree.filter('strasse');
+      expect(visibleNodes()).to.eql(['Straße']);
+    });
+
+    it('ignores a character the reader cannot see in the name', (): void => {
+      tree.nodes = [
+        createNode('root', 'Root', []),
+        createNode('creme', 'Creme\u00adschnitte', ['root']),
+      ];
+      tree.filter('cremeschnitte');
+      expect(visibleNodes()).to.eql(['Creme\u00adschnitte']);
+    });
+
+    it('shows the parents of a node matched without its diacritics', (): void => {
+      tree.nodes = [
+        createNode('root', 'Root', []),
+        createNode('sweets', 'Süßwaren', ['root']),
+        createNode('creme', 'Crème brûlée', ['root', 'sweets']),
+      ];
+      tree.filter('creme');
+      expect(visibleNodes()).to.eql(['Süßwaren', 'Crème brûlée']);
+    });
+  });
+});