diff --git a/CHANGELOG.md b/CHANGELOG.md index 690a534bc..6e919969e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,17 @@ Changelog is rather internal in nature. See release notes for the public overvie +- [#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 diff --git a/jest.conf/setup.js b/jest.conf/setup.js index 23894afcb..b41acc4eb 100644 --- a/jest.conf/setup.js +++ b/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); diff --git a/lib/composables/useKShow/__tests__/index.spec.js b/lib/composables/useKShow/__tests__/index.spec.js new file mode 100644 index 000000000..f9b145a05 --- /dev/null +++ b/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); + }); +}); diff --git a/lib/composables/useKShow.js b/lib/composables/useKShow/index.js similarity index 99% rename from lib/composables/useKShow.js rename to lib/composables/useKShow/index.js index fc5399235..9940d17f1 100644 --- a/lib/composables/useKShow.js +++ b/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,