refactor(test): avoid sending connection tests to 3rd-party connector services (#4700)

packages/integration-tests/src/tests/console/connectors/helpers.ts

@@ -95,3 +95,25 @@ export const expectToConfirmConnectorDeletion = async (page: Page, redirectUri:
 
   await waitForToast(page, { text: 'The connector has been successfully deleted' });
 };
+
+export const expectToTestConnectorConnection = async (
+  page: Page,
+  { skipConnectionTest, isEmailConnector }: PasswordlessConnectorCase
+) => {
+  if (skipConnectionTest) {
+    return;
+  }
+
+  await expect(page).toFill(
+    'input[name=sendTo]',
+    isEmailConnector ? 'fake@email.com' : '+1 555-123-4567'
+  );
+
+  await expect(page).toClick('div[class$=fields] div[class$=send] button span', {
+    text: 'Send',
+  });
+
+  await expect(page).toMatchElement('div[class*=tipBubble]', {
+    text: 'Test message sent',
+  });
+};

packages/integration-tests/src/tests/console/connectors/passwordless-connector-test-cases.ts

@@ -2,15 +2,18 @@ export type PasswordlessConnectorCase = {
   factoryId: string;
   isEmailConnector: boolean;
   name: string;
-  initialFormData: Record<string, string>;
-  updateFormData: Record<string, string>;
-  errorFormData: Record<string, string>;
+  skipConnectionTest?: boolean; // Only for mock connectors
+  initialFormData?: Record<string, string>;
+  updateFormData?: Record<string, string>;
+  errorFormData?: Record<string, string>;
 };
 
 const awsSesMail: PasswordlessConnectorCase = {
   factoryId: 'aws-ses-mail',
   isEmailConnector: true,
   name: 'AWS Direct Mail',
+  // Skip connection test for real-world connectors since it will send request to the 3rd party service
+  skipConnectionTest: true,
   initialFormData: {
     'formConfig.accessKeyId': 'access-key-id',
     'formConfig.accessKeySecret': 'access-key-config',
@@ -40,30 +43,18 @@ const awsSesMail: PasswordlessConnectorCase = {
   },
 };
 
-const sendGrid: PasswordlessConnectorCase = {
-  factoryId: 'sendgrid-email-service',
+const mockMailConnector: PasswordlessConnectorCase = {
+  factoryId: 'mock-email-service',
   isEmailConnector: true,
-  name: 'SendGrid Email',
-  initialFormData: {
-    'formConfig.apiKey': 'api-key',
-    'formConfig.fromEmail': 'foo@example.com',
-    'formConfig.fromName': 'Logto',
-  },
-  updateFormData: {
-    'formConfig.apiKey': 'new-api-key',
-    'formConfig.fromEmail': 'new-foo@example.com',
-    'formConfig.fromName': 'new-Logto',
-  },
-  errorFormData: {
-    'formConfig.apiKey': '',
-    'formConfig.fromEmail': '',
-  },
+  name: 'Mock Mail Service',
 };
 
 const twilio: PasswordlessConnectorCase = {
   factoryId: 'twilio-short-message-service',
   isEmailConnector: false,
   name: 'Twilio SMS Service',
+  // Skip connection test for real-world connectors since it will send request to the 3rd party service
+  skipConnectionTest: true,
   initialFormData: {
     'formConfig.accountSID': 'account-sid',
     'formConfig.authToken': 'auth-token',
@@ -81,33 +72,17 @@ const twilio: PasswordlessConnectorCase = {
   },
 };
 
-// Smsaero-short-message-service
-const smsaeroShortMessage: PasswordlessConnectorCase = {
-  factoryId: 'smsaero-short-message-service',
+const mockSmsConnector: PasswordlessConnectorCase = {
+  factoryId: 'mock-short-message-service',
   isEmailConnector: false,
-  name: 'SMS Aero service',
-  initialFormData: {
-    'formConfig.email': 'fake@email.com',
-    'formConfig.apiKey': 'api-key',
-    'formConfig.senderName': 'sender-name',
-  },
-  updateFormData: {
-    'formConfig.email': 'new-fake@email.com',
-    'formConfig.apiKey': 'new-api-key',
-    'formConfig.senderName': 'new-sender-name',
-  },
-  errorFormData: {
-    'formConfig.email': '',
-    'formConfig.apiKey': '',
-    'formConfig.senderName': '',
-  },
+  name: 'Mock SMS Service',
 };
 
 export const passwordlessConnectorTestCases = [
   // Email
   awsSesMail,
-  sendGrid,
+  mockMailConnector,
   // SMS
   twilio,
-  smsaeroShortMessage,
+  mockSmsConnector,
 ];

packages/integration-tests/src/tests/console/connectors/passwordless-connectors.test.ts

@@ -15,6 +15,7 @@ import {
   expectToSelectConnector,
   findNextCompatibleConnector,
   waitForConnectorCreationGuide,
+  expectToTestConnectorConnection,
 } from './helpers.js';
 import {
   type PasswordlessConnectorCase,
@@ -67,25 +68,27 @@ describe('passwordless connectors', () => {
 
       await waitForConnectorCreationGuide(page, name);
 
-      await expect(page).toClick(
-        '.ReactModalPortal form div[class$=footer] button[type=submit] span',
-        {
-          text: 'Save and Done',
-        }
-      );
+      if (initialFormData) {
+        await expect(page).toClick(
+          '.ReactModalPortal form div[class$=footer] button[type=submit] span',
+          {
+            text: 'Save and Done',
+          }
+        );
 
-      // Display error input
-      await page.waitForSelector('form div[class$=field] div[class$=error]');
+        // Display error input
+        await page.waitForSelector('form div[class$=field] div[class$=error]');
 
-      await expect(page).toFillForm('.ReactModalPortal form', initialFormData);
+        await expect(page).toFillForm('.ReactModalPortal form', initialFormData);
 
-      // Try click test button
-      await expect(page).toClick('.ReactModalPortal div[class$=send] button span', {
-        text: 'Send',
-      });
+        // Try click test button
+        await expect(page).toClick('.ReactModalPortal div[class$=send] button span', {
+          text: 'Send',
+        });
 
-      // Display test input error
-      await page.waitForSelector('.ReactModalPortal div[class$=error]:has(input[name=sendTo])');
+        // Display test input error
+        await page.waitForSelector('.ReactModalPortal div[class$=error]:has(input[name=sendTo])');
+      }
 
       await expect(page).toClick(
         '.ReactModalPortal form div[class$=footer] button[type=submit] span',
@@ -100,33 +103,28 @@ describe('passwordless connectors', () => {
         text: name,
       });
 
-      // Try send test
-      await expect(page).toFill(
-        'input[name=sendTo]',
-        isEmailConnector ? 'fake@email.com' : '+1 555-123-4567'
-      );
+      await expectToTestConnectorConnection(page, connector);
 
-      await expect(page).toClick('div[class$=fields] div[class$=send] button span', {
-        text: 'Send',
-      });
+      // Test form on details page
+      if (errorFormData) {
+        // Fill incorrect form
+        await expect(page).toFillForm('form', errorFormData);
 
-      await waitForToast(page, { text: /error/i, type: 'error' });
+        await expectToSaveChanges(page);
 
-      // Fill incorrect form
-      await expect(page).toFillForm('form', errorFormData);
+        await page.waitForSelector('form div[class$=field] div[class$=error]');
+      }
 
-      await expectToSaveChanges(page);
+      if (updateFormData) {
+        // Update form
+        await expect(page).toFillForm('form', updateFormData);
 
-      await page.waitForSelector('form div[class$=field] div[class$=error]');
+        await expectUnsavedChangesAlert(page);
 
-      // Update form
-      await expect(page).toFillForm('form', updateFormData);
+        await expectToSaveChanges(page);
 
-      await expectUnsavedChangesAlert(page);
-
-      await expectToSaveChanges(page);
-
-      await waitForToast(page, { text: 'Saved' });
+        await waitForToast(page, { text: 'Saved' });
+      }
 
       // Change to next connector
       const nextConnector = findNextCompatibleConnector(connector);
@@ -144,7 +142,9 @@ describe('passwordless connectors', () => {
 
         await waitForConnectorCreationGuide(page, nextConnector.name);
 
-        await expect(page).toFillForm('.ReactModalPortal form', nextConnector.initialFormData);
+        if (nextConnector.initialFormData) {
+          await expect(page).toFillForm('.ReactModalPortal form', nextConnector.initialFormData);
+        }
 
         await expect(page).toClick(
           '.ReactModalPortal form div[class$=footer] button[type=submit] span',