4200

.github/workflows/integration-tests-against-emulator.yaml

@@ -149,6 +149,29 @@ jobs:
       - run: gcloud spanner instances create test-instance --config=emulator-config --description="Test Instance" --nodes=1
 
       # run tests
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+
+      - name: Install Dependencies
+        run: |
+          cd ui
+          npm ci
+
+      - name: Start Local Server
+        run:  |
+          cd ui
+          npm start &
+
+      - name: Wait for Local Server to Start
+        run: npx wait-on http://localhost:4200 -t 30000
+
+      - name: Cypress run
+        run: |
+          cd ui
+          npx cypress run
+
       - uses: actions/setup-go@v2
         with:
           go-version: "1.19"
@@ -157,4 +180,4 @@ jobs:
         env:
           SPANNER_EMULATOR_HOST: localhost:9010
           SPANNER_MIGRATION_TOOL_TESTS_GCLOUD_PROJECT_ID: emulator-test-project
-          SPANNER_MIGRATION_TOOL_TESTS_GCLOUD_INSTANCE_ID: test-instance
+          SPANNER_MIGRATION_TOOL_TESTS_GCLOUD_INSTANCE_ID: test-instance

ui/cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    supportFile: false
+  },
+});

ui/cypress/e2e/spec.cy.ts

@@ -0,0 +1,88 @@
+import mockIConv from "../../src/mocks/conv";
+
+describe('template spec', () => {
+  let url = window.location.origin;
+  beforeEach(() => {
+    // Intercept the backend APIs and return desired response.
+    cy.intercept('GET', `${url}/IsOffline`, { statusCode: 200, body: false }).as('getIsOffline');
+    cy.intercept('GET', `${url}/GetSessions`, { statusCode: 200, body: [] }).as('getSessions');
+    cy.intercept('GET', `${url}/GetConfig`, { statusCode: 200 }).as('getConfig');
+    cy.intercept('GET', `${url}/GetLatestSessionDetails`, { statusCode: 200 }).as('getLatestSessionDetails');
+    cy.visit('http://localhost:4200/');
+  });
+
+  it('verify direct connection to mysql non-sharded database', () => {
+    cy.intercept('GET', `${url}/ping`, { statusCode: 200 }).as('checkBackendHealth');
+    cy.intercept('GET', `${url}/convert/infoschema`, { statusCode: 200, body: mockIConv }).as('directConnection');
+
+    cy.get('.primary-header').eq(0).should('have.text', 'Get started with Spanner migration tool');
+    cy.get('#edit-icon').should('exist').click();
+
+    cy.fixture('config').then((json) => {
+      cy.intercept('POST', `${url}/SetSpannerConfig`, (req) => {
+        req.reply({
+          status: 200,
+          body: {
+            GCPProjectID: json.projectId,
+            SpannerInstanceID: json.instanceId,
+            IsMetadataDbCreated: false,
+            IsConfigValid: true,
+          },
+        });
+      }).as('setSpannerConfig');
+      cy.get('#project-id').clear().type(json.projectId)
+      cy.get('#instance-id').clear().type(json.instanceId)
+    })
+
+    cy.get('#save-button').click();
+    cy.get('#save-button', { timeout: 50000 }).should("not.exist");
+    cy.get('#check-icon').should('exist');
+    cy.get('#connect-to-database-btn', { timeout: 10000 }).should('exist');
+    cy.get('#connect-to-database-btn').click();
+
+    // Wait for the connection to complete
+    cy.get('#direct-connection-component', { timeout: 10000 }).should('be.visible');
+
+    cy.get('#dbengine-input').click();
+    cy.get('mat-option').contains('MySQL').click();
+
+    cy.fixture('mysql-config').then((json) => {
+      cy.intercept('POST', `${url}/connect`, (req) => {
+        if (req.body && req.body.Host === json.hostname && req.body.User === json.username && req.body.Driver === 'mysql'
+          && req.body.Password === json.password && req.body.Port === json.port && req.body.Database === json.dbName) {
+          req.reply({
+            statusCode: 200,
+          });
+        } else {
+          req.reply({
+            statusCode: 400,
+          });
+        }
+      }).as('testConnection');
+      cy.get('#hostname-input').clear().type(json.hostname)
+      cy.get('#username-input').clear().type(json.username)
+      cy.get('#password-input').clear().type(json.password)
+      cy.get('#port-input').clear().type(json.port)
+      cy.get('#dbname-input').clear().type(json.dbName)
+    })
+
+    cy.get('#spanner-dialect-input').click();
+    cy.fixture('constants').then((json) => {
+      cy.get('mat-option').contains(json.googleDialect).click();
+    })
+
+    // Check if the button is enabled
+    cy.get('#test-connect-btn').should('be.enabled')
+
+    // Submit the form
+    cy.get('#test-connect-btn').click();
+    cy.get('#connect-btn', { timeout: 10000 }).should('be.enabled')
+    cy.get('#connect-btn').click();
+
+    // Check that workspace is rendered with correct number of tables in Object Viewer
+    cy.url().should('include', '/workspace');
+    cy.fixture('mysql-config').then((json) => {
+      cy.get('#table-and-index-list').find('tbody tr').should('have.length', json.tableCount + 2);
+    })
+  });
+});

ui/cypress/fixtures/config.json

@@ -0,0 +1,4 @@
+{
+  "projectId": "emulator-test-project",
+  "instanceId": "test-instance"
+}

ui/cypress/fixtures/constants.json

@@ -0,0 +1,3 @@
+{
+    "googleDialect": "Google Standard SQL Dialect"
+}

ui/cypress/fixtures/mysql-config.json

@@ -0,0 +1,8 @@
+{
+    "hostname": "localhost",
+    "username": "root",
+    "password": "root",
+    "port": "3306",
+    "dbName": "test_interleave_table_data",
+    "tableCount": 1
+}

ui/docker/docker-compose.yml

@@ -0,0 +1,11 @@
+version: '3'
+services:
+  mysql:
+    image: mysql:latest
+    container_name: my-mysql-container
+    environment:
+      MYSQL_ROOT_PASSWORD: pass123
+    ports:
+      - "3307:3306"
+    volumes:
+      - ../../test_data/mysql_interleave_dump.test.out:/docker-entrypoint-initdb.d/dump.sql