Add tests

client/cypress/e2e/analysis.cy.ts

@@ -1,3 +1,8 @@
+import {
+  DEFAULT_END_YEAR_GAP,
+  MAX_END_YEAR_RANGE,
+} from '../../src/containers/analysis-visualization/analysis-filters/years-range/constants';
+
 beforeEach(() => {
   cy.interceptAllRequests();
   cy.login();
@@ -205,27 +210,54 @@ describe('Analysis table', () => {
   it('user should be able to select year filters', () => {
     cy.wait('@h2Years').then((int) => {
       const years = int.response.body.data;
+      // Check default filter values
+      cy.wait('@fetchImpactTable').then((req) => {
+        expect(req.request.query.startYear).to.eq(years[0].toString());
+        expect(req.request.query.endYear).to.eq(
+          (years[years.length - 1] + DEFAULT_END_YEAR_GAP).toString(),
+        );
+      });
+
+      // Check 'from' options
       cy.get('[data-testid="years-range-btn"]').click();
       cy.get('[data-testid="select-year-selector-from"]').click();
       cy.get('[data-testid="year-selector-from-option"]').should('have.length', years.length);
 
       const fromYear = years[2];
+      // Check if can select a typed value
       cy.get('[data-testid="select-year-selector-from"] input')
         .focus()
         .clear({ force: true })
         .type(`${fromYear}{enter}`, {
           force: true,
         })
         .should('have.value', fromYear);
+      // Check if the payload request is correct
+      cy.wait('@fetchImpactTable')
+        .its('request.query.startYear')
+        .should('eql', fromYear.toString());
+
+      const toYear = years[0] + MAX_END_YEAR_RANGE;
+      cy.get('[data-testid="select-year-selector-to"]').click();
 
-      const toYear = years[0] + 1000;
+      // Check that the 'to' options years smaller than the selected 'from' year are disabled
+      cy.get('[data-testid="year-selector-to-option"][aria-disabled="true"]').should(
+        'have.length',
+        3,
+      );
+
+      // Check if can select a typed value
       cy.get('[data-testid="select-year-selector-to"] input')
         .focus()
         .clear({ force: true })
-        .type(toYear, {
+        .type(`${toYear}`, {
           force: true,
+          delay: 300,
         })
+        .type('{enter}', { force: true })
         .should('have.value', toYear);
+      // Check if the payload request is correct
+      cy.wait('@fetchImpactTable').its('request.query.endYear').should('eql', toYear.toString());
     });
   });
 });
@@ -253,6 +285,7 @@ describe('Analysis scenarios', () => {
       const url = new URL(interception.request.url);
       const scenarioIds = url.searchParams.get('scenarioIds');
       expect(scenarioIds).to.be.null;
+      expect(scenarioIds).to.be.null;
     });
   });
 

client/src/containers/analysis-visualization/analysis-filters/years-range/component.tsx

@@ -2,6 +2,8 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { isFinite, toNumber, range } from 'lodash-es';
 import toast from 'react-hot-toast';
 
+import { DEFAULT_END_YEAR_GAP, MAX_END_YEAR_RANGE } from './constants';
+
 import { useAppDispatch, useAppSelector } from 'store/hooks';
 import { analysisUI } from 'store/features/analysis/ui';
 import { analysisFilters, setFilters } from 'store/features/analysis/filters';
@@ -10,11 +12,6 @@ import YearsRangeFilter, { useYearsRange } from 'containers/filters/years-range'
 
 import type { YearsRangeParams } from 'containers/filters/years-range';
 
-/** Arbitrary value to define the end year list range */
-const DEFAULT_END_YEAR_GAP = 5;
-/** Arbitrary value to define the max range of end year options to avoid performance issues */
-const MAX_END_YEAR_RANGE = 1000;
-
 const YearsRange: React.FC = () => {
   const dispatch = useAppDispatch();
 

client/src/containers/analysis-visualization/analysis-filters/years-range/constants.ts

@@ -0,0 +1,5 @@
+/** Arbitrary value to define the end year list range */
+export const DEFAULT_END_YEAR_GAP = 5;
+
+/** Arbitrary value to define the max range of end year options to avoid performance issues */
+export const MAX_END_YEAR_RANGE = 1000;