Merge pull request #3753 from RedisInsight/e2e/feature/RI-5934-format-timestamps-across-entire-application

E2e/feature/ri 5934 format timestamps across entire application

Author: mariasergeenko

redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/DateTimeFormatter.tsx

@@ -170,7 +170,8 @@ const DateTimeFormatter = () => {
           </div>
           <EuiSuperSelect
             className={styles.datetimeInput}
-            options={dateTimeOptions}
+            options={dateTimeOptions
+              .map((option) => ({ ...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 = () => {
             <div>
               <EuiSuperSelect
                 className={styles.datetimeInput}
-                options={timezoneOptions}
+                options={timezoneOptions
+                  .map((option) => ({ ...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 = () => {
           <EuiFlexItem grow={2}>
             <div className={styles.previewContainer}>
               <EuiText className={styles.dateTimeSubtitle} color="subdued">Preview:</EuiText>
-              <EuiText className={styles.preview}>{preview}</EuiText>
+              <EuiText className={styles.preview} data-testid="data-preview">{preview}</EuiText>
             </div>
           </EuiFlexItem>
         </EuiFlexGroup>

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]');

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<void>{
+        await t.click(this.selectFormatDropdown);
+        await t.click(this.getDateTimeOption(value));
+    }
+
+    /**
+     * Select timezone option in Settings
+     */
+    async selectTimeZoneDropdown(value: string): Promise<void>{
+        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<void>{
+        await t.typeText(this.customTextField, command, { replace: true });
+    }
 }

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}`);
+});