From 245c6a4e0cbf47ce37fbc89a1f846976d100272f Mon Sep 17 00:00:00 2001
From: Michael Stauffer <mgstauff@gmail.com>
Date: Mon, 15 Mar 2021 15:52:00 -0400
Subject: [PATCH 1/8] Working on FileUpload unit tests. Several new ones added

---
 lab/webapp/package-lock.json                  |  28 +
 lab/webapp/package.json                       |   2 +
 .../__snapshots__/fileUpload.test.js.snap     | 550 ++++++++++++++++++
 .../components/FileUpload/fileUpload.test.js  | 271 ++++++---
 lab/webapp/src/components/FileUpload/index.js |  27 +-
 tests/unit/js_tests.sh                        |   2 +
 6 files changed, 797 insertions(+), 83 deletions(-)
 create mode 100644 lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap

diff --git a/lab/webapp/package-lock.json b/lab/webapp/package-lock.json
index 3ca5d0863..b6e5e8c45 100644
--- a/lab/webapp/package-lock.json
+++ b/lab/webapp/package-lock.json
@@ -4281,6 +4281,15 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/cheerio": {
+      "version": "0.22.24",
+      "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.24.tgz",
+      "integrity": "sha512-iKXt/cwltGvN06Dd6zwQG1U35edPwId9lmcSeYfcxSNvvNg4vysnFB+iBQNjj06tSVV7MBj0GWMQ7dwb4Z+p8Q==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/color-name": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
@@ -7644,6 +7653,25 @@
         "object-is": "^1.0.2"
       }
     },
+    "enzyme-to-json": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.6.1.tgz",
+      "integrity": "sha512-15tXuONeq5ORoZjV/bUo2gbtZrN2IH+Z6DvL35QmZyKHgbY1ahn6wcnLd9Xv9OjiwbAXiiP8MRZwbZrCv1wYNg==",
+      "dev": true,
+      "requires": {
+        "@types/cheerio": "^0.22.22",
+        "lodash": "^4.17.15",
+        "react-is": "^16.12.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+          "dev": true
+        }
+      }
+    },
     "errno": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
diff --git a/lab/webapp/package.json b/lab/webapp/package.json
index 944d228f4..801e009ea 100644
--- a/lab/webapp/package.json
+++ b/lab/webapp/package.json
@@ -53,6 +53,7 @@
     "clean-webpack-plugin": "^3.0.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-to-json": "^3.6.1",
     "fetch-mock": "^7.7.3",
     "html-webpack-plugin": "^3.2.0",
     "html-webpack-template": "^6.2.0",
@@ -71,6 +72,7 @@
     "webpack-merge": "^4.2.2"
   },
   "jest": {
+    "snapshotSerializers": ["enzyme-to-json/serializer"],
     "transform": {
       "^.+\\.jsx?$": "babel-jest",
       "^.+\\.js?$": "babel-jest",
diff --git a/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap b/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap
new file mode 100644
index 000000000..969531ac4
--- /dev/null
+++ b/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap
@@ -0,0 +1,550 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`basic testing of fileupload react component full component snapshot 1`] = `
+<div>
+  <SceneHeader
+    header="Submit Datasets"
+  />
+  <Form
+    as="form"
+    inverted={true}
+  >
+    <Segment
+      className="file-upload-segment"
+    >
+      <Dropzone
+        accept=".csv,.tsv,text/csv,text/tsv"
+        multiple={false}
+        onDropAccepted={[Function]}
+        onDropRejected={[Function]}
+      >
+        <Component />
+      </Dropzone>
+      <Modal
+        centered={true}
+        closeIcon={true}
+        closeOnDimmerClick={true}
+        closeOnDocumentClick={false}
+        dimmer={true}
+        eventPool="Modal"
+        onClose={[Function]}
+        style={
+          Object {
+            "marginTop": "0",
+          }
+        }
+      >
+        <ModalHeader />
+        <ModalContent />
+      </Modal>
+      <br />
+      <div
+        className="file-upload-form-hide-inputs"
+        id="file-upload-form-input-area"
+      >
+        <Divider
+          horizontal={true}
+          inverted={true}
+        >
+          <Header
+            as="h4"
+            inverted={true}
+          >
+            Feature Specification
+          </Header>
+        </Divider>
+        <Grid
+          columns={4}
+        >
+          <GridRow>
+            <GridColumn
+              width={7}
+            >
+              <FormField
+                className="inverted-dropdown-search"
+                control={[Function]}
+                inline={true}
+                label="Dependent Feature"
+                onChange={[Function]}
+                options={Array []}
+                placeholder="Select a feature"
+                search={true}
+              />
+            </GridColumn>
+            <GridColumn
+              width={1}
+            >
+              <Popup
+                content={
+                  <div
+                    className="content"
+                  >
+                    <p>
+                       
+                      The column that describes the label or output for each row.
+    For example, if analyzing a dataset of patients with different types of diabetes,
+    this column may have the values "type1", "type2", or "none".
+                       
+                    </p>
+                  </div>
+                }
+                disabled={false}
+                eventsEnabled={true}
+                header="Dependent Column Help"
+                offset={0}
+                on="click"
+                pinned={false}
+                position="right center"
+                trigger={
+                  <Icon
+                    as="i"
+                    className="file-upload-help-icon"
+                    color="blue"
+                    inverted={true}
+                    name="info circle"
+                    size="large"
+                  />
+                }
+              />
+            </GridColumn>
+            <GridColumn
+              width={6}
+            >
+              <FormField
+                className="inverted-dropdown-inline"
+                control={[Function]}
+                defaultValue="classification"
+                inline={true}
+                label="Prediction Type"
+                onChange={[Function]}
+                options={
+                  Array [
+                    Object {
+                      "key": "classification",
+                      "text": "classification",
+                      "value": "classification",
+                    },
+                    Object {
+                      "key": "regression",
+                      "text": "regression",
+                      "value": "regression",
+                    },
+                  ]
+                }
+              />
+            </GridColumn>
+            <GridColumn
+              width={2}
+            >
+              <Popup
+                content={
+                  <div
+                    className="content"
+                  >
+                    <p>
+                      <i>
+                        Classification
+                      </i>
+                       algorithms are used to model discrete categorical outputs. Examples include modeling the color car someone might buy ("red", "green", "blue"...) or a disease state ("type1Diabetes", "type2Diabetes", "none"...)
+                      <br />
+                      <br />
+                      <i>
+                        Regression
+                      </i>
+                       algorithms are used to model a continuous valued output.  Examples include modeling the amount of money a house is predicted to sell for.
+                    </p>
+                  </div>
+                }
+                disabled={false}
+                eventsEnabled={true}
+                header="Prediction Type Help"
+                offset={0}
+                on="click"
+                pinned={false}
+                position="left center"
+                trigger={
+                  <Icon
+                    as="i"
+                    className="file-upload-help-icon"
+                    color="blue"
+                    inverted={true}
+                    name="info circle"
+                    size="large"
+                  />
+                }
+              />
+            </GridColumn>
+          </GridRow>
+        </Grid>
+        <FormField
+          label="Features Types"
+          style={
+            Object {
+              "marginTop": "1em",
+            }
+          }
+        />
+        <div>
+          <Grid
+            columns={3}
+          >
+            <GridRow>
+              <GridColumn>
+                <FormInput
+                  as={[Function]}
+                  control={[Function]}
+                >
+                  <Modal
+                    centered={true}
+                    closeOnDimmerClick={false}
+                    closeOnDocumentClick={false}
+                    closeOnEscape={true}
+                    dimmer={true}
+                    disabled={false}
+                    eventPool="Modal"
+                    onClose={[Function]}
+                    onOpen={[Function]}
+                    open={false}
+                    trigger={
+                      <Button
+                        as="button"
+                        className="file-upload-button"
+                        color="blue"
+                        disabled={false}
+                        fluid={true}
+                        inverted={true}
+                        size="small"
+                      >
+                        Set Ordinal
+                      </Button>
+                    }
+                  >
+                    <ModalHeader>
+                      Ordinal Feature Input
+                    </ModalHeader>
+                    <ModalDescription
+                      style={
+                        Object {
+                          "margin": "1em",
+                          "width": "65%",
+                        }
+                      }
+                    >
+                      <p>
+                         For each ordinal feature, enter one comma-separated line with the following format (this overrides selections in the Dataset Preview): 
+                        <br />
+                         [feature name],[1st unique value],[2nd unique value],...
+                      </p>
+                      <p>
+                        For example:
+                        <br />
+                         month,jan,feb,mar,apr,may,jun,jul,aug,sep,oct,nov,dec
+                        <br />
+                         day,mon,tue,wed,thu,fri,sat,sun
+                      </p>
+                      <p>
+                        To populate this text box with all features and their unique values, close this window and use the button to set all feature types as ordinal. 
+                      </p>
+                      <br />
+                    </ModalDescription>
+                    <Form
+                      as="form"
+                    >
+                      <textarea
+                        className="file-upload-ordinal-text-area"
+                        id="ordinal_features_text_area_input"
+                        label="Ordinal Features"
+                        onChange={[Function]}
+                        placeholder="(No Ordinal features have been specified.)"
+                        value=""
+                      />
+                    </Form>
+                    <ModalActions>
+                      <Button
+                        as="button"
+                        color="red"
+                        content="Cancel"
+                        inverted={true}
+                        onClick={[Function]}
+                        size="small"
+                      />
+                      <Button
+                        as="button"
+                        color="blue"
+                        content="Accept"
+                        icon="checkmark"
+                        inverted={true}
+                        onClick={[Function]}
+                        positive={true}
+                        size="small"
+                      />
+                    </ModalActions>
+                  </Modal>
+                  <Popup
+                    content={
+                      <div
+                        className="content"
+                      >
+                        <p>
+                          Ordinal features have a discrete number of categories, and the categories have a logical order (rank). Some examples include size ("small", "medium", "large"), or rank results ("first", "second", "third").
+                          <br />
+                          <br />
+                          You can specify these features and their rank in two ways:
+                          <br />
+                          1) In the text input box opened by the button to the left, using the format described in the box 
+                          <br />
+                          2) or, in the Dataset Preview table below: use the dropdown boxes to specify ordinal features, then rank them using the drag-and-drop list of unique categories.
+                        </p>
+                      </div>
+                    }
+                    disabled={false}
+                    eventsEnabled={true}
+                    header="Ordinal Features Help"
+                    offset={0}
+                    on="click"
+                    pinned={false}
+                    position="right center"
+                    trigger={
+                      <Icon
+                        as="i"
+                        color="blue"
+                        inverted={true}
+                        name="info circle"
+                        size="large"
+                      />
+                    }
+                  />
+                </FormInput>
+              </GridColumn>
+              <GridColumn>
+                <FormInput
+                  as={[Function]}
+                  control={[Function]}
+                >
+                  <Modal
+                    centered={true}
+                    closeOnDimmerClick={false}
+                    closeOnDocumentClick={false}
+                    closeOnEscape={true}
+                    dimmer={true}
+                    eventPool="Modal"
+                    onClose={[Function]}
+                    onOpen={[Function]}
+                    open={false}
+                    trigger={
+                      <Button
+                        as="button"
+                        className="file-upload-button"
+                        color="blue"
+                        disabled={false}
+                        fluid={true}
+                        inverted={true}
+                        size="small"
+                      >
+                        Set Categorical
+                      </Button>
+                    }
+                  >
+                    <ModalHeader>
+                      Categorical Feature Input
+                    </ModalHeader>
+                    <ModalDescription
+                      style={
+                        Object {
+                          "margin": "1em",
+                          "width": "65%",
+                        }
+                      }
+                    >
+                      <p>
+                        Enter a comma-separated list to specify which features are Categorical.
+                        <br />
+                        This will override selections in the Dataset Preview. 
+                      </p>
+                      <p>
+                        For example:
+                        <br />
+                         
+                        <i>
+                          sex,eye_color,hair_color,disease_state
+                        </i>
+                      </p>
+                      <p>
+                        Ranges - you can specify features using ranges. Each feature name in a range is converted to a column number within the data, and the range is expanded using the column numbers. For example, working from the example above in which we assume the features are present in the data in the same order as listed, entering 
+                        <br />
+                         
+                        <i>
+                          sex-disease_state
+                        </i>
+                        <br />
+                        <br />
+                        would expand to
+                        <br />
+                         
+                        <i>
+                          sex,eye_color,hair_color,disease_state
+                        </i>
+                      </p>
+                      <br />
+                    </ModalDescription>
+                    <Form
+                      as="form"
+                    >
+                      <textarea
+                        className="file-upload-categorical-text-area"
+                        id="categorical_features_text_area_input"
+                        label="Categorical Features"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        placeholder="(No Categorical features have been specified)"
+                        value=""
+                      />
+                    </Form>
+                    <ModalActions>
+                      <Button
+                        as="button"
+                        color="red"
+                        content="Cancel"
+                        inverted={true}
+                        onClick={[Function]}
+                        size="small"
+                      />
+                      <Button
+                        as="button"
+                        color="blue"
+                        content="Accept"
+                        icon="checkmark"
+                        inverted={true}
+                        onClick={[Function]}
+                        positive={true}
+                        size="small"
+                      />
+                    </ModalActions>
+                  </Modal>
+                  <Popup
+                    content={
+                      <div
+                        className="content"
+                      >
+                        <p>
+                          This site is using 'Categorical' to mean a Nominal feature, per custom in the ML community. Categorical features have a discrete number of categories that do not have an intrinsic order. Some examples include sex ("male", "female") or eye color ("brown", "green", "blue"...).
+                          <br />
+                          <br />
+                          You can specify these features in two ways:
+                          <br />
+                          1) In the text input box opened by the button to the left, using the format described in the box 
+                          <br />
+                          2) or, in the Dataset Preview table below: use the dropdown boxes to specify categorical features.
+                        </p>
+                      </div>
+                    }
+                    disabled={false}
+                    eventsEnabled={true}
+                    header="Categorical Features Help"
+                    offset={0}
+                    on="click"
+                    pinned={false}
+                    position="right center"
+                    trigger={
+                      <Icon
+                        as="i"
+                        color="blue"
+                        inverted={true}
+                        name="info circle"
+                        size="large"
+                      />
+                    }
+                  />
+                </FormInput>
+              </GridColumn>
+              <GridColumn>
+                <FormInput
+                  as={[Function]}
+                  control={[Function]}
+                >
+                  <Button
+                    as="button"
+                    className="file-upload-button"
+                    color="blue"
+                    content="Set All To..."
+                    fluid={true}
+                    inverted={true}
+                    onClick={[Function]}
+                    size="small"
+                  />
+                  <div
+                    style={
+                      Object {
+                        "display": "none",
+                      }
+                    }
+                  >
+                    <Menu
+                      open={false}
+                      vertical={true}
+                    >
+                      <MenuItem
+                        content="Categorical"
+                        onClick={[Function]}
+                      />
+                      <MenuItem
+                        content="Ordinal"
+                        onClick={[Function]}
+                      />
+                      <MenuItem
+                        content={
+                          <React.Fragment>
+                            Numeric / Categorical
+                            <div>
+                              (auto-detect)
+                            </div>
+                          </React.Fragment>
+                        }
+                        onClick={[Function]}
+                      />
+                    </Menu>
+                  </div>
+                </FormInput>
+              </GridColumn>
+            </GridRow>
+          </Grid>
+        </div>
+        <Divider
+          horizontal={true}
+          inverted={true}
+        >
+          <Header
+            as="h4"
+            inverted={true}
+          >
+            Submit
+          </Header>
+        </Divider>
+        <FormInput
+          as={[Function]}
+          control={[Function]}
+        >
+          <Button
+            as="button"
+            className="file-upload-button"
+            color="blue"
+            content="Submit Dataset"
+            icon="upload"
+            inverted={true}
+            onClick={[Function]}
+          />
+        </FormInput>
+      </div>
+    </Segment>
+  </Form>
+  <p
+    style={
+      Object {
+        "display": "none",
+      }
+    }
+  >
+     hi 
+  </p>
+</div>
+`;
diff --git a/lab/webapp/src/components/FileUpload/fileUpload.test.js b/lab/webapp/src/components/FileUpload/fileUpload.test.js
index fb7d51d05..6fe9b322a 100644
--- a/lab/webapp/src/components/FileUpload/fileUpload.test.js
+++ b/lab/webapp/src/components/FileUpload/fileUpload.test.js
@@ -45,46 +45,67 @@ import Adapter from 'enzyme-adapter-react-16';
 configure({ adapter: new Adapter() });
 
 
-// mock out stuff fileupload depends on
-//jest.mock('../SceneHeader', () => 'Scene_Header');
-
+//// NOTE on getting state
+//
+// The enzyme wrapper method 'state' (and related methods) is not working on mount(<my component>).
+// I think it's because the component is wrapped with redux connect().
+// So you can use shallow(<my component>).dive().state(),
+//  or more direclty shallow(<my component>).dive().instance().state
+// I don't know which is better.
+//
 describe('basic testing of fileupload react component', () => {
   let store = mockStore(initialState);
-  let testFileUpload;
-  let tree;
+  let fullDom;
+  let instance;
   let fakeFile = {target: {files: [{name: 'iris.csv'}]}};
   let fakeFileTsv = {target: {files: [{name: 'iris.tsv'}]}};
   let badFakeFile = {target: {files: [{name: 'iris.txt'}]}};
   // basic bookkeeping before/after each test; mount/unmount component, should be
   // similar to how piece will actually work in browser
   beforeEach(() => {
-    testFileUpload = mount(<FileUpload store={store} testProp='hello' />);
-    //tree = renderer.create(<FileUpload store={store} />).toJSON();
+    fullDom = mount(<FileUpload store={store} testProp='hello' />);
+    instance = shallow(<FileUpload store={store}/>).dive().instance();
   })
   afterEach(() => {
-    testFileUpload.unmount();
+    fullDom.unmount();
+  })
+
+  //test that the componement instance is viable
+  it('test instance', () => {
+    //NOTE with react-redux, need 'dive()' to get the 'true' (not sure of the term) component instance.
+    expect(instance).not.toEqual(null);
+    //Test calling a method on the instance
+    expect(instance.instanceTest()).toEqual('foobar');
+    //Test retrieving state from the instance. See note above about accessing state.
+    expect(instance.state.testStateValue).toEqual('foobar');
   })
 
   // test for existence
+  //NOTE 'it' is an alias for 'test'
   it('create mock fileupload component, test for existence', () => {
-    //const testFileUpload = shallow(<FileUpload store={store} testProp='hello' />);
-    testFileUpload.setProps({ name: 'bar' });
-    //let tree = component.toJSON();
-    expect(testFileUpload.name()).toEqual('Connect(FileUpload)');
-    expect(testFileUpload.props().testProp).toEqual('hello');
-    expect(testFileUpload.props().name).toEqual('bar');
-    // test snapshot
-    //expect(tree).toMatchSnapshot();
+    //console.log('jest console log!'); //this works, outputs to console at test script runtime
+    fullDom.setProps({ name: 'bar' });
+    expect(fullDom.name()).toEqual('Connect(FileUpload)');
+    expect(fullDom.props().testProp).toEqual('hello');
+    expect(fullDom.props().name).toEqual('bar');
+  })
+
+  //snapshot of component
+  //I believe shallow is better since it won't include child components
+  it('full component snapshot', () => {
+    expect(shallow(<FileUpload store={store}/>).dive()).toMatchSnapshot();
   })
 
   it('simple change to component state', () => {
-    expect(testFileUpload.props().name).toBeUndefined();
-    expect(testFileUpload.state('dependentCol')).toBeUndefined();
-    testFileUpload.setState({dependentCol: 'class'})
-    expect(testFileUpload.state('dependentCol')).toEqual('class');
+    expect(fullDom.props().name).toBeUndefined();
+    expect(fullDom.state('dependentCol')).toBeUndefined();
+    fullDom.setState({dependentCol: 'class'})
+    expect(fullDom.state('dependentCol')).toEqual('class');
   })
 
   it('TODO - simulate user entering data with file upload form inputs', () => {
+    expect(fullDom.find('FileUpload').length).toEqual(1);
+
     // asked about how to simulate user actions here, using enzyme simulate doesn't quite
     // work, using 'onChange' prop to fake user action:
     // https://stackoverflow.com/questions/55638365/how-to-access-internal-pieces-of-react-component-and-mock-api-call-with-jest-e/55641884#55641884
@@ -93,66 +114,64 @@ describe('basic testing of fileupload react component', () => {
     // tested (which they do) & update component react state (which doesn't appear to happen)
     // this might be a limitation of enzyme
 
-//    expect(testFileUpload.find(FileUpload)).to.have.lengthOf(1);
 /*
-
     // this should create a browser console error - using javascript library to
     // create a file preview which attempts to parse given input, if input not a
     // file/blob the error is generated. The file onChange handler attempts to
     // create the file preview and set the selected file obj and file name in
     // the component's react state
 
-    testFileUpload.find('input').at(0).prop('onChange')(fakeFile);
+    fullDom.find('input').at(0).prop('onChange')(fakeFile);
 
     // update() is supposed to forceUpdate/re-render the component
-    testFileUpload.update();
+    fullDom.update();
     // manually updating, component react state does not contain anything, in any
     // case need to call update() to access elements by html dom ID
 
 
     // the following is a standin for user input entering metadata
 
-    let depColTextField = testFileUpload.find('#dependent_column_text_field_input').at(0);
+    let depColTextField = fullDom.find('#dependent_column_text_field_input').at(0);
     // still need to access with 'at', using find('#dependent_column_text_field_input')
     // returns 4 nodes somehow
     depColTextField.prop('onChange')(
       {target:{value: 'test_class'}},
       {value:'test dep input'}
     );
-    let ordTextArea = testFileUpload.find('#ordinal_features_text_area_input');
+    let ordTextArea = fullDom.find('#ordinal_features_text_area_input');
     ordTextArea.prop('onChange')(
       {target:{value: {testOrdKey: 'testHello'}}},
       {value:'test ord input'}
     );
-    let catTextArea = testFileUpload.find('#categorical_features_text_area_input');
+    let catTextArea = fullDom.find('#categorical_features_text_area_input');
     catTextArea.prop('onChange')(
       {target:{value: 'testCatHello1, testCatHello2'}},
       {value:'test cat input'}
     );
     // cheating for now and just updating component state directly...
-    testFileUpload.setState({
+    fullDom.setState({
       selectedFile: fakeFile.target.files[0],
       ordinalFeatures: {testOrdKey: 'testHello'},
       catFeatures: 'testCatHello1, testCatHello2',
       dependentCol: 'test_class'
     });
-    //console.log('test state: ', testFileUpload.state());
-    //console.log('test file: ', testFileUpload.state('selectedFile'));
+    //console.log('test state: ', fullDom.state());
+    //console.log('test file: ', fullDom.state('selectedFile'));
     // ...and checking for state which was just manually set above
-    expect(testFileUpload.state('selectedFile')).toEqual(fakeFile.target.files[0]);
-    expect(testFileUpload.state('ordinalFeatures')).toEqual({testOrdKey: 'testHello'});
-    expect(testFileUpload.state('catFeatures')).toEqual('testCatHello1, testCatHello2');
-    expect(testFileUpload.state('dependentCol')).toEqual('test_class');
+    expect(fullDom.state('selectedFile')).toEqual(fakeFile.target.files[0]);
+    expect(fullDom.state('ordinalFeatures')).toEqual({testOrdKey: 'testHello'});
+    expect(fullDom.state('catFeatures')).toEqual('testCatHello1, testCatHello2');
+    expect(fullDom.state('dependentCol')).toEqual('test_class');
   */
   })
 
   it('TODO - try uploading non csv/tsv file type', () => {
 /*
-    testFileUpload.find('input').at(0).prop('onChange')(badFakeFile);
-    testFileUpload.update();
-    //expect(testFileUpload.state('selectedFile')).toEqual(badFakeFile.target.files[0]);
-    expect(testFileUpload.state('selectedFile')).toBeUndefined();
-    let formBody = testFileUpload.find('#file-upload-form-input-area');
+    fullDom.find('input').at(0).prop('onChange')(badFakeFile);
+    fullDom.update();
+    //expect(fullDom.state('selectedFile')).toEqual(badFakeFile.target.files[0]);
+    expect(fullDom.state('selectedFile')).toBeUndefined();
+    let formBody = fullDom.find('#file-upload-form-input-area');
 
     // check for CSS style which hides form
     expect(formBody.hasClass('file-upload-form-hide-inputs')).toEqual(true);
@@ -208,19 +227,19 @@ describe('basic testing of fileupload react component', () => {
 
   it('TODO - Select tsv file - expect form to be displayed', () => {
 /*    
-    testFileUpload.find('input').at(0).prop('onChange')(fakeFileTsv);
+    fullDom.find('input').at(0).prop('onChange')(fakeFileTsv);
 
     // update() is supposed to forceUpdate/re-render the component
-    testFileUpload.update();
-    testFileUpload.setState({
+    fullDom.update();
+    fullDom.setState({
       selectedFile: fakeFileTsv.target.files[0]
     });
-    let formBody = testFileUpload.find('#file-upload-form-input-area');
+    let formBody = fullDom.find('#file-upload-form-input-area');
 
     // check for CSS style which hides form
     expect(formBody.hasClass('file-upload-form-hide-inputs')).toEqual(false);
     expect(formBody.hasClass('file-upload-form-show-inputs')).toEqual(true);
-    expect(testFileUpload.state('selectedFile')).toEqual(fakeFileTsv.target.files[0]);
+    expect(fullDom.state('selectedFile')).toEqual(fakeFileTsv.target.files[0]);
 */
   })
 
@@ -298,7 +317,7 @@ describe('basic testing of fileupload react component', () => {
       catCols: ['a', 'b', 'c', '4'],
       ordFeats: ''
     };
-    // use instance to get access to inner function
+    // use instance to get access to inner f
     const instance = shallowFileUpload.instance();
     // create spy, check function gets called
     const spy = jest.spyOn(instance, 'generateFileData');
@@ -324,8 +343,7 @@ describe('basic testing of fileupload react component', () => {
 //
 //         let store = mockStore(initialState);
 //         const shallowFileUpload = shallow(<FileUpload store={store}/>).dive();
-//         let testFileUpload;
-//         let tree;
+//         let fullDom;
 //         let fakeFile = {target: {files: [{name: 'iris.csv'}]}};
 //         const expectedInput = {
 //           depCol: 'test_class',
@@ -385,11 +403,11 @@ describe('basic testing of fileupload react component', () => {
 import { uploadFile } from '../../utils/__mocks__/apiHelper';
 describe('mock network request', () => {
   let store = mockStore(initialState);
-  let testFileUpload;
+  let fullDom;
 
   beforeEach(() => {
-    //testFileUpload = mount(<FileUpload store={store} testProp='hello' />);
-    testFileUpload = shallow(<FileUpload store={store} />).dive();
+    //fullDom = mount(<FileUpload store={store} testProp='hello' />);
+    fullDom = shallow(<FileUpload store={store} />).dive();
   })
 
   const fakeDatasets = [
@@ -411,8 +429,8 @@ describe('mock network request', () => {
     }
   ];
 
-  it('testing promise for successful case, proper dependent_col', () => {
-    expect.assertions(1);
+  it('TODO - what is this testing??? - testing promise for successful case, proper dependent_col', () => {
+    expect.assertions(1); //this expects one jest assertion to be made during this test. good for testing the promises are run
     //return uploadDataset(fakeDataset).then(data => expect(data.name).toEqual('iris.csv'));
     //return uploadFile('fakeurl').then(data => expect(data.name).toEqual('iris.csv'));
 
@@ -420,6 +438,12 @@ describe('mock network request', () => {
     // flag in server response to control logic for UI to display message on error
     // or page redirection on success, not sure how to get at those pieces with
     // this testing framework. DOM does not seem to be updating correctly
+    //
+    //NOTE Returning a promise tells jest to wait for the promise resolution before finishing the test.
+    //Test will fail if promise is rejected.
+    //
+    //MGS - I don't see what this is testing. It's a mock api call and has nothing to do
+    // with FileUpload componenet.
     return uploadFile(fakeDatasets[0])
       .then(data => expect(data.id).toEqual(7654321));
   })
@@ -433,7 +457,7 @@ describe('mock network request', () => {
         // fake setting state, normally occurs in upload handler function in
         // FileUpload component after promise making actual upload resolves
 
-        // testFileUpload.setState({
+        // fullDom.setState({
         //   errorResp: e,
         //   serverResp: e
         // });
@@ -442,9 +466,9 @@ describe('mock network request', () => {
         // to 'true' in case of error response, not sure if this is incorrect method
         // of testing how UI should look based on react component state
 
-        // testFileUpload = shallow(<FileUpload store={store} />).dive();
-        // testFileUpload.update();
-        // let popup = testFileUpload.find('Popup').at(0);
+        // fullDom = shallow(<FileUpload store={store} />).dive();
+        // fullDom.update();
+        // let popup = fullDom.find('Popup').at(0);
         // console.log('popup props', popup.props());
       });
   })
@@ -454,57 +478,49 @@ describe('mock network request', () => {
 // cover two scenarios - upload success and failure
 
 // this test examines styling based on mock user input
-describe('basic file upload flow', () => {
+describe('DONE - basic file upload flow with fake file', () => {
 
   let store = mockStore(initialState);
-  let testFileUpload;
+  let testShallow;
 
   beforeEach(() => {
     // https://github.com/airbnb/enzyme/issues/1002
-    testFileUpload = shallow(<FileUpload store={store} />).dive();
+    testShallow = shallow(<FileUpload store={store} />).dive();
     // having some trouble using mount, updating state, & checking for expected UI changes
-    //testFileUpload = mount(<FileUpload store={store} />);
+    //fullDom = mount(<FileUpload store={store} />);
   })
 
   // the intended behavior of this component is to hide the fields to enter info
   // about the file being uploaded until a file with a filename has been selected
-  it('check UI form is hidden w/o a file selection', () => {
-    let formBody = testFileUpload.find('#file-upload-form-input-area');
+  it('DONE - check UI form is hidden w/o a file selection', () => {
+    let formBody = testShallow.find('#file-upload-form-input-area');
+    expect(formBody.length).toEqual(1)
 
     // check for CSS style which hides form
     expect(formBody.hasClass('file-upload-form-hide-inputs')).toEqual(true);
     expect(formBody.hasClass('file-upload-form-show-inputs')).toEqual(false);
   })
 
-  it('test selecting file and displaying UI form after file selection', () => {
+  it('DONE - test selecting file and displaying UI form after file selection', () => {
     // fake user submission by entering info directly into component state
     let fileName = 'iris.csv';
     let testFile = {
       name: fileName
     };
-    let depCol = 'class';
-    let catFeatures = '';
-    let ordFeatures = {};
-    let formBody = testFileUpload.find('#file-upload-form-input-area');
+    let formBody = testShallow.find('#file-upload-form-input-area');
 
     // check for CSS style which hides form
     expect(formBody.hasClass('file-upload-form-hide-inputs')).toEqual(true);
 
-    // essentially fake user input
-    testFileUpload.setState({
-      selectedFile: testFile,
-      dependentCol: depCol,
-      catFeatures: catFeatures,
-      ordinalFeatures: ordFeatures
+    // Fake that a file has been loaded.
+    // UI only checks for a valid filename field to change state of what's shown.
+    testShallow.setState({
+      selectedFile: testFile
     });
-    //expect(testFileUpload.state('selectedFile')).toBeDefined();
-    //expect(testFileUpload.state('selectedFile').name).toEqual('iris.csv');
-    // force rerender - component is wrapped in redux stuff (Provider), don't think it will rerender
-    //testFileUpload.update();
 
     // not sure but must be getting new copy of enzyme/react node with expected
     // CSS class after state changes by re-assigning variable
-    formBody = testFileUpload.find('#file-upload-form-input-area');
+    formBody = testShallow.find('#file-upload-form-input-area');
 
     // user info is entered in form, check if form input area is visible
     // look for css styling to display form
@@ -512,3 +528,102 @@ describe('basic file upload flow', () => {
   })
 
 })
+
+describe('test with mock file blob', () => {
+  let store = mockStore(initialState);
+  let fullDom;
+  let instance;
+
+  //test blob
+  let featureNames=['col1','col2','col3','class'];
+  let data= featureNames.join()+`\n
+            one,cat,1,yes\n
+            three,dog,2,no\n
+            two,cat,3,yes
+            one,bird,2.5,42`;
+  let filename = 'testFile.csv';
+  let blob = new Blob([data], {type: 'text/csv'});
+  blob.lastModifiedDate = new Date();
+  let testFileBlob = new File([blob], filename);
+
+  // Use beforeAll so that the blob stays loaded w/out having
+  // to do all the tests in the mocked callback below.
+  beforeAll(() => {
+    fullDom = mount(<FileUpload store={store} />);
+    instance = shallow(<FileUpload store={store}/>).dive().instance();
+  })
+  afterAll(() => {
+    fullDom.unmount();
+  })
+
+  it('load simulated file blob', done => {
+    // Mock the method FileUpload.handleSelectedFileCompletedStub for unit testing.
+    // It gets called when file blob
+    // is loaded successfully, just for unit testing since the file loader
+    // calls a callback when complete, and thus otherwise wouldn't be
+    // handled before this test copmletes. The 'done' method here is
+    // provided by jest to handle async testing.
+    // Messy but it works.
+    const mockcb = jest.fn( () => { 
+      // Test that it finished loading successfully
+      expect(mockcb.mock.calls.length).toBe(1);
+      
+      // Test that the file object is set
+      expect(instance.state.selectedFile.name).toEqual(filename); 
+
+      // Tell jest we're done with this test. 
+      done();       
+    });
+    instance.handleSelectedFileCompletedStub = mockcb;
+
+    // Load file obj directly via handler
+    instance.handleSelectedFile([testFileBlob]);
+  }, 15000/* long timeout just in case*/)
+
+  // ** NOTE **
+  // Subsquent tests rely on the wrapper from above still being loaded
+  // and having the test file blob loaded.
+
+  it('test feature behaviors', () => {
+      // Test the auto-assigned feature types and getFeatureType()
+      expect(instance.getFeatureType(featureNames[0])).toEqual(instance.featureTypeCategorical);
+      expect(instance.getFeatureType(featureNames[1])).toEqual(instance.featureTypeCategorical);
+      expect(instance.getFeatureType(featureNames[2])).toEqual(instance.featureTypeNumeric);
+      expect(instance.getFeatureType(featureNames[3])).toEqual(instance.featureTypeCategorical);
+
+      // Test assigning a categorical feature to type numeric.
+      // Should silently reject and not change to numeric.
+      instance.setFeatureType(featureNames[0], instance.featureTypeNumeric);
+      expect(instance.getFeatureType(featureNames[0])).toEqual(instance.featureTypeCategorical);
+
+      // Get array of categorical features
+      let cats = [featureNames[0],featureNames[1],featureNames[3]];
+      expect(instance.getCatFeatures()).toEqual(cats);
+
+      // Dependent column should be unset
+      expect(instance.getDependentColumn()).toEqual(dep);
+      
+      // Assigning dependent column
+      let dep = featureNames[3];
+      instance.setFeatureType(dep, instance.featureTypeDependent);
+      expect(instance.getFeatureType(dep)).toEqual(instance.featureTypeDependent);
+      expect(instance.getDependentColumn()).toEqual(dep);
+      
+      // Dependent column should no longer be included as categorical
+      let catsnew = [featureNames[0],featureNames[1]];
+      expect(instance.getCatFeatures().find(el => el === dep)).toEqual(undefined);
+
+      // No ordinal features should be specified. Object should be empty
+      expect(Object.keys(instance.ordinalFeaturesObject).length).toEqual(0); why is ordinalFeaturesObject coming thru as undefined instead of {}??
+
+      // Set ordinal feature, w/out specifying rank
+      let ord = featureNames[0];
+      instance.setFeatureType(ord, instance.featureTypeOrdinal);
+      expect(instance.getFeatureType(dep)).toEqual(instance.featureTypeOrdinal);
+      let uniqueVals = ['one','three','two'];
+      expect(instance.ordinalFeaturesObject).toEqual({ord: uniqueVals});
+      // Should not be included as a categorical feature
+
+  })
+
+})
\ No newline at end of file
diff --git a/lab/webapp/src/components/FileUpload/index.js b/lab/webapp/src/components/FileUpload/index.js
index c82837b24..44c8c5354 100644
--- a/lab/webapp/src/components/FileUpload/index.js
+++ b/lab/webapp/src/components/FileUpload/index.js
@@ -181,7 +181,7 @@ class FileUpload extends Component {
       ordinalFeaturesUserTextModalOpen: false,
       /** {object} Object used as dictionary to track the features designated as ordinal by user via dataset preview UI.
        *  key: feature name from dataPreview
-       *  value: string-array holding possibly-ordered values for the feature.
+       *  value: string-array holding possibly-ordered unique values for the feature.
        *  Will be empty object if none defined.
        *  Gets updated with new order as user orders them using the UI in dataset preview.
        *  Using objects as dictionary: https://pietschsoft.com/post/2015/09/05/javascript-basics-how-to-create-a-dictionary-with-keyvalue-pairs
@@ -198,6 +198,8 @@ class FileUpload extends Component {
       ordinalFeatureToRankValues: [],
       allFeaturesMenuOpen: false,
       predictionType: this.defaultPredictionType,
+      /** {string} Used in unit testing to test state retrieval */
+      testStateValue: 'foobar'
     }
   }
 
@@ -242,6 +244,11 @@ class FileUpload extends Component {
     }
   }
 
+  /** Simple test method for unit testing */
+  instanceTest(){
+    return 'foobar';
+  }
+  
   /** Helper routine for debugging. Get elapsed time in sec from 
    * either init or from the previous call to this method.
    */
@@ -488,6 +495,11 @@ handleCatFeaturesUserTextCancel() {
     this.setState({processingFileForPreview: false});
   }
 
+  /** Stub method that's mocked in unit testing */
+  handleSelectedFileCompletedStub(){
+    //do nothing
+  }
+
   /**
    * Event handler for selecting files, takes user file from html file input, stores
    * selected file in component react state, generates file preview and stores that
@@ -521,6 +533,10 @@ handleCatFeaturesUserTextCancel() {
   
         if(this.isDevBuild)
           console.log( this.getElapsedTime() + " - done with initDatasetPreview.");
+
+        //Call this method for use in unit testing, to know we've completed successfully here,
+        // and can inspect the new state
+        this.handleSelectedFileCompletedStub();
       }
     };
 
@@ -528,8 +544,6 @@ handleCatFeaturesUserTextCancel() {
     if(files && files[0]) {
       // immediately try to get dataset preview on file input html element change
       // need to be mindful of garbage data/files
-      //console.log(typeof event.target.files[0]);
-      //console.log(event.target.files[0]);
       let uploadFile = files[0]
       let fileExt = uploadFile.name.split('.').pop();
 
@@ -667,7 +681,7 @@ handleCatFeaturesUserTextCancel() {
   /**
    * For the passed feature name, return its type
    * @param {string} feature 
-   * @returns {string} feature type (ordinal, categorical, numeric)
+   * @returns {string} feature type (as returned by one of gettors: featureTypeOrdinal, ...Categorical, ...Numeric, ...Dependent)
    */
   getFeatureType(feature) {
     let i = this.getFeatureIndex(feature);
@@ -1755,6 +1769,7 @@ handleCatFeaturesUserTextCancel() {
     }
     
     //Progress spinner if we're loading and processing a file
+    //
     if( this.state.processingFileForPreview){
       return <Loader active inverted size="large" content="Processing your file..." />;      
     }
@@ -1789,13 +1804,14 @@ handleCatFeaturesUserTextCancel() {
     }
 
     //Main UI elements
+    //
     return (
       <div> 
         <SceneHeader header="Upload Datasets"/>
         <Form inverted>
           <Segment className="file-upload-segment">
             
-            {/* Handle file input */}
+            {/* File dropzone/chooser */}
             {fileInputElem}
 
             <div
@@ -1811,6 +1827,7 @@ handleCatFeaturesUserTextCancel() {
           
             {/*dropdowns for selecting dep. feature and prediction type*/}
             {userDatasetOptions}
+
             {/*buttons for specifying feature types*/}
             <Form.Field
                 label="Features Types"
diff --git a/tests/unit/js_tests.sh b/tests/unit/js_tests.sh
index af7579133..2237ffb2e 100644
--- a/tests/unit/js_tests.sh
+++ b/tests/unit/js_tests.sh
@@ -12,3 +12,5 @@ npm run test
 echo "starting '/lab/webapp' jest reports"
 cd "/appsrc/lab/webapp/"
 npm run test
+
+cd "/appsrc"

From bf67a1fd0401debdae9d1e2dabeda6dee508fa18 Mon Sep 17 00:00:00 2001
From: Michael Stauffer <mgstauff@gmail.com>
Date: Mon, 15 Mar 2021 19:56:16 -0400
Subject: [PATCH 2/8] IN PROGRESS FileUpload more tests.

Direct access tests mostly done for feature specification code.
Working on tests for text-based feature specification.
---
 .../__snapshots__/fileUpload.test.js.snap     |   5 +-
 .../components/FileUpload/fileUpload.test.js  | 615 +++++++-----------
 lab/webapp/src/components/FileUpload/index.js |  38 +-
 3 files changed, 266 insertions(+), 392 deletions(-)

diff --git a/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap b/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap
index 969531ac4..1e66908dc 100644
--- a/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap
+++ b/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`basic testing of fileupload react component full component snapshot 1`] = `
+exports[`basic testing of fileupload react component DONE - full component snapshot 1`] = `
 <div>
   <SceneHeader
     header="Submit Datasets"
@@ -14,6 +14,7 @@ exports[`basic testing of fileupload react component full component snapshot 1`]
     >
       <Dropzone
         accept=".csv,.tsv,text/csv,text/tsv"
+        id="file-dropzone"
         multiple={false}
         onDropAccepted={[Function]}
         onDropRejected={[Function]}
@@ -27,6 +28,7 @@ exports[`basic testing of fileupload react component full component snapshot 1`]
         closeOnDocumentClick={false}
         dimmer={true}
         eventPool="Modal"
+        id="error_modal_dialog"
         onClose={[Function]}
         style={
           Object {
@@ -414,6 +416,7 @@ exports[`basic testing of fileupload react component full component snapshot 1`]
                         color="blue"
                         content="Accept"
                         icon="checkmark"
+                        id="cat_features_user_text_accept_button"
                         inverted={true}
                         onClick={[Function]}
                         positive={true}
diff --git a/lab/webapp/src/components/FileUpload/fileUpload.test.js b/lab/webapp/src/components/FileUpload/fileUpload.test.js
index 6fe9b322a..3eb57153b 100644
--- a/lab/webapp/src/components/FileUpload/fileUpload.test.js
+++ b/lab/webapp/src/components/FileUpload/fileUpload.test.js
@@ -56,34 +56,39 @@ configure({ adapter: new Adapter() });
 describe('basic testing of fileupload react component', () => {
   let store = mockStore(initialState);
   let fullDom;
+  let shallowDom;
   let instance;
-  let fakeFile = {target: {files: [{name: 'iris.csv'}]}};
-  let fakeFileTsv = {target: {files: [{name: 'iris.tsv'}]}};
-  let badFakeFile = {target: {files: [{name: 'iris.txt'}]}};
+  let fakeFile = {name: 'iris.csv'};
+  let fakeFileTsv = {name: 'iris.tsv'};
+  let badFakeFile = {name: 'iris.txt'};
   // basic bookkeeping before/after each test; mount/unmount component, should be
   // similar to how piece will actually work in browser
   beforeEach(() => {
     fullDom = mount(<FileUpload store={store} testProp='hello' />);
-    instance = shallow(<FileUpload store={store}/>).dive().instance();
+    //NOTE with react-redux, need 'dive()' to get the 'true' (not sure of the term) component instance.
+    shallowDom = shallow(<FileUpload store={store}/>).dive();
+    instance = shallowDom.instance();
   })
   afterEach(() => {
     fullDom.unmount();
   })
 
   //test that the componement instance is viable
-  it('test instance', () => {
-    //NOTE with react-redux, need 'dive()' to get the 'true' (not sure of the term) component instance.
+  //NOTE 'it' is an alias for 'test'
+  it('DONE - test instance', () => {
     expect(instance).not.toEqual(null);
     //Test calling a method on the instance
     expect(instance.instanceTest()).toEqual('foobar');
     //Test retrieving state from the instance. See note above about accessing state.
     expect(instance.state.testStateValue).toEqual('foobar');
+    expect(shallowDom.state('testStateValue')).toEqual('foobar');
   })
 
   // test for existence
-  //NOTE 'it' is an alias for 'test'
-  it('create mock fileupload component, test for existence', () => {
+  it('DONE - fileupload component, test for existence', () => {
     //console.log('jest console log!'); //this works, outputs to console at test script runtime
+    // Find the component itself
+    expect(fullDom.find(FileUpload)).toHaveLength(1);
     fullDom.setProps({ name: 'bar' });
     expect(fullDom.name()).toEqual('Connect(FileUpload)');
     expect(fullDom.props().testProp).toEqual('hello');
@@ -92,305 +97,50 @@ describe('basic testing of fileupload react component', () => {
 
   //snapshot of component
   //I believe shallow is better since it won't include child components
-  it('full component snapshot', () => {
+  it('DONE - full component snapshot', () => {
     expect(shallow(<FileUpload store={store}/>).dive()).toMatchSnapshot();
   })
 
-  it('simple change to component state', () => {
-    expect(fullDom.props().name).toBeUndefined();
-    expect(fullDom.state('dependentCol')).toBeUndefined();
-    fullDom.setState({dependentCol: 'class'})
-    expect(fullDom.state('dependentCol')).toEqual('class');
-  })
+  // the intended behavior of this component is to hide the fields to enter info
+  // about the file being uploaded until a file with a filename has been selected
+  it('DONE - check UI form is hidden w/o a file selection', () => {
+    let formBody = shallowDom.find('#file-upload-form-input-area');
+    expect(formBody.length).toEqual(1)
 
-  it('TODO - simulate user entering data with file upload form inputs', () => {
-    expect(fullDom.find('FileUpload').length).toEqual(1);
-
-    // asked about how to simulate user actions here, using enzyme simulate doesn't quite
-    // work, using 'onChange' prop to fake user action:
-    // https://stackoverflow.com/questions/55638365/how-to-access-internal-pieces-of-react-component-and-mock-api-call-with-jest-e/55641884#55641884
-
-    // these actions are supposed to tigger event handlers in the component being
-    // tested (which they do) & update component react state (which doesn't appear to happen)
-    // this might be a limitation of enzyme
-
-/*
-    // this should create a browser console error - using javascript library to
-    // create a file preview which attempts to parse given input, if input not a
-    // file/blob the error is generated. The file onChange handler attempts to
-    // create the file preview and set the selected file obj and file name in
-    // the component's react state
-
-    fullDom.find('input').at(0).prop('onChange')(fakeFile);
-
-    // update() is supposed to forceUpdate/re-render the component
-    fullDom.update();
-    // manually updating, component react state does not contain anything, in any
-    // case need to call update() to access elements by html dom ID
-
-
-    // the following is a standin for user input entering metadata
-
-    let depColTextField = fullDom.find('#dependent_column_text_field_input').at(0);
-    // still need to access with 'at', using find('#dependent_column_text_field_input')
-    // returns 4 nodes somehow
-    depColTextField.prop('onChange')(
-      {target:{value: 'test_class'}},
-      {value:'test dep input'}
-    );
-    let ordTextArea = fullDom.find('#ordinal_features_text_area_input');
-    ordTextArea.prop('onChange')(
-      {target:{value: {testOrdKey: 'testHello'}}},
-      {value:'test ord input'}
-    );
-    let catTextArea = fullDom.find('#categorical_features_text_area_input');
-    catTextArea.prop('onChange')(
-      {target:{value: 'testCatHello1, testCatHello2'}},
-      {value:'test cat input'}
-    );
-    // cheating for now and just updating component state directly...
-    fullDom.setState({
-      selectedFile: fakeFile.target.files[0],
-      ordinalFeatures: {testOrdKey: 'testHello'},
-      catFeatures: 'testCatHello1, testCatHello2',
-      dependentCol: 'test_class'
-    });
-    //console.log('test state: ', fullDom.state());
-    //console.log('test file: ', fullDom.state('selectedFile'));
-    // ...and checking for state which was just manually set above
-    expect(fullDom.state('selectedFile')).toEqual(fakeFile.target.files[0]);
-    expect(fullDom.state('ordinalFeatures')).toEqual({testOrdKey: 'testHello'});
-    expect(fullDom.state('catFeatures')).toEqual('testCatHello1, testCatHello2');
-    expect(fullDom.state('dependentCol')).toEqual('test_class');
-  */
+    // check for CSS style which hides form
+    expect(formBody.hasClass('file-upload-form-hide-inputs')).toEqual(true);
+    expect(formBody.hasClass('file-upload-form-show-inputs')).toEqual(false);
   })
-
-  it('TODO - try uploading non csv/tsv file type', () => {
-/*
-    fullDom.find('input').at(0).prop('onChange')(badFakeFile);
-    fullDom.update();
-    //expect(fullDom.state('selectedFile')).toEqual(badFakeFile.target.files[0]);
-    expect(fullDom.state('selectedFile')).toBeUndefined();
+  
+  it('TODO - try selecting non-csv/tsv file type', () => {
+
+    let dropzoneButton = fullDom.find("#file-dropzone");
+    expect(dropzoneButton).toHaveLength(1);
+    // Simulate callback receiving bad file obj
+    dropzoneButton.at(0).prop('onDropAccepted')([badFakeFile]);
+    // Should not have changed file object
+    expect(shallowDom.state('selectedFile')).toBeNull();
+    // Check the UI isn't showing for file specifications
     let formBody = fullDom.find('#file-upload-form-input-area');
-
     // check for CSS style which hides form
     expect(formBody.hasClass('file-upload-form-hide-inputs')).toEqual(true);
     expect(formBody.hasClass('file-upload-form-show-inputs')).toEqual(false);
-*/
   })
-
+    
+  //TODO - redo these
   it('TODO - try testing generateFileData - good input', () => {
-/*
-    // use dive() to get at inner FileUpload class functions -
-    // https://github.com/airbnb/enzyme/issues/208#issuecomment-292631244
-    const shallowFileUpload = shallow(<FileUpload store={store}/>).dive();
-    // all input from user will be read as strings
-    const fakeUserInput = {
-      depCol: 'target_class',
-      catCols: 'a, b, c',
-      ordFeats: '{"species": ["cat", "dog", "bird"]}'
-    };
-    // add fake file with filename so generateFileData will do something, if
-    // no file & filename present generateFileData returns blank/empty formData
-    shallowFileUpload.setState({
-      selectedFile: fakeFile.target.files[0],
-      dependentCol: fakeUserInput.depCol,
-      catFeatures: fakeUserInput.catCols,
-      ordinalFeatures: fakeUserInput.ordFeats
-    });
-
-    // expect list of comma separated cat cols to get parsed with string split
-    // dependent columns will be stored as is (type string)
-    // ordFeats will parse given JSON
-    const expectedInput = {
-      depCol: 'target_class',
-      catCols: ['a', 'b', 'c'],
-      ordFeats: {
-        species: ["cat", "dog", "bird"]
-      }
-    };
-    // use instance to get access to inner function
-    const instance = shallowFileUpload.instance();
-    // create spy, check function gets called
-    const spy = jest.spyOn(instance, 'generateFileData');
-    const testData = instance.generateFileData(); // FormData
-    // get stuff stored in returned formdata, stingified in preparation to make
-    // network request
-    const metadata = JSON.parse(testData.get('_metadata'));
-    expect(spy).toBeCalled();
-    // value of _metadata defined in generateFileData
-    expect(metadata.dependent_col).toEqual(expectedInput.depCol);
-    expect(metadata.categorical_features).toEqual(expectedInput.catCols);
-    expect(metadata.ordinal_features).toEqual(expectedInput.ordFeats);
-*/
-  })
-
-  it('TODO - Select tsv file - expect form to be displayed', () => {
-/*    
-    fullDom.find('input').at(0).prop('onChange')(fakeFileTsv);
-
-    // update() is supposed to forceUpdate/re-render the component
-    fullDom.update();
-    fullDom.setState({
-      selectedFile: fakeFileTsv.target.files[0]
-    });
-    let formBody = fullDom.find('#file-upload-form-input-area');
 
-    // check for CSS style which hides form
-    expect(formBody.hasClass('file-upload-form-hide-inputs')).toEqual(false);
-    expect(formBody.hasClass('file-upload-form-show-inputs')).toEqual(true);
-    expect(fullDom.state('selectedFile')).toEqual(fakeFileTsv.target.files[0]);
-*/
   })
 
   it('TODO - try testing generateFileData - bad input, no ordinal features', () => {
-/*
-    // use dive() to get at inner FileUpload class functions -
-    // https://github.com/airbnb/enzyme/issues/208#issuecomment-292631244
-    const shallowFileUpload = shallow(<FileUpload store={store}/>).dive();
-    // all input from user will be read as strings
-    const fakeUserInput = {
-      depCol: 'target_c@#$@#$',
-      catCols: 'a, b, c   , 4,,, ,',
-      ordFeats: ''
-    };
-    // add fake file with filename so generateFileData will do something, if
-    // no file & filename present generateFileData returns blank/empty formData
-    shallowFileUpload.setState({
-      selectedFile: fakeFileTsv.target.files[0],
-      dependentCol: fakeUserInput.depCol,
-      catFeatures: fakeUserInput.catCols,
-      ordinalFeatures: fakeUserInput.ordFeats
-    });
 
-    // expect list of comma separated cat cols to get parsed with string split
-    //  (remove whitespace and empty strings)
-    // dependent columns will be stored as is (type string)
-    // ordFeats will parse given JSON, if not proper JSON return empty obj
-    const expectedInput = {
-      depCol: 'target_c@#$@#$',
-      catCols: ['a', 'b', 'c', '4'],
-      ordFeats: ''
-    };
-    // use instance to get access to inner function
-    const instance = shallowFileUpload.instance();
-    // create spy, check function gets called
-    const spy = jest.spyOn(instance, 'generateFileData');
-    const testData = instance.generateFileData(); // FormData
-    // get stuff stored in returned formdata, stingified in preparation to make
-    // network request
-    const metadata = JSON.parse(testData.get('_metadata'));
-    expect(spy).toBeCalled();
-    // value of _metadata defined in generateFileData
-    expect(metadata.dependent_col).toEqual(expectedInput.depCol);
-    expect(metadata.categorical_features).toEqual(expectedInput.catCols);
-    expect(metadata.ordinal_features).toEqual(expectedInput.ordFeats);
-*/
   })
 
   it('TODO - try testing generateFileData - bad input, with ordinal features', () => {
-/*
-    // use dive() to get at inner FileUpload class functions -
-    // https://github.com/airbnb/enzyme/issues/208#issuecomment-292631244
-    const shallowFileUpload = shallow(<FileUpload store={store}/>).dive();
-    // all input from user will be read as strings
-    const fakeUserInput = {
-      depCol: 'target_c@#$@#$',
-      catCols: 'a, b, c   , 4,,, ,',
-      ordFeats: '{"species": ["cat", "dog", "bird"]}{"missing_comma": ["one","two"]}'
-    };
-    // add fake file with filename so generateFileData will do something, if
-    // no file & filename present generateFileData returns blank/empty formData
-    shallowFileUpload.setState({
-      selectedFile: fakeFile.target.files[0],
-      dependentCol: fakeUserInput.depCol,
-      catFeatures: fakeUserInput.catCols,
-      ordinalFeatures: fakeUserInput.ordFeats
-    });
 
-    // expect list of comma separated cat cols to get parsed with string split
-    //  (remove whitespace and empty strings)
-    // dependent columns will be stored as is (type string)
-    // ordFeats will parse given JSON, if not proper JSON return empty obj
-    const expectedInput = {
-      depCol: 'target_c@#$@#$',
-      catCols: ['a', 'b', 'c', '4'],
-      ordFeats: ''
-    };
-    // use instance to get access to inner f
-    const instance = shallowFileUpload.instance();
-    // create spy, check function gets called
-    const spy = jest.spyOn(instance, 'generateFileData');
-    const testData = instance.generateFileData(); // FormData
-    // returned content from generateFileData should be object containing error
-    //console.log('error test: ', testData);
-    expect(testData.errorResp).toBeDefined();
-    expect(testData.errorResp).toEqual('SyntaxError: Unexpected token { in JSON at position 35');
-*/
   })
 }) //describe
 
-// 
-// describe('testing user input with table', () => {
-//   describe.each`
-//     testname | dependent_column | categorical_cols | ordinal_features | expected_cat | expected_ord
-//     ${`Good input - no cat or ord`} | ${`test_class`} | ${""} | ${""} | ${[]} | ${{}}
-//     ${`Good input - cat no ord`} | ${`test_class`} | ${"cat1, cat2"} | ${""} | ${["cat1","cat2"]} | ${{}}
-//     ${`Good input - cat and ord`} | ${`test_class`} | ${"cat1, cat2"} | ${'{"species": ["cat", "dog", "bird"]}'}| ${["cat1","cat2"]} | ${{'species': ["cat", "dog", "bird"]}}
-//     `("test good input", ({testname, dependent_column, categorical_cols, ordinal_features, expected_cat, expected_ord}) => {
-//       it(`${testname}`, () => {
-//         //console.log(`${testname} test`);
-//
-//         let store = mockStore(initialState);
-//         const shallowFileUpload = shallow(<FileUpload store={store}/>).dive();
-//         let fullDom;
-//         let fakeFile = {target: {files: [{name: 'iris.csv'}]}};
-//         const expectedInput = {
-//           depCol: 'test_class',
-//           catCols: ['cat1', 'cat2'],
-//           ordFeats: {
-//             species: ["cat", "dog", "bird"]
-//           }
-//         };
-//
-//         shallowFileUpload.setState({
-//           selectedFile: fakeFile.target.files[0],
-//           dependentCol: `${dependent_column}`,
-//           catFeatures: `${categorical_cols}`,
-//           ordinalFeatures: `${ordinal_features}`
-//         });
-//
-//
-//         // use instance to get access to inner function
-//         const instance = shallowFileUpload.instance();
-//         // create spy, check function gets called
-//         const spy = jest.spyOn(instance, 'generateFileData');
-//         const testData = instance.generateFileData(); // FormData
-//         console.log(`test data: `, testData);
-//         // get stuff stored in returned formdata, stingified in preparation to make
-//         // network request
-//         const metadata = JSON.parse(testData.get('_metadata'));
-//         console.log(`test data: `, metadata);
-//         expect(spy).toBeCalled();
-//         // value of _metadata defined in generateFileData
-//         expect(metadata.dependent_col).toEqual(`${dependent_column}`);
-//         expect(metadata.categorical_features).toEqual(`${expected_cat}`);
-//         expect(metadata.ordinal_features).toEqual(`${expected_ord}`);
-//       })
-//     })
-//
-//   // describe.each`
-//   //   testname | dependent_column | categoricals | ordinal
-//   //   ${`Good input - no cat or ord`} | ${`test_class`} | ${[]} | ${{}}
-//   //   ${`Good input - no cat or ord`} | ${`test_class`} | ${"cat1, cat2"} | ${{}}
-//   // `('test good input', ({testname, dependent_column, categorical, ordinal}) => {
-//   //   it(`${testname}`, () => {
-//   //          console.log(`${testname} test`);
-//   //        })
-//   // });
-// })
-//
-
 
 // https://jestjs.io/docs/en/tutorial-async
 // jest mock is not working, not returning promise, must be improperly configured and/or
@@ -448,7 +198,7 @@ describe('mock network request', () => {
       .then(data => expect(data.id).toEqual(7654321));
   })
 
-  it('testing promise for unsuccessful case, improper dependent_col', () => {
+  it('TODO check this - testing promise for unsuccessful case, improper dependent_col', () => {
     expect.assertions(1);
     return uploadFile(fakeDatasets[1])
       .catch(e => {
@@ -474,89 +224,72 @@ describe('mock network request', () => {
   })
 })
 
-// go through basic file upload flow - select file & info, upload file
-// cover two scenarios - upload success and failure
-
-// this test examines styling based on mock user input
-describe('DONE - basic file upload flow with fake file', () => {
-
-  let store = mockStore(initialState);
-  let testShallow;
-
-  beforeEach(() => {
-    // https://github.com/airbnb/enzyme/issues/1002
-    testShallow = shallow(<FileUpload store={store} />).dive();
-    // having some trouble using mount, updating state, & checking for expected UI changes
-    //fullDom = mount(<FileUpload store={store} />);
-  })
-
-  // the intended behavior of this component is to hide the fields to enter info
-  // about the file being uploaded until a file with a filename has been selected
-  it('DONE - check UI form is hidden w/o a file selection', () => {
-    let formBody = testShallow.find('#file-upload-form-input-area');
-    expect(formBody.length).toEqual(1)
-
-    // check for CSS style which hides form
-    expect(formBody.hasClass('file-upload-form-hide-inputs')).toEqual(true);
-    expect(formBody.hasClass('file-upload-form-show-inputs')).toEqual(false);
-  })
-
-  it('DONE - test selecting file and displaying UI form after file selection', () => {
-    // fake user submission by entering info directly into component state
-    let fileName = 'iris.csv';
-    let testFile = {
-      name: fileName
-    };
-    let formBody = testShallow.find('#file-upload-form-input-area');
-
-    // check for CSS style which hides form
-    expect(formBody.hasClass('file-upload-form-hide-inputs')).toEqual(true);
-
-    // Fake that a file has been loaded.
-    // UI only checks for a valid filename field to change state of what's shown.
-    testShallow.setState({
-      selectedFile: testFile
-    });
-
-    // not sure but must be getting new copy of enzyme/react node with expected
-    // CSS class after state changes by re-assigning variable
-    formBody = testShallow.find('#file-upload-form-input-area');
-
-    // user info is entered in form, check if form input area is visible
-    // look for css styling to display form
-    expect(formBody.hasClass('file-upload-form-show-inputs')).toEqual(true);
-  })
-
-})
-
+// Test various functionality with a file blob that
+// simulates actual data loaded
 describe('test with mock file blob', () => {
   let store = mockStore(initialState);
   let fullDom;
+  let shallowDom;
   let instance;
 
-  //test blob
-  let featureNames=['col1','col2','col3','class'];
-  let data= featureNames.join()+`\n
+  // Create a test blob.
+  // Simulates raw data loaded by file I/O, before it's parsed as csv data.
+  //
+  let features=['col1','col2','col3','class'];
+  let data= features.join()+`\n
             one,cat,1,yes\n
             three,dog,2,no\n
-            two,cat,3,yes
+            two,cat,3,yes\n
             one,bird,2.5,42`;
+  let catFeaturesOrig = [features[0],features[1],features[3]];
+  data = data.replace(/ +?/g, ''); //Remove spaces added by multiline assignment
   let filename = 'testFile.csv';
   let blob = new Blob([data], {type: 'text/csv'});
   blob.lastModifiedDate = new Date();
   let testFileBlob = new File([blob], filename);
 
+  function getFeatureTypesOrig(){
+    return [instance.featureTypeCategorical, instance.featureTypeCategorical, instance.featureTypeNumeric, instance.featureTypeCategorical];
+  }
+
+  // Helper method so this is kept in one place
+  // typeOrArray - type string to expect all to be, or 'default' for auto defaults, or array of types
+  function testFeatureTypes(typeOrArray)
+  {
+    let testArray;
+    if(Array.isArray(typeOrArray)){
+      testArray = typeOrArray;
+    }
+    else {
+      if(typeOrArray === 'default'){
+        testArray = getFeatureTypesOrig();
+      }
+      else{
+        testArray = [0,0,0,0];
+        testArray.fill(typeOrArray);
+      }
+    }
+    for( let i=0; i < 4; i++)
+      expect(instance.getFeatureType(features[i])).toEqual(testArray[i]);
+  }
+
+  // Return true if error modal is showing
+  function errorModalIsShowing() {
+    return shallowDom.find("#error_modal_dialog").at(0).prop('open');
+  }
+
   // Use beforeAll so that the blob stays loaded w/out having
   // to do all the tests in the mocked callback below.
   beforeAll(() => {
     fullDom = mount(<FileUpload store={store} />);
-    instance = shallow(<FileUpload store={store}/>).dive().instance();
+    shallowDom = shallow(<FileUpload store={store}/>).dive();
+    instance = shallowDom.instance();
   })
   afterAll(() => {
     fullDom.unmount();
   })
 
-  it('load simulated file blob', done => {
+  it('DONE - load simulated file blob', done => {
     // Mock the method FileUpload.handleSelectedFileCompletedStub for unit testing.
     // It gets called when file blob
     // is loaded successfully, just for unit testing since the file loader
@@ -584,46 +317,166 @@ describe('test with mock file blob', () => {
   // Subsquent tests rely on the wrapper from above still being loaded
   // and having the test file blob loaded.
 
-  it('test feature behaviors', () => {
-      // Test the auto-assigned feature types and getFeatureType()
-      expect(instance.getFeatureType(featureNames[0])).toEqual(instance.featureTypeCategorical);
-      expect(instance.getFeatureType(featureNames[1])).toEqual(instance.featureTypeCategorical);
-      expect(instance.getFeatureType(featureNames[2])).toEqual(instance.featureTypeNumeric);
-      expect(instance.getFeatureType(featureNames[3])).toEqual(instance.featureTypeCategorical);
+  it('test features states after file blob load', () => {
+    // Verify error modal is not showing
+    expect(errorModalIsShowing()).toBe(false);
 
-      // Test assigning a categorical feature to type numeric.
-      // Should silently reject and not change to numeric.
-      instance.setFeatureType(featureNames[0], instance.featureTypeNumeric);
-      expect(instance.getFeatureType(featureNames[0])).toEqual(instance.featureTypeCategorical);
+    // Test the auto-assigned feature types and getFeatureType()
+    testFeatureTypes('default');
+    
+    // No ordinal features should be specified. Object should be empty
+    expect(instance.state.ordinalFeaturesObject).toEqual({});
 
-      // Get array of categorical features
-      let cats = [featureNames[0],featureNames[1],featureNames[3]];
-      expect(instance.getCatFeatures()).toEqual(cats);
+    // Dependent feature should be unset after load
+    expect(instance.getDependentFeature()).toEqual(undefined);
+  })
 
-      // Dependent column should be unset
-      expect(instance.getDependentColumn()).toEqual(dep);
-      
-      // Assigning dependent column
-      let dep = featureNames[3];
-      instance.setFeatureType(dep, instance.featureTypeDependent);
-      expect(instance.getFeatureType(dep)).toEqual(instance.featureTypeDependent);
-      expect(instance.getDependentColumn()).toEqual(dep);
-      
-      // Dependent column should no longer be included as categorical
-      let catsnew = [featureNames[0],featureNames[1]];
-      expect(instance.getCatFeatures().find(el => el === dep)).toEqual(undefined);
+  it('DONE - test feature assignment behaviors via direct manipulation', () => {
+    // Test assigning a categorical feature to type numeric.
+    // Should silently reject and not change to numeric.
+    instance.setFeatureType(features[0], instance.featureTypeNumeric);
+    expect(instance.getFeatureType(features[0])).toEqual(instance.featureTypeCategorical);
+
+    // Test getting array of categorical features
+    let catFeatures = [...catFeaturesOrig];
+    expect(instance.getCatFeatures()).toEqual(catFeatures);
+
+    // Set ordinal feature, w/out specifying rank
+    let ordFeature = features[0];
+    instance.setFeatureType(ordFeature, instance.featureTypeOrdinal);
+    expect(instance.getFeatureType(ordFeature)).toEqual(instance.featureTypeOrdinal);
+    let ordsExpected = {[ordFeature]: ["one","three","two"]};
+    expect(instance.state.ordinalFeaturesObject).toEqual(ordsExpected);
+    // Should not be included as a categorical feature
+    catFeatures = catFeatures.filter( val => val !== ordFeature); //remove ordinal feature
+    expect(instance.getCatFeatures().find(el => el === ordFeature)).toEqual(undefined);
+
+    // Reset to default types, unset dependent, and verify
+    instance.clearDependentFeature();
+    instance.setAllFeatureTypes('autoDefault');
+    testFeatureTypes('default');
+
+    // Set all to ordinal
+    // Note that features that default to numeric can still be set as categorical or ordinal
+    instance.setAllFeatureTypes(instance.featureTypeOrdinal);
+    testFeatureTypes(instance.featureTypeOrdinal);
+    
+    // Set all to categorical
+    instance.setAllFeatureTypes(instance.featureTypeCategorical);
+    testFeatureTypes(instance.featureTypeCategorical);
+
+    // Set all to numeric
+    // This should not set default-categorical types to numeric. They should be left as-is.
+    instance.setAllFeatureTypes(instance.featureTypeNumeric);
+    testFeatureTypes('default'); // Should now all equal default types because of how I've structured the test up to here
+
+    // Invalid feature names should be handled properly
+    expect(instance.validateFeatureName('The Spanish Inquisition')).toEqual(false);
+    // Should return default type for invalid feature name
+    expect(instance.getFeatureType('xkcd4eva')).toEqual(instance.featureTypeDefault);
+    expect(instance.getFeatureDefaultType('Frank the Furter')).toEqual(instance.featureTypeDefault);
+  })
+
+  it('DONE - test dependent feature and prediction type behaviors via direct manipulation', () => {
+    //Reset feature types
+    instance.clearDependentFeature();
+    instance.setAllFeatureTypes('autoDefault');
+    
+    // Dependent feature should be unset
+    expect(instance.getDependentFeature()).toEqual(undefined);
+    
+    // Assigning dependent feature
+    let dep1 = features[2];
+    instance.setFeatureType(dep1, instance.featureTypeDependent);
+    expect(instance.getFeatureType(dep1)).toEqual(instance.featureTypeDependent);
+    expect(instance.getDependentFeature()).toEqual(dep1);
+    
+    // Reassigning dependent feature should reset the previous one
+    // to its default type
+    let dep2 = features[3];
+    instance.setFeatureType(dep2, instance.featureTypeDependent);
+    expect(instance.getFeatureType(dep2)).toEqual(instance.featureTypeDependent);
+    expect(instance.getDependentFeature()).toEqual(dep2);
+    expect(instance.getFeatureType(dep1)).toEqual(instance.getFeatureDefaultType(dep1));
+
+    // Dependent column should no longer be included as categorical
+    //expect(instance.getCatFeatures().find(el => el === dep2)).toEqual(undefined);
+    expect(instance.getCatFeatures()).not.toContain(dep2);
+
+    // Prediction type - should be set to default
+    expect(instance.state.predictionType).toEqual(instance.defaultPredictionType);
+  })
 
-      // No ordinal features should be specified. Object should be empty
-      expect(Object.keys(instance.ordinalFeaturesObject).length).toEqual(0); why is ordinalFeaturesObject coming thru as undefined instead of {}??
+  // Test the methods used by the dialogs for text-based specification of
+  // feature types and ordinal ranking
+  it('test text-based categorical-type specification', () => {
+    //Reset feature types to dfault
+    instance.clearDependentFeature();
+    instance.setAllFeatureTypes('autoDefault');
+
+    // Get the text input element
+    let textInput = shallowDom.find("#categorical_features_text_area_input");
+    expect(textInput.length).toEqual(1);
+
+    // Simulate entering text and then accepting it
+    function updateText(text) {
+      let event = {target: {value: text}};
+      textInput.at(0).prop('onChange')(event); // stores text to state
+      textInput.at(0).prop('onBlur')(event); // stores text as raw to state
+      shallowDom.find("#cat_features_user_text_accept_button").at(0).simulate('click'); //uses state vars
+      shallowDom.update();
+    }
 
-      // Set ordinal feature, w/out specifying rank
-      let ord = featureNames[0];
-      instance.setFeatureType(ord, instance.featureTypeOrdinal);
-      expect(instance.getFeatureType(dep)).toEqual(instance.featureTypeOrdinal);
-      let uniqueVals = ['one','three','two'];
-      expect(instance.ordinalFeaturesObject).toEqual({ord: uniqueVals});
-      // Should not be included as a categorical feature
+    // Should all be default still after empty string
+    updateText("");
+    expect(errorModalIsShowing()).toBe(false);
+    testFeatureTypes('default');
+
+    // Assign single feature (that's already categorical) via text. 
+    // This shouldn't change anything because other features that default to categorical
+    // will stay as such.
+    updateText(catFeaturesOrig[0]); 
+    expect(errorModalIsShowing()).toBe(false);
+    testFeatureTypes('default');
+
+    // Assign all as categorical by passing string 'col1,col2,col3,class'
+    updateText(features.join());
+    expect(errorModalIsShowing()).toBe(false);
+    testFeatureTypes(instance.featureTypeCategorical);
+
+    // Assign just default-categorical again, and the one default-numeric feature
+    // should revert to numeric
+  /* TODO needs merge from FileUploadUiTweaksNew branch that fixes bug
+    updateText(features.join()); // set all to type cat
+    updateText(catFeaturesOrig.join()); // leaves out those not cat by default
+    expect(errorModalIsShowing()).toBe(false);
+    testFeatureTypes('default');
+  */
+
+    // Reset
+    instance.setAllFeatureTypes('autoDefault');
+
+    // Test with range - set all to categorical
+    updateText(features[0]+"-"+features[3]);
+    expect(errorModalIsShowing()).toBe(false);
+    testFeatureTypes(instance.featureTypeCategorical);
+
+    // Test with smaller range. Should set all to categorical
+    instance.setAllFeatureTypes(instance.featureTypeOrdinal);
+    updateText(features[0]+","+features[1]+"-"+features[2]+","+features[3]);
+    expect(errorModalIsShowing()).toBe(false);
+    testFeatureTypes(instance.featureTypeCategorical);
+    
+    // Test with bad string. Should see error modal and unchanged feature types
+    updateText("woogie woogie");
+    expect(errorModalIsShowing()).toBe(true);
+    testFeatureTypes(instance.featureTypeCategorical);
 
   })
+})
 
-})
\ No newline at end of file
+//TODO
+// Test UI contents (eg table has right entries)
+// Test behaviors via UI interaction simulation
+// Test textual input for cat and ord feature specifications
+// Test submit behavior and validation - incl. generateFileData method
\ No newline at end of file
diff --git a/lab/webapp/src/components/FileUpload/index.js b/lab/webapp/src/components/FileUpload/index.js
index 44c8c5354..e65d08ed9 100644
--- a/lab/webapp/src/components/FileUpload/index.js
+++ b/lab/webapp/src/components/FileUpload/index.js
@@ -62,6 +62,8 @@ class FileUpload extends Component {
   /** Special type to mark the dependent column. 
    *  It's not properly a feature, but use same terminology for consistency. */
   get featureTypeDependent() { return 'dependent'; }
+  //Type to return in case of errors
+  get featureTypeDefault() {return this.featureTypeNumeric; }
 
   /**
   * FileUpload reac component - UI form for uploading datasets
@@ -109,7 +111,8 @@ class FileUpload extends Component {
     this.setAllFeatureTypes = this.setAllFeatureTypes.bind(this);
     this.parseFeatureToken = this.parseFeatureToken.bind(this);
     this.initFeatureTypeDefaults = this.initFeatureTypeDefaults.bind(this);
-    this.getDependentColumn = this.getDependentColumn.bind(this);
+    this.getDependentFeature = this.getDependentFeature.bind(this);
+    this.clearDependentFeature = this.clearDependentFeature.bind(this);
     this.getElapsedTime = this.getElapsedTime.bind(this);
     this.getOridinalRankingDialog = this.getOridinalRankingDialog.bind(this);
     this.getOrdinalFeaturesUserTextModal = this.getOrdinalFeaturesUserTextModal.bind(this);
@@ -401,7 +404,7 @@ handleCatFeaturesUserTextCancel() {
     const allowedPredictionTypes = ["classification", "regression"]
 
     const data = new FormData();
-    let depCol = this.getDependentColumn();
+    let depCol = this.getDependentFeature();
     let ordFeatures = "";
     let predictionType = this.state.predictionType;
 
@@ -687,7 +690,7 @@ handleCatFeaturesUserTextCancel() {
     let i = this.getFeatureIndex(feature);
     if( i === -1 ) {
       console.log("ERROR: unrecognized feature: " + feature);
-      return this.featureTypeNumeric;
+      return this.featureTypeDefault;
     }
     return this.state.featureType[i];
   }
@@ -763,7 +766,7 @@ handleCatFeaturesUserTextCancel() {
   getFeatureDefaultType(feature) {
     if( !this.validateFeatureName(feature)) {
       console.log("Cannot get default type for unrecognized feature: " + feature);
-      return this.featureTypeNumeric;
+      return this.featureTypeDefault;
     }
     return this.state.featureTypeDefaults[feature];
   }
@@ -771,8 +774,9 @@ handleCatFeaturesUserTextCancel() {
   /**
    * Set the feature type for all features in the data.
    * Does NOT change type of column/feature that is assigned as dependent column.
-   * @param {string} type - one of [featureTypeNumeric, featureTypeCategorical, featureTypeOrdinal, 'autoDefault'],
-   *  where 'autoDefault' will set each feature type based on analysis of each feature's values
+   * Does NOT change features with any non-numeric values to type numeric. They are left unchanged.
+   * @param {string} type - one of either [featureTypeNumeric, featureTypeCategorical, featureTypeOrdinal, 'autoDefault'],
+   *  or 'autoDefault' which will set each feature type based on analysis of each feature's values
    */
   setAllFeatureTypes(type) {
     if(this.state.datasetPreview == null) {
@@ -828,11 +832,10 @@ handleCatFeaturesUserTextCancel() {
       return;
     }
   
-    // Handle dependent column type
+    // Handle setting dependent column type
     if( type == this.featureTypeDependent) {
         //Clear the currently-assigned dependent column if there is one
-        let currentDep = this.getDependentColumn();
-        currentDep !== undefined && this.setFeatureType(currentDep, this.getFeatureDefaultType(currentDep));
+        this.clearDependentFeature();
     }
     
     // Handle ordinal type
@@ -1204,6 +1207,14 @@ handleCatFeaturesUserTextCancel() {
     return result;
   }
 
+  /** Clear the depedent feature selection and return it to
+   *  its default type.
+   */
+  clearDependentFeature() {
+    let currentDep = this.getDependentFeature();
+    currentDep !== undefined && this.setFeatureType(currentDep, this.getFeatureDefaultType(currentDep));
+  }
+
   /**
    * Small helper to get an array of features that have been assigned
    * to type 'categorical'
@@ -1278,7 +1289,7 @@ handleCatFeaturesUserTextCancel() {
     })
     //Check that user isn't including the currently-defined dependent column
     if( success ) {
-      let depCol = this.getDependentColumn();
+      let depCol = this.getDependentFeature();
       if( depCol !== undefined && expanded.indexOf(depCol) > -1 ) {
         success = false;
         message = "The feature " + depCol + " cannot be used because it is assigned as the Dependent Column.";
@@ -1814,6 +1825,13 @@ handleCatFeaturesUserTextCancel() {
             {/* File dropzone/chooser */}
             {fileInputElem}
 
+            {/*Modal for error messages*/}
+            <Modal style={{ marginTop:'0' }} open={this.state.openErrorModal} onClose={this.handleErrorModalClose} closeIcon id="error_modal_dialog">
+              <Modal.Header>{this.state.errorModalHeader}</Modal.Header>
+              <Modal.Content>{this.state.errorModalContent}</Modal.Content>
+            </Modal>
+            <br/>
+
             <div
               id="file-upload-form-input-area"
               className={formInputClass}

From b1cc70b624c23d45ac806dce61f382c05c9aab56 Mon Sep 17 00:00:00 2001
From: Michael Stauffer <mgstauff@gmail.com>
Date: Wed, 14 Apr 2021 21:51:25 -0400
Subject: [PATCH 3/8] IN PROGRESS FileUpload more tests.

Ordinal feature specification text input tests.
---
 .../__snapshots__/fileUpload.test.js.snap     |   3 +
 .../components/FileUpload/fileUpload.test.js  | 292 +++++++++++++++---
 lab/webapp/src/components/FileUpload/index.js |  26 +-
 3 files changed, 275 insertions(+), 46 deletions(-)

diff --git a/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap b/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap
index 1e66908dc..95ca75111 100644
--- a/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap
+++ b/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap
@@ -266,6 +266,7 @@ exports[`basic testing of fileupload react component DONE - full component snaps
                         as="button"
                         color="red"
                         content="Cancel"
+                        id="ordinal_features_user_text_cancel_button"
                         inverted={true}
                         onClick={[Function]}
                         size="small"
@@ -275,6 +276,7 @@ exports[`basic testing of fileupload react component DONE - full component snaps
                         color="blue"
                         content="Accept"
                         icon="checkmark"
+                        id="ordinal_features_user_text_accept_button"
                         inverted={true}
                         onClick={[Function]}
                         positive={true}
@@ -407,6 +409,7 @@ exports[`basic testing of fileupload react component DONE - full component snaps
                         as="button"
                         color="red"
                         content="Cancel"
+                        id="cat_features_user_text_cancel_button"
                         inverted={true}
                         onClick={[Function]}
                         size="small"
diff --git a/lab/webapp/src/components/FileUpload/fileUpload.test.js b/lab/webapp/src/components/FileUpload/fileUpload.test.js
index 3eb57153b..d55dd7e32 100644
--- a/lab/webapp/src/components/FileUpload/fileUpload.test.js
+++ b/lab/webapp/src/components/FileUpload/fileUpload.test.js
@@ -236,15 +236,15 @@ describe('test with mock file blob', () => {
   // Simulates raw data loaded by file I/O, before it's parsed as csv data.
   //
   let features=['col1','col2','col3','class'];
-  let data= features.join()+`\n
+  let dataCSV = features.join()+`\n
             one,cat,1,yes\n
             three,dog,2,no\n
             two,cat,3,yes\n
             one,bird,2.5,42`;
   let catFeaturesOrig = [features[0],features[1],features[3]];
-  data = data.replace(/ +?/g, ''); //Remove spaces added by multiline assignment
+  dataCSV = dataCSV.replace(/ +?/g, ''); //Remove spaces added by multiline assignment
   let filename = 'testFile.csv';
-  let blob = new Blob([data], {type: 'text/csv'});
+  let blob = new Blob([dataCSV], {type: 'text/csv'});
   blob.lastModifiedDate = new Date();
   let testFileBlob = new File([blob], filename);
 
@@ -252,6 +252,15 @@ describe('test with mock file blob', () => {
     return [instance.featureTypeCategorical, instance.featureTypeCategorical, instance.featureTypeNumeric, instance.featureTypeCategorical];
   }
 
+  // Helper method
+  function setAllFeaturesToDefaults() {
+    instance.clearDependentFeature();
+    instance.setAllFeatureTypes('autoDefault');
+    // This will clear the previous value of ordinal features that's otherwise stored.
+    instance.ordinalFeaturesClearToDefault(true);
+    shallowDom.update();
+  }
+
   // Helper method so this is kept in one place
   // typeOrArray - type string to expect all to be, or 'default' for auto defaults, or array of types
   function testFeatureTypes(typeOrArray)
@@ -269,13 +278,35 @@ describe('test with mock file blob', () => {
         testArray.fill(typeOrArray);
       }
     }
-    for( let i=0; i < 4; i++)
-      expect(instance.getFeatureType(features[i])).toEqual(testArray[i]);
+    //Don't test in a loop, it makes error reporting harder to understand
+    expect(features.length).toBe(4);
+    expect(testArray.length).toBe(4);
+    expect(instance.getFeatureType(features[0])).toEqual(testArray[0]);
+    expect(instance.getFeatureType(features[1])).toEqual(testArray[1]);
+    expect(instance.getFeatureType(features[2])).toEqual(testArray[2]);
+    expect(instance.getFeatureType(features[3])).toEqual(testArray[3]);
   }
 
-  // Return true if error modal is showing
+  // Return obj { result: true if error modal is showing, header: header string, content: content string }
   function errorModalIsShowing() {
-    return shallowDom.find("#error_modal_dialog").at(0).prop('open');
+    let res = {
+      result: shallowDom.find("#error_modal_dialog").at(0).prop('open'),
+      header: instance.state.errorModalHeader,
+      content: instance.state.errorModalContent
+    }
+    return res;
+  }
+
+  function closeErrorModal() {
+    // I first tried these methods to simulate user UI actions
+    // to close the error modal, but they're not working.
+    //shallowDom.find("#error_modal_dialog").at(0).simulate('keydown', {keyCoode: 27});
+    //shallowDom.find("#file-upload-form-input-area").at(0).simulate('click');
+    //shallowDom.find(".close").at(0).simulate('click'); //tries to find the close icon on the modal, but it fails
+    instance.handleErrorModalClose();
+    shallowDom.update();
+    // let res = errorModalIsShowing();
+    // console.log(res);
   }
 
   // Use beforeAll so that the blob stays loaded w/out having
@@ -289,6 +320,8 @@ describe('test with mock file blob', () => {
     fullDom.unmount();
   })
 
+  // DO THIS TEST FIRST for this group of tets.
+  // Load the simulated file blob. Handles async behavior. 
   it('DONE - load simulated file blob', done => {
     // Mock the method FileUpload.handleSelectedFileCompletedStub for unit testing.
     // It gets called when file blob
@@ -319,7 +352,7 @@ describe('test with mock file blob', () => {
 
   it('test features states after file blob load', () => {
     // Verify error modal is not showing
-    expect(errorModalIsShowing()).toBe(false);
+    expect(errorModalIsShowing().result).toBe(false);
 
     // Test the auto-assigned feature types and getFeatureType()
     testFeatureTypes('default');
@@ -352,8 +385,7 @@ describe('test with mock file blob', () => {
     expect(instance.getCatFeatures().find(el => el === ordFeature)).toEqual(undefined);
 
     // Reset to default types, unset dependent, and verify
-    instance.clearDependentFeature();
-    instance.setAllFeatureTypes('autoDefault');
+    setAllFeaturesToDefaults();
     testFeatureTypes('default');
 
     // Set all to ordinal
@@ -379,8 +411,7 @@ describe('test with mock file blob', () => {
 
   it('DONE - test dependent feature and prediction type behaviors via direct manipulation', () => {
     //Reset feature types
-    instance.clearDependentFeature();
-    instance.setAllFeatureTypes('autoDefault');
+    setAllFeaturesToDefaults();
     
     // Dependent feature should be unset
     expect(instance.getDependentFeature()).toEqual(undefined);
@@ -408,75 +439,260 @@ describe('test with mock file blob', () => {
   })
 
   // Test the methods used by the dialogs for text-based specification of
-  // feature types and ordinal ranking
+  // categorical feature types
   it('test text-based categorical-type specification', () => {
     //Reset feature types to dfault
-    instance.clearDependentFeature();
-    instance.setAllFeatureTypes('autoDefault');
+    setAllFeaturesToDefaults();
 
     // Get the text input element
     let textInput = shallowDom.find("#categorical_features_text_area_input");
     expect(textInput.length).toEqual(1);
 
     // Simulate entering text and then accepting it
-    function updateText(text) {
+    function updateCatText(text, cancel = false) {
       let event = {target: {value: text}};
       textInput.at(0).prop('onChange')(event); // stores text to state
       textInput.at(0).prop('onBlur')(event); // stores text as raw to state
-      shallowDom.find("#cat_features_user_text_accept_button").at(0).simulate('click'); //uses state vars
+      if(cancel)
+        shallowDom.find("#cat_features_user_text_cancel_button").at(0).simulate('click'); //uses state vars
+      else
+        shallowDom.find("#cat_features_user_text_accept_button").at(0).simulate('click'); //uses state vars
       shallowDom.update();
     }
 
     // Should all be default still after empty string
-    updateText("");
-    expect(errorModalIsShowing()).toBe(false);
+    updateCatText("");
+    expect(errorModalIsShowing().result).toBe(false);
     testFeatureTypes('default');
 
     // Assign single feature (that's already categorical) via text. 
     // This shouldn't change anything because other features that default to categorical
     // will stay as such.
-    updateText(catFeaturesOrig[0]); 
-    expect(errorModalIsShowing()).toBe(false);
+    updateCatText(catFeaturesOrig[0]); 
+    expect(errorModalIsShowing().result).toBe(false);
+    testFeatureTypes('default');
+
+    // Change text to set all features as categorical, but hit cancel button.
+    // Shouldn't change feature assignments.
+    updateCatText(features.join(), true /*simulate clicking cancel button*/);
+    expect(errorModalIsShowing().result).toBe(false);
     testFeatureTypes('default');
 
     // Assign all as categorical by passing string 'col1,col2,col3,class'
-    updateText(features.join());
-    expect(errorModalIsShowing()).toBe(false);
+    updateCatText(features.join());
+    expect(errorModalIsShowing().result).toBe(false);
     testFeatureTypes(instance.featureTypeCategorical);
 
     // Assign just default-categorical again, and the one default-numeric feature
     // should revert to numeric
-  /* TODO needs merge from FileUploadUiTweaksNew branch that fixes bug
-    updateText(features.join()); // set all to type cat
-    updateText(catFeaturesOrig.join()); // leaves out those not cat by default
-    expect(errorModalIsShowing()).toBe(false);
+    updateCatText(features.join()); // set all to type cat
+    updateCatText(catFeaturesOrig.join()); // leaves out those not cat by default
+    expect(errorModalIsShowing().result).toBe(false);
     testFeatureTypes('default');
-  */
 
     // Reset
-    instance.setAllFeatureTypes('autoDefault');
+    setAllFeaturesToDefaults();
 
     // Test with range - set all to categorical
-    updateText(features[0]+"-"+features[3]);
-    expect(errorModalIsShowing()).toBe(false);
+    updateCatText(features[0]+"-"+features[3]);
+    expect(errorModalIsShowing().result).toBe(false);
     testFeatureTypes(instance.featureTypeCategorical);
 
     // Test with smaller range. Should set all to categorical
     instance.setAllFeatureTypes(instance.featureTypeOrdinal);
-    updateText(features[0]+","+features[1]+"-"+features[2]+","+features[3]);
-    expect(errorModalIsShowing()).toBe(false);
+    updateCatText(features[0]+","+features[1]+"-"+features[2]+","+features[3]);
+    expect(errorModalIsShowing().result).toBe(false);
     testFeatureTypes(instance.featureTypeCategorical);
     
     // Test with bad string. Should see error modal and unchanged feature types
-    updateText("woogie woogie");
-    expect(errorModalIsShowing()).toBe(true);
-    testFeatureTypes(instance.featureTypeCategorical);
+    setAllFeaturesToDefaults();
+    updateCatText("woogie woogie");
+    expect(errorModalIsShowing().result).toBe(true);
+    closeErrorModal();
+    testFeatureTypes('default');
+
+    // Test with a bad range at begin
+    setAllFeaturesToDefaults();
+    updateCatText("frankenNoodle-"+features[3]);
+    expect(errorModalIsShowing().result).toBe(true);
+    closeErrorModal();
+    testFeatureTypes('default');
+
+    // Test with a bad range at end
+    setAllFeaturesToDefaults();
+    updateCatText(features[0]+"-frankenNoodle");
+    expect(errorModalIsShowing().result).toBe(true);
+    closeErrorModal();
+    testFeatureTypes('default');
+
+    // Test with setting dependent feature.
+    // The dependent feature should not change when its feature is entered in text input,
+    // and we should see error dialog.
+    instance.setFeatureType(features[0], instance.featureTypeDependent);
+    updateCatText(catFeaturesOrig.join());
+    expect(errorModalIsShowing().result).toBe(true);
+    closeErrorModal();
+    let expected = [...getFeatureTypesOrig()];
+    expected[0] = instance.featureTypeDependent;
+    testFeatureTypes(expected);
+
+  })
+
+  // Test the methods used by the dialogs for text-based specification of
+  // ordinal feature types and ordinal ranking
+  it('test text-based ordinal-type specification', () => {
+    //Reset feature types to dfault
+    setAllFeaturesToDefaults();
+
+    // Get the text input element
+    let textInput = shallowDom.find("#ordinal_features_text_area_input");
+    expect(textInput.length).toEqual(1);
+
+    // Simulate entering text and then accepting it.
+    // cancel - pass true to simulate clicking the cancel button in text entry box.
+    function updateOrdText(text, cancel = false) {
+      let event = {target: {value: text}};
+      textInput.at(0).prop('onChange')(event); // stores text to state
+      shallowDom.update();
+      if(cancel)
+        shallowDom.find("#ordinal_features_user_text_cancel_button").at(0).simulate('click'); //uses state vars to process text
+      else
+        shallowDom.find("#ordinal_features_user_text_accept_button").at(0).simulate('click'); //uses state vars to process text
+      shallowDom.update();
+    }
+
+    // Should all be default still after empty string
+    setAllFeaturesToDefaults();
+    updateOrdText("");
+    expect(errorModalIsShowing().result).toBe(false);
+    testFeatureTypes('default');
+
+    // Test invalid feature name. Shouldn't change feature assignments
+    setAllFeaturesToDefaults();
+    updateOrdText("knights,ni");
+    expect(errorModalIsShowing().result).toBe(true);
+    closeErrorModal();
+    testFeatureTypes('default');
+
+    // Test valid feature name, but invalid values
+    setAllFeaturesToDefaults();
+    updateOrdText("col1,ni");
+    expect(errorModalIsShowing().result).toBe(true);
+    closeErrorModal();
+    testFeatureTypes('default');
+
+    // Test canceling input. Feature types should not change.
+    setAllFeaturesToDefaults();
+    updateOrdText("col1,ni", true);
+    expect(errorModalIsShowing().result).toBe(false);
+    testFeatureTypes('default');
+
+    // Test valid feature name and values,
+    // test that ordinal value is correct in state
+    setAllFeaturesToDefaults();
+    updateOrdText("col1,one,two,three");
+    expect(errorModalIsShowing().result).toBe(false);
+    let expected = [...getFeatureTypesOrig()];
+    expected[0] = instance.featureTypeOrdinal;
+    testFeatureTypes(expected);
+    let ords = { col1: ['one','two','three']};
+    expect(instance.state.ordinalFeaturesObject).toEqual(ords);
+
+    // Test two valid features names and values
+    setAllFeaturesToDefaults();
+    updateOrdText("col1,one,two,three\ncol2,bird,cat,dog");
+    expect(errorModalIsShowing().result).toBe(false);
+    expected = [...getFeatureTypesOrig()];
+    expected[0] = instance.featureTypeOrdinal;
+    expected[1] = instance.featureTypeOrdinal;
+    testFeatureTypes(expected);
+    ords = { col1: ['one','two','three'], col2: ['bird','cat','dog']};
+    expect(instance.state.ordinalFeaturesObject).toEqual(ords);
+
+    // Test one valid feature and values, one invalid featuare
+    setAllFeaturesToDefaults();
+    updateOrdText("col1,one,two,three\nunassumingduck,bird,cat,dog");
+    expect(errorModalIsShowing().result).toBe(true);
+    closeErrorModal();
+    expect(instance.state.ordinalFeaturesObject).toEqual({});
+    testFeatureTypes('default');
+
+    // Test two valid features, one with valid values, one with invalid values
+    setAllFeaturesToDefaults();
+    updateOrdText("col1,one,two,three\ncol2,bird,cat,fish");
+    expect(errorModalIsShowing().result).toBe(true);
+    closeErrorModal();
+    expect(instance.state.ordinalFeaturesObject).toEqual({});
+    testFeatureTypes('default');
+
+    // Test valid feature name but that's set as dependent feature.
+    // Expect an error and dependent feature not to be changed.
+    setAllFeaturesToDefaults();
+    instance.setFeatureType(features[0], instance.featureTypeDependent);
+    updateOrdText("col1,one,two,three");
+    expect(errorModalIsShowing().result).toBe(true);
+    closeErrorModal();
+    expected = [...getFeatureTypesOrig()];
+    expected[0] = instance.featureTypeDependent;
+    testFeatureTypes(expected);
+
+    // Test setting a feature to ord (with a different ranking than above), and then clearing it by
+    // changing input text to omit it.
+    setAllFeaturesToDefaults();
+    updateOrdText("col1,one,two,three\ncol2,bird,cat,dog");
+    expect(errorModalIsShowing().result).toBe(false);
+    updateOrdText("col2,cat,dog,bird");
+    expect(errorModalIsShowing().result).toBe(false);
+    ords = { col2: ['cat','dog','bird']};
+    expect(instance.state.ordinalFeaturesObject).toEqual(ords);
+    expected = [...getFeatureTypesOrig()];
+    expected[1] = instance.featureTypeOrdinal;
+    testFeatureTypes(expected);
+
+    // Test setting feature to type ordinal via dropdown in dataset preview,
+    // and then check that string in feature specification input box is correct.
+    //
+    // Get the dropdown input element for
+    setAllFeaturesToDefaults();
+    let featureDrop = shallowDom.find("#featureTypeDropdown-0");
+    expect(featureDrop.length).toEqual(1);
+    let index = 0;
+    featureDrop.at(index).simulate('change', 
+      { target: { value: 'testval', name: 'testname' } },
+      {value: instance.featureTypeOrdinal, customindexid: index}
+    );
+    // Expect the feature to be type ordinal now
+    expected = [...getFeatureTypesOrig()];
+    expected[index] = instance.featureTypeOrdinal;
+    testFeatureTypes(expected);
+    // Expect the default ordering of values
+    let ordsArr = ['one','three','two'];
+    ords = { col1: ordsArr };
+    expect(instance.state.ordinalFeaturesObject).toEqual(ords);
+    // Expect the text string in the ordinal specification box to match
+    let ordTextInput = shallowDom.find("#ordinal_features_text_area_input");
+    expect(ordTextInput.length).toEqual(1);
+    let expectedString = features[index] + ',' + ordsArr.join() + '\n';
+    let value = ordTextInput.at(index).props().value;
+    expect(value).toBe(expectedString);
 
   })
+
+  it('test UI element contents', () => {
+    // Reset feature types to dfault
+    setAllFeaturesToDefaults();
+
+    // Verify various dataset preview table values
+    //
+    // Header row
+    //
+    
+
+  })
+
 })
 
 //TODO
 // Test UI contents (eg table has right entries)
 // Test behaviors via UI interaction simulation
-// Test textual input for cat and ord feature specifications
-// Test submit behavior and validation - incl. generateFileData method
\ No newline at end of file
+// Test submit behavior and validation - generateFileData method, but not actual submission because that's an integration test
\ No newline at end of file
diff --git a/lab/webapp/src/components/FileUpload/index.js b/lab/webapp/src/components/FileUpload/index.js
index e65d08ed9..d5c3bfa3e 100644
--- a/lab/webapp/src/components/FileUpload/index.js
+++ b/lab/webapp/src/components/FileUpload/index.js
@@ -933,16 +933,22 @@ handleCatFeaturesUserTextCancel() {
 
   /** Clear any features that have been specified as type ordinal, along with any related data,
    * and set them to type auto-determined default type.
-   * Does NOT clear the storage of previous ordinal features, so you can still recover previous
-   * settings even when changing from user text input.
+   * @param {boolean} clearPrev - false by default, to NOT clear the storage of previous ordinal features, 
+   * so you can still recover previous settings even when changing from user text input. 'True' will
+   * clear the previous values (for testing).
   */
-  ordinalFeaturesClearToDefault() {
+  ordinalFeaturesClearToDefault( clearPrev = false) {
     for(var feature in this.state.ordinalFeaturesObject) {
       this.setFeatureType(feature, this.getFeatureDefaultType(feature));
     }
     this.setState({
       ordinalFeaturesObject: {},
     })
+    if(clearPrev) {
+      this.setState({
+        ordinalFeaturesObjectPrev: {},
+      })
+    }
   }
 
   /** From state, convert the lists of unique values for ordinal features into a string with
@@ -1042,13 +1048,16 @@ handleCatFeaturesUserTextCancel() {
    * @returns {null} 
    */
   ordinalFeaturesUserTextIngest() {
+    // Get the lines before clearing ordinal features to default. Otherwise can
+    // end up clearing ordinalFeaturesUserText in some cases.
+    let lines = this.state.ordinalFeaturesUserText.split(/\r?\n/);
     this.ordinalFeaturesClearToDefault();
     //Process each line individually
-    this.state.ordinalFeaturesUserText.split(/\r?\n/).map((line) => {
-      if(line === "")
-        return;
-      let ordObj = this.ordinalFeaturesUserTextParse(line);
-      this.setFeatureType(ordObj.feature, this.featureTypeOrdinal, ordObj.values);
+    lines.map((line) => {
+      if(line != "") {
+        let ordObj = this.ordinalFeaturesUserTextParse(line);
+        this.setFeatureType(ordObj.feature, this.featureTypeOrdinal, ordObj.values);       
+      }
     })    
     //console.log("ingest: ordinals: ");
     //console.log(this.state.ordinalFeaturesObject);
@@ -1110,6 +1119,7 @@ handleCatFeaturesUserTextCancel() {
           let fieldTypeItem = ( field === this.getDependentColumn() ?
             <i>Target</i> :
             <Dropdown
+              id={'featureTypeDropdown-' + i.toString()}
               value={this.state.featureType[i]}
               options={this.getFeatureDefaultType(field) === this.featureTypeNumeric ? featureTypeOptionsAll : featureTypeOptionsNonNumeric}
               onChange={this.handleFeatureTypeDropdown}

From d93ec5ce003079e8a5da00fba924b97157d6ac05 Mon Sep 17 00:00:00 2001
From: Michael Stauffer <mgstauff@gmail.com>
Date: Fri, 16 Apr 2021 00:50:47 -0400
Subject: [PATCH 4/8] File Upload - unit tests complete

---
 .../__snapshots__/fileUpload.test.js.snap     | 288 +++--------
 .../components/FileUpload/fileUpload.test.js  | 466 +++++++++++-------
 lab/webapp/src/components/FileUpload/index.js |  77 +--
 3 files changed, 406 insertions(+), 425 deletions(-)

diff --git a/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap b/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap
index 95ca75111..73347578d 100644
--- a/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap
+++ b/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap
@@ -3,7 +3,7 @@
 exports[`basic testing of fileupload react component DONE - full component snapshot 1`] = `
 <div>
   <SceneHeader
-    header="Submit Datasets"
+    header="Upload Datasets"
   />
   <Form
     as="form"
@@ -21,24 +21,6 @@ exports[`basic testing of fileupload react component DONE - full component snaps
       >
         <Component />
       </Dropzone>
-      <Modal
-        centered={true}
-        closeIcon={true}
-        closeOnDimmerClick={true}
-        closeOnDocumentClick={false}
-        dimmer={true}
-        eventPool="Modal"
-        id="error_modal_dialog"
-        onClose={[Function]}
-        style={
-          Object {
-            "marginTop": "0",
-          }
-        }
-      >
-        <ModalHeader />
-        <ModalContent />
-      </Modal>
       <br />
       <div
         className="file-upload-form-hide-inputs"
@@ -52,7 +34,7 @@ exports[`basic testing of fileupload react component DONE - full component snaps
             as="h4"
             inverted={true}
           >
-            Feature Specification
+            Specification
           </Header>
         </Divider>
         <Grid
@@ -60,21 +42,29 @@ exports[`basic testing of fileupload react component DONE - full component snaps
         >
           <GridRow>
             <GridColumn
-              width={7}
+              width={6}
             >
               <FormField
                 className="inverted-dropdown-search"
                 control={[Function]}
+                fluid={true}
+                id="target_dropdown"
                 inline={true}
-                label="Dependent Feature"
+                label="Target"
                 onChange={[Function]}
                 options={Array []}
-                placeholder="Select a feature"
+                placeholder="Select a column"
                 search={true}
               />
             </GridColumn>
             <GridColumn
-              width={1}
+              style={
+                Object {
+                  "marginTop": "1.9em",
+                  "paddingLeft": "0",
+                }
+              }
+              width={2}
             >
               <Popup
                 content={
@@ -92,7 +82,7 @@ exports[`basic testing of fileupload react component DONE - full component snaps
                 }
                 disabled={false}
                 eventsEnabled={true}
-                header="Dependent Column Help"
+                header="Target Column Help"
                 offset={0}
                 on="click"
                 pinned={false}
@@ -116,6 +106,8 @@ exports[`basic testing of fileupload react component DONE - full component snaps
                 className="inverted-dropdown-inline"
                 control={[Function]}
                 defaultValue="classification"
+                fluid={true}
+                id="prediction_type_dropdown"
                 inline={true}
                 label="Prediction Type"
                 onChange={[Function]}
@@ -136,6 +128,12 @@ exports[`basic testing of fileupload react component DONE - full component snaps
               />
             </GridColumn>
             <GridColumn
+              style={
+                Object {
+                  "marginTop": "1.9em",
+                  "paddingLeft": "0",
+                }
+              }
               width={2}
             >
               <Popup
@@ -196,94 +194,18 @@ exports[`basic testing of fileupload react component DONE - full component snaps
                   as={[Function]}
                   control={[Function]}
                 >
-                  <Modal
-                    centered={true}
-                    closeOnDimmerClick={false}
-                    closeOnDocumentClick={false}
-                    closeOnEscape={true}
-                    dimmer={true}
+                  <Button
+                    as="button"
+                    className="file-upload-button"
+                    color="blue"
+                    content="Set Ordinal"
                     disabled={false}
-                    eventPool="Modal"
-                    onClose={[Function]}
-                    onOpen={[Function]}
-                    open={false}
-                    trigger={
-                      <Button
-                        as="button"
-                        className="file-upload-button"
-                        color="blue"
-                        disabled={false}
-                        fluid={true}
-                        inverted={true}
-                        size="small"
-                      >
-                        Set Ordinal
-                      </Button>
-                    }
-                  >
-                    <ModalHeader>
-                      Ordinal Feature Input
-                    </ModalHeader>
-                    <ModalDescription
-                      style={
-                        Object {
-                          "margin": "1em",
-                          "width": "65%",
-                        }
-                      }
-                    >
-                      <p>
-                         For each ordinal feature, enter one comma-separated line with the following format (this overrides selections in the Dataset Preview): 
-                        <br />
-                         [feature name],[1st unique value],[2nd unique value],...
-                      </p>
-                      <p>
-                        For example:
-                        <br />
-                         month,jan,feb,mar,apr,may,jun,jul,aug,sep,oct,nov,dec
-                        <br />
-                         day,mon,tue,wed,thu,fri,sat,sun
-                      </p>
-                      <p>
-                        To populate this text box with all features and their unique values, close this window and use the button to set all feature types as ordinal. 
-                      </p>
-                      <br />
-                    </ModalDescription>
-                    <Form
-                      as="form"
-                    >
-                      <textarea
-                        className="file-upload-ordinal-text-area"
-                        id="ordinal_features_text_area_input"
-                        label="Ordinal Features"
-                        onChange={[Function]}
-                        placeholder="(No Ordinal features have been specified.)"
-                        value=""
-                      />
-                    </Form>
-                    <ModalActions>
-                      <Button
-                        as="button"
-                        color="red"
-                        content="Cancel"
-                        id="ordinal_features_user_text_cancel_button"
-                        inverted={true}
-                        onClick={[Function]}
-                        size="small"
-                      />
-                      <Button
-                        as="button"
-                        color="blue"
-                        content="Accept"
-                        icon="checkmark"
-                        id="ordinal_features_user_text_accept_button"
-                        inverted={true}
-                        onClick={[Function]}
-                        positive={true}
-                        size="small"
-                      />
-                    </ModalActions>
-                  </Modal>
+                    fluid={true}
+                    id="ord_features_text_input_open_button"
+                    inverted={true}
+                    onClick={[Function]}
+                    size="small"
+                  />
                   <Popup
                     content={
                       <div
@@ -325,108 +247,18 @@ exports[`basic testing of fileupload react component DONE - full component snaps
                   as={[Function]}
                   control={[Function]}
                 >
-                  <Modal
-                    centered={true}
-                    closeOnDimmerClick={false}
-                    closeOnDocumentClick={false}
-                    closeOnEscape={true}
-                    dimmer={true}
-                    eventPool="Modal"
-                    onClose={[Function]}
-                    onOpen={[Function]}
-                    open={false}
-                    trigger={
-                      <Button
-                        as="button"
-                        className="file-upload-button"
-                        color="blue"
-                        disabled={false}
-                        fluid={true}
-                        inverted={true}
-                        size="small"
-                      >
-                        Set Categorical
-                      </Button>
-                    }
-                  >
-                    <ModalHeader>
-                      Categorical Feature Input
-                    </ModalHeader>
-                    <ModalDescription
-                      style={
-                        Object {
-                          "margin": "1em",
-                          "width": "65%",
-                        }
-                      }
-                    >
-                      <p>
-                        Enter a comma-separated list to specify which features are Categorical.
-                        <br />
-                        This will override selections in the Dataset Preview. 
-                      </p>
-                      <p>
-                        For example:
-                        <br />
-                         
-                        <i>
-                          sex,eye_color,hair_color,disease_state
-                        </i>
-                      </p>
-                      <p>
-                        Ranges - you can specify features using ranges. Each feature name in a range is converted to a column number within the data, and the range is expanded using the column numbers. For example, working from the example above in which we assume the features are present in the data in the same order as listed, entering 
-                        <br />
-                         
-                        <i>
-                          sex-disease_state
-                        </i>
-                        <br />
-                        <br />
-                        would expand to
-                        <br />
-                         
-                        <i>
-                          sex,eye_color,hair_color,disease_state
-                        </i>
-                      </p>
-                      <br />
-                    </ModalDescription>
-                    <Form
-                      as="form"
-                    >
-                      <textarea
-                        className="file-upload-categorical-text-area"
-                        id="categorical_features_text_area_input"
-                        label="Categorical Features"
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        placeholder="(No Categorical features have been specified)"
-                        value=""
-                      />
-                    </Form>
-                    <ModalActions>
-                      <Button
-                        as="button"
-                        color="red"
-                        content="Cancel"
-                        id="cat_features_user_text_cancel_button"
-                        inverted={true}
-                        onClick={[Function]}
-                        size="small"
-                      />
-                      <Button
-                        as="button"
-                        color="blue"
-                        content="Accept"
-                        icon="checkmark"
-                        id="cat_features_user_text_accept_button"
-                        inverted={true}
-                        onClick={[Function]}
-                        positive={true}
-                        size="small"
-                      />
-                    </ModalActions>
-                  </Modal>
+                  <Button
+                    as="button"
+                    className="file-upload-button"
+                    color="blue"
+                    content="Set Categorical"
+                    disabled={false}
+                    fluid={true}
+                    id="cat_features_text_input_open_button"
+                    inverted={true}
+                    onClick={[Function]}
+                    size="small"
+                  />
                   <Popup
                     content={
                       <div
@@ -474,6 +306,7 @@ exports[`basic testing of fileupload react component DONE - full component snaps
                     color="blue"
                     content="Set All To..."
                     fluid={true}
+                    id="set_all_to_button"
                     inverted={true}
                     onClick={[Function]}
                     size="small"
@@ -486,15 +319,18 @@ exports[`basic testing of fileupload react component DONE - full component snaps
                     }
                   >
                     <Menu
+                      id="set_all_to_menu"
                       open={false}
                       vertical={true}
                     >
                       <MenuItem
                         content="Categorical"
+                        id="set_all_to_menu_categorical"
                         onClick={[Function]}
                       />
                       <MenuItem
                         content="Ordinal"
+                        id="set_all_to_menu_ordinal"
                         onClick={[Function]}
                       />
                       <MenuItem
@@ -506,6 +342,7 @@ exports[`basic testing of fileupload react component DONE - full component snaps
                             </div>
                           </React.Fragment>
                         }
+                        id="set_all_to_menu_default"
                         onClick={[Function]}
                       />
                     </Menu>
@@ -523,23 +360,34 @@ exports[`basic testing of fileupload react component DONE - full component snaps
             as="h4"
             inverted={true}
           >
-            Submit
+             Upload 
           </Header>
         </Divider>
-        <FormInput
-          as={[Function]}
-          control={[Function]}
+        <FormField
+          style={
+            Object {
+              "float": "right",
+            }
+          }
         >
+          <Button
+            as="button"
+            className="file-upload-button"
+            color="red"
+            content="Cancel"
+            inverted={true}
+            onClick={[Function]}
+          />
           <Button
             as="button"
             className="file-upload-button"
             color="blue"
-            content="Submit Dataset"
+            content="Upload Dataset"
             icon="upload"
             inverted={true}
             onClick={[Function]}
           />
-        </FormInput>
+        </FormField>
       </div>
     </Segment>
   </Form>
diff --git a/lab/webapp/src/components/FileUpload/fileUpload.test.js b/lab/webapp/src/components/FileUpload/fileUpload.test.js
index d55dd7e32..b8dda1061 100644
--- a/lab/webapp/src/components/FileUpload/fileUpload.test.js
+++ b/lab/webapp/src/components/FileUpload/fileUpload.test.js
@@ -29,12 +29,8 @@ import FileUpload from './';
 //import SceneHeader from '../SceneHeader';
 // try getting react pieces and framework for test rendering
 import React from 'react';
-import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import fetch from 'jest-fetch-mock';
-import fetchMock from 'fetch-mock';
-import Dropzone from 'react-dropzone'
 
 const middlewares = [thunk];
 const initialState = {};
@@ -58,8 +54,6 @@ describe('basic testing of fileupload react component', () => {
   let fullDom;
   let shallowDom;
   let instance;
-  let fakeFile = {name: 'iris.csv'};
-  let fakeFileTsv = {name: 'iris.tsv'};
   let badFakeFile = {name: 'iris.txt'};
   // basic bookkeeping before/after each test; mount/unmount component, should be
   // similar to how piece will actually work in browser
@@ -102,7 +96,7 @@ describe('basic testing of fileupload react component', () => {
   })
 
   // the intended behavior of this component is to hide the fields to enter info
-  // about the file being uploaded until a file with a filename has been selected
+  // about the file being uploaded until a file with a testFilename has been selected
   it('DONE - check UI form is hidden w/o a file selection', () => {
     let formBody = shallowDom.find('#file-upload-form-input-area');
     expect(formBody.length).toEqual(1)
@@ -127,106 +121,11 @@ describe('basic testing of fileupload react component', () => {
     expect(formBody.hasClass('file-upload-form-show-inputs')).toEqual(false);
   })
     
-  //TODO - redo these
-  it('TODO - try testing generateFileData - good input', () => {
-
-  })
-
-  it('TODO - try testing generateFileData - bad input, no ordinal features', () => {
-
-  })
-
-  it('TODO - try testing generateFileData - bad input, with ordinal features', () => {
-
-  })
 }) //describe
 
-
-// https://jestjs.io/docs/en/tutorial-async
-// jest mock is not working, not returning promise, must be improperly configured and/or
-// not setup correctly or something
-
-//jest.mock('../../utils/apiHelper');
-//import uploadDataset from '../../data/datasets/dataset/api';
-
-// cheating and just importing fake apiHelper directly - probably not recommended
-import { uploadFile } from '../../utils/__mocks__/apiHelper';
-describe('mock network request', () => {
-  let store = mockStore(initialState);
-  let fullDom;
-
-  beforeEach(() => {
-    //fullDom = mount(<FileUpload store={store} testProp='hello' />);
-    fullDom = shallow(<FileUpload store={store} />).dive();
-  })
-
-  const fakeDatasets = [
-    {
-      'name': 'auto.csv',
-      'username': 'testuser',
-      'dependent_col' : 'class',
-      'categorical_features': '',
-      'ordinal_features': '',
-      'timestamp': Date.now(),
-    },
-    {
-      'name': 'iris.csv',
-      'username': 'testuser',
-      'dependent_col' : 'target_class',
-      'categorical_features': '',
-      'ordinal_features': '',
-      'timestamp': Date.now(),
-    }
-  ];
-
-  it('TODO - what is this testing??? - testing promise for successful case, proper dependent_col', () => {
-    expect.assertions(1); //this expects one jest assertion to be made during this test. good for testing the promises are run
-    //return uploadDataset(fakeDataset).then(data => expect(data.name).toEqual('iris.csv'));
-    //return uploadFile('fakeurl').then(data => expect(data.name).toEqual('iris.csv'));
-
-    // on successful upload, change window location/redirect the page, uses error
-    // flag in server response to control logic for UI to display message on error
-    // or page redirection on success, not sure how to get at those pieces with
-    // this testing framework. DOM does not seem to be updating correctly
-    //
-    //NOTE Returning a promise tells jest to wait for the promise resolution before finishing the test.
-    //Test will fail if promise is rejected.
-    //
-    //MGS - I don't see what this is testing. It's a mock api call and has nothing to do
-    // with FileUpload componenet.
-    return uploadFile(fakeDatasets[0])
-      .then(data => expect(data.id).toEqual(7654321));
-  })
-
-  it('TODO check this - testing promise for unsuccessful case, improper dependent_col', () => {
-    expect.assertions(1);
-    return uploadFile(fakeDatasets[1])
-      .catch(e => {
-        expect(e).toEqual({'error': 'dependent_col: target_class invalid'});
-
-        // fake setting state, normally occurs in upload handler function in
-        // FileUpload component after promise making actual upload resolves
-
-        // fullDom.setState({
-        //   errorResp: e,
-        //   serverResp: e
-        // });
-
-        // manually setting state is not working correctly?, popup open prop should be set
-        // to 'true' in case of error response, not sure if this is incorrect method
-        // of testing how UI should look based on react component state
-
-        // fullDom = shallow(<FileUpload store={store} />).dive();
-        // fullDom.update();
-        // let popup = fullDom.find('Popup').at(0);
-        // console.log('popup props', popup.props());
-      });
-  })
-})
-
 // Test various functionality with a file blob that
 // simulates actual data loaded
-describe('test with mock file blob', () => {
+describe('series of tests with mock file blob', () => {
   let store = mockStore(initialState);
   let fullDom;
   let shallowDom;
@@ -235,20 +134,35 @@ describe('test with mock file blob', () => {
   // Create a test blob.
   // Simulates raw data loaded by file I/O, before it's parsed as csv data.
   //
-  let features=['col1','col2','col3','class'];
-  let dataCSV = features.join()+`\n
-            one,cat,1,yes\n
-            three,dog,2,no\n
-            two,cat,3,yes\n
-            one,bird,2.5,42`;
-  let catFeaturesOrig = [features[0],features[1],features[3]];
-  dataCSV = dataCSV.replace(/ +?/g, ''); //Remove spaces added by multiline assignment
-  let filename = 'testFile.csv';
+  let featureNames=['col1','col2','class','col3'];
+  let depColumnIndex = 2;
+  // The data, with each feature as a row
+  let dataByFeature = [
+    ['one','three','two','one'], //column 0
+    ['cat','dog','cat','bird'],  //column 1, etc..
+    [1,2,3,2.5],
+    ['yes','no','yes','42']
+  ]
+  // Make CSV version of data
+  let dataCSV = featureNames.join()+`\n`;
+  for(let row=0; row < dataByFeature[0].length; row++) {
+    let line = "";
+    for(let col=0; col < featureNames.length; col++) {
+      line += dataByFeature[col][row];
+      if(col < (featureNames.length-1))
+        line += ','
+    }
+    line += '\n';
+    dataCSV += line;
+  }
+
+  let catFeaturesOrig = [featureNames[0],featureNames[1],featureNames[3]];
+  let testFilename = 'testFile.csv';
   let blob = new Blob([dataCSV], {type: 'text/csv'});
   blob.lastModifiedDate = new Date();
-  let testFileBlob = new File([blob], filename);
+  let testFileBlob = new File([blob], testFilename);
 
-  function getFeatureTypesOrig(){
+  function getFeatureTypesDefault(){
     return [instance.featureTypeCategorical, instance.featureTypeCategorical, instance.featureTypeNumeric, instance.featureTypeCategorical];
   }
 
@@ -258,6 +172,10 @@ describe('test with mock file blob', () => {
     instance.setAllFeatureTypes('autoDefault');
     // This will clear the previous value of ordinal features that's otherwise stored.
     instance.ordinalFeaturesClearToDefault(true);
+    // Set predicition type
+    instance.setState(  {
+      predictionType: instance.defaultPredictionType,
+    });
     shallowDom.update();
   }
 
@@ -271,7 +189,7 @@ describe('test with mock file blob', () => {
     }
     else {
       if(typeOrArray === 'default'){
-        testArray = getFeatureTypesOrig();
+        testArray = getFeatureTypesDefault();
       }
       else{
         testArray = [0,0,0,0];
@@ -279,18 +197,18 @@ describe('test with mock file blob', () => {
       }
     }
     //Don't test in a loop, it makes error reporting harder to understand
-    expect(features.length).toBe(4);
+    expect(featureNames.length).toBe(4);
     expect(testArray.length).toBe(4);
-    expect(instance.getFeatureType(features[0])).toEqual(testArray[0]);
-    expect(instance.getFeatureType(features[1])).toEqual(testArray[1]);
-    expect(instance.getFeatureType(features[2])).toEqual(testArray[2]);
-    expect(instance.getFeatureType(features[3])).toEqual(testArray[3]);
+    expect(instance.getFeatureType(featureNames[0])).toEqual(testArray[0]);
+    expect(instance.getFeatureType(featureNames[1])).toEqual(testArray[1]);
+    expect(instance.getFeatureType(featureNames[2])).toEqual(testArray[2]);
+    expect(instance.getFeatureType(featureNames[3])).toEqual(testArray[3]);
   }
 
   // Return obj { result: true if error modal is showing, header: header string, content: content string }
   function errorModalIsShowing() {
     let res = {
-      result: shallowDom.find("#error_modal_dialog").at(0).prop('open'),
+      result: shallowDom.find("#error_modal_dialog").length > 0 && shallowDom.find("#error_modal_dialog").at(0).prop('open'),
       header: instance.state.errorModalHeader,
       content: instance.state.errorModalContent
     }
@@ -305,8 +223,6 @@ describe('test with mock file blob', () => {
     //shallowDom.find(".close").at(0).simulate('click'); //tries to find the close icon on the modal, but it fails
     instance.handleErrorModalClose();
     shallowDom.update();
-    // let res = errorModalIsShowing();
-    // console.log(res);
   }
 
   // Use beforeAll so that the blob stays loaded w/out having
@@ -335,7 +251,7 @@ describe('test with mock file blob', () => {
       expect(mockcb.mock.calls.length).toBe(1);
       
       // Test that the file object is set
-      expect(instance.state.selectedFile.name).toEqual(filename); 
+      expect(instance.state.selectedFile.name).toEqual(testFilename); 
 
       // Tell jest we're done with this test. 
       done();       
@@ -355,27 +271,36 @@ describe('test with mock file blob', () => {
     expect(errorModalIsShowing().result).toBe(false);
 
     // Test the auto-assigned feature types and getFeatureType()
-    testFeatureTypes('default');
+    // Expect dep. column to be set
+    let expected = getFeatureTypesDefault();
+    expected[depColumnIndex] = instance.featureTypeDependent;
+    testFeatureTypes(expected);
     
     // No ordinal features should be specified. Object should be empty
     expect(instance.state.ordinalFeaturesObject).toEqual({});
 
-    // Dependent feature should be unset after load
-    expect(instance.getDependentFeature()).toEqual(undefined);
+    // Dependent column should be set to column with name 'class' after load, 
+    // because the name 'class' is used to auto-detect dependent column
+    expect(instance.getDependentColumn()).toEqual(featureNames[depColumnIndex]);
+
+    // Set all features to default type and check. This will
+    // clear dependent column.
+    setAllFeaturesToDefaults();
+    testFeatureTypes('default');
   })
 
   it('DONE - test feature assignment behaviors via direct manipulation', () => {
     // Test assigning a categorical feature to type numeric.
     // Should silently reject and not change to numeric.
-    instance.setFeatureType(features[0], instance.featureTypeNumeric);
-    expect(instance.getFeatureType(features[0])).toEqual(instance.featureTypeCategorical);
+    instance.setFeatureType(featureNames[0], instance.featureTypeNumeric);
+    expect(instance.getFeatureType(featureNames[0])).toEqual(instance.featureTypeCategorical);
 
     // Test getting array of categorical features
     let catFeatures = [...catFeaturesOrig];
     expect(instance.getCatFeatures()).toEqual(catFeatures);
 
     // Set ordinal feature, w/out specifying rank
-    let ordFeature = features[0];
+    let ordFeature = featureNames[0];
     instance.setFeatureType(ordFeature, instance.featureTypeOrdinal);
     expect(instance.getFeatureType(ordFeature)).toEqual(instance.featureTypeOrdinal);
     let ordsExpected = {[ordFeature]: ["one","three","two"]};
@@ -414,20 +339,20 @@ describe('test with mock file blob', () => {
     setAllFeaturesToDefaults();
     
     // Dependent feature should be unset
-    expect(instance.getDependentFeature()).toEqual(undefined);
+    expect(instance.getDependentColumn()).toEqual(undefined);
     
     // Assigning dependent feature
-    let dep1 = features[2];
+    let dep1 = featureNames[2];
     instance.setFeatureType(dep1, instance.featureTypeDependent);
     expect(instance.getFeatureType(dep1)).toEqual(instance.featureTypeDependent);
-    expect(instance.getDependentFeature()).toEqual(dep1);
+    expect(instance.getDependentColumn()).toEqual(dep1);
     
     // Reassigning dependent feature should reset the previous one
     // to its default type
-    let dep2 = features[3];
+    let dep2 = featureNames[3];
     instance.setFeatureType(dep2, instance.featureTypeDependent);
     expect(instance.getFeatureType(dep2)).toEqual(instance.featureTypeDependent);
-    expect(instance.getDependentFeature()).toEqual(dep2);
+    expect(instance.getDependentColumn()).toEqual(dep2);
     expect(instance.getFeatureType(dep1)).toEqual(instance.getFeatureDefaultType(dep1));
 
     // Dependent column should no longer be included as categorical
@@ -441,18 +366,21 @@ describe('test with mock file blob', () => {
   // Test the methods used by the dialogs for text-based specification of
   // categorical feature types
   it('test text-based categorical-type specification', () => {
-    //Reset feature types to dfault
-    setAllFeaturesToDefaults();
-
-    // Get the text input element
-    let textInput = shallowDom.find("#categorical_features_text_area_input");
-    expect(textInput.length).toEqual(1);
-
-    // Simulate entering text and then accepting it
+    // Helper to simulate opening dialog, entering text and then accepting it
+    // cancel - pass true to cancel the input instead of accepting
     function updateCatText(text, cancel = false) {
+      // Open the dialog
+      let openButton = shallowDom.find("#cat_features_text_input_open_button");
+      expect(openButton.length).toEqual(1);
+      openButton.at(0).simulate('click');
+      // Get the text input element
+      let textInput = shallowDom.find("#categorical_features_text_area_input");
+      expect(textInput.length).toEqual(1);
+      // Simulate text input event
       let event = {target: {value: text}};
       textInput.at(0).prop('onChange')(event); // stores text to state
       textInput.at(0).prop('onBlur')(event); // stores text as raw to state
+      // Simulate button press
       if(cancel)
         shallowDom.find("#cat_features_user_text_cancel_button").at(0).simulate('click'); //uses state vars
       else
@@ -460,6 +388,17 @@ describe('test with mock file blob', () => {
       shallowDom.update();
     }
 
+    // Close the cat feature text input dialog
+    function closeCatText() {
+      let button = shallowDom.find("#cat_features_user_text_cancel_button");
+      if(button.length > 0) {
+        button.at(0).simulate('click'); //uses state vars
+      }
+    }
+
+    //Reset feature types to dfault
+    setAllFeaturesToDefaults();
+
     // Should all be default still after empty string
     updateCatText("");
     expect(errorModalIsShowing().result).toBe(false);
@@ -474,18 +413,18 @@ describe('test with mock file blob', () => {
 
     // Change text to set all features as categorical, but hit cancel button.
     // Shouldn't change feature assignments.
-    updateCatText(features.join(), true /*simulate clicking cancel button*/);
+    updateCatText(featureNames.join(), true /*simulate clicking cancel button*/);
     expect(errorModalIsShowing().result).toBe(false);
     testFeatureTypes('default');
 
-    // Assign all as categorical by passing string 'col1,col2,col3,class'
-    updateCatText(features.join());
+    // Assign all as categorical by passing string of all feature names
+    updateCatText(featureNames.join());
     expect(errorModalIsShowing().result).toBe(false);
     testFeatureTypes(instance.featureTypeCategorical);
 
     // Assign just default-categorical again, and the one default-numeric feature
     // should revert to numeric
-    updateCatText(features.join()); // set all to type cat
+    updateCatText(featureNames.join()); // set all to type cat
     updateCatText(catFeaturesOrig.join()); // leaves out those not cat by default
     expect(errorModalIsShowing().result).toBe(false);
     testFeatureTypes('default');
@@ -494,13 +433,13 @@ describe('test with mock file blob', () => {
     setAllFeaturesToDefaults();
 
     // Test with range - set all to categorical
-    updateCatText(features[0]+"-"+features[3]);
+    updateCatText(featureNames[0]+"-"+featureNames[3]);
     expect(errorModalIsShowing().result).toBe(false);
     testFeatureTypes(instance.featureTypeCategorical);
 
     // Test with smaller range. Should set all to categorical
     instance.setAllFeatureTypes(instance.featureTypeOrdinal);
-    updateCatText(features[0]+","+features[1]+"-"+features[2]+","+features[3]);
+    updateCatText(featureNames[0]+","+featureNames[1]+"-"+featureNames[2]+","+featureNames[3]);
     expect(errorModalIsShowing().result).toBe(false);
     testFeatureTypes(instance.featureTypeCategorical);
     
@@ -509,30 +448,34 @@ describe('test with mock file blob', () => {
     updateCatText("woogie woogie");
     expect(errorModalIsShowing().result).toBe(true);
     closeErrorModal();
+    closeCatText();
     testFeatureTypes('default');
 
     // Test with a bad range at begin
     setAllFeaturesToDefaults();
-    updateCatText("frankenNoodle-"+features[3]);
+    updateCatText("frankenNoodle-"+featureNames[3]);
     expect(errorModalIsShowing().result).toBe(true);
     closeErrorModal();
+    closeCatText();
     testFeatureTypes('default');
 
     // Test with a bad range at end
     setAllFeaturesToDefaults();
-    updateCatText(features[0]+"-frankenNoodle");
+    updateCatText(featureNames[0]+"-frankenNoodle");
     expect(errorModalIsShowing().result).toBe(true);
     closeErrorModal();
+    closeCatText();
     testFeatureTypes('default');
 
     // Test with setting dependent feature.
     // The dependent feature should not change when its feature is entered in text input,
     // and we should see error dialog.
-    instance.setFeatureType(features[0], instance.featureTypeDependent);
+    instance.setFeatureType(featureNames[0], instance.featureTypeDependent);
     updateCatText(catFeaturesOrig.join());
     expect(errorModalIsShowing().result).toBe(true);
     closeErrorModal();
-    let expected = [...getFeatureTypesOrig()];
+    closeCatText();
+    let expected = [...getFeatureTypesDefault()];
     expected[0] = instance.featureTypeDependent;
     testFeatureTypes(expected);
 
@@ -544,13 +487,18 @@ describe('test with mock file blob', () => {
     //Reset feature types to dfault
     setAllFeaturesToDefaults();
 
-    // Get the text input element
-    let textInput = shallowDom.find("#ordinal_features_text_area_input");
-    expect(textInput.length).toEqual(1);
 
     // Simulate entering text and then accepting it.
     // cancel - pass true to simulate clicking the cancel button in text entry box.
     function updateOrdText(text, cancel = false) {
+      // Open the dialog
+      let openButton = shallowDom.find("#ord_features_text_input_open_button");
+      expect(openButton.length).toEqual(1);
+      openButton.at(0).simulate('click');
+      // Get the text input element
+      let textInput = shallowDom.find("#ordinal_features_text_area_input");
+      expect(textInput.length).toEqual(1);
+      // Simulate text change event
       let event = {target: {value: text}};
       textInput.at(0).prop('onChange')(event); // stores text to state
       shallowDom.update();
@@ -561,6 +509,13 @@ describe('test with mock file blob', () => {
       shallowDom.update();
     }
 
+    function closeOrdText() {
+      let button = shallowDom.find("#ordinal_features_user_text_cancel_button");
+      if(button.length > 0){
+        button.at(0).simulate('click'); //uses state vars to process text
+      }
+    }
+
     // Should all be default still after empty string
     setAllFeaturesToDefaults();
     updateOrdText("");
@@ -572,6 +527,7 @@ describe('test with mock file blob', () => {
     updateOrdText("knights,ni");
     expect(errorModalIsShowing().result).toBe(true);
     closeErrorModal();
+    closeOrdText();
     testFeatureTypes('default');
 
     // Test valid feature name, but invalid values
@@ -579,6 +535,7 @@ describe('test with mock file blob', () => {
     updateOrdText("col1,ni");
     expect(errorModalIsShowing().result).toBe(true);
     closeErrorModal();
+    closeOrdText();
     testFeatureTypes('default');
 
     // Test canceling input. Feature types should not change.
@@ -592,7 +549,7 @@ describe('test with mock file blob', () => {
     setAllFeaturesToDefaults();
     updateOrdText("col1,one,two,three");
     expect(errorModalIsShowing().result).toBe(false);
-    let expected = [...getFeatureTypesOrig()];
+    let expected = [...getFeatureTypesDefault()];
     expected[0] = instance.featureTypeOrdinal;
     testFeatureTypes(expected);
     let ords = { col1: ['one','two','three']};
@@ -602,7 +559,7 @@ describe('test with mock file blob', () => {
     setAllFeaturesToDefaults();
     updateOrdText("col1,one,two,three\ncol2,bird,cat,dog");
     expect(errorModalIsShowing().result).toBe(false);
-    expected = [...getFeatureTypesOrig()];
+    expected = [...getFeatureTypesDefault()];
     expected[0] = instance.featureTypeOrdinal;
     expected[1] = instance.featureTypeOrdinal;
     testFeatureTypes(expected);
@@ -614,6 +571,7 @@ describe('test with mock file blob', () => {
     updateOrdText("col1,one,two,three\nunassumingduck,bird,cat,dog");
     expect(errorModalIsShowing().result).toBe(true);
     closeErrorModal();
+    closeOrdText();
     expect(instance.state.ordinalFeaturesObject).toEqual({});
     testFeatureTypes('default');
 
@@ -622,17 +580,19 @@ describe('test with mock file blob', () => {
     updateOrdText("col1,one,two,three\ncol2,bird,cat,fish");
     expect(errorModalIsShowing().result).toBe(true);
     closeErrorModal();
+    closeOrdText();
     expect(instance.state.ordinalFeaturesObject).toEqual({});
     testFeatureTypes('default');
 
     // Test valid feature name but that's set as dependent feature.
     // Expect an error and dependent feature not to be changed.
     setAllFeaturesToDefaults();
-    instance.setFeatureType(features[0], instance.featureTypeDependent);
+    instance.setFeatureType(featureNames[0], instance.featureTypeDependent);
     updateOrdText("col1,one,two,three");
     expect(errorModalIsShowing().result).toBe(true);
     closeErrorModal();
-    expected = [...getFeatureTypesOrig()];
+    closeOrdText();
+    expected = [...getFeatureTypesDefault()];
     expected[0] = instance.featureTypeDependent;
     testFeatureTypes(expected);
 
@@ -645,7 +605,7 @@ describe('test with mock file blob', () => {
     expect(errorModalIsShowing().result).toBe(false);
     ords = { col2: ['cat','dog','bird']};
     expect(instance.state.ordinalFeaturesObject).toEqual(ords);
-    expected = [...getFeatureTypesOrig()];
+    expected = [...getFeatureTypesDefault()];
     expected[1] = instance.featureTypeOrdinal;
     testFeatureTypes(expected);
 
@@ -657,42 +617,204 @@ describe('test with mock file blob', () => {
     let featureDrop = shallowDom.find("#featureTypeDropdown-0");
     expect(featureDrop.length).toEqual(1);
     let index = 0;
+    // Simulate setting its value
     featureDrop.at(index).simulate('change', 
       { target: { value: 'testval', name: 'testname' } },
       {value: instance.featureTypeOrdinal, customindexid: index}
     );
     // Expect the feature to be type ordinal now
-    expected = [...getFeatureTypesOrig()];
+    expected = [...getFeatureTypesDefault()];
     expected[index] = instance.featureTypeOrdinal;
     testFeatureTypes(expected);
-    // Expect the default ordering of values
+    // Expect the default/orig ordering of values
     let ordsArr = ['one','three','two'];
     ords = { col1: ordsArr };
     expect(instance.state.ordinalFeaturesObject).toEqual(ords);
     // Expect the text string in the ordinal specification box to match
+    let openButton = shallowDom.find("#ord_features_text_input_open_button");
+    expect(openButton.length).toEqual(1);
+    openButton.at(0).simulate('click');
     let ordTextInput = shallowDom.find("#ordinal_features_text_area_input");
     expect(ordTextInput.length).toEqual(1);
-    let expectedString = features[index] + ',' + ordsArr.join() + '\n';
+    let expectedString = featureNames[index] + ',' + ordsArr.join() + '\n';
     let value = ordTextInput.at(index).props().value;
     expect(value).toBe(expectedString);
 
+    // cleanup double-check
+    closeErrorModal();
+    closeOrdText();
   })
 
-  it('test UI element contents', () => {
-    // Reset feature types to dfault
+  // Test UI elements directly to see that they hold the right values
+  //
+  it('test other UI elements', () => {
+    // Reset feature types to default AND clears dependent column to undefined
     setAllFeaturesToDefaults();
 
     // Verify various dataset preview table values
-    //
+    
     // Header row
+    featureNames.forEach( (feature, index) => {
+      // Verify column header label
+      let label = shallowDom.find("#table_header_label_" + feature);
+      expect(label.length).toEqual(1);
+      // Empirically, the text assigned to the Segment component is
+      // in the second child object.
+      expect(label.at(0).props().children[1]).toEqual(featureNames[index]);
+          
+      // Verify correct feature types in dropdowns
+      let drop = shallowDom.find("#featureTypeDropdown-" + index.toString());
+      expect(drop.length).toEqual(1);
+      expect(drop.at(0).props().value).toEqual(getFeatureTypesDefault()[index]);
+    } )
+
+    // Target/Dependent column 
     //
+    // Set column via dropdown
+    let targetDrop = shallowDom.find("#target_dropdown");
+    expect(targetDrop.length).toEqual(1);
+    // Simulate setting its value
+    let index = 2;
+    targetDrop.at(0).simulate('change', 
+      { target: { value: 'testval', name: 'testname' } },
+      {value: featureNames[index]}
+    );
+    let expected = getFeatureTypesDefault();
+    expected[index] = instance.featureTypeDependent;
+    testFeatureTypes(expected);
+
+    // Expect a label of 'Target' instead of a dropdown in the data table preview
+    let targetLabel = shallowDom.find("#featureTypeTargetLabel-" + index.toString());
+    expect(targetLabel.length).toEqual(1);
+
+    // Verify the data shown in table preview
+    for( let row=0; row < dataByFeature[0].length; row++) {
+      featureNames.forEach( (feature, index) => {
+        let id = '#data_table_prev_' + row.toString() + '_' + feature;
+        let data = shallowDom.find(id);
+        // Empirically, TableCell component has one child that holds value
+        expect(data.length).toEqual(1);
+        expect(data.at(0).props().children.toString()).toEqual(dataByFeature[index][row].toString());
+      })
+    }
+    
+    // Prediction type dropdown
+    // Should default to default prediction type
+    let predDrop = shallowDom.find("#prediction_type_dropdown");
+    expect(predDrop.length).toEqual(1);
+    //TODO - figure out how to check currenty value of dropdown. It doesn't
+    // work to check predDrop.at(0).props().value with this type of dropdown
+    // which is part of a Field.
+    //console.log('prepDrop ', predDrop.at(0).props().value);
+    //
+    // Set to type regression via event handler
+    let newPredType = 'regression';
+    predDrop.at(0).simulate('change', 
+      { target: { value: 'testval', name: 'testname' } },
+      {value: newPredType}
+    );
+    // Check that it's changed
+    expect(instance.state.predictionType).toEqual(newPredType);
+
+  })
+
+  // Test the button/menu that sets all features to particular type
+  // The 'Set-all-to' button.
+  it('test set-all-features-to menu', () => {
+    setAllFeaturesToDefaults();
     
+    // Click the 'set-all-to' button and check that menu is open
+    let button = shallowDom.find("#set_all_to_button");
+    expect(button.length).toEqual(1);
+    button.at(0).simulate('click');
+    let menu = shallowDom.find("#set_all_to_menu");
+    expect(menu.length).toEqual(1);
+    expect(menu.at(0).props().open).toEqual(true);
+
+    // Test set all to categorical
+    let catMenu = shallowDom.find("#set_all_to_menu_categorical");
+    expect(catMenu.length).toEqual(1);
+    catMenu.at(0).simulate('click');
+    testFeatureTypes(instance.featureTypeCategorical);
 
+    // Test set all to ordinal
+    let ordMenu = shallowDom.find("#set_all_to_menu_ordinal");
+    expect(ordMenu.length).toEqual(1);
+    ordMenu.at(0).simulate('click');
+    testFeatureTypes(instance.featureTypeOrdinal);
+    
+    // Test set all to defaults
+    let defMenu = shallowDom.find("#set_all_to_menu_default");
+    expect(defMenu.length).toEqual(1);
+    defMenu.at(0).simulate('click');
+    testFeatureTypes('default');
+    
   })
 
-})
+  // Test the routine that preapes data for uploading.
+  // Does NOT test the actual uploading process, since
+  // that's an integration test.
+  it('test generate file data', () => {
+    setAllFeaturesToDefaults();
 
-//TODO
-// Test UI contents (eg table has right entries)
-// Test behaviors via UI interaction simulation
-// Test submit behavior and validation - generateFileData method, but not actual submission because that's an integration test
\ No newline at end of file
+    // Set the dependent column
+    instance.setFeatureType(featureNames[depColumnIndex], instance.featureTypeDependent);
+    // Change the prediction type
+    let predType = 'regression';
+    instance.setState( {predictionType: predType});
+    shallowDom.update();
+    // Set first feature to ordinal
+    instance.setFeatureType(featureNames[0], instance.featureTypeOrdinal);
+
+    let formData = instance.generateFileData();
+    // Check results
+    expect(formData.errorResp).toBeUndefined();
+    expect(errorModalIsShowing().result).toEqual(false);
+    // Get the metadata values
+    let result = JSON.parse( formData.get('_metadata') );
+    // Ordinals
+    let ords = {};
+    ords[featureNames[0]] = ['one','three','two'];
+    expect(result['ordinal_features']).toEqual(ords);
+    // Categoricals
+    let cats= [ featureNames[1], featureNames[3] ];
+    expect(result.categorical_features).toEqual(cats);
+    // Prediction type
+    expect(result.prediction_type).toEqual(predType);
+    // Dependent column
+    expect(result.dependent_col).toEqual(featureNames[depColumnIndex]);
+    // Filename
+    expect(result.name).toEqual(testFilename);
+
+    // Test with bad prediction type.
+    instance.setState( {
+      predictionType: 'nice try buddy!',
+      uploadButtonDisabled: false //hack
+    });
+    shallowDom.update();
+    formData = instance.generateFileData();
+    expect(formData.errorResp).toBeDefined();
+
+    // Test again with the handleUpload method to test that error gets caught and handled.
+    // Should get error modal.
+    instance.handleUpload();
+    shallowDom.update();
+    expect(errorModalIsShowing().result).toEqual(true);
+    closeErrorModal();
+
+    // Test with undefined dependent column
+    setAllFeaturesToDefaults(); //clears dep. column
+    formData = instance.generateFileData();
+    expect(formData.errorResp).toBeDefined();
+
+    // Test again with handleUpload. Should get error modal
+    instance.setState( {
+      uploadButtonDisabled: false //hack for check that's done in handleUpload
+    });
+    shallowDom.update();
+    instance.handleUpload();
+    shallowDom.update();
+    expect(errorModalIsShowing().result).toEqual(true);
+    closeErrorModal();
+  })
+})
\ No newline at end of file
diff --git a/lab/webapp/src/components/FileUpload/index.js b/lab/webapp/src/components/FileUpload/index.js
index d5c3bfa3e..3604dfb8c 100644
--- a/lab/webapp/src/components/FileUpload/index.js
+++ b/lab/webapp/src/components/FileUpload/index.js
@@ -111,7 +111,7 @@ class FileUpload extends Component {
     this.setAllFeatureTypes = this.setAllFeatureTypes.bind(this);
     this.parseFeatureToken = this.parseFeatureToken.bind(this);
     this.initFeatureTypeDefaults = this.initFeatureTypeDefaults.bind(this);
-    this.getDependentFeature = this.getDependentFeature.bind(this);
+    this.getDependentColumn = this.getDependentColumn.bind(this);
     this.clearDependentFeature = this.clearDependentFeature.bind(this);
     this.getElapsedTime = this.getElapsedTime.bind(this);
     this.getOridinalRankingDialog = this.getOridinalRankingDialog.bind(this);
@@ -404,7 +404,7 @@ handleCatFeaturesUserTextCancel() {
     const allowedPredictionTypes = ["classification", "regression"]
 
     const data = new FormData();
-    let depCol = this.getDependentFeature();
+    let depCol = this.getDependentColumn();
     let ordFeatures = "";
     let predictionType = this.state.predictionType;
 
@@ -458,7 +458,8 @@ handleCatFeaturesUserTextCancel() {
       //window.console.log('preview of uploaded data: ', dataPrev);
       // after uploading a dataset request new list of datasets to update the page
     } else {
-      window.console.log('no file available');
+      window.console.log('generateFileDate: no file available');
+      return { errorResp: "No file is available." };
     }
 
     return data;
@@ -612,7 +613,6 @@ handleCatFeaturesUserTextCancel() {
     this.setState({uploadButtonDisabled:true});
 
     const { uploadDataset } = this.props;
-
     // only attempt upload if there is a selected file with a filename
     if(this.state.selectedFile && this.state.selectedFile.name) {
       let data = this.generateFileData(); // should be FormData
@@ -1117,7 +1117,8 @@ handleCatFeaturesUserTextCancel() {
       dataPrev.meta.fields.map((field, i) => {
           //Assign dropdown items for setting field type, or just 'Target' label for columns that's designated as target
           let fieldTypeItem = ( field === this.getDependentColumn() ?
-            <i>Target</i> :
+            <i id={"featureTypeTargetLabel-"+i.toString()}>Target</i>
+            :
             <Dropdown
               id={'featureTypeDropdown-' + i.toString()}
               value={this.state.featureType[i]}
@@ -1129,7 +1130,7 @@ handleCatFeaturesUserTextCancel() {
           return (
             <Table.HeaderCell key={field} verticalAlign='top'>
               <Segment.Group compact>
-                <Segment> {field} </Segment>
+                <Segment id={"table_header_label_" + field}> {field} </Segment>
                 <Segment inverted> {fieldTypeItem} </Segment>
                 {/*Return a segment with 'rank'button, or null, based on field type*/}
                 {this.getDataTableOrdinalRankButton(field)}
@@ -1162,9 +1163,9 @@ handleCatFeaturesUserTextCancel() {
           <Table.Row key={i}>
             <Table.Cell key={'dataTablePrevRow_'+i}>{i+1}</Table.Cell>
             {dataPrev.meta.fields.map(field => {
-                let tempKey = i + field;
+                let key_id = 'data_table_prev_' + i.toString() +'_' + field;
                 return (
-                  <Table.Cell key={'dataTablePrev_' + tempKey.toString()}>
+                  <Table.Cell key={key_id} id={key_id}>
                     {row[field]}
                   </Table.Cell>
                 )
@@ -1221,7 +1222,7 @@ handleCatFeaturesUserTextCancel() {
    *  its default type.
    */
   clearDependentFeature() {
-    let currentDep = this.getDependentFeature();
+    let currentDep = this.getDependentColumn();
     currentDep !== undefined && this.setFeatureType(currentDep, this.getFeatureDefaultType(currentDep));
   }
 
@@ -1299,7 +1300,7 @@ handleCatFeaturesUserTextCancel() {
     })
     //Check that user isn't including the currently-defined dependent column
     if( success ) {
-      let depCol = this.getDependentFeature();
+      let depCol = this.getDependentColumn();
       if( depCol !== undefined && expanded.indexOf(depCol) > -1 ) {
         success = false;
         message = "The feature " + depCol + " cannot be used because it is assigned as the Dependent Column.";
@@ -1339,6 +1340,7 @@ handleCatFeaturesUserTextCancel() {
         <Grid.Row>
           <Grid.Column width={6}>
             <Form.Field 
+              id="target_dropdown"
               inline
               label="Target"
               control={Dropdown}
@@ -1373,7 +1375,8 @@ handleCatFeaturesUserTextCancel() {
             />
           </Grid.Column>
           <Grid.Column width={6}>
-            <Form.Field 
+            <Form.Field
+              id="prediction_type_dropdown" 
               inline
               label="Prediction Type"
               control={Dropdown} 
@@ -1428,14 +1431,15 @@ handleCatFeaturesUserTextCancel() {
         <Grid.Column>
           <Form.Input>
             <Button
-                  color='blue'
-                  size='small'
-                  fluid
-                  inverted
-                  disabled={this.state.ordinalFeatureToRank !== undefined}
-                  className="file-upload-button"
-                  content="Set Ordinal"
-                  onClick={() => this.setState({ordinalFeaturesUserTextModalOpen: !this.ordinalFeaturesUserTextModalOpen})}
+              id="ord_features_text_input_open_button"
+              color='blue'
+              size='small'
+              fluid
+              inverted
+              disabled={this.state.ordinalFeatureToRank !== undefined}
+              className="file-upload-button"
+              content="Set Ordinal"
+              onClick={() => this.setState({ordinalFeaturesUserTextModalOpen: !this.ordinalFeaturesUserTextModalOpen})}
             />
             <Popup
               on="click"
@@ -1461,6 +1465,7 @@ handleCatFeaturesUserTextCancel() {
         <Grid.Column>
           <Form.Input>
             <Button
+              id="cat_features_text_input_open_button"
               color='blue'
               size='small'
               fluid
@@ -1493,6 +1498,7 @@ handleCatFeaturesUserTextCancel() {
         <Grid.Column>
           <Form.Input>
             <Button
+              id='set_all_to_button'
               color='blue'
               size='small'
               fluid
@@ -1503,14 +1509,20 @@ handleCatFeaturesUserTextCancel() {
             />
             {/*dropdown menu*/}
             <div style={{ display: this.state.allFeaturesMenuOpen ? "block" : "none" }}>
-              <Menu vertical open={this.state.allFeaturesMenuOpen}>
-                <Menu.Item content={'Categorical'}
+              <Menu vertical open={this.state.allFeaturesMenuOpen} id='set_all_to_menu'>
+                <Menu.Item 
+                  id='set_all_to_menu_categorical'
+                  content={'Categorical'}
                   onClick={() => {this.setAllFeatureTypes(this.featureTypeCategorical); this.setState({allFeaturesMenuOpen: false}) }}
                 />
-                <Menu.Item content={'Ordinal'}
+                <Menu.Item 
+                  id='set_all_to_menu_ordinal'
+                  content={'Ordinal'}
                   onClick={() => {this.setAllFeatureTypes(this.featureTypeOrdinal); this.setState({allFeaturesMenuOpen: false}) }}
                 />
-                <Menu.Item content={
+                <Menu.Item 
+                  id='set_all_to_menu_default'
+                  content={
                     <React.Fragment>
                       {'Numeric / Categorical'}
                       <div>(auto-detect)</div>
@@ -1621,8 +1633,8 @@ handleCatFeaturesUserTextCancel() {
           </Segment>
           <Segment>
             <textarea
-              className="file-upload-feature-text-input"
               id="categorical_features_text_area_input"
+              className="file-upload-feature-text-input"
               label="Categorical Features"
               onChange={this.handleCatFeaturesUserTextOnChange}
               onBlur={this.handleCatFeaturesUserTextBlur}
@@ -1633,6 +1645,7 @@ handleCatFeaturesUserTextCancel() {
             />
           </Segment>
           <Button
+            id="cat_features_user_text_accept_button"
             className='file-upload-pseudo-dialog-button'
             content="Accept"
             icon='checkmark'
@@ -1641,6 +1654,7 @@ handleCatFeaturesUserTextCancel() {
             color="blue"
           />
           <Button 
+            id="cat_features_user_text_cancel_button"
             className='file-upload-pseudo-dialog-button'
             color='red' 
             onClick={this.handleCatFeaturesUserTextCancel}
@@ -1684,6 +1698,7 @@ handleCatFeaturesUserTextCancel() {
             />
           </Segment>
           <Button
+            id="ordinal_features_user_text_accept_button"
             className='file-upload-pseudo-dialog-button'
             content="Accept"
             icon='checkmark'
@@ -1691,7 +1706,8 @@ handleCatFeaturesUserTextCancel() {
             color="blue"
             inverted
           />
-          <Button 
+          <Button
+            id="ordinal_features_user_text_cancel_button" 
             className='file-upload-pseudo-dialog-button'
             color='red' 
             onClick={this.handleOrdinalFeaturesUserTextCancel}
@@ -1756,7 +1772,8 @@ handleCatFeaturesUserTextCancel() {
     let fileInputElem = undefined;
     if( this.state.selectedFile == null ) {
       fileInputElem = (
-        <Dropzone 
+        <Dropzone
+            id="file-dropzone"
             onDropAccepted={this.handleSelectedFile}
             onDropRejected={this.handleRejectedFile}
             accept=".csv,.tsv,text/csv,text/tsv"
@@ -1802,7 +1819,7 @@ handleCatFeaturesUserTextCancel() {
     // of the pseudo-modal windows just below.
     if(this.state.showErrorModal){
       return(
-      <Modal style={{ marginTop:'0' }} open={this.state.showErrorModal} onClose={this.handleErrorModalClose} closeIcon>
+      <Modal style={{ marginTop:'0' }} open={this.state.showErrorModal} onClose={this.handleErrorModalClose} closeIcon id="error_modal_dialog"> 
         <Modal.Header>{this.state.errorModalHeader}</Modal.Header>
         <Modal.Content>{this.state.errorModalContent}</Modal.Content>
       </Modal>
@@ -1834,12 +1851,6 @@ handleCatFeaturesUserTextCancel() {
             
             {/* File dropzone/chooser */}
             {fileInputElem}
-
-            {/*Modal for error messages*/}
-            <Modal style={{ marginTop:'0' }} open={this.state.openErrorModal} onClose={this.handleErrorModalClose} closeIcon id="error_modal_dialog">
-              <Modal.Header>{this.state.errorModalHeader}</Modal.Header>
-              <Modal.Content>{this.state.errorModalContent}</Modal.Content>
-            </Modal>
             <br/>
 
             <div

From 0247d4bf443f6d07b35530f69aefe50884ab3d52 Mon Sep 17 00:00:00 2001
From: Michael Stauffer <mgstauff@gmail.com>
Date: Tue, 4 May 2021 18:03:25 -0400
Subject: [PATCH 5/8] Fix unit test runner and js_tests to exit with
 appropriate exit codes

Needed for proper error handling in Github Actions
NO Enzyme Snapshot for js_tests.sh
---
 .../__snapshots__/fileUpload.test.js.snap     | 404 ------------------
 tests/unit/js_tests.sh                        |   8 +-
 tests/unit/unit_test_runner.sh                |  15 +-
 3 files changed, 20 insertions(+), 407 deletions(-)
 delete mode 100644 lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap

diff --git a/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap b/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap
deleted file mode 100644
index 73347578d..000000000
--- a/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap
+++ /dev/null
@@ -1,404 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`basic testing of fileupload react component DONE - full component snapshot 1`] = `
-<div>
-  <SceneHeader
-    header="Upload Datasets"
-  />
-  <Form
-    as="form"
-    inverted={true}
-  >
-    <Segment
-      className="file-upload-segment"
-    >
-      <Dropzone
-        accept=".csv,.tsv,text/csv,text/tsv"
-        id="file-dropzone"
-        multiple={false}
-        onDropAccepted={[Function]}
-        onDropRejected={[Function]}
-      >
-        <Component />
-      </Dropzone>
-      <br />
-      <div
-        className="file-upload-form-hide-inputs"
-        id="file-upload-form-input-area"
-      >
-        <Divider
-          horizontal={true}
-          inverted={true}
-        >
-          <Header
-            as="h4"
-            inverted={true}
-          >
-            Specification
-          </Header>
-        </Divider>
-        <Grid
-          columns={4}
-        >
-          <GridRow>
-            <GridColumn
-              width={6}
-            >
-              <FormField
-                className="inverted-dropdown-search"
-                control={[Function]}
-                fluid={true}
-                id="target_dropdown"
-                inline={true}
-                label="Target"
-                onChange={[Function]}
-                options={Array []}
-                placeholder="Select a column"
-                search={true}
-              />
-            </GridColumn>
-            <GridColumn
-              style={
-                Object {
-                  "marginTop": "1.9em",
-                  "paddingLeft": "0",
-                }
-              }
-              width={2}
-            >
-              <Popup
-                content={
-                  <div
-                    className="content"
-                  >
-                    <p>
-                       
-                      The column that describes the label or output for each row.
-    For example, if analyzing a dataset of patients with different types of diabetes,
-    this column may have the values "type1", "type2", or "none".
-                       
-                    </p>
-                  </div>
-                }
-                disabled={false}
-                eventsEnabled={true}
-                header="Target Column Help"
-                offset={0}
-                on="click"
-                pinned={false}
-                position="right center"
-                trigger={
-                  <Icon
-                    as="i"
-                    className="file-upload-help-icon"
-                    color="blue"
-                    inverted={true}
-                    name="info circle"
-                    size="large"
-                  />
-                }
-              />
-            </GridColumn>
-            <GridColumn
-              width={6}
-            >
-              <FormField
-                className="inverted-dropdown-inline"
-                control={[Function]}
-                defaultValue="classification"
-                fluid={true}
-                id="prediction_type_dropdown"
-                inline={true}
-                label="Prediction Type"
-                onChange={[Function]}
-                options={
-                  Array [
-                    Object {
-                      "key": "classification",
-                      "text": "classification",
-                      "value": "classification",
-                    },
-                    Object {
-                      "key": "regression",
-                      "text": "regression",
-                      "value": "regression",
-                    },
-                  ]
-                }
-              />
-            </GridColumn>
-            <GridColumn
-              style={
-                Object {
-                  "marginTop": "1.9em",
-                  "paddingLeft": "0",
-                }
-              }
-              width={2}
-            >
-              <Popup
-                content={
-                  <div
-                    className="content"
-                  >
-                    <p>
-                      <i>
-                        Classification
-                      </i>
-                       algorithms are used to model discrete categorical outputs. Examples include modeling the color car someone might buy ("red", "green", "blue"...) or a disease state ("type1Diabetes", "type2Diabetes", "none"...)
-                      <br />
-                      <br />
-                      <i>
-                        Regression
-                      </i>
-                       algorithms are used to model a continuous valued output.  Examples include modeling the amount of money a house is predicted to sell for.
-                    </p>
-                  </div>
-                }
-                disabled={false}
-                eventsEnabled={true}
-                header="Prediction Type Help"
-                offset={0}
-                on="click"
-                pinned={false}
-                position="left center"
-                trigger={
-                  <Icon
-                    as="i"
-                    className="file-upload-help-icon"
-                    color="blue"
-                    inverted={true}
-                    name="info circle"
-                    size="large"
-                  />
-                }
-              />
-            </GridColumn>
-          </GridRow>
-        </Grid>
-        <FormField
-          label="Features Types"
-          style={
-            Object {
-              "marginTop": "1em",
-            }
-          }
-        />
-        <div>
-          <Grid
-            columns={3}
-          >
-            <GridRow>
-              <GridColumn>
-                <FormInput
-                  as={[Function]}
-                  control={[Function]}
-                >
-                  <Button
-                    as="button"
-                    className="file-upload-button"
-                    color="blue"
-                    content="Set Ordinal"
-                    disabled={false}
-                    fluid={true}
-                    id="ord_features_text_input_open_button"
-                    inverted={true}
-                    onClick={[Function]}
-                    size="small"
-                  />
-                  <Popup
-                    content={
-                      <div
-                        className="content"
-                      >
-                        <p>
-                          Ordinal features have a discrete number of categories, and the categories have a logical order (rank). Some examples include size ("small", "medium", "large"), or rank results ("first", "second", "third").
-                          <br />
-                          <br />
-                          You can specify these features and their rank in two ways:
-                          <br />
-                          1) In the text input box opened by the button to the left, using the format described in the box 
-                          <br />
-                          2) or, in the Dataset Preview table below: use the dropdown boxes to specify ordinal features, then rank them using the drag-and-drop list of unique categories.
-                        </p>
-                      </div>
-                    }
-                    disabled={false}
-                    eventsEnabled={true}
-                    header="Ordinal Features Help"
-                    offset={0}
-                    on="click"
-                    pinned={false}
-                    position="right center"
-                    trigger={
-                      <Icon
-                        as="i"
-                        color="blue"
-                        inverted={true}
-                        name="info circle"
-                        size="large"
-                      />
-                    }
-                  />
-                </FormInput>
-              </GridColumn>
-              <GridColumn>
-                <FormInput
-                  as={[Function]}
-                  control={[Function]}
-                >
-                  <Button
-                    as="button"
-                    className="file-upload-button"
-                    color="blue"
-                    content="Set Categorical"
-                    disabled={false}
-                    fluid={true}
-                    id="cat_features_text_input_open_button"
-                    inverted={true}
-                    onClick={[Function]}
-                    size="small"
-                  />
-                  <Popup
-                    content={
-                      <div
-                        className="content"
-                      >
-                        <p>
-                          This site is using 'Categorical' to mean a Nominal feature, per custom in the ML community. Categorical features have a discrete number of categories that do not have an intrinsic order. Some examples include sex ("male", "female") or eye color ("brown", "green", "blue"...).
-                          <br />
-                          <br />
-                          You can specify these features in two ways:
-                          <br />
-                          1) In the text input box opened by the button to the left, using the format described in the box 
-                          <br />
-                          2) or, in the Dataset Preview table below: use the dropdown boxes to specify categorical features.
-                        </p>
-                      </div>
-                    }
-                    disabled={false}
-                    eventsEnabled={true}
-                    header="Categorical Features Help"
-                    offset={0}
-                    on="click"
-                    pinned={false}
-                    position="right center"
-                    trigger={
-                      <Icon
-                        as="i"
-                        color="blue"
-                        inverted={true}
-                        name="info circle"
-                        size="large"
-                      />
-                    }
-                  />
-                </FormInput>
-              </GridColumn>
-              <GridColumn>
-                <FormInput
-                  as={[Function]}
-                  control={[Function]}
-                >
-                  <Button
-                    as="button"
-                    className="file-upload-button"
-                    color="blue"
-                    content="Set All To..."
-                    fluid={true}
-                    id="set_all_to_button"
-                    inverted={true}
-                    onClick={[Function]}
-                    size="small"
-                  />
-                  <div
-                    style={
-                      Object {
-                        "display": "none",
-                      }
-                    }
-                  >
-                    <Menu
-                      id="set_all_to_menu"
-                      open={false}
-                      vertical={true}
-                    >
-                      <MenuItem
-                        content="Categorical"
-                        id="set_all_to_menu_categorical"
-                        onClick={[Function]}
-                      />
-                      <MenuItem
-                        content="Ordinal"
-                        id="set_all_to_menu_ordinal"
-                        onClick={[Function]}
-                      />
-                      <MenuItem
-                        content={
-                          <React.Fragment>
-                            Numeric / Categorical
-                            <div>
-                              (auto-detect)
-                            </div>
-                          </React.Fragment>
-                        }
-                        id="set_all_to_menu_default"
-                        onClick={[Function]}
-                      />
-                    </Menu>
-                  </div>
-                </FormInput>
-              </GridColumn>
-            </GridRow>
-          </Grid>
-        </div>
-        <Divider
-          horizontal={true}
-          inverted={true}
-        >
-          <Header
-            as="h4"
-            inverted={true}
-          >
-             Upload 
-          </Header>
-        </Divider>
-        <FormField
-          style={
-            Object {
-              "float": "right",
-            }
-          }
-        >
-          <Button
-            as="button"
-            className="file-upload-button"
-            color="red"
-            content="Cancel"
-            inverted={true}
-            onClick={[Function]}
-          />
-          <Button
-            as="button"
-            className="file-upload-button"
-            color="blue"
-            content="Upload Dataset"
-            icon="upload"
-            inverted={true}
-            onClick={[Function]}
-          />
-        </FormField>
-      </div>
-    </Segment>
-  </Form>
-  <p
-    style={
-      Object {
-        "display": "none",
-      }
-    }
-  >
-     hi 
-  </p>
-</div>
-`;
diff --git a/tests/unit/js_tests.sh b/tests/unit/js_tests.sh
index 2237ffb2e..f13b42cbd 100644
--- a/tests/unit/js_tests.sh
+++ b/tests/unit/js_tests.sh
@@ -7,10 +7,16 @@ export JEST_JUNIT_OUTPUT_DIR="${REPORT_PATH}"
 echo "starting '/lab' jest reports"
 cd "/appsrc/lab/"
 npm run test
-
+labres=$?
+echo "==== labres unit tests result "$labres
 
 echo "starting '/lab/webapp' jest reports"
 cd "/appsrc/lab/webapp/"
 npm run test
+webappres=$?
+echo "==== webappres unit tests result "$webappres
 
 cd "/appsrc"
+
+# exit with error code 1 if either test fails
+if [ $labres -eq 0 -a $webappres -eq 0 ]; then exit 0; else exit 1; fi
diff --git a/tests/unit/unit_test_runner.sh b/tests/unit/unit_test_runner.sh
index fef06eb42..e476d292b 100644
--- a/tests/unit/unit_test_runner.sh
+++ b/tests/unit/unit_test_runner.sh
@@ -3,5 +3,16 @@
 dos2unix /appsrc/tests/unit/py_tests.sh
 dos2unix /appsrc/tests/unit/js_tests.sh
 
-. /appsrc/tests/unit/py_tests.sh
-. /appsrc/tests/unit/js_tests.sh
\ No newline at end of file
+# run via sh to avoid permissions problem
+sh /appsrc/tests/unit/py_tests.sh
+pyres=$?
+# echo "==== py_tests unit tests result "$pyres
+
+# run via sh to avoid permissions problem
+sh /appsrc/tests/unit/js_tests.sh
+jsres=$?
+# echo "==== js_tests unit tests result "$jsres
+
+# exit with code 1 if either test fails
+# If we don't exit with a non-zero value, github actions won't catch the error
+if [ $pyres -eq 0 -a $jsres -eq 0 ]; then exit 0; else exit 1; fi

From e8f6d794cada80ea0b3e7aca76655c446022a268 Mon Sep 17 00:00:00 2001
From: Michael Stauffer <mgstauff@gmail.com>
Date: Thu, 6 May 2021 23:35:59 -0400
Subject: [PATCH 6/8] File Upload Unit Tests - add enzyme snapshot gen'ed on
 local machine

---
 .../__snapshots__/fileUpload.test.js.snap     | 404 ++++++++++++++++++
 1 file changed, 404 insertions(+)
 create mode 100644 lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap

diff --git a/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap b/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap
new file mode 100644
index 000000000..73347578d
--- /dev/null
+++ b/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap
@@ -0,0 +1,404 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`basic testing of fileupload react component DONE - full component snapshot 1`] = `
+<div>
+  <SceneHeader
+    header="Upload Datasets"
+  />
+  <Form
+    as="form"
+    inverted={true}
+  >
+    <Segment
+      className="file-upload-segment"
+    >
+      <Dropzone
+        accept=".csv,.tsv,text/csv,text/tsv"
+        id="file-dropzone"
+        multiple={false}
+        onDropAccepted={[Function]}
+        onDropRejected={[Function]}
+      >
+        <Component />
+      </Dropzone>
+      <br />
+      <div
+        className="file-upload-form-hide-inputs"
+        id="file-upload-form-input-area"
+      >
+        <Divider
+          horizontal={true}
+          inverted={true}
+        >
+          <Header
+            as="h4"
+            inverted={true}
+          >
+            Specification
+          </Header>
+        </Divider>
+        <Grid
+          columns={4}
+        >
+          <GridRow>
+            <GridColumn
+              width={6}
+            >
+              <FormField
+                className="inverted-dropdown-search"
+                control={[Function]}
+                fluid={true}
+                id="target_dropdown"
+                inline={true}
+                label="Target"
+                onChange={[Function]}
+                options={Array []}
+                placeholder="Select a column"
+                search={true}
+              />
+            </GridColumn>
+            <GridColumn
+              style={
+                Object {
+                  "marginTop": "1.9em",
+                  "paddingLeft": "0",
+                }
+              }
+              width={2}
+            >
+              <Popup
+                content={
+                  <div
+                    className="content"
+                  >
+                    <p>
+                       
+                      The column that describes the label or output for each row.
+    For example, if analyzing a dataset of patients with different types of diabetes,
+    this column may have the values "type1", "type2", or "none".
+                       
+                    </p>
+                  </div>
+                }
+                disabled={false}
+                eventsEnabled={true}
+                header="Target Column Help"
+                offset={0}
+                on="click"
+                pinned={false}
+                position="right center"
+                trigger={
+                  <Icon
+                    as="i"
+                    className="file-upload-help-icon"
+                    color="blue"
+                    inverted={true}
+                    name="info circle"
+                    size="large"
+                  />
+                }
+              />
+            </GridColumn>
+            <GridColumn
+              width={6}
+            >
+              <FormField
+                className="inverted-dropdown-inline"
+                control={[Function]}
+                defaultValue="classification"
+                fluid={true}
+                id="prediction_type_dropdown"
+                inline={true}
+                label="Prediction Type"
+                onChange={[Function]}
+                options={
+                  Array [
+                    Object {
+                      "key": "classification",
+                      "text": "classification",
+                      "value": "classification",
+                    },
+                    Object {
+                      "key": "regression",
+                      "text": "regression",
+                      "value": "regression",
+                    },
+                  ]
+                }
+              />
+            </GridColumn>
+            <GridColumn
+              style={
+                Object {
+                  "marginTop": "1.9em",
+                  "paddingLeft": "0",
+                }
+              }
+              width={2}
+            >
+              <Popup
+                content={
+                  <div
+                    className="content"
+                  >
+                    <p>
+                      <i>
+                        Classification
+                      </i>
+                       algorithms are used to model discrete categorical outputs. Examples include modeling the color car someone might buy ("red", "green", "blue"...) or a disease state ("type1Diabetes", "type2Diabetes", "none"...)
+                      <br />
+                      <br />
+                      <i>
+                        Regression
+                      </i>
+                       algorithms are used to model a continuous valued output.  Examples include modeling the amount of money a house is predicted to sell for.
+                    </p>
+                  </div>
+                }
+                disabled={false}
+                eventsEnabled={true}
+                header="Prediction Type Help"
+                offset={0}
+                on="click"
+                pinned={false}
+                position="left center"
+                trigger={
+                  <Icon
+                    as="i"
+                    className="file-upload-help-icon"
+                    color="blue"
+                    inverted={true}
+                    name="info circle"
+                    size="large"
+                  />
+                }
+              />
+            </GridColumn>
+          </GridRow>
+        </Grid>
+        <FormField
+          label="Features Types"
+          style={
+            Object {
+              "marginTop": "1em",
+            }
+          }
+        />
+        <div>
+          <Grid
+            columns={3}
+          >
+            <GridRow>
+              <GridColumn>
+                <FormInput
+                  as={[Function]}
+                  control={[Function]}
+                >
+                  <Button
+                    as="button"
+                    className="file-upload-button"
+                    color="blue"
+                    content="Set Ordinal"
+                    disabled={false}
+                    fluid={true}
+                    id="ord_features_text_input_open_button"
+                    inverted={true}
+                    onClick={[Function]}
+                    size="small"
+                  />
+                  <Popup
+                    content={
+                      <div
+                        className="content"
+                      >
+                        <p>
+                          Ordinal features have a discrete number of categories, and the categories have a logical order (rank). Some examples include size ("small", "medium", "large"), or rank results ("first", "second", "third").
+                          <br />
+                          <br />
+                          You can specify these features and their rank in two ways:
+                          <br />
+                          1) In the text input box opened by the button to the left, using the format described in the box 
+                          <br />
+                          2) or, in the Dataset Preview table below: use the dropdown boxes to specify ordinal features, then rank them using the drag-and-drop list of unique categories.
+                        </p>
+                      </div>
+                    }
+                    disabled={false}
+                    eventsEnabled={true}
+                    header="Ordinal Features Help"
+                    offset={0}
+                    on="click"
+                    pinned={false}
+                    position="right center"
+                    trigger={
+                      <Icon
+                        as="i"
+                        color="blue"
+                        inverted={true}
+                        name="info circle"
+                        size="large"
+                      />
+                    }
+                  />
+                </FormInput>
+              </GridColumn>
+              <GridColumn>
+                <FormInput
+                  as={[Function]}
+                  control={[Function]}
+                >
+                  <Button
+                    as="button"
+                    className="file-upload-button"
+                    color="blue"
+                    content="Set Categorical"
+                    disabled={false}
+                    fluid={true}
+                    id="cat_features_text_input_open_button"
+                    inverted={true}
+                    onClick={[Function]}
+                    size="small"
+                  />
+                  <Popup
+                    content={
+                      <div
+                        className="content"
+                      >
+                        <p>
+                          This site is using 'Categorical' to mean a Nominal feature, per custom in the ML community. Categorical features have a discrete number of categories that do not have an intrinsic order. Some examples include sex ("male", "female") or eye color ("brown", "green", "blue"...).
+                          <br />
+                          <br />
+                          You can specify these features in two ways:
+                          <br />
+                          1) In the text input box opened by the button to the left, using the format described in the box 
+                          <br />
+                          2) or, in the Dataset Preview table below: use the dropdown boxes to specify categorical features.
+                        </p>
+                      </div>
+                    }
+                    disabled={false}
+                    eventsEnabled={true}
+                    header="Categorical Features Help"
+                    offset={0}
+                    on="click"
+                    pinned={false}
+                    position="right center"
+                    trigger={
+                      <Icon
+                        as="i"
+                        color="blue"
+                        inverted={true}
+                        name="info circle"
+                        size="large"
+                      />
+                    }
+                  />
+                </FormInput>
+              </GridColumn>
+              <GridColumn>
+                <FormInput
+                  as={[Function]}
+                  control={[Function]}
+                >
+                  <Button
+                    as="button"
+                    className="file-upload-button"
+                    color="blue"
+                    content="Set All To..."
+                    fluid={true}
+                    id="set_all_to_button"
+                    inverted={true}
+                    onClick={[Function]}
+                    size="small"
+                  />
+                  <div
+                    style={
+                      Object {
+                        "display": "none",
+                      }
+                    }
+                  >
+                    <Menu
+                      id="set_all_to_menu"
+                      open={false}
+                      vertical={true}
+                    >
+                      <MenuItem
+                        content="Categorical"
+                        id="set_all_to_menu_categorical"
+                        onClick={[Function]}
+                      />
+                      <MenuItem
+                        content="Ordinal"
+                        id="set_all_to_menu_ordinal"
+                        onClick={[Function]}
+                      />
+                      <MenuItem
+                        content={
+                          <React.Fragment>
+                            Numeric / Categorical
+                            <div>
+                              (auto-detect)
+                            </div>
+                          </React.Fragment>
+                        }
+                        id="set_all_to_menu_default"
+                        onClick={[Function]}
+                      />
+                    </Menu>
+                  </div>
+                </FormInput>
+              </GridColumn>
+            </GridRow>
+          </Grid>
+        </div>
+        <Divider
+          horizontal={true}
+          inverted={true}
+        >
+          <Header
+            as="h4"
+            inverted={true}
+          >
+             Upload 
+          </Header>
+        </Divider>
+        <FormField
+          style={
+            Object {
+              "float": "right",
+            }
+          }
+        >
+          <Button
+            as="button"
+            className="file-upload-button"
+            color="red"
+            content="Cancel"
+            inverted={true}
+            onClick={[Function]}
+          />
+          <Button
+            as="button"
+            className="file-upload-button"
+            color="blue"
+            content="Upload Dataset"
+            icon="upload"
+            inverted={true}
+            onClick={[Function]}
+          />
+        </FormField>
+      </div>
+    </Segment>
+  </Form>
+  <p
+    style={
+      Object {
+        "display": "none",
+      }
+    }
+  >
+     hi 
+  </p>
+</div>
+`;

From 9cc3ca1641df9936f4411fa170546150a365d9f5 Mon Sep 17 00:00:00 2001
From: Michael Stauffer <mgstauff@gmail.com>
Date: Tue, 18 May 2021 19:14:42 -0400
Subject: [PATCH 7/8] Add local-gen snapshot via yml; unit_test_runner changes
 in progress

---
 .../__snapshots__/fileUpload.test.js.snap     | 11 ++++++++++
 tests/unit/unit_test_runner.sh                | 20 +++++++++++++------
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap b/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap
index 73347578d..8d6d9d378 100644
--- a/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap
+++ b/lab/webapp/src/components/FileUpload/__snapshots__/fileUpload.test.js.snap
@@ -14,10 +14,21 @@ exports[`basic testing of fileupload react component DONE - full component snaps
     >
       <Dropzone
         accept=".csv,.tsv,text/csv,text/tsv"
+        disabled={false}
+        getFilesFromEvent={[Function]}
         id="file-dropzone"
+        maxFiles={0}
+        maxSize={Infinity}
+        minSize={0}
         multiple={false}
+        noClick={false}
+        noDrag={false}
+        noDragEventsBubbling={false}
+        noKeyboard={false}
         onDropAccepted={[Function]}
         onDropRejected={[Function]}
+        preventDropOnDocument={true}
+        validator={null}
       >
         <Component />
       </Dropzone>
diff --git a/tests/unit/unit_test_runner.sh b/tests/unit/unit_test_runner.sh
index e476d292b..c7ded3d14 100644
--- a/tests/unit/unit_test_runner.sh
+++ b/tests/unit/unit_test_runner.sh
@@ -4,14 +4,22 @@ dos2unix /appsrc/tests/unit/py_tests.sh
 dos2unix /appsrc/tests/unit/js_tests.sh
 
 # run via sh to avoid permissions problem
-sh /appsrc/tests/unit/py_tests.sh
-pyres=$?
-# echo "==== py_tests unit tests result "$pyres
+if [ -z "${PENNAI_UNIT_TESTS_JS_ONLY}" ]; then
+  sh /appsrc/tests/unit/py_tests.sh
+  pyres=$?
+  # echo "==== py_tests unit tests result "$pyres
+else
+  echo "$0 - skipped py_tests"
+fi
 
 # run via sh to avoid permissions problem
-sh /appsrc/tests/unit/js_tests.sh
-jsres=$?
-# echo "==== js_tests unit tests result "$jsres
+if [ -z "${PENNAI_UNIT_TESTS_PY_ONLY}" ]; then
+  sh /appsrc/tests/unit/js_tests.sh
+  jsres=$?
+  # echo "==== js_tests unit tests result "$jsres
+else
+  echo "$0 - skipped js_tests"
+fi
 
 # exit with code 1 if either test fails
 # If we don't exit with a non-zero value, github actions won't catch the error

From c94b6865bfa5a7cbd7499d50218711343202a76a Mon Sep 17 00:00:00 2001
From: Michael Stauffer <mgstauff@gmail.com>
Date: Mon, 24 May 2021 17:25:57 -0400
Subject: [PATCH 8/8] Revert unit_test_runner.sh changes

Remove the untested method of fine control via env vars. Move to
separate branch to work on separately.
---
 tests/unit/unit_test_runner.sh | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/tests/unit/unit_test_runner.sh b/tests/unit/unit_test_runner.sh
index c7ded3d14..e476d292b 100644
--- a/tests/unit/unit_test_runner.sh
+++ b/tests/unit/unit_test_runner.sh
@@ -4,22 +4,14 @@ dos2unix /appsrc/tests/unit/py_tests.sh
 dos2unix /appsrc/tests/unit/js_tests.sh
 
 # run via sh to avoid permissions problem
-if [ -z "${PENNAI_UNIT_TESTS_JS_ONLY}" ]; then
-  sh /appsrc/tests/unit/py_tests.sh
-  pyres=$?
-  # echo "==== py_tests unit tests result "$pyres
-else
-  echo "$0 - skipped py_tests"
-fi
+sh /appsrc/tests/unit/py_tests.sh
+pyres=$?
+# echo "==== py_tests unit tests result "$pyres
 
 # run via sh to avoid permissions problem
-if [ -z "${PENNAI_UNIT_TESTS_PY_ONLY}" ]; then
-  sh /appsrc/tests/unit/js_tests.sh
-  jsres=$?
-  # echo "==== js_tests unit tests result "$jsres
-else
-  echo "$0 - skipped js_tests"
-fi
+sh /appsrc/tests/unit/js_tests.sh
+jsres=$?
+# echo "==== js_tests unit tests result "$jsres
 
 # exit with code 1 if either test fails
 # If we don't exit with a non-zero value, github actions won't catch the error