filter model test

e2e-tests/cypress/e2e/browse-data.cy.js

@@ -8,4 +8,18 @@ describe('Data browser data', () => {
     cy.contains('Let There Be Rock');
     cy.contains('Rows: 347');
   });
+
+  it('Filter model', () => {
+    cy.visit('http://localhost:3000');
+
+    cy.contains('MySql-connection').click();
+    cy.contains('Chinook').click();
+    cy.testid('SqlObjectList_search').clear().type('album');
+    cy.contains('347 rows, InnoDB');
+    cy.testid('SqlObjectList_searchMenuDropDown').click();
+    cy.contains('Column name').click();
+    cy.contains('AlbumId');
+    cy.contains('Column name').click();
+    cy.contains('AlbumId').should('not.exist');
+  });
 });

packages/web/src/buttons/DropDownButton.svelte

@@ -33,6 +33,13 @@
   }
 </script>
 
-<InlineButton {square} {narrow} on:click={handleClick} bind:this={domButton} {disabled}>
+<InlineButton
+  {square}
+  {narrow}
+  on:click={handleClick}
+  bind:this={domButton}
+  {disabled}
+  data-testid={$$props['data-testid']}
+>
   <FontIcon icon={isLoading ? 'icon loading' : icon} />
 </InlineButton>

packages/web/src/elements/SearchInput.svelte

@@ -43,6 +43,7 @@
   on:keydown={handleKeyDown}
   bind:this={domInput}
   on:focus={e => domInput.select()}
+  data-testid={$$props['data-testid']}
 />
 
 <style>

packages/web/src/widgets/ConnectionList.svelte

@@ -215,6 +215,7 @@
     onFocusFilteredList={() => {
       domListHandler?.focusFirst();
     }}
+    data-testid="ConnectionList_search"
   />
   <CloseSearchButton bind:filter />
   <DropDownButton

packages/web/src/widgets/SqlObjectList.svelte

@@ -214,6 +214,7 @@
       onFocusFilteredList={() => {
         domListHandler?.focusFirst();
       }}
+      data-testid="SqlObjectList_search"
     />
     <CloseSearchButton bind:filter />
     <DropDownButton
@@ -221,6 +222,7 @@
       menu={createSearchMenu}
       square={!!filter}
       narrow={false}
+      data-testid="SqlObjectList_searchMenuDropDown"
     />
     {#if !filter}
       <DropDownButton icon="icon plus-thick" menu={createAddMenu} />