Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-30 20:33:54 -05:00
Code Issues Activity

test: add ui tests for sie branding config (#4324)

Browse source
This commit is contained in:
Xiao Yijun 2023-08-16 17:20:51 +08:00 committed by GitHub
parent b10ec5d1e9
commit d958494848
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 138 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

138
packages/integration-tests/src/tests/ui/sign-in-experience.test.ts Normal file
View file

@ -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',
});
});
});
});