generate screenshots

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

@@ -1,7 +1,10 @@
+beforeEach(() => {
+  cy.visit('http://localhost:3000');
+  cy.viewport(1250, 900);
+});
+
 describe('Data browser data', () => {
   it('Load table data', () => {
-    cy.visit('http://localhost:3000');
-
     cy.contains('MySql-connection').click();
     cy.contains('Chinook').click();
     cy.contains('Album').click();
@@ -11,9 +14,7 @@ describe('Data browser data', () => {
     cy.contains('Aerosmith');
   });
 
-  it.only('Filter model', () => {
-    cy.visit('http://localhost:3000');
-
+  it('Filter model', () => {
     cy.contains('MySql-connection').click();
     cy.contains('Chinook').click();
     cy.testid('SqlObjectList_search').clear().type('album');
@@ -29,8 +30,6 @@ describe('Data browser data', () => {
   });
 
   it('Show raw data', () => {
-    cy.visit('http://localhost:3000');
-
     cy.contains('MySql-connection').click();
     cy.contains('Chinook').click();
     cy.contains('Album').rightclick();
@@ -40,4 +39,43 @@ describe('Data browser data', () => {
     cy.realPress(['Control', 'ArrowRight']);
     cy.contains('Aerosmith').should('not.exist');
   });
+
+  it('Data grid screenshots', () => {
+    cy.contains('MySql-connection').click();
+    cy.window().then(win => {
+      win.__changeCurrentTheme('theme-dark');
+    });
+
+    cy.contains('MyChinook').click();
+
+    cy.contains('Album').click();
+    cy.testid('TabsPanel_pinTabButton').click();
+    cy.contains('Genre').click();
+    cy.testid('TabsPanel_pinTabButton').click();
+    cy.contains('Playlist').click();
+    cy.testid('TabsPanel_pinTabButton').click();
+
+    cy.contains('Postgres-connection').click();
+    cy.contains('PgChinook').click();
+    cy.contains('customer').click();
+    cy.contains('Leonie').click();
+    cy.screenshot('datagrid');
+
+    cy.contains('invoice').click();
+    cy.contains('invoice_line (invoice_id)').click();
+    cy.screenshot('masterdetail');
+
+    cy.contains('9, Place Louis Barthou').click();
+    cy.contains('Switch to form').click();
+    cy.contains('Switch to table'); // test that we are in form view
+    cy.screenshot('formview');
+  });
+
+  it.only('SQL Gen', () => {
+    cy.contains('Postgres-connection').click();
+    cy.contains('PgChinook').rightclick();
+    cy.contains('SQL Generator').click();
+    cy.contains('Check all').click();
+    cy.screenshot('sqlgen');
+  });
 });

e2e-tests/env/browse-data/.env

@@ -6,6 +6,7 @@ USER_mysql=root
 PASSWORD_mysql=Pwd2020Db
 PORT_mysql=16004
 ENGINE_mysql=mysql@dbgate-plugin-mysql
+DBCONFIG_mysql=[{"name":"MyChinook","connectionColor":"cyan"}]
 
 LABEL_postgres=Postgres-connection
 SERVER_postgres=localhost
@@ -13,3 +14,4 @@ USER_postgres=postgres
 PASSWORD_postgres=Pwd2020Db
 PORT_postgres=16000
 ENGINE_postgres=postgres@dbgate-plugin-postgres
+DBCONFIG_postgres=[{"name":"PgChinook","connectionColor":"red"}]

e2e-tests/init/browse-data.js

@@ -79,11 +79,11 @@ async function initPostgresDatabase(dbname, inputFile) {
 }
 
 async function run() {
-  await initMySqlDatabase('Chinook', path.resolve(path.join(__dirname, '../data/Chinook-mysql.sql')));
+  await initMySqlDatabase('MyChinook', path.resolve(path.join(__dirname, '../data/Chinook-mysql.sql')));
   // await initMySqlDatabase('Northwind', path.resolve(path.join(__dirname, '../data/northwind-mysql.sql')));
   // await initMySqlDatabase('Sakila', path.resolve(path.join(__dirname, '../data/sakila-mysql.sql')));
 
-  await initPostgresDatabase('Chinook', path.resolve(path.join(__dirname, '../data/Chinook-postgres.sql')));
+  await initPostgresDatabase('PgChinook', path.resolve(path.join(__dirname, '../data/Chinook-postgres.sql')));
 }
 
 dbgateApi.runScript(run);

packages/web/src/stores.ts

@@ -416,3 +416,5 @@ focusedTreeDbKey.subscribe(value => {
   focusedTreeDbKeyValue = value;
 });
 export const getFocusedTreeDbKey = () => focusedTreeDbKeyValue;
+
+window['__changeCurrentTheme'] = theme => currentTheme.set(theme);

packages/web/src/tabpanel/TabsPanel.svelte

@@ -660,6 +660,7 @@
               {#if tab.tabPreviewMode}
                 <span
                   class="pin-button"
+                  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."
                 >