From 8a8e6670aacd378047cf5d2df554a8acfb92d103 Mon Sep 17 00:00:00 2001 From: Sachin Chaurasiya Date: Fri, 28 Jun 2024 17:05:59 +0530 Subject: [PATCH] test: add e2e playwright test for custom theme config (#16840) * test: add e2e playwright test for custom theme config * chore: Reset custom theme config to default --- .../e2e/Pages/CustomThemeConfig.spec.ts | 89 -------------- .../e2e/Pages/CustomThemeConfig.spec.ts | 110 ++++++++++++++++++ 2 files changed, 110 insertions(+), 89 deletions(-) delete mode 100644 openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/CustomThemeConfig.spec.ts create mode 100644 openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/CustomThemeConfig.spec.ts diff --git a/openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/CustomThemeConfig.spec.ts b/openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/CustomThemeConfig.spec.ts deleted file mode 100644 index 7ea2eb6bd02..00000000000 --- a/openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/CustomThemeConfig.spec.ts +++ /dev/null @@ -1,89 +0,0 @@ -/* - * Copyright 2023 Collate. - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * http://www.apache.org/licenses/LICENSE-2.0 - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { interceptURL, verifyResponseStatusCode } from '../../common/common'; -import { GlobalSettingOptions } from '../../constants/settings.constant'; - -const config = { - logo: 'https://custom-logo.png', - monogram: 'https://custom-monogram.png', - logoError: 'Logo URL is not valid url', - monogramError: 'Monogram URL is not valid url', -}; - -const themeConfig = { - primaryColor: '#6809dc', - infoColor: '#2196f3', - successColor: '#008376', - warningColor: '#ffc34e', - errorColor: '#ff4c3b', -}; - -describe('Custom Theme Config', { tags: 'Settings' }, () => { - beforeEach(() => { - cy.login(); - - cy.settingClick(GlobalSettingOptions.APPEARANCE); - }); - - it('Should update the config', () => { - cy.get('[data-testid="customLogoUrlPath"]') - .scrollIntoView() - .clear() - .type('incorrect url'); - - // validation should work - cy.get('[role="alert"]').should('contain', config.logoError); - - cy.get('[data-testid="customLogoUrlPath"]') - .scrollIntoView() - .clear() - .type(config.logo); - - cy.get('[data-testid="customMonogramUrlPath"]') - .scrollIntoView() - .clear() - .type('incorrect url'); - - // validation should work - cy.get('[role="alert"]').should('contain', config.monogramError); - - cy.get('[data-testid="customMonogramUrlPath"]') - .scrollIntoView() - .clear() - .type(config.monogram); - - // theme config - Object.keys(themeConfig).forEach((colorType) => { - cy.get(`[data-testid="${colorType}-color-input"]`) - .scrollIntoView() - .clear() - .type(themeConfig[colorType]); - }); - - interceptURL('PUT', 'api/v1/system/settings', 'updatedConfig'); - - // In AUT we have bot icon at right bottom corner, which can create issue in clicking save button - cy.get('[data-testid="save-btn"]').scrollIntoView().click({ force: true }); - - verifyResponseStatusCode('@updatedConfig', 200); - }); - - it('Reset to default', () => { - interceptURL('PUT', 'api/v1/system/settings', 'updatedConfig'); - - cy.get('[data-testid="reset-button"]').click(); - - verifyResponseStatusCode('@updatedConfig', 200); - }); -}); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/CustomThemeConfig.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/CustomThemeConfig.spec.ts new file mode 100644 index 00000000000..6a87eb757df --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/CustomThemeConfig.spec.ts @@ -0,0 +1,110 @@ +/* + * Copyright 2024 Collate. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import test, { expect } from '@playwright/test'; +import { GlobalSettingOptions } from '../../constant/settings'; +import { redirectToHomePage } from '../../utils/common'; +import { settingClick } from '../../utils/sidebar'; + +const config = { + logo: 'https://custom-logo.png', + monogram: 'https://custom-monogram.png', + logoError: 'Logo URL is not valid url', + monogramError: 'Monogram URL is not valid url', +}; + +const themeConfig = { + primaryColor: '#6809dc', + infoColor: '#2196f3', + successColor: '#008376', + warningColor: '#ffc34e', + errorColor: '#ff4c3b', +}; + +// use the admin user to login +test.use({ storageState: 'playwright/.auth/admin.json' }); + +test.describe('Custom Theme Config Page', () => { + test.beforeEach('Visit Home Page', async ({ page }) => { + await redirectToHomePage(page); + await settingClick(page, GlobalSettingOptions.APPEARANCE); + }); + + test('Update and reset custom theme config', async ({ page }) => { + // type 'incorrect url' for customLogoUrlPath + await page + .locator('[data-testid="customLogoUrlPath"]') + .fill('incorrect url'); + + // Check for validation error + await page.getByText(config.logoError).isVisible(); + + // Clear and type the correct logo URL + await page.locator('[data-testid="customLogoUrlPath"]').fill(config.logo); + + // type 'incorrect url' for customMonogramUrlPath + await page + .locator('[data-testid="customMonogramUrlPath"]') + .fill('incorrect url'); + + // Check for validation error + await page.getByText(config.monogramError).isVisible(); + + // Clear and type the correct monogram URL + await page + .locator('[data-testid="customMonogramUrlPath"]') + .fill(config.monogram); + + // Theme config + for (const colorType of Object.keys(themeConfig)) { + await page + .locator(`[data-testid="${colorType}-color-input"]`) + .fill(themeConfig[colorType]); + } + + const updatedConfigResponsePromise = page.waitForResponse( + 'api/v1/system/settings' + ); + + // Click the save button + await page.locator('[data-testid="save-btn"]').click(); + + const updatedConfigResponse = await updatedConfigResponsePromise; + + // Verify the response status code + expect(updatedConfigResponse.status()).toBe(200); + + // Verify the updated theme color + await expect(page.getByTestId('save-btn')).toHaveCSS( + 'background-color', + 'rgb(136, 46, 232)' + ); + + const defaultConfigResponsePromise = page.waitForResponse( + 'api/v1/system/settings' + ); + + // Click the reset button + await page.locator('[data-testid="reset-button"]').click(); + + const defaultConfigResponse = await defaultConfigResponsePromise; + + // Verify the response status code + expect(defaultConfigResponse.status()).toBe(200); + + // Verify the default theme color + await expect(page.getByTestId('reset-button')).toHaveCSS( + 'background-color', + 'rgb(46, 135, 230)' + ); + }); +});