Fix broken model info display test

Author: acrellin

cesium_app/tests/frontend/test_build_model.py

@@ -96,17 +96,19 @@ def test_cannot_build_model_unlabeled_data(driver, project, featureset):
         "//div[contains(.,'Cannot build model for unlabeled feature set.')]")
 
 
-def test_model_info_display(driver, project, featureset, model):
+@pytest.mark.parametrize('featureset__name, model_type',
+                         [('class', 'RandomForestClassifier (fast)')])
+def test_model_info_display(driver, project, featureset, model_type):
     driver.refresh()
-    proj_select = Select(driver.find_element_by_css_selector('[name=project]'))
-    proj_select.select_by_value(str(project.id))
-    driver.find_element_by_id('react-tabs-6').click()
+    _build_model(project.id, model_type, driver)
 
-    driver.wait_for_xpath("//td[contains(text(),'{}')]".format(model.name)).click()
+    driver.wait_for_xpath("//td[contains(text(), 'Completed')]").click()
     time.sleep(0.5)
     assert driver.wait_for_xpath("//th[contains(text(),'Model Type')]")\
                  .is_displayed()
-    assert driver.wait_for_xpath("//th[contains(text(),'Hyper"
-                                        "parameters')]").is_displayed()
-    assert driver.wait_for_xpath("//th[contains(text(),'Training "
-                                        "Data Score')]").is_displayed()
+    assert driver.wait_for_xpath("//th[contains(text(),"
+                                 "'Hyperparameters')]").is_displayed()
+    assert driver.wait_for_xpath("//th[contains(text(),"
+                                 "'train_score')]").is_displayed()
+    assert driver.wait_for_xpath("//canvas[@class='chartjs-render-monitor']")\
+                 .is_displayed()

static/js/components/FeatureImportances.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { HorizontalBar } from 'react-chartjs-2';
 
 
 const FeatureImportancesBarchart = props => {
   const sorted_features = Object.keys(props.data).sort(
-    (a, b) => props.data[b] - props.data[a]).slice(0, 15);
+    (a, b) => props.data[b] - props.data[a]
+  ).slice(0, 15);
   const values = sorted_features.map(feature => props.data[feature]);
   const data = {
     labels: sorted_features,
@@ -33,5 +35,8 @@ const FeatureImportancesBarchart = props => {
     </div>
   );
 };
+FeatureImportancesBarchart.propTypes = {
+  data: PropTypes.array.isRequired
+};
 
 export default FeatureImportancesBarchart;

static/js/components/Models.jsx

@@ -207,8 +207,8 @@ const ModelInfo = props => (
             <td key={`td_${metric}`}>
               {
                 metric == 'feature_importances' ?
-                <FeatureImportances data={props.model.metrics[metric]} /> :
-                props.model.metrics[metric].toFixed(3)
+                  <FeatureImportances data={props.model.metrics[metric]} /> :
+                  props.model.metrics[metric].toFixed(3)
               }
             </td>))
         }