next screenshots

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

@@ -28,7 +28,7 @@ describe('Data browser data', () => {
     cy.contains('Finished job script');
   });
 
-  it('Data archive editor', () => {
+  it('Data archive editor - macros', () => {
     cy.testid('WidgetIconPanel_archive').click();
     cy.contains('Album').click();
     cy.testid('DataGrid_itemFilters').click();
@@ -113,4 +113,48 @@ describe('Data browser data', () => {
     cy.contains('Check all').click();
     cy.screenshot('sqlgen');
   });
+
+  it('Macros in DB', () => {
+    cy.contains('MySql-connection').click();
+    cy.contains('MyChinook').click();
+    cy.contains('Customer').click();
+    cy.contains('Leonie').click();
+    cy.contains('Ramos').click({ shiftKey: true });
+    cy.testid('DataGrid_itemColumns').click();
+    cy.testid('DataGrid_itemFilters').click();
+    cy.testid('DataGrid_itemReferences').click();
+    cy.testid('DataGrid_itemMacros').click();
+    cy.contains('Change text case').click();
+    cy.contains('NIELSEN');
+    cy.screenshot('macros');
+  });
+
+  it('Perspectives', () => {
+    cy.contains('MySql-connection').click();
+    cy.contains('MyChinook').click();
+    cy.contains('Artist').rightclick();
+    cy.contains('Design perspective query').click();
+
+    cy.testid('PerspectiveNodeRow_check_Artist_Album').click();
+    cy.testid('PerspectiveNodeRow_expand_Artist_Album').click();
+    cy.testid('PerspectiveNodeRow_check_Artist_Album_Track').click();
+
+    // check track is loaded
+    cy.contains('Put The Finger On You');
+
+    cy.screenshot('perspective1');
+  });
+
+  it.only('Query editor', () => {
+    cy.contains('MySql-connection').click();
+    cy.contains('MyChinook').click();
+    cy.contains('Customer').rightclick();
+    cy.contains('SQL template').click();
+    cy.contains('CREATE TABLE').click();
+    cy.get('body').realPress('PageDown');
+    cy.get('body').realType('select * from Album where Album.');
+    // code completion
+    cy.contains('ArtistId');
+    cy.screenshot('query');
+  });
 });

packages/datalib/src/PerspectiveTreeNode.ts

@@ -221,6 +221,11 @@ export abstract class PerspectiveTreeNode {
     return false;
   }
 
+  get pathIdentifier() {
+    if (this.parentNode) return `${this.parentNode.pathIdentifier}_${this.codeName}`;
+    return this.codeName;
+  }
+
   hasDesignerIdInIncestors(designerId: string): boolean {
     if (designerId == this.designerId) return true;
     return this.parentNode?.hasDesignerIdInIncestors(designerId) || false;

packages/web/src/icons/FontIcon.svelte

@@ -301,7 +301,15 @@
   };
 </script>
 
-<span class={iconNames[icon] || icon} {title} class:padLeft class:padRight {style} on:click />
+<span
+  class={iconNames[icon] || icon}
+  {title}
+  class:padLeft
+  class:padRight
+  {style}
+  on:click
+  data-testid={$$props['data-testid']}
+/>
 
 <style>
   .padLeft {

packages/web/src/perspectives/PerspectiveNodeRow.svelte

@@ -36,9 +36,11 @@
   <span class="expandColumnIcon" style={`margin-right: ${5 + (node.level - (tempRoot?.level ?? 0)) * 10}px`}>
     <FontIcon
       icon={node.isExpandable ? plusExpandIcon(node.isExpanded) : 'icon invisible-box'}
+      data-testid={`PerspectiveNodeRow_expand_${node.pathIdentifier}`}
       on:click={() => {
         node.toggleExpanded();
       }}
+
     />
   </span>
 
@@ -54,6 +56,7 @@
     on:change={() => {
       node.toggleChecked();
     }}
+    data-testid={`PerspectiveNodeRow_check_${node.pathIdentifier}`}
   />
 
   {#if node.secondaryCheckable}

packages/web/src/tabpanel/TabsPanel.svelte

@@ -660,7 +660,7 @@
               {#if tab.tabPreviewMode}
                 <span
                   class="pin-button"
-                  data-testid='TabsPanel_pinTabButton'
+                  data-testid="TabsPanel_pinTabButton"
                   on:click={e => pinTab(tab.tabid)}
                   title="This tab is in preview mode, it will be replaced eg. when clicking table. Click to switch to normal mode. You could also double-click tab header."
                 >
@@ -683,11 +683,21 @@
   </div>
   <div class="icons-wrapper">
     {#if allowSplitTab}
-      <div class="icon-button" on:click={() => splitTab(multiTabIndex)} title="Split window">
+      <div
+        class="icon-button"
+        on:click={() => splitTab(multiTabIndex)}
+        title="Split window"
+        data-testid="TabsPanel_buttonSplit"
+      >
         <FontIcon icon="icon split" />
       </div>
     {/if}
-    <div class="icon-button" on:click={() => newQuery({ multiTabIndex })} title="New query">
+    <div
+      class="icon-button"
+      on:click={() => newQuery({ multiTabIndex })}
+      title="New query"
+      data-testid="TabsPanel_buttonNewQuery"
+    >
       <FontIcon icon="icon add" />
     </div>
   </div>