Choose a date range from the date picker

Question

Choose a date range from the date picker

I am currently attempting to combine two dates using a rangepicker.

Below is the command used to select the date:

Cypress.Commands.add('setDatePickerDate', (selector, date) => {
  const monthsShort = [
    'janv.',
    'févr.',
    'mars',
    'avril',
    'mai',
    'juin',
    'juil.',
    'août',
    'sept.',
    'oct.',
    'nov.',
    'déc.',
  ];
  const month = monthsShort[date.getMonth()];
  const day = date.getDate();
  const year = date.getFullYear();
  cy.getBySel(selector).should('not.be.disabled');
  cy.getBySel(selector).click();
  // selecting year
  cy.get('.mantine-CalendarHeader-calendarHeaderLevel').click();
  cy.get('.mantine-DatePicker-calendarHeaderLevel').click();
  recurse(
    () => cy.get('.mantine-YearsList-yearsListCell').invoke('text'),
    (n) => {
      if (!n.includes(year)) {
        cy.get('.mantine-DatePicker-calendarHeaderControlIcon').first().click();
        return false;
      }
      cy.get('.mantine-YearsList-yearsListCell').contains(year).click();
      return true;
    },
    {
      limit: 12,
    }
  );
  // selecting month
  cy.get('.mantine-MonthsList-monthsListCell').contains(month).click();
  // selecting day
  cy.get('.mantine-DatePicker-day')
    .contains(new RegExp(`^(${day})`))
    .click();
});

This is the code snippet from my test:

    cy.setDatePickerDate(
      'filter-date',
      new Date('2021-07-01'),
      new Date('2021-07-05')
    );

The issue I am facing is that only the date 2021-07-01 is being populated in the date field and not the other one.

Could you please provide any guidance on what mistake I might be making?

//updated question as the cy.getBySel(selector).click(); is an optional part

Cypress.Commands.add('setDatePickerDate', (date, clickOnDatePicker) => {
    const monthsShort = [
      'janv.',
      'févr.',
      'mars',
      'avril',
      'mai',
      'juin',
      'juil.',
      'août',
      'sept.',
      'oct.',
      'nov.',
      'déc.',
    ];
  if(clickOnDatePicker) {
    cy.clickOnDatePicker(clickOnDatePicker);
  }
  cy.wrap(date).each((date) => {
  const month = monthsShort[date.getMonth()];

//rest of the code remains the same

Command for clickOnDatePicker:

Cypress.Commands.add('clickOnDatePicker', (clickOnDatePicker) => {
  cy.getBySel(clickOnDatePicker).click()
});

My d.ts file:

setDatePickerDate(object: { clickOnDatePicker?: string }, date: Date): void;

Test code snippet:

cy.setDatePickerDate({ clickOnDatePicker: 'filter-date' }, [
      new Date('2021-07-18'),
    ]);

The test is failing with the error message:

Syntax error, unrecognized expression: [data-testid=Sun Jul 18 2021 04:00:00 GMT+0400 ()]

I wish to execute the below code if a selector needs to be clicked:

cy.setDatePickerDate({ clickOnDatePicker: 'filter-date' }, [
      new Date('2021-07-18')]);

otherwise, if there is no selector to click:

cy.setDatePicker([{ new Date('2021-07-18')], new Date[('2021-07-18')]);

javascript typescript cypress cypress-custom-commands

Answer 1

Answer №1

Perhaps creating a custom command as an external layer can help manage the complexity of dealing with different parameters?

By using a spread operator like ...args, you can avoid passing parameters with brackets [] or braces {}. The spread operator converts the parameters into an array for easier handling.

I have included cy.log() to demonstrate that the arguments are being correctly parsed.

Cypress.Commands.add('pickDate', (date) => {
  // This section only includes the logic for selecting a single date, which can be independently tested
})

Cypress.Commands.add('setDatePicker', (...args) => {

  if (typeof args[0] === 'string') {
    const selector = args[0]
    cy.log('Selector', selector)
    cy.getBySel(selector).should('not.be.disabled');
    cy.getBySel(selector).click();
  }

  const dates = args.filter(arg => typeof arg !== 'string')
  dates.forEach(date => {
    cy.log(date.toUTCString())
    cy.pickDate(date)
  })
})

it('handles a selector and two dates', () => {
  cy.setDatePicker('filter-date', new Date('2021-07-01'), new Date('2021-07-05'))
})
it('handles two dates', () => {
  cy.setDatePicker(new Date('2021-07-01'), new Date('2021-07-05'))
})
it('handles a single date', () => {
  cy.setDatePicker(new Date('2021-07-05'))
})
it('handles three dates', () => {
  cy.setDatePicker(new Date('2021-07-01'), new Date('2021-07-05'), new Date('2021-07-07'))
})

This log confirms that each type of parameter list variation is being correctly managed

https://i.sstatic.net/SUKgz.png

Answer 2

Perhaps creating a custom command as an external layer can help manage the complexity of dealing with different parameters?

By using a spread operator like ...args, you can avoid passing parameters with brackets [] or braces {}. The spread operator converts the parameters into an array for easier handling.

I have included cy.log() to demonstrate that the arguments are being correctly parsed.

Cypress.Commands.add('pickDate', (date) => {
  // This section only includes the logic for selecting a single date, which can be independently tested
})

Cypress.Commands.add('setDatePicker', (...args) => {

  if (typeof args[0] === 'string') {
    const selector = args[0]
    cy.log('Selector', selector)
    cy.getBySel(selector).should('not.be.disabled');
    cy.getBySel(selector).click();
  }

  const dates = args.filter(arg => typeof arg !== 'string')
  dates.forEach(date => {
    cy.log(date.toUTCString())
    cy.pickDate(date)
  })
})

it('handles a selector and two dates', () => {
  cy.setDatePicker('filter-date', new Date('2021-07-01'), new Date('2021-07-05'))
})
it('handles two dates', () => {
  cy.setDatePicker(new Date('2021-07-01'), new Date('2021-07-05'))
})
it('handles a single date', () => {
  cy.setDatePicker(new Date('2021-07-05'))
})
it('handles three dates', () => {
  cy.setDatePicker(new Date('2021-07-01'), new Date('2021-07-05'), new Date('2021-07-07'))
})

This log confirms that each type of parameter list variation is being correctly managed

https://i.sstatic.net/SUKgz.png

Answer 3

Answer №2

Your specialized command does not currently support passing in multiple dates. One workaround is to execute the command twice:

cy.setDatePickerDate('filter-date', new Date('2021-07-01');
cy.setDatePickerDate('filter-date', new Date('2021-07-05');

Alternatively, you have the option to modify your custom command to accept an array of dates.

Cypress.Commands.add('setDatePickerDate', (selector, dates) => {
  cy.wrap(dates).each((date) => {
    // code to execute
  });
});

cy.setDatePickDate('filter-date', 
                   [new Date('2021-07-01'), new Date('2021-07-05')]
);

Edit: In response to the query, "how do I conditionally check if the selector is disabled and only click then?"

...
cy.getBySel(selector).then(($el) => {
  if ($el.prop(':disabled')) { // Applying JQuery to prevent test failure if the element is not disabled.
    cy.wrap($el).click();
  }
});
...

Answer 4

Your specialized command does not currently support passing in multiple dates. One workaround is to execute the command twice:

cy.setDatePickerDate('filter-date', new Date('2021-07-01');
cy.setDatePickerDate('filter-date', new Date('2021-07-05');

Alternatively, you have the option to modify your custom command to accept an array of dates.

Cypress.Commands.add('setDatePickerDate', (selector, dates) => {
  cy.wrap(dates).each((date) => {
    // code to execute
  });
});

cy.setDatePickDate('filter-date', 
                   [new Date('2021-07-01'), new Date('2021-07-05')]
);

Edit: In response to the query, "how do I conditionally check if the selector is disabled and only click then?"

...
cy.getBySel(selector).then(($el) => {
  if ($el.prop(':disabled')) { // Applying JQuery to prevent test failure if the element is not disabled.
    cy.wrap($el).click();
  }
});
...

Choose a date range from the date picker

Answer №1

Answer №2

Similar questions

Understanding the Class Syntax in Node.js

Is there a way to adjust the text color based on whether a value is negative?

Update the content within a div based on the selected option from a dropdown menu or

jQuery technique for loading images

Strange behavior in Angular's http response

Can someone help me troubleshoot this issue with my code so that my website can open in a blank page using about:blank?

Executing API calls utilizing Axios in a NodeJS environment with the Authorization Basic feature

Struggling with deploying Next.js on Vercel

Unlocking the potential: passing designated text values with Javascript

What steps should I take to resolve the textarea border bottom CSS effect?

The child component is failing to detect changes, consider using alternative methods like ngDoCheck to update the component's value

Steps to remove a script upon clicking a button?

An endless cascade of dots appears as the list items are being rendered

Infinite loop caused by Angular JS routing止

Eliminating the glow effect, border, and both vertical and horizontal scrollbars from a textarea

Guidelines on encoding query parameters for a tRPC query with the fetch function

Ways to remove newly added tasks using JavaScript function?

Is there a simple method to submit to a URL without relying on ajax?

Clicking on the prop in a React class component

Using AngularJS to retrieve JSON data with the HTTP module