ADM-926:[frontend]feat: add e2e test for charting

frontend/e2e/fixtures/import-file/chart-step-data.ts

@@ -0,0 +1,16 @@
+export const chartStepData = {
+  unSelectBranch: 'main',
+  addNewBranch: ['ADM-669'],
+  errorDateRange: [
+    {
+      startDate: '2024-09-07T00:00:00.000+08:00',
+      endDate: '2024-04-08T23:59:59.999+08:00',
+    },
+  ],
+  noCardDateRange: [
+    {
+      startDate: '2021-04-07T00:00:00.000+08:00',
+      endDate: '2021-04-08T23:59:59.999+08:00',
+    },
+  ],
+};

frontend/e2e/fixtures/input-files/charting-unhappy-path-config-file.template.json

@@ -0,0 +1,95 @@
+{
+  "projectName": "Heartbeat Metrics",
+  "dateRange": {
+    "startDate": "2024-02-12T00:00:00.000+08:00",
+    "endDate": "2024-02-16T23:59:59.999+08:00"
+  },
+  "calendarType": "Calendar with Chinese Holiday",
+  "metrics": [
+    "Velocity",
+    "Cycle time",
+    "Classification",
+    "Rework times",
+    "Lead time for changes",
+    "Deployment frequency",
+    "Change failure rate",
+    "Mean time to recovery"
+  ],
+  "board": {
+    "type": "Classic Jira",
+    "boardId": "2",
+    "email": "[email protected]",
+    "site": "dorametrics",
+    "token": "<E2E_TOKEN_JIRA>"
+  },
+  "pipelineTool": {
+    "type": "BuildKite",
+    "token": "<E2E_TOKEN_BUILD_KITE>"
+  },
+  "sourceControl": {
+    "type": "GitHub",
+    "token": "<E2E_TOKEN_GITHUB>"
+  },
+  "crews": ["heartbeat user"],
+  "assigneeFilter": "lastAssignee",
+  "pipelineCrews": ["heartbeat-user", "guzhongren", "Unknown"],
+  "cycleTime": {
+    "type": "byColumn",
+    "jiraColumns": [
+      {
+        "TODO": "To do"
+      },
+      {
+        "Doing": "In Dev"
+      },
+      {
+        "Blocked": "Block"
+      },
+      {
+        "Review": "Review"
+      },
+      {
+        "READY FOR TESTING": "Waiting for testing"
+      },
+      {
+        "Testing": "Testing"
+      },
+      {
+        "Done": "Done"
+      }
+    ],
+    "treatFlagCardAsBlock": true
+  },
+  "doneStatus": ["DONE"],
+  "classification": [
+    "issuetype",
+    "parent",
+    "customfield_10061",
+    "customfield_10020",
+    "project",
+    "customfield_10021",
+    "fixVersions",
+    "priority",
+    "customfield_10037",
+    "labels",
+    "timetracking",
+    "customfield_10016",
+    "customfield_10038",
+    "assignee",
+    "customfield_10027",
+    "customfield_10060"
+  ],
+  "deployment": [
+    {
+      "id": 0,
+      "organization": "Thoughtworks-Heartbeat",
+      "pipelineName": "Heartbeat",
+      "step": ":rocket: Deploy prod",
+      "branches": ["main"]
+    }
+  ],
+  "reworkTimesSettings": {
+    "reworkState": "In Dev",
+    "excludeStates": []
+  }
+}

frontend/e2e/pages/metrics/config-step.ts

@@ -27,6 +27,10 @@ export class ConfigStep {
   readonly regularCalendar: Locator;
   readonly chineseCalendar: Locator;
   readonly basicInfoContainer: Locator;
+  readonly newTimeRangeButton: Locator;
+  readonly removeTimeRangeButtons: Locator;
+  readonly fromDateErrorMessage: Locator;
+  readonly toDateErrorMessage: Locator;
   readonly fromDateInput: Locator;
   readonly fromDateInputButton: Locator;
   readonly fromDateInputValueSelect: (fromDay: Dayjs) => Locator;
@@ -101,6 +105,10 @@ export class ConfigStep {
       .getByRole('button', { name: 'Choose date' });
     this.toDateInputValueSelect = (toDay: Dayjs) =>
       page.getByRole('dialog', { name: 'To *' }).getByRole('gridcell', { name: `${toDay.date()}` });
+    this.newTimeRangeButton = this.basicInfoContainer.getByRole('button', { name: 'Button for adding date range' });
+    this.fromDateErrorMessage = this.basicInfoContainer.getByText('Start date is invalid');
+    this.toDateErrorMessage = this.basicInfoContainer.getByText('End date is invalid');
+    this.removeTimeRangeButtons = this.basicInfoContainer.getByText('Remove');
 
     this.requireDataButton = page.getByRole('button', { name: 'Required Data' });
     this.velocityCheckbox = page.getByRole('option', { name: 'Velocity' }).getByRole('checkbox');
@@ -244,6 +252,22 @@ export class ConfigStep {
     await expect(this.nextButton).toBeDisabled();
   }
 
+  async validateAddNewTimeRangeButtonNotClickable() {
+    await expect(this.newTimeRangeButton).toBeDisabled();
+  }
+
+  async validateRemoveTimeRangeButtonIsHidden() {
+    await expect(this.removeTimeRangeButtons.last()).toBeHidden();
+  }
+
+  async checkErrorStratTimeMessage() {
+    await expect(this.fromDateErrorMessage).toBeVisible();
+  }
+
+  async checkErrorEndTimeMessage() {
+    await expect(this.toDateErrorMessage).toBeVisible();
+  }
+
   async validateNextButtonClickable() {
     await expect(this.nextButton).toBeEnabled();
   }
@@ -450,6 +474,14 @@ export class ConfigStep {
     await this.boardVerifyButton.click();
   }
 
+  async addNewTimeRange() {
+    await this.newTimeRangeButton.click();
+  }
+
+  async RemoveLastNewPipeline() {
+    await this.removeTimeRangeButtons.last().click();
+  }
+
   async checkAllConfigInvalid() {
     await expect(this.boardTokenErrorMessage).toBeVisible();
     await expect(this.pipelineTokenErrorMessage).toBeVisible();

frontend/e2e/pages/metrics/metrics-step.ts

@@ -557,6 +557,15 @@ export class MetricsStep {
     await this.page.keyboard.press('Escape');
   }
 
+  async addBranch(branches: string[]) {
+    await this.pipelineBranchSelect.click();
+    for (const branchName of branches) {
+      await this.page.getByRole('combobox', { name: 'Branches' }).fill(branchName);
+      await this.page.getByRole('option', { name: branchName }).getByRole('checkbox').check();
+    }
+    await this.page.keyboard.press('Escape');
+  }
+
   async deselectBranch(branch: string) {
     await this.pipelineDefaultBranchSelectContainer.click();
     await this.page.getByRole('option', { name: branch }).getByRole('checkbox').uncheck();

frontend/e2e/specs/side-path/charting-unhappy-path.spec.ts

@@ -0,0 +1,59 @@
+import { importModifiedCorrectConfig as modifiedCorrectProjectFromFile } from '../../fixtures/import-file/unhappy-path-file';
+import { chartStepData } from '../../fixtures/import-file/chart-step-data';
+import { test } from '../../fixtures/test-with-extend-fixtures';
+import { clearTempDir } from '../../utils/clear-temp-dir';
+import { format } from '../../utils/date-time';
+
+test.beforeAll(async () => {
+  await clearTempDir();
+});
+
+test('Charting unhappy path on config and metri page', async ({ homePage, configStep, metricsStep }) => {
+  const rightDateRange = {
+    startDate: format(modifiedCorrectProjectFromFile.dateRange.startDate),
+    endDate: format(modifiedCorrectProjectFromFile.dateRange.endDate),
+  };
+  const errorDateRange = {
+    startDate: format(chartStepData.errorDateRange[0].startDate),
+    endDate: format(chartStepData.errorDateRange[0].endDate),
+  };
+
+  const noCardDateRange = {
+    startDate: format(chartStepData.noCardDateRange[0].startDate),
+    endDate: format(chartStepData.noCardDateRange[0].endDate),
+  };
+  await homePage.goto();
+
+  await homePage.importProjectFromFile('../fixtures/input-files/charting-unhappy-path-config-file.json');
+
+  await configStep.verifyAllConfig();
+  await configStep.addNewTimeRange();
+  await configStep.addNewTimeRange();
+  await configStep.addNewTimeRange();
+  await configStep.addNewTimeRange();
+  await configStep.addNewTimeRange();
+  await configStep.validateAddNewTimeRangeButtonNotClickable();
+  await configStep.validateNextButtonNotClickable();
+  await configStep.RemoveLastNewPipeline();
+  await configStep.RemoveLastNewPipeline();
+  await configStep.RemoveLastNewPipeline();
+  await configStep.RemoveLastNewPipeline();
+  await configStep.RemoveLastNewPipeline();
+  await configStep.validateRemoveTimeRangeButtonIsHidden();
+  await configStep.typeInDateRange(errorDateRange);
+  await configStep.checkErrorStratTimeMessage();
+  await configStep.checkErrorEndTimeMessage();
+  await configStep.validateNextButtonNotClickable();
+  await configStep.typeInDateRange(noCardDateRange);
+  await configStep.goToMetrics();
+  await metricsStep.waitForShown();
+  await configStep.validateNextButtonNotClickable();
+  await metricsStep.goToPreviousStep();
+  await configStep.typeInDateRange(rightDateRange);
+  await configStep.goToMetrics();
+  await metricsStep.waitForShown();
+  await metricsStep.deselectBranch(chartStepData.unSelectBranch);
+  await metricsStep.addBranch(chartStepData.addNewBranch);
+  await metricsStep.checkBranchIsInvalid();
+  await configStep.validateNextButtonNotClickable();
+});