feat(explore): Time picker enhancement follow up (apache#12208)

* refactor layout * WIP * fix typing * styling * fix lint * frontend IT * rename variable * added quarter * typos * refine code structure
preset-io · Jan 7, 2021 · d6d4eb7 · d6d4eb7
1 parent 33bfa90
commit d6d4eb7
Show file tree

Hide file tree

Showing 10 changed files with 948 additions and 715 deletions.
diff --git a/superset-frontend/cypress-base/cypress/integration/explore/control.test.ts b/superset-frontend/cypress-base/cypress/integration/explore/control.test.ts
@@ -127,7 +127,7 @@ describe('Time range filter', () => {
     cy.route('POST', '/superset/explore_json/**').as('postJson');
   });
 
-  it('Defaults to the correct tab for time_range params', () => {
+  it('Advanced time_range params', () => {
     const formData = {
       ...FORM_DATA_DEFAULTS,
       metrics: [NUM_METRIC],
@@ -141,18 +141,98 @@ describe('Time range filter', () => {
     cy.get('[data-test=time-range-trigger]')
       .click()
       .then(() => {
-        cy.get('.ant-modal-footer')
-          .find('button')
-          .its('length')
-          .should('eq', 3);
-        cy.get('.ant-modal-body').within(() => {
+        cy.get('.footer').find('button').its('length').should('eq', 2);
+        cy.get('.ant-popover-content').within(() => {
           cy.get('input[value="100 years ago"]');
           cy.get('input[value="now"]');
         });
-        cy.get('[data-test=modal-cancel-button]').click();
-        cy.get('[data-test=time-range-modal]').should('not.be.visible');
+        cy.get('[data-test=cancel-button]').click();
+        cy.get('.ant-popover').should('not.be.visible');
       });
   });
+
+  it('Common time_range params', () => {
+    const formData = {
+      ...FORM_DATA_DEFAULTS,
+      metrics: [NUM_METRIC],
+      viz_type: 'line',
+      time_range: 'Last year',
+    };
+
+    cy.visitChartByParams(JSON.stringify(formData));
+    cy.verifySliceSuccess({ waitAlias: '@postJson' });
+
+    cy.get('[data-test=time-range-trigger]')
+      .click()
+      .then(() => {
+        cy.get('.ant-radio-group').children().its('length').should('eq', 5);
+        cy.get('.ant-radio-checked + span').contains('last year');
+        cy.get('[data-test=cancel-button]').click();
+      });
+  });
+
+  it('Previous time_range params', () => {
+    const formData = {
+      ...FORM_DATA_DEFAULTS,
+      metrics: [NUM_METRIC],
+      viz_type: 'line',
+      time_range:
+        'DATETRUNC(DATEADD(DATETIME("TODAY"), -1, MONTH), MONTH) : LASTDAY(DATEADD(DATETIME("TODAY"), -1, MONTH), MONTH)',
+    };
+
+    cy.visitChartByParams(JSON.stringify(formData));
+    cy.verifySliceSuccess({ waitAlias: '@postJson' });
+
+    cy.get('[data-test=time-range-trigger]')
+      .click()
+      .then(() => {
+        cy.get('.ant-radio-group').children().its('length').should('eq', 3);
+        cy.get('.ant-radio-checked + span').contains('previous calendar month');
+        cy.get('[data-test=cancel-button]').click();
+      });
+  });
+
+  it('Custom time_range params', () => {
+    const formData = {
+      ...FORM_DATA_DEFAULTS,
+      metrics: [NUM_METRIC],
+      viz_type: 'line',
+      time_range: 'DATEADD(DATETIME("today"), -7, day) : today',
+    };
+
+    cy.visitChartByParams(JSON.stringify(formData));
+    cy.verifySliceSuccess({ waitAlias: '@postJson' });
+
+    cy.get('[data-test=time-range-trigger]')
+      .click()
+      .then(() => {
+        cy.get('[data-test=custom-frame]').then(() => {
+          cy.get('.ant-input-number-input-wrap > input')
+            .invoke('attr', 'value')
+            .should('eq', '7');
+        });
+        cy.get('[data-test=cancel-button]').click();
+      });
+  });
+
+  it('No filter time_range params', () => {
+    const formData = {
+      ...FORM_DATA_DEFAULTS,
+      metrics: [NUM_METRIC],
+      viz_type: 'line',
+      time_range: 'No filter',
+    };
+
+    cy.visitChartByParams(JSON.stringify(formData));
+    cy.verifySliceSuccess({ waitAlias: '@postJson' });
+
+    cy.get('[data-test=time-range-trigger]')
+      .click()
+      .then(() => {
+        cy.get('[data-test=no-filter]');
+      });
+    cy.get('[data-test=cancel-button]').click();
+  });
 });
 
 describe('Groupby control', () => {