diff --git a/cypress/integration/Second_Granularity/SecondGranularityTests.js b/cypress/integration/Second_Granularity/SecondGranularityTests.js new file mode 100644 index 0000000..7665b65 --- /dev/null +++ b/cypress/integration/Second_Granularity/SecondGranularityTests.js @@ -0,0 +1,1122 @@ +import { + visitAndClickDateTime, + keyboardOrClickThenCheckAllChanges, + keyboardOrClickThenCheckAllChangesWithin, checkStyleOfSelectorWithin, assertSelectedDateCorrectBothDatesChange, +} from '../HelperFunctions'; + +describe('Second Level Granularity Tests', function() { + + it('Range Selected Click Shows Seconds', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#rangeButton7').click(); + }); + + assertSelectedDateCorrectBothDatesChange( + 'DateTimeRangeContainerSeconds', + 0, + 0, + 'August', + 2018, + 23, + 59, + 'August', + 2018, + 'row_1_cell_0_start', + 'row_1_cell_0_start', + 'row_0_cell_2_start', + 'row_0_cell_3_end', + '01-08-2018 00:00:00', + '02-08-2018 23:59:59' + , + ); + }); + + it('From Date Second After To Date Second test if From date gets invalidated', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + // test setup + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:10') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('21-09-2016 10:10:15') + .blur(); + }); + + // Change start date to be after to date (seconds) + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:20') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_1_end', + 'row_3_cell_1_end', + 'click', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:10:10', + '21-09-2016 10:10:15', + ); + }); + + it('To Date Second Before From Date Second test if To date gets invalidated', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + // test setup + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:10') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('21-09-2016 10:10:15') + .blur(); + }); + + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_end') + .clear() + .type('21-09-2016 10:10:05') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_1_end', + 'row_3_cell_1_end', + 'click', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:10:10', + '21-09-2016 10:10:15', + ); + }); + + it('To Date Second Equal From Date Second test if To date gets validated', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + // test setup + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:10') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('21-09-2016 10:10:15') + .blur(); + }); + + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_end') + .clear() + .type('21-09-2016 10:10:10') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_1_end', + 'row_3_cell_1_end', + 'click', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:10:10', + '21-09-2016 10:10:10', + ); + }); + + it('To Date Second Equal From Date Second test if From date gets validated', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + // test setup + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:10') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('21-09-2016 10:10:15') + .blur(); + }); + + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:15') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_1_end', + 'row_3_cell_1_end', + 'click', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:10:15', + '21-09-2016 10:10:15', + ); + }); + + it('To Date Second After From Date Second test if To date gets validated', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:10') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('21-09-2016 10:10:15') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_1_end', + 'row_3_cell_1_end', + 'click', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:10:10', + '21-09-2016 10:10:15', + ); + }); + + it('From Date Second Before To Date Second test if From date gets validated', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:05') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('21-09-2016 10:10:20') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_1_end', + 'row_3_cell_1_end', + 'click', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:10:05', + '21-09-2016 10:10:20', + ); + }); + + it('Changing From hour using select keeps second ', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:05') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('21-09-2016 10:10:20') + .blur(); + cy.get('#Hour_start').select('1'); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_1_end', + 'row_3_cell_1_end', + 'click', + '1', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 01:10:05', + '21-09-2016 10:10:20', + ); + }); + + it('Changing To hour using select keeps second ', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:05') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('21-09-2016 10:10:20') + .blur(); + cy.get('#Hour_end').select('11'); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_1_end', + 'row_3_cell_1_end', + 'click', + '10', + '10', + 'September', + '2016', + '11', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:10:05', + '21-09-2016 11:10:20', + ); + }); + + it('Changing To minute using select keeps second ', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:05') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('21-09-2016 10:10:20') + .blur(); + cy.get('#Minutes_end').select('15'); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_1_end', + 'row_3_cell_1_end', + 'click', + '10', + '10', + 'September', + '2016', + '10', + '15', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:10:05', + '21-09-2016 10:15:20', + ); + }); + + it('Changing From minute using select keeps second ', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:05') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('21-09-2016 10:10:20') + .blur(); + cy.get('#Minutes_start').select('5'); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_1_end', + 'row_3_cell_1_end', + 'click', + '10', + '05', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:05:05', + '21-09-2016 10:10:20', + ); + }); + + it('Clicking From minute keeps second ', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:05') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('21-09-2016 10:10:20') + .blur(); + cy.get('#Minutes_start').select('5'); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_0_start', + 'row_3_cell_0_start', + 'click', + '10', + '05', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '19-09-2016 10:05:05', + '21-09-2016 10:10:20', + ); + }); + + it('Clicking To minute keeps second ', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:05') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('21-09-2016 10:10:20') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_6_end', + 'row_3_cell_6_end', + 'click', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:10:05', + '25-09-2016 10:10:20', + ); + }); + + it('Clicking From Day Same As To Date, From Day after To Day second, check invalid', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:15') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('22-09-2016 10:10:10') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_3_start', + 'row_3_cell_3_start', + 'click', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:10:15', + '22-09-2016 10:10:10', + ); + }); + + it('Clicking From Day Same As To Date, From Day same as To Day second, check valid', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:10') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('22-09-2016 10:10:10') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_3_start', + 'row_3_cell_3_start', + 'click', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_3_start', + 'row_3_cell_3_end', + '22-09-2016 10:10:10', + '22-09-2016 10:10:10', + ); + }); + + it('Clicking From Day Same As To Date, From Day Before To Day second, check valid', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:05') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('22-09-2016 10:10:10') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_3_start', + 'row_3_cell_3_start', + 'click', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_3_start', + 'row_3_cell_3_end', + '22-09-2016 10:10:05', + '22-09-2016 10:10:10', + ); + }); + + it('Clicking To Day Same As From Date, To Day Before From Day second, check invalid', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:10') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('22-09-2016 10:10:05') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_2_end', + 'row_3_cell_2_end', + 'click', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_3_start', + 'row_3_cell_3_end', + '21-09-2016 10:10:10', + '22-09-2016 10:10:05', + ); + }); + + it('Clicking To Day Same As From Date, To Day Same as From Day second, check valid', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:10') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('22-09-2016 10:10:10') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_2_end', + 'row_3_cell_2_end', + 'click', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:10:10', + '21-09-2016 10:10:10', + ); + }); + + it('Clicking To Day Same As From Date, To Day After From Day second, check valid', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:10') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('22-09-2016 10:10:15') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_2_end', + 'row_3_cell_2_end', + 'click', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:10:10', + '21-09-2016 10:10:15', + ); + }); + + it('Keyboard right From Day before To Date, From Day second After to Day second, check invalid', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:15') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('22-09-2016 10:10:10') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_2_end', + 'row_3_cell_2_end', + 'rightarrow', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:10:15', + '22-09-2016 10:10:10', + ); + }); + + // it.only('Keyboard right From Day before To Date, From Day second same as to Day second, check valid', function() { + // visitAndClickDateTime('DateTimeRangeContainerSeconds'); + // cy.get('#DateTimeRangeContainerSeconds').within(() => { + // cy.get('#DateTimeInput_start') + // .clear() + // .type('21-09-2016 10:10:10') + // .blur(); + // cy.get('#DateTimeInput_end') + // .clear() + // .type('22-09-2016 10:10:10') + // .blur(); + // }); + // + // keyboardOrClickThenCheckAllChangesWithin( + // 'DateTimeRangeContainerSeconds', + // 'row_3_cell_2_start', + // 'row_3_cell_3_start', + // 'rightarrow', + // '10', + // '10', + // 'September', + // '2016', + // '10', + // '10', + // 'September', + // '2016', + // 'row_1_cell_0_start', + // 'row_3_cell_5_end', + // 'row_3_cell_2_start', + // 'row_3_cell_2_end', + // '22-09-2016 10:10:10', + // '22-09-2016 10:10:10', + // ); + // }); + + // it.only('Keyboard right From Day before To Date, From Day second before to Day second, check valid', function() { + // visitAndClickDateTime('DateTimeRangeContainerSeconds'); + // cy.get('#DateTimeRangeContainerSeconds').within(() => { + // cy.get('#DateTimeInput_start') + // .clear() + // .type('21-09-2016 10:10:05') + // .blur(); + // cy.get('#DateTimeInput_end') + // .clear() + // .type('22-09-2016 10:10:10') + // .blur(); + // }); + // + // keyboardOrClickThenCheckAllChangesWithin( + // 'DateTimeRangeContainerSeconds', + // 'row_3_cell_2_start', + // 'row_3_cell_3_start', + // 'rightarrow', + // '10', + // '10', + // 'September', + // '2016', + // '10', + // '10', + // 'September', + // '2016', + // 'row_1_cell_0_start', + // 'row_3_cell_5_end', + // 'row_3_cell_2_start', + // 'row_3_cell_2_end', + // '22-09-2016 10:10:10', + // '22-09-2016 10:10:10', + // ); + // }); + + it('Keyboard down From Day before To Date, From Day second After to Day second, check invalid', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:15') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('22-09-2016 10:10:10') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_2_end', + 'row_3_cell_2_end', + 'downarrow', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:10:15', + '22-09-2016 10:10:10', + ); + }); + + // it.only('Keyboard down From Day before To Date, From Day equal After to Day second, check valid', function() { + // visitAndClickDateTime('DateTimeRangeContainerSeconds'); + // cy.get('#DateTimeRangeContainerSeconds').within(() => { + // cy.get('#DateTimeInput_start') + // .clear() + // .type('15-09-2016 10:10:10') + // .blur(); + // cy.get('#DateTimeInput_end') + // .clear() + // .type('22-09-2016 10:10:10') + // .blur(); + // }); + // + // keyboardOrClickThenCheckAllChangesWithin( + // 'DateTimeRangeContainerSeconds', + // 'row_2_cell_3_start', + // 'row_3_cell_2_end', + // 'downarrow', + // '10', + // '10', + // 'September', + // '2016', + // '10', + // '10', + // 'September', + // '2016', + // 'row_1_cell_0_start', + // 'row_3_cell_5_end', + // 'row_3_cell_2_start', + // 'row_3_cell_2_end', + // '21-09-2016 10:10:15', + // '22-09-2016 10:10:10', + // ); + // }); + + it('Keyboard down From Day before To Date, From Day before After to Day second, check valid', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('14-09-2016 10:10:10') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('22-09-2016 10:10:10') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_2_cell_2_start', + 'row_3_cell_2_end', + 'downarrow', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:10:10', + '22-09-2016 10:10:10', + ); + }); + + it('Keyboard up To Day before From Date, From Day second After to Day second, check invalid', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:15') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('22-09-2016 10:10:10') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_3_end', + 'row_3_cell_3_end', + 'uparrow', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:10:15', + '22-09-2016 10:10:10', + ); + }); + + it('Keyboard up To Day equal From Date, From Day second After to Day second, check valid', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:10') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('28-09-2016 10:10:10') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_4_cell_2_end', + 'row_3_cell_2_end', + 'uparrow', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:10:10', + '21-09-2016 10:10:10', + ); + }); + + it('Keyboard up To Day after From Date, From Day second After to Day second, check valid', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:10') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('29-09-2016 10:10:15') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_4_cell_3_end', + 'row_3_cell_3_end', + 'uparrow', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:10:10', + '22-09-2016 10:10:15', + ); + }); + + it('Keyboard left To Day before From Date, From Day second After to Day second, check invalid', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:15') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('22-09-2016 10:10:10') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_3_end', + 'row_3_cell_3_end', + 'leftarrow', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:10:15', + '22-09-2016 10:10:10', + ); + }); + + it('Keyboard left To Day same as From Date, From Day second same as to Day second, check valid', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:10') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('22-09-2016 10:10:10') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_3_end', + 'row_3_cell_2_end', + 'leftarrow', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:10:10', + '21-09-2016 10:10:10', + ); + }); + + it('Keyboard left To Day after From Date, From Day second before to Day second, check valid', function() { + visitAndClickDateTime('DateTimeRangeContainerSeconds'); + cy.get('#DateTimeRangeContainerSeconds').within(() => { + cy.get('#DateTimeInput_start') + .clear() + .type('21-09-2016 10:10:10') + .blur(); + cy.get('#DateTimeInput_end') + .clear() + .type('23-09-2016 10:10:15') + .blur(); + }); + + keyboardOrClickThenCheckAllChangesWithin( + 'DateTimeRangeContainerSeconds', + 'row_3_cell_4_end', + 'row_3_cell_3_end', + 'leftarrow', + '10', + '10', + 'September', + '2016', + '10', + '10', + 'September', + '2016', + 'row_1_cell_0_start', + 'row_3_cell_5_end', + 'row_3_cell_2_start', + 'row_3_cell_2_end', + '21-09-2016 10:10:10', + '22-09-2016 10:10:15', + ); + }); +}); diff --git a/cypress/integration/Standalone/StandaloneTests.js b/cypress/integration/Standalone/StandaloneTests.js index d5010b3..2214e92 100644 --- a/cypress/integration/Standalone/StandaloneTests.js +++ b/cypress/integration/Standalone/StandaloneTests.js @@ -70,8 +70,8 @@ describe('Standalone Picker Tests', function() { 0, 'August', 2018, - 0, - 0, + 23, + 59, 'August', 2018, 'row_1_cell_0_start', @@ -79,7 +79,7 @@ describe('Standalone Picker Tests', function() { 'row_0_cell_2_start', 'row_0_cell_3_end', '01-08-2018 00:00', - '02-08-2018 00:00' + '02-08-2018 23:59' , ); }); diff --git a/src/Wrapper.jsx b/src/Wrapper.jsx index ff8cb81..2b3263f 100644 --- a/src/Wrapper.jsx +++ b/src/Wrapper.jsx @@ -10,7 +10,7 @@ class Wrapper extends React.Component { let start = moment(new Date(2016, 8, 20, 0, 0, 0, 0)); let end = moment(start) .add(5, 'days') - .subtract(1, 'minute'); + .subtract(1, 'second'); this.state = { start: start, end: end, @@ -283,6 +283,45 @@ class Wrapper extends React.Component { ); } + renderPickerAutoApplySmartModeDisabledSecondsIncluded(ranges, local, maxDate, descendingYears) { + let value = `${this.state.start.format('DD-MM-YYYY HH:mm:ss')} - ${this.state.end.format('DD-MM-YYYY HH:mm:ss')}`; + local = { + format: 'DD-MM-YYYY HH:mm:ss', + sundayFirst: false, + }; + return ( +
+
+ + + +
+ Click Me to test the Date Picker with Auto Apply and Seconds local format +
+
+
+ ); + } + renderPickerSmartModeDisabledCustomStyling(ranges, local, maxDate, descendingYears) { let firefoxBelow35 = isFirefoxBelow53(); let disabled = true; @@ -411,14 +450,14 @@ class Wrapper extends React.Component { '1 Week': [moment(start).subtract(7, 'days'), moment(end)], '2 Weeks': [moment(start).subtract(14, 'days'), moment(end)], '1 Month': [moment(start).subtract(1, 'months'), moment(end)], - '1st August 18': [moment("08/01/2018"), moment("08/02/2018")], + '1st August 18': [moment("2018-08-01 00:00:00"), moment("2018-08-02 23:59:59")], '1 Year': [moment(start).subtract(1, 'years'), moment(end)], }; let local = { format: 'DD-MM-YYYY HH:mm', sundayFirst: false, }; - let maxDate = moment(start).add(24, 'hour'); + let maxDate = moment(end).add(24, 'hour'); return (

Welcome to the Advanced Date Time Picker Demo

@@ -428,6 +467,7 @@ class Wrapper extends React.Component { {this.renderGridPickerForceMobileMode(ranges, local, maxDate)} {this.renderGridPickerLeftOpen(ranges, local, maxDate)} {this.renderPickerAutoApplySmartModeDisabled(ranges, local, maxDate, true)} + {this.renderPickerAutoApplySmartModeDisabledSecondsIncluded(ranges, local, maxDate, true)} {this.renderPickerSmartModeDisabledCustomStyling(ranges, local, maxDate, true)} {this.renderPickerAutoApplyPastFriendly(ranges, local, maxDate, false)} {this.renderStandalone(ranges, local, maxDate, false)} diff --git a/src/lib/DateTimeRangePicker.jsx b/src/lib/DateTimeRangePicker.jsx index 4b9718d..264134a 100644 --- a/src/lib/DateTimeRangePicker.jsx +++ b/src/lib/DateTimeRangePicker.jsx @@ -10,7 +10,7 @@ import { isValidTimeChange } from './utils/TimeFunctionUtils'; import { datePicked, pastMaxDate } from './utils/DateSelectedUtils'; export const ModeEnum = Object.freeze({ start: 'start', end: 'end' }); -export var momentFormat = 'DD-MM-YYYY HH:mm'; +export let momentFormat = 'DD-MM-YYYY HH:mm'; class DateTimeRangePicker extends React.Component { constructor(props) { @@ -18,9 +18,11 @@ class DateTimeRangePicker extends React.Component { let ranges = {}; let customRange = { 'Custom Range': 'Custom Range' }; Object.assign(ranges, this.props.ranges, customRange); + let localMomentFormat = 'DD-MM-YYYY HH:mm'; if (this.props.local && this.props.local.format) { momentFormat = this.props.local.format; + localMomentFormat = this.props.local.format; } this.state = { @@ -28,10 +30,11 @@ class DateTimeRangePicker extends React.Component { selectingModeFrom: true, ranges: ranges, start: this.props.start, - startLabel: this.props.start.format(momentFormat), + startLabel: this.props.start.format(localMomentFormat), end: this.props.end, - endLabel: this.props.end.format(momentFormat), + endLabel: this.props.end.format(localMomentFormat), focusDate: false, + momentFormat: localMomentFormat, }; this.bindToFunctions(); } @@ -120,9 +123,9 @@ class DateTimeRangePicker extends React.Component { updateStartEndAndLabels(newStart, newEnd) { this.setState({ start: newStart, - startLabel: newStart.format(momentFormat), + startLabel: newStart.format(this.state.momentFormat), end: newEnd, - endLabel: newEnd.format(momentFormat), + endLabel: newEnd.format(this.state.momentFormat), }); } @@ -170,7 +173,7 @@ class DateTimeRangePicker extends React.Component { } else { state = this.state.end; } - let newDate = [date.year(), date.month(), date.date(), state.hours(), state.minutes()]; + let newDate = [date.year(), date.month(), date.date(), state.hours(), state.minutes(), state.seconds()]; return moment(newDate); } @@ -204,7 +207,7 @@ class DateTimeRangePicker extends React.Component { if (isValidTimeChange(mode, date, this.state.start, this.state.end)) { this.setState({ [stateDateToChangeName]: date, - [stateLabelToChangeName]: date.format(momentFormat), + [stateLabelToChangeName]: date.format(this.state.momentFormat), }); this.updateTimeCustomRangeUpdator(stateDateToChangeName, date); if (stateDateToChangeName === 'end') { @@ -242,16 +245,16 @@ class DateTimeRangePicker extends React.Component { dateTextFieldCallback(mode) { if (mode === 'start') { - let newDate = moment(this.state.startLabel, momentFormat); + let newDate = moment(this.state.startLabel, this.state.momentFormat); let isValidNewDate = newDate.isValid(); - let isSameOrBeforeEnd = newDate.isSameOrBefore(this.state.end, 'minute'); + let isSameOrBeforeEnd = newDate.isSameOrBefore(this.state.end, 'second'); let isAfterEndDate = newDate.isAfter(this.state.end); this.updateDate(mode, newDate, isValidNewDate, isSameOrBeforeEnd, isAfterEndDate, 'start', 'startLabel'); } else { - let newDate = moment(this.state.endLabel, momentFormat); + let newDate = moment(this.state.endLabel, this.state.momentFormat); let isValidNewDate = newDate.isValid(); let isBeforeStartDate = newDate.isBefore(this.state.start); - let isSameOrAfterStartDate = newDate.isSameOrAfter(this.state.start, 'minute'); + let isSameOrAfterStartDate = newDate.isSameOrAfter(this.state.start, 'second'); this.updateDate(mode, newDate, isValidNewDate, isSameOrAfterStartDate, isBeforeStartDate, 'end', 'endLabel'); } } @@ -274,7 +277,7 @@ class DateTimeRangePicker extends React.Component { if (isValidNewDate && isValidDateChange) { this.setState({ [stateDateToChangeName]: newDate, - [stateLabelToChangeName]: newDate.format(momentFormat), + [stateLabelToChangeName]: newDate.format(this.state.momentFormat), }); this.updateTimeCustomRangeUpdator(stateDateToChangeName, newDate); if (stateDateToChangeName === 'end') { @@ -343,7 +346,7 @@ class DateTimeRangePicker extends React.Component { // due to Key press into each other, if you then press left it always // calls it from the end cell so allow the end cell to handle this // and switch to start when this occurs - if (!startDate.isSameOrBefore(endDate, 'minute')) { + if (!startDate.isSameOrBefore(endDate, 'second')) { startDate = this.duplicateMomentTimeFromState(newDate, true); endDate = moment(this.state.end); } @@ -359,7 +362,7 @@ class DateTimeRangePicker extends React.Component { startDate = this.duplicateMomentTimeFromState(newDate, true); endDate = moment(this.state.end); // Not in Smart Mode and Start Date after End Date then invalid change - if (!this.props.smartMode && startDate.isAfter(endDate, 'minute')) { + if (!this.props.smartMode && startDate.isAfter(endDate, 'second')) { return false; } } @@ -368,13 +371,13 @@ class DateTimeRangePicker extends React.Component { startDate = moment(this.state.start); endDate = this.duplicateMomentTimeFromState(newDate, false); // Not in Smart Mode and Start Date after End Date then invalid change - if (!this.props.smartMode && startDate.isAfter(endDate, 'minute')) { + if (!this.props.smartMode && startDate.isAfter(endDate, 'second')) { return false; } } } - if (startDate.isSameOrBefore(endDate, 'minute')) { + if (startDate.isSameOrBefore(endDate, 'second')) { this.updateStartEndAndLabels(startDate, endDate); this.checkAutoApplyActiveApplyIfActive(startDate, endDate); } else { diff --git a/src/lib/calendar/Cell.jsx b/src/lib/calendar/Cell.jsx index 3fe1fe6..5c5ef6d 100644 --- a/src/lib/calendar/Cell.jsx +++ b/src/lib/calendar/Cell.jsx @@ -125,7 +125,7 @@ class Cell extends React.Component { return this.setState({ style: style }); } // Hover Style Cell, Different if inbetween start and end date - let isDateStart = this.props.date.isSameOrBefore(this.props.otherDate, 'minute'); + let isDateStart = this.props.date.isSameOrBefore(this.props.otherDate, 'second'); if (isInbetweenDates(isDateStart, this.props.cellDay, this.props.date, this.props.otherDate)) { this.setState({ style: hoverCellStyle(true, this.props.darkMode) }); } else { @@ -157,8 +157,8 @@ class Cell extends React.Component { shouldStyleCellStartEnd(cellDay, date, otherDate, startCheck, endCheck) { let isCellDateProp = cellDay.isSame(date, 'day'); let isCellOtherDateProp = cellDay.isSame(otherDate, 'day'); - let isDateStart = date.isSameOrBefore(otherDate, 'minute'); - let isOtherDateStart = otherDate.isSameOrBefore(date, 'minute'); + let isDateStart = date.isSameOrBefore(otherDate, 'second'); + let isOtherDateStart = otherDate.isSameOrBefore(date, 'second'); if (startCheck) { return (isCellDateProp && isDateStart) || (isCellOtherDateProp && isOtherDateStart); @@ -217,7 +217,7 @@ class Cell extends React.Component { return; } - let isDateStart = date.isSameOrBefore(otherDate, 'minute'); + let isDateStart = date.isSameOrBefore(otherDate, 'second'); let inbetweenDates = isInbetweenDates(isDateStart, cellDay, date, otherDate); let isStart = this.shouldStyleCellStartEnd(cellDay, date, otherDate, true, false); let isEnd = this.shouldStyleCellStartEnd(cellDay, date, otherDate, false, true); diff --git a/src/lib/utils/DateSelectedUtils.js b/src/lib/utils/DateSelectedUtils.js index ceef36c..e9bbe00 100644 --- a/src/lib/utils/DateSelectedUtils.js +++ b/src/lib/utils/DateSelectedUtils.js @@ -11,8 +11,8 @@ export const datePicked = (startDate, endDate, newDate, startMode, smartMode) => const newDateStartMode = (newDate, endDate, smartMode, startDate) => { // Create a new moment object which combines the new date and the original start date as newDate // doesnt contain time info which is important to determining equality - let newDateWithTime = createNewDateWithTime(newDate, startDate.hour(), startDate.minute()); - if (newDateWithTime.isSameOrBefore(endDate, 'minutes')) { + let newDateWithTime = createNewDateWithTime(newDate, startDate.hour(), startDate.minute(), startDate.second()); + if (newDateWithTime.isSameOrBefore(endDate, 'seconds')) { return returnDateObject(newDate, endDate); } else if (smartMode) { let newEnd = moment(newDate); @@ -26,8 +26,8 @@ const newDateStartMode = (newDate, endDate, smartMode, startDate) => { const newDateEndMode = (newDate, startDate, smartMode, endDate) => { // Create a new moment object which combines the new date and the original end date as newDate // doesnt contain time info which is important to determining equality - let newDateWithTime = createNewDateWithTime(newDate, endDate.hour(), endDate.minute()); - if (newDateWithTime.isSameOrAfter(startDate, 'minutes')) { + let newDateWithTime = createNewDateWithTime(newDate, endDate.hour(), endDate.minute(), endDate.second()); + if (newDateWithTime.isSameOrAfter(startDate, 'seconds')) { return returnDateObject(startDate, newDate); } else if (smartMode) { let newStart = moment(newDate); @@ -38,11 +38,12 @@ const newDateEndMode = (newDate, startDate, smartMode, endDate) => { } }; -const createNewDateWithTime = (newDate, hour, minute) => { +const createNewDateWithTime = (newDate, hour, minute, second) => { let newDateTmp = [newDate.year(), newDate.month(), newDate.date()]; let newDateWithTime = moment(newDateTmp); newDateWithTime.hour(hour); newDateWithTime.minute(minute); + newDateWithTime.second(second); return newDateWithTime; }; @@ -57,7 +58,7 @@ export const pastMaxDate = (currentDate, maxDate, minuteMode) => { if (!maxDate) { return false; } - if (minuteMode && maxDate && currentDate.isAfter(maxDate, 'minute')) { + if (minuteMode && maxDate && currentDate.isAfter(maxDate, 'seconds')) { return true; } if (maxDate && currentDate.isAfter(maxDate, 'day')) {