Cypress tests for query parameters

client/app/components/EditParameterSettingsDialog.jsx

@@ -161,8 +161,8 @@ function EditParameterSettingsDialog(props) {
             <Option disabled key="dv1">
               <Divider className="select-option-divider" />
             </Option>
-            <Option value="date">Date</Option>
-            <Option value="datetime-local">Date and Time</Option>
+            <Option value="date" data-test="DateParameterTypeOption">Date</Option>
+            <Option value="datetime-local" data-test="DateTimeParameterTypeOption">Date and Time</Option>
             <Option value="datetime-with-seconds">Date and Time (with seconds)</Option>
             <Option disabled key="dv2">
               <Divider className="select-option-divider" />

client/app/components/parameters.html

@@ -7,7 +7,7 @@
   <div
     class="form-group m-r-10"
     ng-repeat="param in parameters"
-    data-test="ParameterName{{ param.name }}"
+    data-test="ParameterName-{{ param.name }}"
   >
     <label class="parameter-label">{{ param.title }}</label>
     <button

client/cypress/integration/dashboard/dashboard_spec.js

@@ -433,7 +433,7 @@ describe('Dashboard', () => {
             cy.getByTestId(elTestId).as('widget').within(() => {
               cy.getByTestId('RefreshIndicator').as('refreshButton');
             });
-            cy.getByTestId(`ParameterName${paramName}`).within(() => {
+            cy.getByTestId(`ParameterName-${paramName}`).within(() => {
               cy.getByTestId('TextParamInput').as('paramInput');
             });
           });

client/cypress/integration/query/parameter_spec.js

@@ -0,0 +1,202 @@
+import { createQuery } from '../../support/redash-api';
+
+describe('Parameter', () => {
+  beforeEach(() => {
+    cy.login();
+  });
+
+  describe('Text Parameter', () => {
+    beforeEach(() => {
+      const queryData = {
+        name: 'Text Parameter',
+        query: "SELECT '{{test-parameter}}' AS parameter",
+      };
+
+      createQuery(queryData, false)
+        .then(({ id }) => cy.visit(`/queries/${id}`));
+    });
+
+    it('updates the results after clicking in Apply or pressing enter', () => {
+      cy.getByTestId('ParameterName-test-parameter')
+        .find('input')
+        .type('Redash');
+
+      cy.getByTestId('ParameterName-test-parameter')
+        .contains('Apply')
+        .click();
+
+      cy.getByTestId('DynamicTable')
+        .should('contain', 'Redash');
+
+      cy.getByTestId('ParameterName-test-parameter')
+        .find('input')
+        .type('{selectall}New value{enter}');
+
+      cy.getByTestId('DynamicTable')
+        .should('contain', 'New value');
+    });
+  });
+
+  describe('Number Parameter', () => {
+    beforeEach(() => {
+      const queryData = {
+        name: 'Number Parameter',
+        query: "SELECT '{{test-parameter}}' AS parameter",
+        options: {
+          parameters: [
+            { name: 'test-parameter', title: 'Test Parameter', type: 'number' },
+          ],
+        },
+      };
+
+      createQuery(queryData, false)
+        .then(({ id }) => cy.visit(`/queries/${id}`));
+    });
+
+    it('updates the results after clicking in Apply or pressing enter', () => {
+      cy.getByTestId('ParameterName-test-parameter')
+        .find('input')
+        .type('{selectall}42');
+
+      cy.getByTestId('ParameterName-test-parameter')
+        .contains('Apply')
+        .click();
+
+      cy.getByTestId('DynamicTable')
+        .should('contain', 42);
+
+      cy.getByTestId('ParameterName-test-parameter')
+        .find('input')
+        .type('{selectall}31415{enter}');
+
+      cy.getByTestId('DynamicTable')
+        .should('contain', 31415);
+    });
+  });
+
+  describe('Dropdown Parameter', () => {
+    beforeEach(() => {
+      const queryData = {
+        name: 'Number Parameter',
+        query: "SELECT '{{test-parameter}}' AS parameter",
+        options: {
+          parameters: [
+            { name: 'test-parameter',
+              title: 'Test Parameter',
+              type: 'enum',
+              enumOptions: 'value1\nvalue2\nvalue3' },
+          ],
+        },
+      };
+
+      createQuery(queryData, false)
+        .then(({ id }) => cy.visit(`/queries/${id}`));
+    });
+
+    it('updates the results after selecting a value', () => {
+      cy.getByTestId('ParameterName-test-parameter')
+        .find('.ant-select')
+        .click();
+
+      cy.contains('li.ant-select-dropdown-menu-item', 'value1')
+        .click();
+
+      cy.getByTestId('DynamicTable')
+        .should('contain', 'value1');
+    });
+  });
+
+  describe('Date Parameter', () => {
+    beforeEach(() => {
+      const queryData = {
+        name: 'Date Parameter',
+        query: "SELECT '{{test-parameter}}' AS parameter",
+      };
+
+      createQuery(queryData, false)
+        .then(({ id }) => cy.visit(`/queries/${id}/source`));
+
+      cy.clickThrough(`
+        ParameterSettings-test-parameter
+        ParameterTypeSelect
+        DateParameterTypeOption
+        SaveParameterSettings 
+      `);
+
+      const now = new Date(2019, 0, 1).getTime(); // January 1, 2019 timestamp
+      cy.clock(now);
+    });
+
+    afterEach(() => {
+      cy.clock().then(clock => clock.restore());
+    });
+
+    it('updates the results after selecting a date', () => {
+      cy.getByTestId('ParameterName-test-parameter')
+        .find('input')
+        .click();
+
+      cy.get('.ant-calendar-date-panel')
+        .contains('.ant-calendar-date', '15')
+        .click();
+
+      cy.getByTestId('DynamicTable')
+        .should('contain', '15/01/19');
+    });
+  });
+
+  describe('Date and Time Parameter', () => {
+    beforeEach(() => {
+      const queryData = {
+        name: 'Date and Time Parameter',
+        query: "SELECT '{{test-parameter}}' AS parameter",
+      };
+
+      createQuery(queryData, false)
+        .then(({ id }) => cy.visit(`/queries/${id}/source`));
+
+      cy.clickThrough(`
+        ParameterSettings-test-parameter
+        ParameterTypeSelect
+        DateTimeParameterTypeOption
+        SaveParameterSettings
+      `);
+
+      const now = new Date(2019, 0, 1).getTime(); // January 1, 2019 timestamp
+      cy.clock(now);
+    });
+
+    afterEach(() => {
+      cy.clock().then(clock => clock.restore());
+    });
+
+    it('updates the results after selecting a date and clicking in ok', () => {
+      cy.getByTestId('ParameterName-test-parameter')
+        .find('input')
+        .click();
+
+      cy.get('.ant-calendar-date-panel')
+        .contains('.ant-calendar-date', '15')
+        .click();
+
+      cy.get('.ant-calendar-ok-btn')
+        .click();
+
+      cy.getByTestId('DynamicTable')
+        .should('contain', '2019-01-15 00:00');
+    });
+
+    it('shows the current datetime after clicking in Now', () => {
+      cy.getByTestId('ParameterName-test-parameter')
+        .find('input')
+        .click();
+
+      cy.get('.ant-calendar-date-panel')
+        .contains('Now')
+        .click();
+
+      cy.getByTestId('DynamicTable')
+        .should('contain', '2019-01-01 00:00');
+    });
+  });
+});

client/cypress/support/redash-api/index.js

@@ -19,11 +19,11 @@ export function createQuery(data, shouldPublish = true) {
   }, data);
 
   // eslint-disable-next-line cypress/no-assigning-return-values
-  let request = cy.request('POST', '/api/queries', merged);
+  let request = cy.request('POST', '/api/queries', merged).then(({ body }) => body);
   if (shouldPublish) {
-    request = request.then(({ body }) => (
-      cy.request('POST', `/api/queries/${body.id}`, { is_draft: false })
-        .then(() => body)
+    request = request.then(query => (
+      cy.request('POST', `/api/queries/${query.id}`, { is_draft: false })
+        .then(() => query)
     ));
   }