Javascript - Select date from rangepicker

ZombiePie
January 29, 2024
104 views
1 vote
2 Answers

I am trying to add two dates in a rangepicker.

This is the command 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();
  // select 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,
    }
  );
  // select month
  cy.get('.mantine-MonthsList-monthsListCell').contains(month).click();
  // select day
  cy.get('.mantine-DatePicker-day')
    .contains(new RegExp(`^(${day})`))
    .click();
});

This is the code in my test:

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

My issue is that in the date field only the date 2021-07-01 is being filled and not the other one.

Any advise on what I am doing wrong please?

//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()];

//the rest is same code

clickOnDatePicker command:

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

My d.ts:

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

My test code:

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

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

i want to do the below if there is selector to click

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

else: if there is no selector to click

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

Answers

Your custom command does not support passing in multiple dates as you have. You could run the command twice:

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

Or, you could alter your custom command to take in 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: From the comment, essentially "how do I conditionally check if the selector is disabled and only click then?"

...
cy.getBySel(selector).then(($el) => {
  if ($el.prop(':disabled')) { // We have to use JQuery so that the test does not fail if the element is not disabled.
    cy.wrap($el).click();
  }
});
...

Perhaps you can make an outer layer of custom command to handle the complexity of different parameters?

You don’t need to pass the parameters with brackets [] or braces {} if you specify the args with a spread operator like this: ...args. The spread operator converts the list of parameters into an array.

Below I added cy.log() to show the args are correctly parsed

Cypress.Commands.add('pickDate', (date) => {
  // here is only logic for picking one date, you can test it independently
})

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 is the log showing each variation of parameter lists is handled correctly

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – Select date from rangepicker

Answers