Merge 47a4d5d into 30836bc

.github/workflows/test.yml

@@ -0,0 +1,60 @@
+# This is a basic workflow to help you get started with Actions
+
+name: CI-testing
+
+# Controls when the action will run. Triggers the workflow on push or pull request
+# events
+on:
+  push:
+    branches: [ develop, master ]
+  pull_request:
+    branches: [ develop, master ]
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: goanpeca/setup-miniconda@v1
+      with:
+        miniconda-version: 'latest'
+        activate-environment: test-environment
+        python-version: 3.6.10
+        auto-activate-base: false
+        auto-update-conda: true
+        condarc-file: test/condarc.yml
+
+    - name: Use Node JS 10.x
+      uses: actions/setup-node@v1
+      with:
+        node-version: 10.x
+
+    - name: Install JS dependencies
+      run: |
+        npm ci
+        npm install bower
+        ./node_modules/bower/bin/bower install
+
+    - name: Install Narrative Application
+      shell: bash -l {0}
+      run: |
+          bash ./scripts/install_narrative.sh
+          grunt minify
+          sed <src/config.json.templ >src/config.json "s/{{ .Env.CONFIG_ENV }}/dev/"
+          sed -i 's/{{ if ne .Env.CONFIG_ENV "prod" }} true {{- else }} false {{- end }}/true/' src/config.json
+          jupyter notebook --version
+
+    - name: Run Narrative Test Suite
+      shell: bash -l {0}
+      env:
+        KBASE_TEST_TOKEN: ${{ secrets.NARRATIVE_TEST_TOKEN }}
+      run: make test
+
+    - name: Send to Codecov
+      uses: codecov/codecov-action@v1
+      with:
+        file: |
+          ./coverage.xml
+          ./js-coverage/lcov/lcov.info
+        fail_ci_if_error: true

.travis.yml

@@ -13,6 +13,7 @@ env:
     - TRAVIS_NODE_VERSION="10.10.0"
     - secure: "JPdkdywgQbUUixuDuATMXZHWpWImziRoGKd1tCjYd3+0lamLBlldmjhsZ+Bp7ZabKg2ExQZareGDp34cJdOwWBGb2gg0/emjy4UkWkbDH28zyoWNK1SFp6OTY8AeY/icPXKw3MBgKoXG+hemfcxhYc8rUNgUt7V2fA0JSAkCi4w="
     - secure: "BrGlbfGLxZYCynh7LeIFyQeiTx4YX6fdMYK2UceVLoAFjOml9mvtJY5i4Oafc2iBDPQ0wAP/eIzZOTcddwc+12o1S0EAq3zZb5z+MOwRKjsiC+BGUXNzAGLaeJqFTC5Sn+vvqsaDGaR3jrdQ8APUL7XapuLUAkof7vqc1SPsn3I="
+    - secure: "YH4s6huZYW34XFlKDAg7yC8VGUjIiird3gDKOmHyhlPVoQa75tll3iqVBBxNFcj+5CfzlCU+ZZK/JTvRoLJ7+QBPrRm7eZ6+s44JaJK+eAz12AJKdEfZyp+blMQ26Y8uOz5AZQhnRsoYfbqDK3p/T8FW1MAKdvE+8nHDCdAh26k="
 
 cache:
   directories:
@@ -25,6 +26,7 @@ branches:
     - develop
     - master
     - py3-update
+    - truss
 
 before_install:
   - gem install coveralls-lcov

Makefile

@@ -35,7 +35,7 @@ build-travis-narrative:
 	sed -i 's/{{ if ne .Env.CONFIG_ENV "prod" }} true {{- else }} false {{- end }}/true/' src/config.json && \
 	jupyter notebook --version
 
-test: test-backend test-frontend-unit test-frontend-e2e
+test: test-backend test-frontend
 	@echo "done running backend and frontend test scripts"
 
 # test-backend should use nose, or the like, to test our
@@ -49,20 +49,20 @@ test-backend:
 	sh $(BACKEND_TEST_SCRIPT)
 	@echo "done"
 
+test-frontend:
+	TOKEN="$(token)" python test/unit/run_tests.py -u -i
+
 # test-frontend-unit should use karma and jasmine to test
 # each of the Javascript components of the Narrative.
 # This is achieved through the grunt test invocation
 test-frontend-unit:
 	@echo "running frontend unit tests"
-	python test/unit/run_tests.py
+	python test/unit/run_tests.py -u
 	@echo "done"
 
-# test-frontend-e2e should use Selenium to perform an end-
-# to-end test of the front end components, with a running
-# Narrative system.
-test-frontend-e2e:
-	@echo "running frontend end-to-end tests"
-	cd $(FRONTEND_TEST_DIR)
+test-integration:
+	@echo "running integration tests"
+	TOKEN="$(token)" python test/unit/run_tests.py -i
 	@echo "done"
 
 build-docs:

docs/deploy_narrative.md

@@ -75,7 +75,8 @@ The [next](https://next.kbase.us), [appdev](https://appdev.kbase.us), and [prod]
 
 ### Deploying Narrative-Refactor
 
-The [narrative-refactor](https://narrative-refactor.kbase.us) image is built against the "truss" branch of the repo and is called narrative-truss:pr### when still in a PR state or narrative-truss:latest after merge
+The [narrative-refactor](https://narrative-refactor.kbase.us) image is automatically built against the "truss" branch of the repo and is called narrative-truss:pr### when still in a PR state or narrative-truss:latest after merge. The images can be found here: https://github.com/orgs/kbase/packages
+
 
 #### Create Release Image
 

docs/testing.md

@@ -42,6 +42,7 @@ Then, simply run (from the narrative root directory) `make test`.
 This calls a few subcommands, and those can be run independently for specific uses:
 
 - `make test-frontend-unit` will run only the unit tests on the frontend (i.e. those with the Karma runner)
+- `make test-integration` will run the frontend integration tests that make use of webdriver.io to simulate the browser on a locally instantiated Narrative, but running against live KBase services.
 - `make test-frontend-e2e` will run only the frontend tests that make use of Selenium to simulate a browser on the real Narrative site.
 - `make test-backend` will run only the backend Python tests.
 
@@ -67,7 +68,18 @@ This just needs the path to the token file (with pre-pended slash), such as `"/t
 
 ### Testing with Travis-CI and Coveralls
 
-These tests are run (without credentials) automatically on a pull request to the Narrative Github repo. These are currently run through [Travis-CI](https://travis-ci.org/) and the coverage reported with [Coveralls](https://coveralls.io/). There should be nothing you need to do to make this work.
+These tests are run automatically on a pull request to the Narrative Github repo. These are currently run through [Travis-CI](https://travis-ci.org/) and the coverage reported with [Coveralls](https://coveralls.io/).
+
+Unit tests are automatically run without credentials, skipping various tests that are, really, more like integration tests.
+
+The integration tests that run with webdriver.io do require an authentication token. This is embedded in the `.travis.yml` file as a secure environment variable - the third (and last) one. That token will expire every 90 days and will need to be replaced. A new one can be generated from the KBase CI Account page with a valid developer account. This token can then be encrypted with the following commands. Note that Ruby is required.
+
+```
+gem install travis  # if not already installed
+travis encrypt KBASE_TOKEN=my_generated_token
+```
+This will emit a string that looks like `secure: "SDFSDFSDFSDF="` Use this string to replace the out of date token. It will become available in the test environment as `KBASE_TOKEN`, which is the variable that the `wdio.conf.js` file looks for.
+
 
 ### Adding Your Own Tests
 
@@ -81,6 +93,27 @@ There are some service client Mocks available using the `mock` library. Check ou
 
 JavaScript tests follow the common Test Spec idiom. Here, we create a new spec file for each JavaScript module. These all live under `test/unit/spec` in roughly the same subdirectory as found under `kbase-extension/static/kbase/js`. There's an example spec in `test/unit/specTemplate.js` - you can just copy this to a new module, and modify to fit your needs.
 
+***Front End Integration***
+
+Integration tests are done using [webdriver.io](https://webdriver.io). The test scripts are written in Javascript and all resemble the common Mocha style. These tests are all under `test/integration/spec`. It's helpful for each of these files to include the `wdioUtils.js` module in `test/integration`. For each view that requires authentication (i.e. most of them), be sure to start your test with the async `login` function provided by that module. An example spec file might look like:
+
+```javascript
+const Utils = require('../wdioUtils');
+
+describe('Simple test runner', () => {
+    beforeEach(async () => await Utils.login());
+
+    it('opens a narrative', async () => {
+        await browser.url(Utils.makeURL('narrative/31932'));
+        const loadingBlocker = await $('#kb-loading-blocker');
+        const loadingText = await loadingBlocker.getText();
+        expect(loadingText).toContain('Connecting to KBase services...');
+    });
+});
+```
+
+When running these locally, these expect that there's a valid authentication token in 
+
 ### Manual Testing and Debugging
 
 ***Python***
@@ -94,7 +127,7 @@ log.info("Your Logs Go Here")
 
 ***JavaScript***
 
-It can be useful to immediately see your changes in the narrative. For javascript changes, you will just have to reload the page. You can print messages to the console with `console.log`
+It can be useful to immediately see your changes in the narrative. For javascript changes, you will just have to reload the page. You can print messages to the console with `console.log`.
 
 To debug using the Karma Debugger complete the following steps:
 

kbase-extension/kbase_templates/403.html

@@ -5,12 +5,7 @@
 
 {% block stylesheet %}
 {{super()}}
-<style type="text/css">
-/* disable initial hide */
-div#header, div#site {
-    display: block;
-}
-</style>
+    <link rel="stylesheet" href="{{ static_url("kbase/css/errorPage.css") }}" type="text/css" />
 {% endblock %}
 
 {% block loading_message %}
@@ -22,11 +17,11 @@
 
 {% block site %}
 
-<div class="error" data-code={{status_code}}>
-    <p style="font-weight: bold">You do not have permission to access this Narrative.</p>
-    <p style="font-size: 150%">You can request access from the Narrative owners using the controls below.</p>
+<div id="error_container" class="access-error__container" data-code={{status_code}}>
+    <p class="access-error__heading">You do not have permission to access this Narrative.</p>
+    <p class="access-error__text">You can request access from the Narrative owners using the controls below.</p>
 
-    <div id="perm-request" class="form-group form-inline" style="margin-top: 2em">
+    <div id="perm-request" class="form-group form-inline access-request-form__container">
         <label for="req-level">Access Level</label>
         <select id="req-level" class="form-control">
             <option value="r">View only</option>
@@ -35,10 +30,10 @@
         </select>
         <button id="req-btn" type="button" class="btn btn-sm btn-primary">Request</button>
     </div>
-    <div id="loader" style="display: none; margin-top: 1em">
+    <div id="loader" class="access-request-progress__container">
         <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
     </div>
-    <div id="request-result" style="font-size: 125%; margin-top: 2em"></div>
+    <div id="request-result" class="access-request-result"></div>
 </div>
 
 {% endblock %}

kbase-extension/kbase_templates/error.html

@@ -5,20 +5,15 @@
 
 {% block stylesheet %}
 {{super()}}
-<style type="text/css">
-/* disable initial hide */
-div#header, div#site {
-    display: block;
-}
-</style>
+    <link rel="stylesheet" href="{{ static_url("kbase/css/errorPage.css") }}" type="text/css" />
 {% endblock %}
 
 {% block loading_message %}
 {% endblock %}
 
 {% block site %}
 
-<div class="error">
+<div id="error_container" class="error">
     {% block h1_error %}
     <h1>{{status_code}} : {{status_message}}</h1>
     {% endblock h1_error %}

kbase-extension/kbase_templates/generic_error.html

@@ -5,12 +5,7 @@
 
 {% block stylesheet %}
 {{super()}}
-<style type="text/css">
-/* disable initial hide */
-div#header, div#site {
-    display: block;
-}
-</style>
+    <link rel="stylesheet" href="{{ static_url("kbase/css/errorPage.css") }}" type="text/css" />
 {% endblock %}
 
 {% block loading_message %}
@@ -22,15 +17,15 @@
 
 {% block site %}
 
-<div class="error" data-code={{status_code}}>
+<div id="error_container" class="generic-error__container" data-code={{status_code}}>
     {% block h1_error %}
-    <p style="font-weight: bold">
+    <p class="generic-error__heading">
         An error occurred while loading this Narrative
     </p>
     {% endblock h1_error %}
     {% block error_detail %}
         {% if message %}
-            <p>{{message}}</p>
+            <p class="generic-error__text">{{message}}</p>
         {% endif %}
     {% endblock %}
 </div>

kbase-extension/kbase_templates/notebook.html

@@ -96,17 +96,15 @@
     </div>
     <div id="content-column">
         <span id="kb-add-code-cell"
-              class="kb-data-list-add-data-button fa fa-terminal fa-2x"
-              style="position:fixed; bottom:15px; right:75px; z-index:5"
+              class="fa fa-terminal fa-2x"
               data-toggle="tooltip" data-placement="top" Title="Add Code Cell"></span>
         <span id="kb-add-md-cell"
-              class="kb-data-list-add-data-button fa fa-paragraph fa-2x"
-              style="position:fixed; bottom:15px; right:10px; z-index:5"
+              class="fa fa-paragraph fa-2x"
               data-toggle="tooltip" data-placement="top" Title="Add Markdown Cell"></span>
 
         <div id="ipython-main-app">
             <div id="notebook_panel">
-                <div id="notebook"></div>
+                <div id="notebook" class="notebook__container"></div>
                 <div id='tooltip' class='ipython_tooltip' style='display:none'></div>
                 <div id="kb-ws-progress"></div>
             </div>
@@ -140,8 +138,4 @@
 <!-- Because the narrative (in this version) requires that some Javascript is loaded before
     running the main IPython stack, a little wrapper script had to be written. More details there. -->
 <script src="{{ static_url("narrativeMain.js") }}" charset="utf-8"></script>
-
-<!-- not used in this version, but left behind for posterity.
-    <script src="{{ static_url("notebook/js/main.js") }}" charset="utf-8"></script>
--->
 {% endblock %}

kbase-extension/static/errorMain.js

@@ -21,7 +21,7 @@ require([
             return Login.init($('#signin-button'), true);
         })
         .then(function () {
-            let statusCode = document.getElementsByClassName('error')[0].getAttribute('data-code');
+            const statusCode = document.getElementById('error_container').getAttribute('data-code');
             if (statusCode === '403') {
                 buildRequestControl();
             }

kbase-extension/static/kbase/css/advancedViewCell.css

@@ -0,0 +1,3 @@
+.kb-advanced-view-cell .kb-panel-container[data-element=parameters-group] > div.panel-collapse > .panel-body {
+  padding: 0;
+}