From d958494848b242cdc089adb39d5fd2bc1e754c58 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Wed, 16 Aug 2023 17:20:51 +0800
Subject: [PATCH] test: add ui tests for sie branding config (#4324)

---
 .../src/tests/ui/sign-in-experience.test.ts   | 138 ++++++++++++++++++
 1 file changed, 138 insertions(+)
 create mode 100644 packages/integration-tests/src/tests/ui/sign-in-experience.test.ts

diff --git a/packages/integration-tests/src/tests/ui/sign-in-experience.test.ts b/packages/integration-tests/src/tests/ui/sign-in-experience.test.ts
new file mode 100644
index 000000000..746f5b588
--- /dev/null
+++ b/packages/integration-tests/src/tests/ui/sign-in-experience.test.ts
@@ -0,0 +1,138 @@
+import { logtoConsoleUrl as logtoConsoleUrlString } from '#src/constants.js';
+import { goToAdminConsole, trySaveChanges, waitForToaster } from '#src/ui-helpers/index.js';
+import { appendPathname, expectNavigation } from '#src/utils.js';
+
+await page.setViewport({ width: 1920, height: 1080 });
+
+const defaultPrimaryColor = '#6139F6';
+const testPrimaryColor = '#5B4D8E';
+
+describe('sign-in experience', () => {
+  const logtoConsoleUrl = new URL(logtoConsoleUrlString);
+
+  beforeAll(async () => {
+    await goToAdminConsole();
+  });
+
+  it('navigate to sign-in experience page', async () => {
+    await expectNavigation(
+      page.goto(appendPathname('/console/sign-in-experience', logtoConsoleUrl).href)
+    );
+
+    await expect(page).toMatchElement(
+      'div[class$=main] div[class$=container] div[class$=cardTitle] div[class$=titleEllipsis]',
+      {
+        text: 'Sign-in experience',
+      }
+    );
+
+    // Start & finish guide
+    await expect(page).toClick('div[class$=container] div[class$=content] button span', {
+      text: 'Get Started',
+    });
+
+    await expect(page).toClick(
+      'div[class$=ReactModalPortal] div[class$=footerContent] > button span',
+      {
+        text: 'Done',
+      }
+    );
+
+    // Land on branding tab by default
+    expect(page.url()).toBe(new URL(`console/sign-in-experience/branding`, logtoConsoleUrl).href);
+
+    // Wait for the branding tab to load
+    await expect(page).toMatchElement('div[class$=tabContent] div[class$=card] div[class$=title]', {
+      text: 'BRANDING AREA',
+    });
+
+    await expect(page).toMatchElement('div[class$=tabContent] div[class$=card] div[class$=title]', {
+      text: 'Custom CSS',
+    });
+  });
+
+  describe('update branding config', () => {
+    it('update branding config', async () => {
+      // Enabled dark mode
+      await expect(page).toClick(
+        'form div[class$=field] label[class$=switch]:has(input[name="color.isDarkModeEnabled"])'
+      );
+
+      // Update brand color
+      const brandColorField = await expect(page).toMatchElement(
+        'div[class$=field]:has(div[class$=headline] div[class$=title])',
+        {
+          text: 'Brand color',
+        }
+      );
+
+      await expect(brandColorField).toClick('div[role=button]');
+
+      await expect(page).toFill('input[id^=rc-editable-input]', testPrimaryColor);
+
+      // Close the color input
+      await page.keyboard.press('Escape');
+
+      // Recalculate dark brand color
+      await expect(page).toClick('div[class$=darkModeTip] button span', { text: 'Recalculate' });
+
+      // Wait for the recalculate to finish
+      await page.waitForTimeout(500);
+
+      // Fill in the custom CSS
+      await expect(page).toFill(
+        'div[class$=editor] textarea',
+        'body { background-color: #5B4D8E; }'
+      );
+
+      await trySaveChanges(page);
+
+      await waitForToaster(page, {
+        text: 'Saved',
+      });
+    });
+
+    it('reset branding config', async () => {
+      // Reset branding config
+      const brandColorField = await expect(page).toMatchElement(
+        'div[class$=field]:has(div[class$=headline] div[class$=title])',
+        {
+          text: 'Brand color',
+        }
+      );
+
+      await expect(brandColorField).toClick('div[role=button]');
+
+      await expect(page).toFill('input[id^=rc-editable-input]', defaultPrimaryColor);
+
+      // Close the color input
+      await page.keyboard.press('Escape');
+
+      // Recalculate dark brand color
+      await expect(page).toClick('div[class$=darkModeTip] button span', { text: 'Recalculate' });
+
+      // Wait for the recalculate to finish
+      await page.waitForTimeout(500);
+
+      // Fill in the custom CSS
+      await expect(page).toFill('div[class$=editor] textarea', '');
+
+      await trySaveChanges(page);
+
+      await waitForToaster(page, {
+        text: 'Saved',
+      });
+
+      // Disable dark mode
+      await expect(page).toClick(
+        'form div[class$=field] label[class$=switch]:has(input[name="color.isDarkModeEnabled"])'
+      );
+
+      await trySaveChanges(page);
+
+      await waitForToaster(page, {
+        text: 'Saved',
+      });
+    });
+  });
+});