TEST: more robust testing for volatility plot (#187)

ci/recipe/meta.yaml

@@ -39,6 +39,7 @@ test:
     - q2-sample-classifier >={{ q2_sample_classifier }}
     - q2templates >={{ q2templates }}
     - q2-feature-table >={{ q2_feature_table }}
+    - selenium
     - pytest
 
   imports:

q2_longitudinal/_longitudinal.py

@@ -6,6 +6,7 @@
 # The full license is in the file LICENSE, distributed with this software.
 # ----------------------------------------------------------------------------
 
+import json
 import os.path
 
 import pkg_resources
@@ -420,9 +421,16 @@ def _volatility(output_dir, metadata, state_column, individual_id_column,
     metadata.save(os.path.join(output_dir, 'data.tsv'))
     copy_tree(os.path.join(TEMPLATES, 'volatility'), output_dir)
     index = os.path.join(TEMPLATES, 'volatility', 'index.html')
-    q2templates.render(index, output_dir,
-                       context={'vega_spec': vega_spec,
-                                'is_feat_vol_plot': is_feat_vol_plot})
+    # Render in svg for testing so we can assert things about the plot. Use a
+    # canvas for the real runs to reduce resource usage
+    renderer = \
+        json.dumps('svg' if 'PYTEST_CURRENT_TEST' in os.environ else 'canvas')
+    q2templates.render(
+        index,
+        output_dir,
+        context={'vega_spec': vega_spec,
+                 'is_feat_vol_plot': is_feat_vol_plot,
+                 'renderer': renderer})
 
 
 def volatility(output_dir: str,

q2_longitudinal/assets/volatility/index.html

@@ -126,14 +126,17 @@ <h3 style="margin-top:0px;">Feature Stats Subplot Controls</h3>
 {% set loading_selector = '#loading' %}
 {% include 'js-error-handler.html' %}
 <script id="spec" type="application/json">{{ vega_spec }}</script>
+<script id="renderer" type="application/json">{{ renderer }}</script>
 <script type="text/javascript">
   $(document).ready(function() {
     var spec = JSON.parse(document.getElementById('spec').innerHTML);
+    var renderer = JSON.parse(document.getElementById('renderer').innerHTML);
 
     // Try and come up with a good initial estimate of plot dimensions,
     // based on the browser dimensions.
     var opts = {
       width: $('#plot').width(),
+      renderer: renderer,
     };
 
     vegaEmbed('#plot', spec, opts).then(function(result) {

q2_longitudinal/tests/test_longitudinal.py

@@ -18,6 +18,13 @@
 import pandas.testing as pdt
 import skbio
 import statsmodels.api as sm
+
+from selenium import webdriver
+from selenium.webdriver.common.by import By
+from selenium.webdriver.common.action_chains import ActionChains
+from selenium.webdriver.chrome.options import Options as ChromeOptions
+from selenium.webdriver.firefox.options import Options as FirefoxOptions
+
 import qiime2
 from qiime2.plugin.testing import TestPluginBase
 from qiime2.plugins import longitudinal
@@ -302,6 +309,42 @@ def test_longitudinal_volatility_missing_numerical_md(self):
             self.assertNotIn('nan', regex_match)
             self.assertIn('null', regex_match)
 
+    def test_longitudinal_viz_chrome(self):
+        chrome_options = ChromeOptions()
+        chrome_options.add_argument('-headless')
+
+        with webdriver.Chrome(options=chrome_options) as driver:
+            self._selenium_test(driver)
+
+    def test_longitudinal_viz_firefox(self):
+        firefox_options = FirefoxOptions()
+        firefox_options.add_argument('-headless')
+
+        with webdriver.Firefox(options=firefox_options) as driver:
+            self._selenium_test(driver)
+
+    def _selenium_test(self, driver):
+        with tempfile.TemporaryDirectory() as output_dir:
+            volatility(
+                output_dir,
+                metadata=self.md_ecam_fp, state_column='month',
+                individual_id_column='studyid')
+
+            driver.get(f"file://{os.path.join(output_dir, 'index.html')}")
+            tooltip = driver.find_element(By.ID, 'vg-tooltip-element')
+
+            self.assertNotIn('visible', tooltip.get_attribute('class'))
+
+            # This ought to grab a div towards the end of the line on the graph
+            # and move the mouse cursor to that div to make the tooltip show up
+            end_point = \
+                driver.find_element(
+                    By.CLASS_NAME, 'mark-rect').find_elements(
+                        By.TAG_NAME, 'path')[17]
+            ActionChains(driver).move_to_element(end_point).perform()
+
+            self.assertIn('visible', tooltip.get_attribute('class'))
+
     def test_examples(self):
         self.execute_examples()