From d53991276238ba63aceb5d14da73aa88b41a7e37 Mon Sep 17 00:00:00 2001
From: "SPRINX0\\prochazka" <jan.prochazka@sprinx.com>
Date: Wed, 26 Mar 2025 09:12:35 +0100
Subject: [PATCH] SYNC:  fragment shots

---
 e2e-tests/cypress/e2e/add-connection.cy.js  | 8 +++++++-
 packages/web/src/elements/TabControl.svelte | 3 ++-
 packages/web/src/tabs/ConnectionTab.svelte  | 1 +
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/e2e-tests/cypress/e2e/add-connection.cy.js b/e2e-tests/cypress/e2e/add-connection.cy.js
index 3b71770fb..3bd67ec55 100644
--- a/e2e-tests/cypress/e2e/add-connection.cy.js
+++ b/e2e-tests/cypress/e2e/add-connection.cy.js
@@ -20,9 +20,15 @@ describe('Add connection', () => {
     cy.get('[data-testid=ConnectionDriverFields_displayName]').clear().type('test-mysql-1');
 
     // test connection
-    cy.get('[data-testid=ConnectionTab_buttonTest]').click();
+    cy.testid('ConnectionTab_buttonTest').click();
     cy.contains('Connected:');
 
+    cy.testid('ConnectionTab_tabSshTunnel').click();
+    cy.testid('ConnectionTab_tabControlContent').themeshot('fragment-connection-sshtunnel', { padding: 50 });
+
+    cy.testid('ConnectionTab_tabSsl').click();
+    cy.testid('ConnectionTab_tabControlContent').themeshot('fragment-connection-ssl', { padding: 50 });
+
     // save and connect
     cy.get('[data-testid=ConnectionTab_buttonSave]').click();
     cy.get('[data-testid=ConnectionTab_buttonConnect]').click();
diff --git a/packages/web/src/elements/TabControl.svelte b/packages/web/src/elements/TabControl.svelte
index d6abeafd3..4ca49ea36 100644
--- a/packages/web/src/elements/TabControl.svelte
+++ b/packages/web/src/elements/TabControl.svelte
@@ -16,6 +16,7 @@
   export let isInline = false;
   export let containerMaxWidth = undefined;
   export let flex1 = true;
+  export let contentTestId = undefined;
 
   export function setValue(index) {
     value = index;
@@ -39,7 +40,7 @@
     {/if}
   </div>
 
-  <div class="content-container">
+  <div class="content-container" data-testid={contentTestId}>
     {#each _.compact(tabs) as tab, index}
       <div class="container" class:isInline class:tabVisible={index == value} style:max-width={containerMaxWidth}>
         <svelte:component this={tab.component} {...tab.props} tabControlHiddenTab={index != value} />
diff --git a/packages/web/src/tabs/ConnectionTab.svelte b/packages/web/src/tabs/ConnectionTab.svelte
index 20604f363..d58e6f343 100644
--- a/packages/web/src/tabs/ConnectionTab.svelte
+++ b/packages/web/src/tabs/ConnectionTab.svelte
@@ -239,6 +239,7 @@
       isInline
       containerMaxWidth="800px"
       flex1={false}
+      contentTestId="ConnectionTab_tabControlContent"
       tabs={[
         {
           label: 'General',