Merge pull request #472 from MisRob/usekshow-tests

Add tests for useKShow and fix a bug

CHANGELOG.md

@@ -6,6 +6,17 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 <!-- All new changelog items should come here -->
 
+- [#472]
+  - **Description:** Fix useKShow bug and add tests
+  - **Products impact:** bugfix
+  - **Addresses:** -
+  - **Components:** useKShow
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#472]: https://github.com/learningequality/kolibri-design-system/pull/472
+
 - [#463]
   - **Description:** Add deprecation warning for KResponsiveWindowMixin
   - **Products impact:** updated API

jest.conf/setup.js

@@ -6,6 +6,7 @@ import * as AphroditeNoImportant from 'aphrodite/no-important';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import VueIntl from 'vue-intl';
+import VueCompositionAPI from '@vue/composition-api';
 import KThemePlugin from '../lib/KThemePlugin';
 
 global.beforeEach(() => {
@@ -26,6 +27,7 @@ global.afterEach(() => {
 
 // Register Vue plugins and components
 Vue.use(VueRouter);
+Vue.use(VueCompositionAPI);
 Vue.use(KThemePlugin);
 Vue.use(VueIntl);
 

lib/composables/useKShow/__tests__/index.spec.js

@@ -0,0 +1,42 @@
+import useKShow from '../index';
+
+const { show } = useKShow();
+
+describe('useKShow', () => {
+  beforeAll(() => {
+    // https://github.com/jestjs/jest/issues/11607
+    jest.useFakeTimers('legacy');
+  });
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  it(`'show' returns 'true' at least for a specified duration after an initial trigger`, () => {
+    // Test that 'show1' instance evaluates to true
+    // for at least 5 seconds after an initial trigger
+    // Test 'show2' instance in the same way but for 2 seconds
+    // (this is to test that there are no clashes between more
+    // 'show' instances)
+    expect(show('show1', true, 5000)).toBe(true);
+    expect(show('show2', true, 2000)).toBe(true);
+
+    // change 'shouldShow' condition to falsy
+    expect(show('show1', false, 5000)).toBe(true);
+    expect(show('show2', false, 2000)).toBe(true);
+
+    // after 1 second in total
+    jest.advanceTimersByTime(1000);
+    expect(show('show1', false, 5000)).toBe(true);
+    expect(show('show2', false, 2000)).toBe(true);
+
+    // after 2.5 seconds in total
+    jest.advanceTimersByTime(1500);
+    expect(show('show1', false, 5000)).toBe(true);
+    expect(show('show2', false, 2000)).toBe(false);
+
+    // after 5.5 seconds in total
+    jest.advanceTimersByTime(3000);
+    expect(show('show1', false, 5000)).toBe(false);
+    expect(show('show2', false, 2000)).toBe(false);
+  });
+});

lib/composables/useKShow.js → lib/composables/useKShow/index.js

@@ -63,7 +63,7 @@ export default function useKShow() {
         return shouldShow;
       }
       itemsMap[key] = {
-        shouldShow,
+        shouldShow: false,
         minVisibleTime,
         isFrozen: ref(false),
         timeoutId: null,