element/playwright/e2e/element-examples/si-filtered-search.spec.ts at 2db3e8aaffa08eea7848335a5c0d7c26daed4bfe · siemens/element · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
/**
 * Copyright (c) Siemens 2016 - 2025
 * SPDX-License-Identifier: MIT
 */
import { expect, test } from '../../support/test-helpers';

test.describe('filtered search', () => {
  test('should create remove criteria', async ({ si, page }) => {
    await page.clock.setFixedTime('2022-02-20');
    await si.visitExample('si-filtered-search/si-filtered-search-playground');
    // FS lacks a11y features. One of the problems is that all inputs are labeled as search. The last one will always be the free text search.
    const freeTextSearch = page.getByLabel('search', { exact: true }).last();
    await freeTextSearch.focus();
    await page.keyboard.type('Event');
    await page.getByLabel('Event', { exact: true }).click();
    await si.runVisualAndA11yTests('operator-open');
    await page.getByLabel('=').click();
    await si.runVisualAndA11yTests('datepicker-open');
    await page.keyboard.press('Enter');
    await page.keyboard.type('Score');
    await page.getByLabel('Score').click();
    await si.runVisualAndA11yTests('multi-select-open');
    await page.getByLabel('Good').click();
    await page.keyboard.press('Tab');
    await page.keyboard.press('Tab');
    await expect(freeTextSearch).toBeFocused();
    await si.runVisualAndA11yTests('data-entered');
    // remove score criterion
    await page.keyboard.press('Shift+Tab');
    await page.keyboard.press('Shift+Tab');
    await expect(page.locator('.criterion-value-text', { hasText: 'Good' })).toBeFocused();
    await page.keyboard.press('Enter');
    await expect(
      page.locator('.pill-group', { hasText: 'Score' }).getByRole('combobox')
    ).toBeFocused();
    await page.keyboard.press('Backspace');
    await page.keyboard.press('Escape');
    await expect(page.getByText('Score')).not.toBeAttached();
    // remove event criterion
    await page.keyboard.press('Shift+Tab');
    await page.keyboard.press('Enter');
    await page.keyboard.press('Escape');
    await expect(page.getByText('Event', { exact: true })).not.toBeAttached();
    // delete location criterion
    await page.keyboard.press('Backspace');
    await expect(
      page.locator('.pill-group', { hasText: 'Location' }).getByRole('combobox')
    ).toBeFocused();
    await page.keyboard.press('Control+KeyA');
    await page.keyboard.press('Backspace');
    await si.runVisualAndA11yTests('typeahead-open');
    await page.keyboard.press('Backspace');
    await si.runVisualAndA11yTests('empty');
  });

  test('should highlight invalid criterion and criterion values', async ({ si, page }) => {
    await si.visitExample('si-filtered-search/si-filtered-search-playground');
    // FS lacks a11y features. One of the problems is that all inputs are labeled as search. The last one will always be the free text search.
    const freeTextSearch = page.getByLabel('search', { exact: true }).last();
    await freeTextSearch.focus();
    await page.keyboard.press('Backspace');
    await expect(
      page.locator('.pill-group', { hasText: 'Location' }).getByRole('combobox')
    ).toBeFocused();
    await page.keyboard.press('Control+KeyA');
    await page.keyboard.type('H');
    await expect(page.getByRole('option', { name: 'Karlsruhe' })).toHaveClass(/active/);
    await page.keyboard.type('annover');
    await page.keyboard.press('Enter');
    await expect(freeTextSearch).toBeFocused();
    await freeTextSearch.fill('Building:House');
    await page.keyboard.press('Enter');
    await page.getByLabel('Only predefined criteria').check();
    await page.getByLabel('Only predefined criterion options', { exact: true }).check();
    await si.runVisualAndA11yTests('invalid-criterion');
  });

  test('should not be interactive when disabled', async ({ si, page }) => {
    await si.visitExample('si-filtered-search/si-filtered-search-playground');
    await page.getByLabel('Disabled').check();
    await si.runVisualAndA11yTests();
  });

  test('should create free text pill', async ({ si, page }) => {
    await si.visitExample('si-filtered-search/si-filtered-search-playground');
    await page.getByRole('checkbox', { name: 'Disable free text pills' }).setChecked(false);
    // FS lacks a11y features. One of the problems is that all inputs are labeled as search. The last one will always be the free text search.
    const freeTextSearch = page.getByLabel('search', { exact: true }).last();
    await freeTextSearch.focus();
    await page.keyboard.type('my free text');
    await expect(page.getByRole('option', { name: /Search for/ })).toBeInViewport();
    await si.runVisualAndA11yTests('freetext-typeahead-open');
    // Select the "Search for" item
    await page.getByRole('option', { name: /Search for/ }).click();
    await si.runVisualAndA11yTests('freetext-selected');

    // Edit the created free text pill
    const freeTextPill = page.getByText('my free text', { exact: true });
    await expect(freeTextPill).toBeVisible();
    await freeTextPill.click();
    // Wait for edit mode to activate - the input should appear and be focused
    await expect(page.getByLabel('search', { exact: true }).first()).toBeFocused();
    await si.runVisualAndA11yTests('freetext-edit-mode');
    // Clear and type new value
    await page.keyboard.press('Control+KeyA');
    await page.keyboard.type('updated free text');
    await page.keyboard.press('Enter');
    // Verify the value was updated
    await expect(page.getByText('updated free text', { exact: true })).toBeVisible();
    await si.runVisualAndA11yTests('freetext-updated');
  });
});