From 69856a15e321b0c977b29fc0474703d2521bdb13 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Tue, 18 Dec 2018 14:54:23 -0800
Subject: [PATCH] Fix tests, colour behaviour, and snackbar button styling.

---
 kolibri/core/assets/src/core-app/apiSpec.js   |  2 +-
 .../core/assets/src/core-app/constructor.js   | 16 +----
 .../core/assets/src/core-app/kolibriVue.js    | 13 ++++
 kolibri/core/assets/src/utils/colour.js       |  4 +-
 kolibri/core/assets/src/utils/colourPicker.js |  6 +-
 .../src/views/CoreSnackbar/KeenUiSnackbar.vue | 66 ++++++++++---------
 .../core/assets/test/content-renderer.spec.js |  8 +++
 .../core/assets/test/download-button.spec.js  |  2 +
 kolibri/core/assets/test/progress-bar.spec.js |  5 ++
 .../core/assets/test/progress-icon.spec.js    |  5 ++
 kolibri/core/assets/test/utils/colour.spec.js | 20 ++++++
 .../core/assets/test/views/KTooltip.spec.js   |  2 +
 .../views/__snapshots__/app-bar.spec.js.snap  |  8 +--
 .../views/__snapshots__/side-nav.spec.js.snap | 24 +++----
 .../views/AssignmentChangeStatusModal.spec.js |  5 ++
 .../test/views/AssignmentDeleteModal.spec.js  |  3 +
 .../test/views/AssignmentDetailsModal.spec.js |  2 +
 .../views/ManageContentPage/ChannelsGrid.vue  |  1 +
 .../test/views/channel-token-modal.spec.js    |  3 +-
 .../assets/test/views/channels-grid.spec.js   |  4 +-
 .../test/views/content-node-row.spec.js       |  2 +
 .../views/selected-resources-size.spec.js     |  2 +
 .../assets/tests/BottomBar.spec.js            |  2 +
 .../assets/tests/SearchSideBar.spec.js        |  2 +
 .../assets/tests/SettingsSideBar.spec.js      |  2 +
 .../tests/TableOfContentsSection.spec.js      |  2 +
 .../TableOfContentsSectionSideBar.spec.js     |  2 +
 .../assets/tests/TopBar.spec.js               |  2 +
 .../views/PersonalDataConsentForm.spec.js     |  3 +-
 packages/kolibri-tools/jest_config/setup.js   | 12 ++--
 30 files changed, 158 insertions(+), 72 deletions(-)
 create mode 100644 kolibri/core/assets/src/core-app/kolibriVue.js
 create mode 100644 kolibri/core/assets/test/utils/colour.spec.js

diff --git a/kolibri/core/assets/src/core-app/apiSpec.js b/kolibri/core/assets/src/core-app/apiSpec.js
index c022b09f33..3f40ea186a 100644
--- a/kolibri/core/assets/src/core-app/apiSpec.js
+++ b/kolibri/core/assets/src/core-app/apiSpec.js
@@ -12,7 +12,6 @@
 // N.B. You cannot use keys that require quotation marks in this object.
 // e.g. 'content-icon' (although this can be used as a value in module).
 
-import vue from 'vue';
 import vuex from 'vuex';
 import seededshuffle from 'seededshuffle';
 import UiAlert from 'keen-ui/src/UiAlert';
@@ -97,6 +96,7 @@ import navComponents from '../utils/navComponents';
 import CatchErrors from '../utils/CatchErrors';
 import KTooltip from '../views/KTooltip';
 import * as colour from '../utils/colour';
+import vue from './kolibriVue';
 import * as client from './client';
 import urls from './urls';
 
diff --git a/kolibri/core/assets/src/core-app/constructor.js b/kolibri/core/assets/src/core-app/constructor.js
index f74ebe512d..f8bd1d0200 100644
--- a/kolibri/core/assets/src/core-app/constructor.js
+++ b/kolibri/core/assets/src/core-app/constructor.js
@@ -3,14 +3,10 @@
  * @module Facade
  */
 
-import Vue from 'vue';
-import VueMeta from 'vue-meta';
-import VueRouter from 'vue-router';
-import Vuex from 'vuex';
+import Vue from 'kolibri.lib.vue';
 import { i18nSetup } from '../utils/i18n';
 import Mediator from './mediator';
 import apiSpec from './apiSpec';
-import VueAphrodite from './vueAphrodite';
 
 /**
  * Array containing the names of all methods of the Mediator that
@@ -48,12 +44,6 @@ export default class CoreApp {
 
     Vue.prototype.Kolibri = this;
 
-    // Register Vue plugins
-    Vue.use(Vuex);
-    Vue.use(VueRouter);
-    Vue.use(VueMeta);
-    Vue.use(VueAphrodite);
-
     // Shim window.location.origin for IE.
     if (!window.location.origin) {
       window.location.origin = `${window.location.protocol}//${window.location.hostname}${
@@ -66,9 +56,9 @@ export default class CoreApp {
       mediator.setReady();
     };
 
-    if (process.env.NODE !== 'production') {
+    if (process.env.NODE_ENV !== 'production') {
       const colourPicker = require('../utils/colourPicker').default;
-      colourPicker.start();
+      window.colourPicker = colourPicker;
     }
 
     i18nSetup().then(intlReady);
diff --git a/kolibri/core/assets/src/core-app/kolibriVue.js b/kolibri/core/assets/src/core-app/kolibriVue.js
new file mode 100644
index 0000000000..e016572a70
--- /dev/null
+++ b/kolibri/core/assets/src/core-app/kolibriVue.js
@@ -0,0 +1,13 @@
+import Vue from 'vue';
+import VueMeta from 'vue-meta';
+import VueRouter from 'vue-router';
+import Vuex from 'vuex';
+import VueAphrodite from './vueAphrodite';
+
+// Register Vue plugins
+Vue.use(Vuex);
+Vue.use(VueRouter);
+Vue.use(VueMeta);
+Vue.use(VueAphrodite);
+
+export default Vue;
diff --git a/kolibri/core/assets/src/utils/colour.js b/kolibri/core/assets/src/utils/colour.js
index bafe485fb4..973e14d5f1 100644
--- a/kolibri/core/assets/src/utils/colour.js
+++ b/kolibri/core/assets/src/utils/colour.js
@@ -23,7 +23,7 @@ function _modifyColour(sourceColour, ratio, colourFn, name) {
       parsedRatio = Number(ratio);
     }
     if (parsedRatio !== null) {
-      return colourFn(sourceColour, ratio).toString();
+      return colourFn(sourceColour, parsedRatio).toString();
     }
     throw TypeError(`Unparseable ratio: ${ratio} passed to ${name} function`);
   }
@@ -39,7 +39,7 @@ export function lighten(sourceColour, ratio) {
 }
 
 function _darken(sourceColour, ratio) {
-  return sourceColour.brighter(Math.log(1 - ratio) / darkenLogBase);
+  return sourceColour.darker(Math.log(1 - ratio) / darkenLogBase);
 }
 
 export function darken(sourceColour, ratio) {
diff --git a/kolibri/core/assets/src/utils/colourPicker.js b/kolibri/core/assets/src/utils/colourPicker.js
index ac98e37107..63cae0201d 100644
--- a/kolibri/core/assets/src/utils/colourPicker.js
+++ b/kolibri/core/assets/src/utils/colourPicker.js
@@ -3,7 +3,7 @@ import store from 'kolibri.coreVue.vuex.store';
 import ColourPicker from '../views/ColourPicker';
 
 export default {
-  start() {
+  show() {
     const pickerDiv = global.document.createElement('div');
     global.document.body.appendChild(pickerDiv);
     this.rootvue = new Vue(
@@ -16,4 +16,8 @@ export default {
       )
     );
   },
+  hide() {
+    global.document.body.removeChild(this.rootvue.$el);
+    this.rootvue.$destroy();
+  },
 };
diff --git a/kolibri/core/assets/src/views/CoreSnackbar/KeenUiSnackbar.vue b/kolibri/core/assets/src/views/CoreSnackbar/KeenUiSnackbar.vue
index fe4df1429f..d12d014ae0 100644
--- a/kolibri/core/assets/src/views/CoreSnackbar/KeenUiSnackbar.vue
+++ b/kolibri/core/assets/src/views/CoreSnackbar/KeenUiSnackbar.vue
@@ -16,17 +16,12 @@
       </div>
 
       <div class="ui-snackbar-action">
-        <UiButton
+        <button
           v-if="action"
           class="ui-snackbar-action-button"
-          :class="$computedClass(actionButtonStyles)"
-
-          type="secondary"
-
-          :color="actionColor"
-
+          :style="{ color: $coreBgLight }"
           @click.stop="onActionClick"
-        >{{ action }}</UiButton>
+        >{{ action }}</button>
       </div>
     </div>
   </transition>
@@ -36,22 +31,14 @@
 
 <script>
 
-  import UiButton from 'keen-ui/src/UiButton';
+  import { mapGetters } from 'vuex';
 
   export default {
     name: 'KeenUiSnackbar',
 
-    components: {
-      UiButton,
-    },
-
     props: {
       message: String,
       action: String,
-      actionColor: {
-        type: String,
-        default: 'accent', // 'primary' or 'accent'
-      },
       transition: {
         type: String,
         default: 'slide', // 'slide' or 'fade'
@@ -59,21 +46,10 @@
     },
 
     computed: {
+      ...mapGetters(['$coreBgLight']),
       transitionName() {
         return 'ui-snackbar--transition-' + this.transition;
       },
-      actionButtonStyles() {
-        return {
-          color: this.$coreBgLight,
-          fontWeight: 'bold',
-          ':hover:not(.is-disabled)': {
-            backgroundColor: 'rgba(white, 0.05)',
-          },
-          ":focus body[modality='keyboard']": {
-            backgroundColor: 'rgba(white, 0.1)',
-          },
-        };
-      },
     },
 
     methods: {
@@ -139,10 +115,40 @@
   }
 
   .ui-snackbar-action-button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     min-width: initial;
+    /* stylelint-disable csstree/validator */
+    min-width: rem-calc(80px);
+    height: $ui-button-height;
     min-height: initial;
-    padding: rem-calc(12px); // stylelint-disable-line csstree/validator
+    padding: rem-calc(12px);
+    padding: 0;
+    padding-right: rem-calc(16px);
+    padding-left: rem-calc(16px);
+    /* stylelint-enable */
     margin: 0;
+    overflow: hidden;
+    font-family: $font-stack;
+    font-size: $ui-button-font-size;
+    font-weight: bold;
+    line-height: 1;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    touch-action: manipulation; // IE
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: $ui-default-border-radius;
+    outline: none;
+    &:hover {
+      background-color: lighten($ui-snackbar-background-color, 5%);
+    }
+    &:focus body[modality='keyboard'] {
+      background-color: lighten($ui-snackbar-background-color, 10%);
+    }
   }
 
   .ui-snackbar--transition-slide-enter-active,
diff --git a/kolibri/core/assets/test/content-renderer.spec.js b/kolibri/core/assets/test/content-renderer.spec.js
index f1629c5950..6723699a33 100644
--- a/kolibri/core/assets/test/content-renderer.spec.js
+++ b/kolibri/core/assets/test/content-renderer.spec.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import { mount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import ContentRenderer from '../src/views/ContentRenderer';
 
 jest.mock('kolibri.lib.logging');
@@ -33,6 +34,7 @@ describe('ContentRenderer Component', () => {
       function testAvailableFiles(files, expected) {
         const wrapper = mount(ContentRenderer, {
           propsData: defaultPropsDataFromFiles(files),
+          store,
         });
         expect(wrapper.vm.availableFiles.length).toEqual(expected);
       }
@@ -78,6 +80,7 @@ describe('ContentRenderer Component', () => {
       function testDefaultFile(files, expected) {
         const wrapper = mount(ContentRenderer, {
           propsData: defaultPropsDataFromFiles(files),
+          store,
         });
         expect(wrapper.vm.defaultFile).toEqual(expected);
       }
@@ -95,6 +98,7 @@ describe('ContentRenderer Component', () => {
       function testExtension(files, expected) {
         const wrapper = mount(ContentRenderer, {
           propsData: defaultPropsDataFromFiles(files),
+          store,
         });
         expect(wrapper.vm.extension).toEqual(expected);
       }
@@ -128,6 +132,7 @@ describe('ContentRenderer Component', () => {
             });
             const wrapper = mount(ContentRenderer, {
               propsData: props,
+              store,
             });
             return Vue.nextTick().then(() => {
               expect(wrapper.vm.currentViewClass).toEqual(dummyComponent);
@@ -141,6 +146,7 @@ describe('ContentRenderer Component', () => {
             });
             const wrapper = mount(ContentRenderer, {
               propsData: props,
+              store,
             });
             return Vue.nextTick().then(() => {
               expect(wrapper.vm.initSession).toHaveBeenCalledTimes(1);
@@ -164,6 +170,7 @@ describe('ContentRenderer Component', () => {
             });
             const wrapper = mount(ContentRenderer, {
               propsData: props,
+              store,
             });
             // 'created' hook runs it once. Running it here again for testing.
             // TODO Look into how to do this without calling the method directly
@@ -181,6 +188,7 @@ describe('ContentRenderer Component', () => {
           });
           const wrapper = mount(ContentRenderer, {
             propsData: props,
+            store,
           });
           // 'created' hook runs it once. Running it here again for testing.
           return wrapper.vm.updateRendererComponent().then(component => {
diff --git a/kolibri/core/assets/test/download-button.spec.js b/kolibri/core/assets/test/download-button.spec.js
index 089cd4744f..6e38a0e74f 100644
--- a/kolibri/core/assets/test/download-button.spec.js
+++ b/kolibri/core/assets/test/download-button.spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import DownloadButton from '../src/views/ContentRenderer/DownloadButton';
 
 describe('download-button Component', function() {
@@ -22,6 +23,7 @@ describe('download-button Component', function() {
           propsData: {
             files: samplesFiles,
           },
+          store,
         });
         expect(wrapper.vm.fileOptions.length).toEqual(samplesFiles.length);
       });
diff --git a/kolibri/core/assets/test/progress-bar.spec.js b/kolibri/core/assets/test/progress-bar.spec.js
index 85c9d5e41f..52d2b16ce4 100644
--- a/kolibri/core/assets/test/progress-bar.spec.js
+++ b/kolibri/core/assets/test/progress-bar.spec.js
@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import ProgressBar from '../src/views/ProgressBar';
 
 function testProgressBar(wrapper, expected) {
@@ -13,6 +14,7 @@ describe('ProgressBar Component', () => {
       propsData: {
         progress: -0.0000001,
       },
+      store,
     });
     // The negative still shows up...
     testProgressBar(wrapper, { text: '-0%', width: '0%' });
@@ -23,6 +25,7 @@ describe('ProgressBar Component', () => {
       propsData: {
         progress: 0.1,
       },
+      store,
     });
     testProgressBar(wrapper, { text: '10%', width: '10%' });
   });
@@ -32,6 +35,7 @@ describe('ProgressBar Component', () => {
       propsData: {
         progress: 1.0,
       },
+      store,
     });
     testProgressBar(wrapper, { text: '100%', width: '100%' });
   });
@@ -41,6 +45,7 @@ describe('ProgressBar Component', () => {
       propsData: {
         progress: 1.0000001,
       },
+      store,
     });
     testProgressBar(wrapper, { text: '100%', width: '100%' });
   });
diff --git a/kolibri/core/assets/test/progress-icon.spec.js b/kolibri/core/assets/test/progress-icon.spec.js
index 89778183a9..e060114cec 100644
--- a/kolibri/core/assets/test/progress-icon.spec.js
+++ b/kolibri/core/assets/test/progress-icon.spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import UiIcon from 'keen-ui/src/UiIcon';
 import ProgressIcon from '../src/views/ProgressIcon';
 
@@ -18,6 +19,7 @@ describe('ProgressIcon Component', () => {
         // Causes a validation error
         progress: -1.0,
       },
+      store,
     });
     await wrapper.vm.$nextTick();
     const tooltip = wrapper.find({ name: 'KTooltip' });
@@ -31,6 +33,7 @@ describe('ProgressIcon Component', () => {
       propsData: {
         progress: 0.1,
       },
+      store,
     });
     await wrapper.vm.$nextTick();
     testIcon(wrapper, 'In progress');
@@ -41,6 +44,7 @@ describe('ProgressIcon Component', () => {
       propsData: {
         progress: 1.0,
       },
+      store,
     });
     await wrapper.vm.$nextTick();
     testIcon(wrapper, 'Completed');
@@ -51,6 +55,7 @@ describe('ProgressIcon Component', () => {
       propsData: {
         progress: 2.0,
       },
+      store,
     });
     await wrapper.vm.$nextTick();
     testIcon(wrapper, 'Completed');
diff --git a/kolibri/core/assets/test/utils/colour.spec.js b/kolibri/core/assets/test/utils/colour.spec.js
new file mode 100644
index 0000000000..a371f7692b
--- /dev/null
+++ b/kolibri/core/assets/test/utils/colour.spec.js
@@ -0,0 +1,20 @@
+import { lighten, darken } from '../../src/utils/colour';
+
+describe('colour utils', () => {
+  describe('lighten function', () => {
+    it('should lighten a colour using a ratio', () => {
+      expect(lighten('#555555', 0.1)).toEqual('rgb(94, 94, 94)');
+    });
+    it('should lighten a colour using a percentage', () => {
+      expect(lighten('#555555', '10%')).toEqual('rgb(94, 94, 94)');
+    });
+  });
+  describe('darken function', () => {
+    it('should darken a colour using a ratio', () => {
+      expect(darken('#555555', 0.1)).toEqual('rgb(77, 77, 77)');
+    });
+    it('should darken a colour using a percentage', () => {
+      expect(darken('#555555', '10%')).toEqual('rgb(77, 77, 77)');
+    });
+  });
+});
diff --git a/kolibri/core/assets/test/views/KTooltip.spec.js b/kolibri/core/assets/test/views/KTooltip.spec.js
index 3226416027..4a05dc656b 100644
--- a/kolibri/core/assets/test/views/KTooltip.spec.js
+++ b/kolibri/core/assets/test/views/KTooltip.spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import KTooltipExample from './KTooltipExample';
 
 const DEFAULT_PROPS = {
@@ -13,6 +14,7 @@ function makeWrapper(kTooltipProps = DEFAULT_PROPS, slot = 'Sample tooltip conte
     slots: {
       default: slot,
     },
+    store,
   });
 }
 describe('KTooltip component', () => {
diff --git a/kolibri/core/assets/test/views/__snapshots__/app-bar.spec.js.snap b/kolibri/core/assets/test/views/__snapshots__/app-bar.spec.js.snap
index 523f88f4ad..15e099c9f5 100644
--- a/kolibri/core/assets/test/views/__snapshots__/app-bar.spec.js.snap
+++ b/kolibri/core/assets/test/views/__snapshots__/app-bar.spec.js.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`app bar component drop down user menu should show the language modal link if no components are added and user is not logged in 1`] = `
-<div class="wrapper" navshown="true">
-  <div class="ui-toolbar app-bar ui-toolbar--type-colored ui-toolbar--text-color-white ui-toolbar--progress-position-bottom" style="height: 20px;">
+<div style="background-color: rgb(153, 97, 137);" navshown="true">
+  <div class="ui-toolbar app-bar ui-toolbar--type-clear ui-toolbar--text-color-white ui-toolbar--progress-position-bottom" style="height: 20px;">
     <div class="ui-toolbar__left">
       <div class="ui-toolbar__nav-icon"><button type="button" class="ui-icon-button ui-icon-button--type-secondary ui-icon-button--color-default ui-icon-button--size-normal">
           <div class="ui-icon-button__icon">
@@ -25,7 +25,7 @@ exports[`app bar component drop down user menu should show the language modal li
       </div>
     </div>
     <div class="ui-toolbar__right">
-      <div> <button type="submit" class="ui-button user-menu-button ui-button--type-primary ui-button--color-primary ui-button--icon-position-left ui-button--size-normal" arialabel="User menu">
+      <div> <button type="submit" class="ui-button user-menu-button ui-button--type-primary ui-button--color-clear ui-button--icon-position-left ui-button--size-normal" arialabel="User menu" style="background-color: rgb(153, 97, 137);">
           <div class="ui-button__content">
             <div class="ui-button__icon">
               <mat-svg name="person" category="social"></mat-svg>
@@ -44,7 +44,7 @@ exports[`app bar component drop down user menu should show the language modal li
         <div class="user-menu-dropdown" style="display: none;">
           <ul role="menu" class="ui-menu is-raised has-icons">
             <!---->
-            <li><a role="menuitem" tabindex="0" class="ui-menu-option">
+            <li><a role="menuitem" tabindex="0" class="ui-menu-option" style="color: rgb(58, 58, 58);">
                 <div class="ui-menu-option-content"><span class="ui-icon ui-menu-option-icon material-icons"><mat-svg name="language" category="action"></mat-svg></span>
                   <div class="ui-menu-option-text">
                     Change language
diff --git a/kolibri/core/assets/test/views/__snapshots__/side-nav.spec.js.snap b/kolibri/core/assets/test/views/__snapshots__/side-nav.spec.js.snap
index 5bbf72ca35..7c588d3f2f 100644
--- a/kolibri/core/assets/test/views/__snapshots__/side-nav.spec.js.snap
+++ b/kolibri/core/assets/test/views/__snapshots__/side-nav.spec.js.snap
@@ -2,8 +2,8 @@
 
 exports[`side nav component should be hidden if navShown is false 1`] = `
 <div class="side-nav-wrapper" style="position: relative;">
-  <div class="side-nav" style="width: 100px; display: none;" name="side-nav">
-    <div class="side-nav-header" style="height: 20px; width: 100px; padding-top: 8px;"><button aria-label="Close navigation" type="button" class="ui-icon-button ui-icon-button--type-secondary ui-icon-button--color-white ui-icon-button--size-large">
+  <div class="side-nav" style="width: 100px; color: rgb(58, 58, 58); background-color: rgb(255, 255, 255); display: none;" name="side-nav">
+    <div class="side-nav-header" style="height: 20px; width: 100px; padding-top: 8px; background-color: rgb(58, 58, 58);"><button aria-label="Close navigation" type="button" class="ui-icon-button ui-icon-button--type-secondary ui-icon-button--color-white ui-icon-button--size-large">
         <div class="ui-icon-button__icon">
           <mat-svg name="close" category="navigation" class="side-nav-header-close"></mat-svg>
         </div>
@@ -14,9 +14,9 @@ exports[`side nav component should be hidden if navShown is false 1`] = `
         <div class="ui-ripple-ink"></div>
         <!---->
         <!---->
-      </button> <span class="side-nav-header-name">Kolibri</span></div>
+      </button> <span class="side-nav-header-name" style="color: rgb(255, 255, 255);">Kolibri</span></div>
     <div class="side-nav-scrollable-area" style="top: 20px; width: 100px;">
-      <div role="navigation" aria-label="Main user navigation" class="side-nav-scrollable-area-menu">
+      <div role="navigation" aria-label="Main user navigation" style="background-color: rgb(255, 255, 255);">
         <ul role="menu" class="ui-menu has-icons">
           <!---->
           <li><a role="menuitem" class="ui-menu-option is-divider">
@@ -26,11 +26,11 @@ exports[`side nav component should be hidden if navShown is false 1`] = `
           <!---->
         </ul>
       </div>
-      <div class="side-nav-scrollable-area-footer"><img src="./kolibri-logo.svg" class="side-nav-scrollable-area-footer-logo">
+      <div class="side-nav-scrollable-area-footer" style="color: rgb(97, 97, 97);"><img src="./kolibri-logo.svg" class="side-nav-scrollable-area-footer-logo">
         <div class="side-nav-scrollable-area-footer-info">
           <p>Kolibri testversion</p>
           <p>© 2018 Learning Equality</p>
-          <p><a dir="auto" type="button" class="privacy-link link">Usage and privacy
+          <p><a dir="auto" type="button" class="privacy-link KButton-noKey-0_1a16x9n link">Usage and privacy
               <!----></a></p>
         </div>
       </div>
@@ -51,8 +51,8 @@ exports[`side nav component should be hidden if navShown is false 1`] = `
 
 exports[`side nav component should show nothing if no components are added and user is not logged in 1`] = `
 <div class="side-nav-wrapper" style="position: relative;">
-  <div class="side-nav" style="width: 100px;" name="side-nav">
-    <div class="side-nav-header" style="height: 20px; width: 100px; padding-top: 8px;"><button aria-label="Close navigation" type="button" class="ui-icon-button ui-icon-button--type-secondary ui-icon-button--color-white ui-icon-button--size-large">
+  <div class="side-nav" style="width: 100px; color: rgb(58, 58, 58); background-color: rgb(255, 255, 255);" name="side-nav">
+    <div class="side-nav-header" style="height: 20px; width: 100px; padding-top: 8px; background-color: rgb(58, 58, 58);"><button aria-label="Close navigation" type="button" class="ui-icon-button ui-icon-button--type-secondary ui-icon-button--color-white ui-icon-button--size-large">
         <div class="ui-icon-button__icon">
           <mat-svg name="close" category="navigation" class="side-nav-header-close"></mat-svg>
         </div>
@@ -63,9 +63,9 @@ exports[`side nav component should show nothing if no components are added and u
         <div class="ui-ripple-ink"></div>
         <!---->
         <!---->
-      </button> <span class="side-nav-header-name">Kolibri</span></div>
+      </button> <span class="side-nav-header-name" style="color: rgb(255, 255, 255);">Kolibri</span></div>
     <div class="side-nav-scrollable-area" style="top: 20px; width: 100px;">
-      <div role="navigation" aria-label="Main user navigation" class="side-nav-scrollable-area-menu">
+      <div role="navigation" aria-label="Main user navigation" style="background-color: rgb(255, 255, 255);">
         <ul role="menu" class="ui-menu has-icons">
           <!---->
           <li><a role="menuitem" class="ui-menu-option is-divider">
@@ -75,11 +75,11 @@ exports[`side nav component should show nothing if no components are added and u
           <!---->
         </ul>
       </div>
-      <div class="side-nav-scrollable-area-footer"><img src="./kolibri-logo.svg" class="side-nav-scrollable-area-footer-logo">
+      <div class="side-nav-scrollable-area-footer" style="color: rgb(97, 97, 97);"><img src="./kolibri-logo.svg" class="side-nav-scrollable-area-footer-logo">
         <div class="side-nav-scrollable-area-footer-info">
           <p>Kolibri testversion</p>
           <p>© 2018 Learning Equality</p>
-          <p><a dir="auto" type="button" class="privacy-link link">Usage and privacy
+          <p><a dir="auto" type="button" class="privacy-link KButton-noKey-0_1a16x9n link">Usage and privacy
               <!----></a></p>
         </div>
       </div>
diff --git a/kolibri/plugins/coach/assets/test/views/AssignmentChangeStatusModal.spec.js b/kolibri/plugins/coach/assets/test/views/AssignmentChangeStatusModal.spec.js
index ad88c97203..7dd34508f4 100644
--- a/kolibri/plugins/coach/assets/test/views/AssignmentChangeStatusModal.spec.js
+++ b/kolibri/plugins/coach/assets/test/views/AssignmentChangeStatusModal.spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import AssignmentChangeStatusModal from '../../src/views/assignments/AssignmentChangeStatusModal';
 
 const defaultProps = {
@@ -26,6 +27,7 @@ describe('AssignmentChangeStatusModal', () => {
         ...defaultProps,
         active: true,
       },
+      store,
     });
     expect(wrapper.vm.activeIsSelected).toEqual(true);
     els.inactiveRadio().trigger('change');
@@ -42,6 +44,7 @@ describe('AssignmentChangeStatusModal', () => {
         ...defaultProps,
         active: false,
       },
+      store,
     });
     expect(wrapper.vm.activeIsSelected).toBeFalsy();
     els.activeRadio().trigger('change');
@@ -56,6 +59,7 @@ describe('AssignmentChangeStatusModal', () => {
         ...defaultProps,
         active: false,
       },
+      store,
     });
     els.form().trigger('submit');
     expect(wrapper.emitted().cancel.length).toEqual(1);
@@ -64,6 +68,7 @@ describe('AssignmentChangeStatusModal', () => {
   it('pressing "cancel" closes the modal', () => {
     const { wrapper, els } = makeWrapper({
       propsData: { ...defaultProps },
+      store,
     });
     els.cancelButton().trigger('click');
     expect(wrapper.emitted().cancel.length).toEqual(1);
diff --git a/kolibri/plugins/coach/assets/test/views/AssignmentDeleteModal.spec.js b/kolibri/plugins/coach/assets/test/views/AssignmentDeleteModal.spec.js
index f2cf4ee634..b165ac1ea6 100644
--- a/kolibri/plugins/coach/assets/test/views/AssignmentDeleteModal.spec.js
+++ b/kolibri/plugins/coach/assets/test/views/AssignmentDeleteModal.spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import AssignmentDeleteModal from '../../src/views/assignments/AssignmentDeleteModal';
 
 const defaultProps = {
@@ -20,6 +21,7 @@ describe('AssignmentDeleteModal', () => {
   it('clicking delete causes a "delete" event to be emitted', () => {
     const { wrapper, els } = makeWrapper({
       propsData: { ...defaultProps },
+      store,
     });
     // Again, clicking the submit button does not propagate to form, so doing a hack
     // els.submitButton().trigger('click');
@@ -30,6 +32,7 @@ describe('AssignmentDeleteModal', () => {
   it('clicking cancel causes a "cancel" event to be emitted', () => {
     const { wrapper, els } = makeWrapper({
       propsData: { ...defaultProps },
+      store,
     });
     els.cancelButton().trigger('click');
     expect(wrapper.emitted().cancel.length).toEqual(1);
diff --git a/kolibri/plugins/coach/assets/test/views/AssignmentDetailsModal.spec.js b/kolibri/plugins/coach/assets/test/views/AssignmentDetailsModal.spec.js
index ff4b4ed530..1c733ecde8 100644
--- a/kolibri/plugins/coach/assets/test/views/AssignmentDetailsModal.spec.js
+++ b/kolibri/plugins/coach/assets/test/views/AssignmentDetailsModal.spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import AssignmentDetailsModal from '../../src/views/assignments/AssignmentDetailsModal';
 
 const defaultProps = {
@@ -14,6 +15,7 @@ const defaultProps = {
 };
 
 function makeWrapper(options) {
+  options.store = store;
   const wrapper = mount(AssignmentDetailsModal, options);
   const els = {
     titleField: () => wrapper.findAll({ name: 'KTextbox' }).at(0),
diff --git a/kolibri/plugins/device_management/assets/src/views/ManageContentPage/ChannelsGrid.vue b/kolibri/plugins/device_management/assets/src/views/ManageContentPage/ChannelsGrid.vue
index abfee3684c..1fc1bf99b5 100644
--- a/kolibri/plugins/device_management/assets/src/views/ManageContentPage/ChannelsGrid.vue
+++ b/kolibri/plugins/device_management/assets/src/views/ManageContentPage/ChannelsGrid.vue
@@ -4,6 +4,7 @@
     <transition mode="out-in">
       <p
         v-if="noChannelsToShow"
+        class="no-channels"
         :style="{ color: $coreTextError }"
       >
         {{ $tr('emptyChannelListMessage') }}
diff --git a/kolibri/plugins/device_management/assets/test/views/channel-token-modal.spec.js b/kolibri/plugins/device_management/assets/test/views/channel-token-modal.spec.js
index a4cd0e23c1..a27fd8cea8 100644
--- a/kolibri/plugins/device_management/assets/test/views/channel-token-modal.spec.js
+++ b/kolibri/plugins/device_management/assets/test/views/channel-token-modal.spec.js
@@ -1,8 +1,9 @@
 import { mount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import ChannelTokenModal from '../../src/views/AvailableChannelsPage/ChannelTokenModal';
 
 function makeWrapper() {
-  return mount(ChannelTokenModal);
+  return mount(ChannelTokenModal, { store });
 }
 
 function getElements(wrapper) {
diff --git a/kolibri/plugins/device_management/assets/test/views/channels-grid.spec.js b/kolibri/plugins/device_management/assets/test/views/channels-grid.spec.js
index a30684133a..ebbd53f85e 100644
--- a/kolibri/plugins/device_management/assets/test/views/channels-grid.spec.js
+++ b/kolibri/plugins/device_management/assets/test/views/channels-grid.spec.js
@@ -3,7 +3,7 @@ import ChannelsGrid from '../../src/views/ManageContentPage/ChannelsGrid';
 import { makeAvailableChannelsPageStore } from '../utils/makeStore';
 
 function makeWrapper(options) {
-  const { store = {}, props = {} } = options;
+  const { store = store, props = {} } = options;
   return mount(ChannelsGrid, {
     propsData: { ...props },
     store,
@@ -22,7 +22,7 @@ function getElements(wrapper) {
   return {
     channelListItems: () => wrapper.findAll({ name: 'ChannelListItem' }),
     emptyState: () => wrapper.find('.no-channels'),
-    ProgressBar: () => wrapper.find({ name: 'ui-progress-linear' }),
+    ProgressBar: () => wrapper.find({ name: 'KLinearLoader' }),
     deleteChannelModal: () => wrapper.find({ name: 'KModal' }),
   };
 }
diff --git a/kolibri/plugins/device_management/assets/test/views/content-node-row.spec.js b/kolibri/plugins/device_management/assets/test/views/content-node-row.spec.js
index e030648e7b..4b72f5db5b 100644
--- a/kolibri/plugins/device_management/assets/test/views/content-node-row.spec.js
+++ b/kolibri/plugins/device_management/assets/test/views/content-node-row.spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import ContentNodeRow from '../../src/views/SelectContentPage/ContentNodeRow';
 import { makeNode } from '../utils/data';
 
@@ -14,6 +15,7 @@ const defaultProps = {
 function makeWrapper(props = {}) {
   return mount(ContentNodeRow, {
     propsData: { ...defaultProps, ...props },
+    store,
   });
 }
 
diff --git a/kolibri/plugins/device_management/assets/test/views/selected-resources-size.spec.js b/kolibri/plugins/device_management/assets/test/views/selected-resources-size.spec.js
index faf61960a3..47847f46cc 100644
--- a/kolibri/plugins/device_management/assets/test/views/selected-resources-size.spec.js
+++ b/kolibri/plugins/device_management/assets/test/views/selected-resources-size.spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import KButton from 'kolibri.coreVue.components.KButton';
 import UiAlert from 'keen-ui/src/UiAlert';
 import SelectedResourcesSize from '../../src/views/SelectContentPage/SelectedResourcesSize';
@@ -13,6 +14,7 @@ function makeWrapper(props = {}) {
 
   return mount(SelectedResourcesSize, {
     propsData: { ...defaultProps, ...props },
+    store,
   });
 }
 
diff --git a/kolibri/plugins/document_epub_render/assets/tests/BottomBar.spec.js b/kolibri/plugins/document_epub_render/assets/tests/BottomBar.spec.js
index 7b70eaba47..be7486ce4e 100644
--- a/kolibri/plugins/document_epub_render/assets/tests/BottomBar.spec.js
+++ b/kolibri/plugins/document_epub_render/assets/tests/BottomBar.spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import BottomBar from '../src/views/BottomBar';
 
 function createWrapper({
@@ -14,6 +15,7 @@ function createWrapper({
       sliderStep,
       locationsAreReady,
     },
+    store,
   });
 }
 
diff --git a/kolibri/plugins/document_epub_render/assets/tests/SearchSideBar.spec.js b/kolibri/plugins/document_epub_render/assets/tests/SearchSideBar.spec.js
index b6369f47c5..87f4125ad2 100644
--- a/kolibri/plugins/document_epub_render/assets/tests/SearchSideBar.spec.js
+++ b/kolibri/plugins/document_epub_render/assets/tests/SearchSideBar.spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import SearchSideBar from '../src/views/SearchSideBar';
 import SampleSearchResults from './SampleSearchResults';
 
@@ -7,6 +8,7 @@ function createWrapper() {
     propsData: {
       book: {},
     },
+    store,
   });
 }
 
diff --git a/kolibri/plugins/document_epub_render/assets/tests/SettingsSideBar.spec.js b/kolibri/plugins/document_epub_render/assets/tests/SettingsSideBar.spec.js
index 3b413662ba..93ea24667d 100644
--- a/kolibri/plugins/document_epub_render/assets/tests/SettingsSideBar.spec.js
+++ b/kolibri/plugins/document_epub_render/assets/tests/SettingsSideBar.spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import SettingsSideBar from '../src/views/SettingsSideBar';
 import { THEMES } from '../src/views/EpubConstants';
 
@@ -7,6 +8,7 @@ function createWrapper({ theme = THEMES.BEIGE } = {}) {
     propsData: {
       theme,
     },
+    store,
   });
 }
 
diff --git a/kolibri/plugins/document_epub_render/assets/tests/TableOfContentsSection.spec.js b/kolibri/plugins/document_epub_render/assets/tests/TableOfContentsSection.spec.js
index d40299fa2e..d72b05d681 100644
--- a/kolibri/plugins/document_epub_render/assets/tests/TableOfContentsSection.spec.js
+++ b/kolibri/plugins/document_epub_render/assets/tests/TableOfContentsSection.spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import TableOfContentsSection from '../src/views/TableOfContentsSection';
 
 const section = {
@@ -34,6 +35,7 @@ function createWrapper({ section, depth, currentSection } = {}) {
       depth,
       currentSection,
     },
+    store,
   });
 }
 
diff --git a/kolibri/plugins/document_epub_render/assets/tests/TableOfContentsSectionSideBar.spec.js b/kolibri/plugins/document_epub_render/assets/tests/TableOfContentsSectionSideBar.spec.js
index 9b840cbd49..f6e366a924 100644
--- a/kolibri/plugins/document_epub_render/assets/tests/TableOfContentsSectionSideBar.spec.js
+++ b/kolibri/plugins/document_epub_render/assets/tests/TableOfContentsSectionSideBar.spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import TableOfContentsSideBar from '../src/views/TableOfContentsSideBar';
 
 const toc = [
@@ -30,6 +31,7 @@ function createWrapper({ toc, currentSection } = {}) {
       toc,
       currentSection,
     },
+    store,
   });
 }
 
diff --git a/kolibri/plugins/document_epub_render/assets/tests/TopBar.spec.js b/kolibri/plugins/document_epub_render/assets/tests/TopBar.spec.js
index 9525a8ce4a..99a234dc7a 100644
--- a/kolibri/plugins/document_epub_render/assets/tests/TopBar.spec.js
+++ b/kolibri/plugins/document_epub_render/assets/tests/TopBar.spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import TopBar from '../src/views/TopBar';
 
 function createWrapper({ title, isInFullscreen = false } = {}) {
@@ -7,6 +8,7 @@ function createWrapper({ title, isInFullscreen = false } = {}) {
       title,
       isInFullscreen,
     },
+    store,
   });
 }
 
diff --git a/kolibri/plugins/setup_wizard/assets/test/views/PersonalDataConsentForm.spec.js b/kolibri/plugins/setup_wizard/assets/test/views/PersonalDataConsentForm.spec.js
index 86d0a67aeb..5bccad0863 100644
--- a/kolibri/plugins/setup_wizard/assets/test/views/PersonalDataConsentForm.spec.js
+++ b/kolibri/plugins/setup_wizard/assets/test/views/PersonalDataConsentForm.spec.js
@@ -1,8 +1,9 @@
 import { mount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import PersonalDataConsentForm from '../../src/views/onboarding-forms/PersonalDataConsentForm';
 
 function makeWrapper() {
-  const wrapper = mount(PersonalDataConsentForm, {});
+  const wrapper = mount(PersonalDataConsentForm, { store });
   return { wrapper };
 }
 
diff --git a/packages/kolibri-tools/jest_config/setup.js b/packages/kolibri-tools/jest_config/setup.js
index 5ccca39e95..800cadbeb8 100644
--- a/packages/kolibri-tools/jest_config/setup.js
+++ b/packages/kolibri-tools/jest_config/setup.js
@@ -1,17 +1,19 @@
 import 'intl';
 import 'intl/locale-data/jsonp/en.js';
-import Vue from 'vue';
-import Vuex from 'vuex';
-import VueRouter from 'vue-router';
+import * as Aphrodite from 'aphrodite';
+import * as AphroditeNoImportant from 'aphrodite/no-important';
+
+import Vue from 'kolibri.lib.vue';
 import router from 'kolibri.coreVue.router';
 import { i18nSetup } from 'kolibri.utils.i18n';
 
 router.init([]);
 
+Aphrodite.StyleSheetTestUtils.suppressStyleInjection();
+AphroditeNoImportant.StyleSheetTestUtils.suppressStyleInjection();
+
 Vue.prototype.Kolibri = {};
 Vue.config.silent = true;
-Vue.use(Vuex);
-Vue.use(VueRouter);
 i18nSetup(true);
 Vue.config.productionTip = false;