e2e(1174): add coverage for parameters filter in canvas form

KaotoIO · Jun 26, 2024 · a2d569b · a2d569b
1 parent 4c65a15
commit a2d569b
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 0 deletions.
diff --git a/packages/ui-tests/cypress/e2e/designer/sidepanelConfig/propertiesFilter.cy.ts b/packages/ui-tests/cypress/e2e/designer/sidepanelConfig/propertiesFilter.cy.ts
@@ -0,0 +1,73 @@
+describe('Tests for side panel step filtering', () => {
+  beforeEach(() => {
+    cy.openHomePage();
+  });
+
+  it('Side panel step filtering lowercase', () => {
+    cy.uploadFixture('flows/camelRoute/basic.yaml');
+    cy.openDesignPage();
+    cy.openStepConfigurationTab('setHeader');
+
+    // expand wrapped section
+    cy.contains('button', 'Processor advanced properties').click();
+
+    // check all fields are present
+    cy.get(`input[name="id"]`).should('exist');
+    cy.get(`textarea[name="description"]`).should('exist');
+    cy.get(`input[name="name"]`).should('exist');
+    cy.get(`input[name="disabled"]`).should('exist');
+    cy.get(`input[data-testid="expression-preview-input"]`).should('exist');
+
+    // filter fields
+    cy.filterFields('name');
+    cy.get(`input[data-testid="expression-preview-input"]`).should('exist');
+    cy.get(`input[name="name"]`).should('exist');
+    cy.get(`input[name="id"]`).should('not.exist');
+    cy.get(`textarea[name="description"]`).should('not.exist');
+    cy.get(`input[name="disabled"]`).should('not.exist');
+  });
+
+  it('Side panel step filtering uppercase', () => {
+    cy.uploadFixture('flows/camelRoute/basic.yaml');
+    cy.openDesignPage();
+    cy.openStepConfigurationTab('setHeader');
+
+    // expand wrapped section
+    cy.contains('button', 'Processor advanced properties').click();
+
+    // check all fields are present
+    cy.get(`input[name="id"]`).should('exist');
+    cy.get(`textarea[name="description"]`).should('exist');
+    cy.get(`input[name="name"]`).should('exist');
+    cy.get(`input[name="disabled"]`).should('exist');
+    cy.get(`input[data-testid="expression-preview-input"]`).should('exist');
+
+    // filter fields
+    cy.filterFields('DISABLED');
+    cy.get(`input[data-testid="expression-preview-input"]`).should('exist');
+    cy.get(`input[name="disabled"]`).should('exist');
+    cy.get(`input[name="name"]`).should('not.exist');
+    cy.get(`input[name="id"]`).should('not.exist');
+    cy.get(`textarea[name="description"]`).should('not.exist');
+  });
+
+  // blocked by https://github.com/KaotoIO/kaoto/issues/1207
+  it.skip('Side panel step filtering multiple words', () => {
+    cy.uploadFixture('flows/camelRoute/basic.yaml');
+    cy.openDesignPage();
+    cy.openStepConfigurationTab('log');
+
+    // check all fields are present
+    cy.get(`input[name="id"]`).should('exist');
+    cy.get(`textarea[name="description"]`).should('exist');
+    cy.get(`input[name="name"]`).should('exist');
+    cy.get(`input[name="disabled"]`).should('exist');
+
+    // filter fields
+    cy.filterFields('show all');
+    cy.get(`input[name="showAll"]`).should('exist');
+    cy.get(`input[name="showAllProperties"]`).should('exist');
+    cy.get(`input[name="id"]`).should('not.exist');
+    cy.get(`textarea[name="description"]`).should('not.exist');
+  });
+});
diff --git a/packages/ui-tests/cypress/support/cypress.d.ts b/packages/ui-tests/cypress/support/cypress.d.ts
@@ -67,6 +67,7 @@ declare global {
       deselectNodeBean(inputName: string): Chainable<JQuery<Element>>;
       addProperty(propertyName: string): Chainable<JQuery<Element>>;
       addSingleKVProperty(propertyName: string, key: string, value: string): Chainable<JQuery<Element>>;
+      filterFields(filter: string): Chainable<JQuery<Element>>;
       // metadata
       expandWrappedSection(sectionName: string): Chainable<JQuery<Element>>;
       closeWrappedSection(sectionName: string): Chainable<JQuery<Element>>;

diff --git a/packages/ui-tests/cypress/support/next-commands/nodeConfiguration.ts b/packages/ui-tests/cypress/support/next-commands/nodeConfiguration.ts
@@ -120,3 +120,9 @@ Cypress.Commands.add('addSingleKVProperty', (propertyName: string, key: string,
       cy.get('input[label="Value"]').type(value);
     });
 });
+
+Cypress.Commands.add('filterFields', (filter: string) => {
+  cy.get('[data-testid="filter-fields"]').within(() => {
+    cy.get('input.pf-v5-c-text-input-group__text-input').type(filter);
+  });
+});
diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasForm.tsx b/packages/ui/src/components/Visualization/Canvas/CanvasForm.tsx
@@ -94,6 +94,7 @@ export const CanvasForm: FunctionComponent<CanvasFormProps> = (props) => {
           <SearchInput
             className="filter-fields"
             placeholder="Find properties by name"
+            data-testid="filter-fields"
             value={filteredFieldText}
             onChange={onFilterChange}
             onClear={onFilterChange}

diff --git a/packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasForm.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasForm.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`CanvasForm should render 1`] = `
       >
         <div
           class="pf-v5-c-text-input-group filter-fields"
+          data-testid="filter-fields"
         >
           <div
             class="pf-v5-c-text-input-group__main pf-m-icon"
@@ -505,6 +506,7 @@ exports[`CanvasForm should render nothing if no schema and no definition is avai
       >
         <div
           class="pf-v5-c-text-input-group filter-fields"
+          data-testid="filter-fields"
         >
           <div
             class="pf-v5-c-text-input-group__main pf-m-icon"
@@ -703,6 +705,7 @@ exports[`CanvasForm should render nothing if no schema is available 1`] = `
       >
         <div
           class="pf-v5-c-text-input-group filter-fields"
+          data-testid="filter-fields"
         >
           <div
             class="pf-v5-c-text-input-group__main pf-m-icon"