SYNC: filter themeshot

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

@@ -15,11 +15,16 @@ beforeEach(() => {
 describe('Data browser data', () => {
   it('Export window', () => {
     cy.contains('MySql-connection').click();
-    cy.contains('MyChinook').rightclick();
+    cy.contains('MyChinook').click();
+    cy.contains('Album').rightclick();
     cy.contains('Export').click();
+    cy.contains('Export advanced').click();
     cy.wait(1000);
     // cy.testid('SourceTargetConfig_buttonCurrentArchive_target').click();
-    cy.testid('FormTablesSelect_buttonAll_tables').click();
+    // cy.testid('FormTablesSelect_buttonAll_tables').click();
+    // cy.testid('SourceTargetConfig_tablesSelect_source').click();
+    // cy.find('.listContainer').contains('Album').click();
+    // cy.find('.listContainer').contains('Track').click();
     // cy.wait(4000);
     // cy.contains('All tables').click();
     cy.contains('Run').click();
@@ -76,6 +81,20 @@ describe('Data browser data', () => {
     cy.contains('Aerosmith').should('not.exist');
   });
 
+  it.only('Data filter', () => {
+    cy.contains('MySql-connection').click();
+    cy.contains('MyChinook').click();
+    cy.contains('Album').click();
+    cy.testid('DataFilterControl_input_Title').type('Rock{enter}');
+    cy.contains('Rows: 7');
+    cy.testid('DataFilterControl_input_AlbumId').type('>10{enter}');
+    cy.contains('Rows: 5');
+    cy.testid('DataFilterControl_filtermenu_Title').click();
+    cy.themeshot('filter');
+    cy.testid('DataGridCore_button_clearFilters').click();
+    cy.contains('Rows: 347');
+  });
+
   it('Data grid screenshots', () => {
     cy.contains('MySql-connection').click();
     cy.window().then(win => {

packages/web/src/datagrid/DataFilterControl.svelte

@@ -296,11 +296,21 @@
   {/if}
   {#if conid && database && driver}
     {#if driver?.databaseEngineTypes?.includes('sql') && foreignKey}
-      <InlineButton on:click={handleShowDictionary} narrow square>
+      <InlineButton
+        on:click={handleShowDictionary}
+        narrow
+        square
+        data-testid={`DataFilterControl_choosevalues_${uniqueName}`}
+      >
         <FontIcon icon="icon dots-horizontal" />
       </InlineButton>
     {:else if (pureName && columnName) || (pureName && uniqueName && driver?.databaseEngineTypes?.includes('document'))}
-      <InlineButton on:click={handleShowValuesModal} narrow square>
+      <InlineButton
+        on:click={handleShowValuesModal}
+        narrow
+        square
+        data-testid={`DataFilterControl_choosevalues_${uniqueName}`}
+      >
         <FontIcon icon="icon dots-vertical" />
       </InlineButton>
     {/if}
@@ -309,7 +319,12 @@
       <FontIcon icon="icon dots-vertical" />
     </InlineButton>
   {/if}
-  <DropDownButton icon="icon filter" menu={createMenu} narrow />
+  <DropDownButton
+    icon="icon filter"
+    menu={createMenu}
+    narrow
+    data-testid={`DataFilterControl_filtermenu_${uniqueName}`}
+  />
   {#if showResizeSplitter}
     <div class="horizontal-split-handle resizeHandleControl" use:splitterDrag={'clientX'} on:resizeSplitter />
   {/if}

packages/web/src/datagrid/DataGridCore.svelte

@@ -1946,7 +1946,11 @@
               style={`width:${headerColWidth}px; min-width:${headerColWidth}px; max-width:${headerColWidth}px`}
             >
               {#if display.filterCount > 0}
-                <InlineButton on:click={() => display.clearFilters()} square>
+                <InlineButton
+                  on:click={() => display.clearFilters()}
+                  square
+                  data-testid="DataGridCore_button_clearFilters"
+                >
                   <FontIcon icon="icon filter-off" />
                 </InlineButton>
               {/if}

packages/web/src/forms/SelectField.svelte

@@ -64,6 +64,7 @@
       {isMulti}
       bind:listOpen
       bind:isFocused
+      class={$$props['data-testid'] ? 'select-testid-' + $$props['data-testid'] : undefined}
     />
   </div>
 {/if}

packages/web/src/impexp/SourceTargetConfig.svelte

@@ -141,6 +141,9 @@
         schemaName={schemaNameField}
         databaseName={databaseNameField}
         name={tablesField}
+        data-testid={direction == 'source'
+          ? 'SourceTargetConfig_tablesSelect_source'
+          : 'SourceTargetConfig_tablesSelect_target'}
         label={_t('importExport.tablesViewsCollections', { defaultMessage: 'Tables / views / collections' })}
       />
     {/if}