Refactor the test cases to avoid hardcoded number

[FisherSkyi]

What feature(s) would you like to see in RepoSense

Test cases use percentile instead of number of pixel to represent the point to click.

Is the feature request related to a problem?

Right now in frontend cypress tests, many test cases related to the chartView has hard-coded coordinates. As an example, in testcase subzoom panel range should work correctly when timeline is optimised in file chartView_optimiseTimeline.cy.js

cy.get('body').type(zoomKey, { release: false })
  .get('#summary-charts .summary-chart__ramp .ramp')
  .first()
  .click(110, 20) // <- 110
  .click(120, 20); // <- 120

However, browser window size and screen resolution may influence the actual coordinates and may fail these test cases. Since the test suite doesn't specify cy.viewpoint, it will default to an application viewport of 1000 × 660. The correctness depends on several hidden assumptions:

• Cypress continues using the same viewport.
• The ramp continues having approximately the same width.

If possible, describe the solution

Change to use the percentage, which is point's x coordinates divide by the whole length of the chart. The percentage would be better derived from commit timestamp and the displayed time period.

If applicable, describe alternatives you've considered

Additional context

[superb-striker]

Hi! I’d like to work on this issue.
Planning to refactor the Cypress tests by replacing hardcoded click coordinates with percentage-based positioning to improve reliability across screen sizes.
Please let me know if that approach works!

[FisherSkyi]

@superb-striker thanks for volunteering to work on this. But rather than replacing the hard-coded coordinates with generic percentage-based positions, I think it would be better to calculate the click position from the date being tested.

The core idea here is to test the behavior: "user can select a date range by clicking specific positions within a chart" and the location is part of the feature being tested. The best practice maybe cauculate the coordinate from date.

Even we change .click(110, 20) to .click(width * 0.11, 20), it doesn't really convey "Select a date range surrounding 2019-08-18" but "Click at 110 pixels / 11% of the width of ramp". (p.s. 2019-08-18 is the special date chosen in the testcase)

We may use a helper to cauculate the position

  const dateToX = (date, timelineStart, timelineEnd, rampWidth) => {
    const dateMs = new Date(date).getTime();
    const startMs = new Date(timelineStart).getTime();
    const endMs = new Date(timelineEnd).getTime();

    const datePosition = (dateMs - startMs) / (endMs - startMs);

    return datePosition * rampWidth;
  };

Then we test with

    .then(($ramp) => {
      const { width, height } = $ramp[0].getBoundingClientRect();

      const startX = dateToX(
        '2019-08-17T00:00:00',
        '2018-05-03T00:00:00',
        '2023-03-03T00:00:00',
        width,
      );

      const endX = dateToX(
        '2019-08-19T00:00:00',
        '2018-05-03T00:00:00',
        '2023-03-03T00:00:00',
        width,
      );

      cy.wrap($ramp).click(startX, height / 2, clickOptions);
      cy.wrap($ramp).click(endX, height / 2, clickOptions);
    });