diff --git a/redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/DateTimeFormatter.tsx b/redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/DateTimeFormatter.tsx index 9e2806f764..32c99eadaa 100644 --- a/redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/DateTimeFormatter.tsx +++ b/redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/DateTimeFormatter.tsx @@ -170,7 +170,8 @@ const DateTimeFormatter = () => { ({ ...option, 'data-test-subj': `date-option-${option.value}` }))} valueOfSelected={formik.values.commonFormat} onChange={(option) => onCommonFormatChange(option)} disabled={formik.values.selectedRadioOption !== DatetimeRadioOption.Common} @@ -247,7 +248,8 @@ const DateTimeFormatter = () => {
({ ...option, 'data-test-subj': `zone-option-${option.value}` }))} valueOfSelected={formik.values.timezone} onChange={(option) => onTimezoneChange(option)} data-test-subj="select-timezone" @@ -257,7 +259,7 @@ const DateTimeFormatter = () => {
Preview: - {preview} + {preview}
diff --git a/tests/e2e/pageObjects/memory-efficiency-page.ts b/tests/e2e/pageObjects/memory-efficiency-page.ts index 08233ecbe2..9238696c65 100644 --- a/tests/e2e/pageObjects/memory-efficiency-page.ts +++ b/tests/e2e/pageObjects/memory-efficiency-page.ts @@ -13,6 +13,7 @@ export class MemoryEfficiencyPage extends InstancePage { cssReadMoreLink = '[data-testid=read-more-link]'; cssKeyName = '[data-testid=recommendation-key-name]'; // BUTTONS + databaseAnalysisTab = Selector('[data-testid=analytics-tab-DatabaseAnalysis]'); newReportBtn = Selector('[data-testid=start-database-analysis-btn]'); expandArrowBtn = Selector('[data-testid^=expand-arrow-]'); sortByKeyPattern = Selector('[data-testid=tableHeaderSortButton]'); diff --git a/tests/e2e/pageObjects/settings-page.ts b/tests/e2e/pageObjects/settings-page.ts index 057facbcef..298a45c8b4 100644 --- a/tests/e2e/pageObjects/settings-page.ts +++ b/tests/e2e/pageObjects/settings-page.ts @@ -25,6 +25,19 @@ export class SettingsPage extends BasePage { commandsInPipelineInput = Selector('[data-testid=pipeline-bunch-input]'); pipelineLink = Selector('[data-testid=pipelining-link]'); + //Date and Time Format + selectFormatDropdown = Selector('[data-test-subj=select-datetime]'); + selectTimezoneDropdown = Selector('[data-test-subj=select-timezone]'); + dataPreview = Selector('[data-testid=data-preview]'); + customRadioButton = Selector('[id=custom]').sibling(); + customTextField = Selector('[data-testid=custom-datetime-input]'); + saveCustomFormatButton = Selector('[data-testid=datetime-custom-btn]'); + + getDateTimeOption = (option: string): Selector => + Selector(`[data-test-subj^=date-option-${option}]`); + getZoneOption = (option: string): Selector => + Selector(`[data-test-subj=zone-option-${option}]`); + /** * Change Keys to Scan value * @param value Value for scan @@ -107,4 +120,26 @@ export class SettingsPage extends BasePage { await t.click(this.switchAnalyticsOption); } } + + /** + * Select data time option in Settings + */ + async selectDataFormatDropdown(value: string): Promise{ + await t.click(this.selectFormatDropdown); + await t.click(this.getDateTimeOption(value)); + } + + /** + * Select timezone option in Settings + */ + async selectTimeZoneDropdown(value: string): Promise{ + await t.click(this.selectTimezoneDropdown); + await t.click(this.getZoneOption(value)); + } + /** + * Enter text in custom field Select timezone option in Settings + */ + async enterTextInCustom(command: string): Promise{ + await t.typeText(this.customTextField, command, { replace: true }); + } } diff --git a/tests/e2e/tests/web/regression/settings/settings.e2e.ts b/tests/e2e/tests/web/regression/settings/settings.e2e.ts new file mode 100644 index 0000000000..d53cf35038 --- /dev/null +++ b/tests/e2e/tests/web/regression/settings/settings.e2e.ts @@ -0,0 +1,83 @@ +import { rte } from '../../../../helpers/constants'; +import { BrowserPage, MemoryEfficiencyPage, SettingsPage, WorkbenchPage } from '../../../../pageObjects'; +import { + commonUrl, ossClusterConfig +} from '../../../../helpers/conf'; +import { DatabaseAPIRequests } from '../../../../helpers/api/api-database'; +import { deleteAllKeysFromDB } from '../../../../helpers/keys'; +import { DatabaseHelper } from '../../../../helpers'; + +const browserPage = new BrowserPage(); +const databaseAPIRequests = new DatabaseAPIRequests(); +const workbenchPage = new WorkbenchPage(); +const settingsPage = new SettingsPage(); +const memoryEfficiencyPage = new MemoryEfficiencyPage(); +const databaseHelper = new DatabaseHelper(); + +fixture `DataTime format setting` + .meta({ + type: 'regression', + rte: rte.standalone + }) + .page(commonUrl) + .beforeEach(async() => { + await databaseHelper.acceptLicenseTermsAndAddOSSClusterDatabase(ossClusterConfig); + }) + .afterEach(async() => { + await deleteAllKeysFromDB(ossClusterConfig.ossClusterPort, ossClusterConfig.ossClusterPort); + await databaseAPIRequests.deleteAllDatabasesApi(); + }); +test('Verify that user can select date time format', async t => { + const defaultDateRegExp = /^([01]\d|2[0-3]):[0-5]\d:[0-5]\d\.\d{3} \d{1,2} (Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec) \d{4}$/; + const selectedDateReqExp = /^(0[1-9]|[12]\d|3[01])\.(0[1-9]|1[0-2])\.\d{4} ([01]\d|2[0-3]):[0-5]\d:[0-5]\d$/; + const keyName = 'DateTimeTestKey'; + const hashField = '1724674140'; + + const selectorForOption = 'dd\\.MM\\.yyyy'; + const selectedOption = 'dd.MM.yyyy HH:mm:ss'; + const zoneSelectOption = 'UTC'; + + await browserPage.addHashKey(keyName, '100000', hashField, hashField); + await browserPage.openKeyDetails(keyName); + await browserPage.selectFormatter('DateTime'); + await t.expect(defaultDateRegExp.test(await browserPage.getHashKeyValue())).ok('date is not in default format HH:mm:ss.SSS d MMM yyyy'); + + await t.click(workbenchPage.NavigationPanel.settingsButton); + await t.click(settingsPage.accordionAppearance); + await settingsPage.selectDataFormatDropdown(selectorForOption); + await t.expect(settingsPage.selectFormatDropdown.textContent).eql(selectedOption, 'option is not selected'); + await t.expect(selectedDateReqExp.test(await settingsPage.dataPreview.textContent)).ok(`preview is not valid for ${selectedOption}`); + + await t.click(workbenchPage.NavigationPanel.myRedisDBButton); + await t.click(workbenchPage.NavigationPanel.browserButton); + await browserPage.openKeyDetails(keyName); + await t.expect(selectedDateReqExp.test(await browserPage.getHashKeyValue())).ok(`date is not in selected format ${selectedOption}`); + + await t.click(workbenchPage.NavigationPanel.settingsButton); + await t.click(settingsPage.accordionAppearance); + await settingsPage.selectTimeZoneDropdown(zoneSelectOption); + await t.expect(settingsPage.selectTimezoneDropdown.textContent).eql(zoneSelectOption, 'option is not selected'); + + await t.click(browserPage.NavigationPanel.workbenchButton); + await workbenchPage.sendCommandInWorkbench('info'); + const dateTime = await workbenchPage.queryCardContainer.nth(0).find(workbenchPage.cssCommandExecutionDateTime).textContent; + await t.expect(selectedDateReqExp.test(dateTime)).ok('date is not in default format HH:mm:ss.SSS d MMM yyyy'); + +}); + +test('Verify that user can set custom date time format', async t => { + const enteredFormat = 'MMM dd yyyy/ HH.mm.ss'; + const enteredDateReqExp = /^(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec) ([0-2]\d|3[01]) \d{4}\/ ([01]\d|2[0-3])\.[0-5]\d\.[0-5]\d$/; + + await t.click(workbenchPage.NavigationPanel.settingsButton); + await t.click(settingsPage.accordionAppearance); + await t.click(settingsPage.customRadioButton); + await settingsPage.enterTextInCustom(enteredFormat); + await t.expect(enteredDateReqExp.test(await settingsPage.dataPreview.textContent)).ok(`preview is not valid for ${enteredFormat}`); + await t.click(settingsPage.saveCustomFormatButton); + + await t.click(settingsPage.NavigationPanel.analysisPageButton); + await t.click(memoryEfficiencyPage.databaseAnalysisTab); + await t.click(memoryEfficiencyPage.newReportBtn); + await t.expect(enteredDateReqExp.test(await memoryEfficiencyPage.selectedReport.textContent)).ok(`custom format is not working ${enteredFormat}`); +});