feat: cleanup connector after test

integration-test/destination.spec.ts → integration-test/async-destination.spec.ts

@@ -1,97 +1,11 @@
 import { test, expect } from "@playwright/test";
-import axios from "axios";
 import { expectToDeleteConnector } from "./common/connector";
 import { expectToSelectReactSelectOption } from "./helper";
 
-test.describe.serial("Sync destination", () => {
-  const destinationId = "destination-http";
-  const destinationType = "HTTP";
-
-  // If there has a destination-http connector, we need to delete it then proceed the test.
-  test.beforeAll(async () => {
-    try {
-      const { data } = await axios.get(
-        `${process.env.NEXT_PUBLIC_CONNECTOR_BACKEND_BASE_URL}/${process.env.NEXT_PUBLIC_API_VERSION}/destination-connectors?view=VIEW_FULL`
-      );
-
-      const targetDestination = (data.destination_connectors as any[]).find(
-        (e) => e.id === destinationId
-      );
-
-      if (targetDestination) {
-        await axios.delete(
-          `${process.env.NEXT_PUBLIC_CONNECTOR_BACKEND_BASE_URL}/${process.env.NEXT_PUBLIC_API_VERSION}/destination-connectors/${destinationId}`
-        );
-      }
-      return Promise.resolve(data.destination_connectors);
-    } catch (err) {
-      return Promise.reject(err);
-    }
-  });
-
-  test("should create sync http destination", async ({ page }) => {
-    await page.goto("/destinations/create");
-
-    // Should select destination type - HTTP
-    await expectToSelectReactSelectOption(
-      page.locator("#react-select-definition-input"),
-      page.locator("data-testid=definition-selected-option", {
-        hasText: destinationType,
-      })
-    );
-
-    // Should set up destination
-    const setupButton = page.locator("button", { hasText: "Set up" });
-    await Promise.all([page.waitForNavigation(), setupButton.click()]);
-    expect(page.url()).toEqual(
-      `${process.env.NEXT_PUBLIC_MAIN_URL}/destinations`
-    );
-  });
-
-  test("should have destination list and navigate to destination details page", async ({
-    page,
-  }) => {
-    await page.goto("/destinations");
-
-    // Should have model item in list
-    const destinationItemTitle = page.locator("h3", { hasText: destinationId });
-    await expect(destinationItemTitle).toHaveCount(1);
-
-    // Should navigate to destination details page
-    await Promise.all([
-      page.waitForNavigation(),
-      page.locator("h3", { hasText: destinationId }).click(),
-    ]);
-    expect(page.url()).toEqual(
-      `${process.env.NEXT_PUBLIC_MAIN_URL}/destinations/${destinationId}`
-    );
-  });
-
-  test("should have proper destination details page", async ({ page }) => {
-    await page.goto(`/destinations/${destinationId}`);
-
-    // Should have correct title
-    const destinationTitle = page.locator("h2", { hasText: destinationId });
-    await expect(destinationTitle).toHaveCount(1);
-
-    // Should have correct destination type
-    const destinationTypeOption = page.locator(
-      "data-testid=definition-selected-option"
-    );
-    await expect(destinationTypeOption).toHaveText(destinationType);
-
-    // Should disable edit button
-    const editButton = page.locator("button", {
-      hasText: "Edit",
-    });
-    expect(await editButton.isDisabled()).toBeTruthy();
-  });
-
-  test("should have delete destination modal and correctly delete destination", async ({
-    page,
-  }) => {
-    await expectToDeleteConnector(page, "destination", destinationId);
-  });
+test.use({
+  launchOptions: {
+    slowMo: 50,
+  },
 });
 
 test.describe.serial("Async destination", () => {

integration-test/helper/global-setup.ts

@@ -1,6 +1,10 @@
 import { chromium, FullConfig } from "@playwright/test";
 import { addRegisteredUser } from "../common/mgmt";
 
+// We use this setup to store the cookie in playwright-state. In this way,
+// Playwright can automatically pick up the cookie among every test and it
+// won't be redirected to onboarding page due to lack of login cookie.
+
 async function globalSetup(config: FullConfig) {
   const browser = await chromium.launch();
   const page = await browser.newPage();

integration-test/helper/index.ts

@@ -1,4 +1,5 @@
 import { BrowserContext, expect, Locator, Page } from "@playwright/test";
+import axios from "axios";
 
 export const delay = (ms: number) =>
   new Promise((resolve) => setTimeout(resolve, ms));
@@ -35,3 +36,43 @@ export const expectToSelectReactSelectOption = async (
     await selectElement.click();
   }
 };
+
+export const cleanUpDestination = async (id: string): Promise<void> => {
+  try {
+    const { data } = await axios.get(
+      `${process.env.NEXT_PUBLIC_CONNECTOR_BACKEND_BASE_URL}/${process.env.NEXT_PUBLIC_API_VERSION}/destination-connectors?view=VIEW_FULL`
+    );
+
+    const targetDestination = (data.destination_connectors as any[]).find(
+      (e) => e.id === id
+    );
+
+    if (targetDestination) {
+      await axios.delete(
+        `${process.env.NEXT_PUBLIC_CONNECTOR_BACKEND_BASE_URL}/${process.env.NEXT_PUBLIC_API_VERSION}/destination-connectors/${id}`
+      );
+    }
+  } catch (err) {
+    return Promise.reject(err);
+  }
+};
+
+export const cleanUpSource = async (id: string): Promise<void> => {
+  try {
+    const { data } = await axios.get(
+      `${process.env.NEXT_PUBLIC_CONNECTOR_BACKEND_BASE_URL}/${process.env.NEXT_PUBLIC_API_VERSION}/source-connectors?view=VIEW_FULL`
+    );
+
+    const targetSource = (data.source_connectors as any[]).find(
+      (e) => e.id === id
+    );
+
+    if (targetSource) {
+      await axios.delete(
+        `${process.env.NEXT_PUBLIC_CONNECTOR_BACKEND_BASE_URL}/${process.env.NEXT_PUBLIC_API_VERSION}/source-connectors/${id}`
+      );
+    }
+  } catch (err) {
+    return Promise.reject(err);
+  }
+};

integration-test/pipeline.spec.ts

@@ -6,7 +6,11 @@ import {
   expectToDeletePipeline,
   expectToUpdatePipelineDescription,
 } from "./common/pipeline";
-import { delay, expectToSelectReactSelectOption } from "./helper";
+import {
+  cleanUpDestination,
+  cleanUpSource,
+  expectToSelectReactSelectOption,
+} from "./helper";
 
 test.use({
   launchOptions: {
@@ -30,6 +34,10 @@ test.describe
       await axios.post(
         `${process.env.NEXT_PUBLIC_MODEL_BACKEND_BASE_URL}/${process.env.NEXT_PUBLIC_API_VERSION}/models/${modelId}/instances/${modelInstanceTag}/undeploy`
       );
+
+      // We need to clean up destination and source too
+      await cleanUpDestination("destination-http");
+      await cleanUpSource("source-http");
     } catch (err) {
       return Promise.reject(err);
     }
@@ -199,15 +207,13 @@ test.describe
   const password = "scylla-password";
   const address = "scylla-address";
 
-  test.afterEach(async () => {
-    await delay(500);
-  });
-
   test.afterAll(async () => {
     try {
       await axios.post(
         `${process.env.NEXT_PUBLIC_MODEL_BACKEND_BASE_URL}/${process.env.NEXT_PUBLIC_API_VERSION}/models/${modelId}/instances/${modelInstanceTag}/undeploy`
       );
+      await cleanUpDestination("destination-http");
+      await cleanUpSource("source-http");
     } catch (err) {
       return Promise.reject(err);
     }

integration-test/source.spec.ts

@@ -1,32 +1,24 @@
 import { test, expect } from "@playwright/test";
 import axios from "axios";
-import { expectToSelectReactSelectOption } from "./helper";
+import { cleanUpSource, expectToSelectReactSelectOption } from "./helper";
 
 test.describe.serial("Sync source", () => {
   const sourceId = "source-grpc";
 
   // If there has a source-grpc connector, we need to delete it then proceed the test.
   test.beforeAll(async () => {
     try {
-      const { data } = await axios.get(
-        `${process.env.NEXT_PUBLIC_CONNECTOR_BACKEND_BASE_URL}/${process.env.NEXT_PUBLIC_API_VERSION}/source-connectors?view=VIEW_FULL`
-      );
-
-      const targetDestination = (data.source_connectors as any[]).find(
-        (e) => e.id === sourceId
-      );
-
-      if (targetDestination) {
-        await axios.delete(
-          `${process.env.NEXT_PUBLIC_CONNECTOR_BACKEND_BASE_URL}/${process.env.NEXT_PUBLIC_API_VERSION}/source-connectors/${sourceId}`
-        );
-      }
-      return Promise.resolve(data.destination_connectors);
+      await cleanUpSource(sourceId);
     } catch (err) {
       return Promise.reject(err);
     }
   });
 
+  // We need to clean up source after the test too.
+  test.afterAll(async () => {
+    await cleanUpSource(sourceId);
+  });
+
   test("should create source", async ({ page }) => {
     await page.goto("/sources/create", { waitUntil: "networkidle" });
 

integration-test/sync-destination.spec.ts

@@ -0,0 +1,83 @@
+import { test, expect } from "@playwright/test";
+import { expectToDeleteConnector } from "./common/connector";
+import { cleanUpDestination, expectToSelectReactSelectOption } from "./helper";
+
+test.describe.serial("Sync destination", () => {
+  const destinationId = "destination-http";
+  const destinationType = "HTTP";
+
+  // If there has a destination-http connector, we need to delete it then proceed the test.
+  test.beforeAll(async () => {
+    await cleanUpDestination(destinationId);
+  });
+
+  // Delete used sync destination connector to avoid conflict or casuing other
+  // test to fall.
+  test.afterAll(async () => {
+    await cleanUpDestination(destinationId);
+  });
+
+  test("should create sync http destination", async ({ page }) => {
+    await page.goto("/destinations/create");
+
+    // Should select destination type - HTTP
+    await expectToSelectReactSelectOption(
+      page.locator("#react-select-definition-input"),
+      page.locator("data-testid=definition-selected-option", {
+        hasText: destinationType,
+      })
+    );
+
+    // Should set up destination
+    const setupButton = page.locator("button", { hasText: "Set up" });
+    await Promise.all([page.waitForNavigation(), setupButton.click()]);
+    expect(page.url()).toEqual(
+      `${process.env.NEXT_PUBLIC_MAIN_URL}/destinations`
+    );
+  });
+
+  test("should have destination list and navigate to destination details page", async ({
+    page,
+  }) => {
+    await page.goto("/destinations");
+
+    // Should have model item in list
+    const destinationItemTitle = page.locator("h3", { hasText: destinationId });
+    await expect(destinationItemTitle).toHaveCount(1);
+
+    // Should navigate to destination details page
+    await Promise.all([
+      page.waitForNavigation(),
+      page.locator("h3", { hasText: destinationId }).click(),
+    ]);
+    expect(page.url()).toEqual(
+      `${process.env.NEXT_PUBLIC_MAIN_URL}/destinations/${destinationId}`
+    );
+  });
+
+  test("should have proper destination details page", async ({ page }) => {
+    await page.goto(`/destinations/${destinationId}`);
+
+    // Should have correct title
+    const destinationTitle = page.locator("h2", { hasText: destinationId });
+    await expect(destinationTitle).toHaveCount(1);
+
+    // Should have correct destination type
+    const destinationTypeOption = page.locator(
+      "data-testid=definition-selected-option"
+    );
+    await expect(destinationTypeOption).toHaveText(destinationType);
+
+    // Should disable edit button
+    const editButton = page.locator("button", {
+      hasText: "Edit",
+    });
+    expect(await editButton.isDisabled()).toBeTruthy();
+  });
+
+  test("should have delete destination modal and correctly delete destination", async ({
+    page,
+  }) => {
+    await expectToDeleteConnector(page, "destination", destinationId);
+  });
+});