test: add basic tests for plugin and directive

Author: Theodore Messinezis

.eslintignore

@@ -1,2 +1,3 @@
-node_modules/
 dist/
+coverage/
+node_modules/

.gitignore

@@ -1,2 +1,3 @@
 dist/
+coverage/
 node_modules/

jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  verbose: true,
+  preset: 'ts-jest',
+  collectCoverage: true,
+  collectCoverageFrom: [
+    'src/**/*.ts',
+  ],
+};

package-lock.json

@@ -17,21 +17,28 @@
   },
   "scripts": {
     "build": "rollup -c",
-    "lint": "eslint --ext .ts ./"
+    "lint": "eslint --ext .ts ./",
+    "test": "jest"
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^4.0.0",
     "@semantic-release/exec": "^5.0.0",
+    "@types/jest": "^25.2.1",
     "@typescript-eslint/eslint-plugin": "^2.27.0",
+    "@vue/test-utils": "^1.0.0-beta.33",
     "eslint": "^6.8.0",
     "eslint-config-airbnb-typescript": "^7.2.0",
     "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-react": "^7.19.0",
+    "jest": "^25.3.0",
     "rollup": "^2.3.3",
     "rollup-plugin-uglify": "^6.0.4",
     "semantic-release": "^17.0.4",
+    "ts-jest": "^25.3.1",
     "tslib": "^1.11.1",
     "typescript": "^3.8.3",
-    "vue": "^2.0.0"
+    "vue": "^2.0.0",
+    "vue-template-compiler": "^2.6.11"
   },
   "peerDependencies": {
     "vue": "^2.0.0"

package.json

@@ -0,0 +1,19 @@
+import { DirectiveOptions } from 'vue';
+import { scroll } from './scroll';
+
+export const directive: DirectiveOptions = {
+  bind: (el) => {
+    new MutationObserver(() => {
+      scroll(el);
+    }).observe(el, {
+      childList: true,
+      subtree: true,
+    });
+  },
+
+  inserted: (el) => {
+    scroll(el);
+  },
+};
+
+export default directive;

src/directive.ts

@@ -1,38 +1,5 @@
-import { DirectiveOptions, PluginObject } from 'vue';
-
-function scrollElementToBottom(el: Element) {
-  if (typeof el.scroll === 'function') el.scroll({ top: el.scrollHeight });
-  else el.scrollTop = el.scrollHeight; // eslint-disable-line no-param-reassign
-}
-
-const directive: DirectiveOptions = {
-  bind: (el) => {
-    const observer = new MutationObserver((e) => {
-      const nodesWereAdded = e[e.length - 1].addedNodes.length === 1;
-      const nodesWereRemoved = e[e.length - 1].removedNodes.length === 1;
-      if (nodesWereAdded === false && nodesWereRemoved === false) return;
-      scrollElementToBottom(el);
-    });
-
-    observer.observe(el, {
-      childList: true,
-      subtree: true,
-    });
-  },
-
-  inserted: (el) => {
-    scrollElementToBottom(el);
-  },
-};
-
-const plugin: PluginObject<any> = {
-  install: (Vue) => {
-    Vue.directive('chat-scroll', directive);
-  },
-};
-
-if (typeof window !== 'undefined' && window.Vue) {
-  window.Vue.use(plugin);
-}
+/* istanbul ignore file */
+import { bootstrap, plugin } from './plugin';
 
+bootstrap();
 export default plugin;

src/index.ts

@@ -0,0 +1,15 @@
+import { PluginObject } from 'vue';
+import { directive } from './directive';
+
+export const plugin: PluginObject<any> = {
+  install: (Vue) => {
+    Vue.directive('chat-scroll', directive);
+  },
+};
+
+export const bootstrap = () => {
+  /* istanbul ignore else */
+  if (typeof window !== 'undefined' && window.Vue) {
+    window.Vue.use(plugin);
+  }
+};

src/plugin.ts

@@ -0,0 +1,7 @@
+/* istanbul ignore file */
+export const scroll = (el: Element): void => {
+  if (typeof el.scroll === 'function') el.scroll({ top: el.scrollHeight });
+  else el.scrollTop = el.scrollHeight; // eslint-disable-line no-param-reassign
+};
+
+export default scroll;

src/scroll.ts

@@ -0,0 +1,66 @@
+import * as vueTestUtils from '@vue/test-utils';
+import { directive } from '../src/directive';
+import { scroll } from '../src/scroll';
+
+jest.mock('../src/scroll');
+// Clear all mocks before each test.
+beforeEach(() => { jest.clearAllMocks(); });
+
+test('it automatically calls scrolls on init', () => {
+  const Component: Vue.Component = {
+    template: '<div v-chat-scroll />',
+  };
+
+  const localVue = vueTestUtils.createLocalVue();
+  localVue.directive('chat-scroll', directive);
+
+  const wrapper = vueTestUtils.mount(Component, { localVue });
+  expect(scroll).toHaveBeenCalledTimes(1);
+  expect(scroll).toHaveBeenCalledWith(wrapper.element);
+});
+
+test('it calls scroll when an item is added', async () => {
+  const Component: Vue.Component = {
+    data: () => ({ items: [] }),
+    template: '<div v-chat-scroll><div v-for="item in items">{{ item }}</div></div>',
+  };
+
+  const localVue = vueTestUtils.createLocalVue();
+  localVue.directive('chat-scroll', directive);
+
+  const wrapper = vueTestUtils.mount(Component, { localVue });
+  expect(scroll).toHaveBeenCalledTimes(1);
+  expect(scroll).toHaveBeenCalledWith(wrapper.element);
+
+  (wrapper.vm as any).$data.items.push('A new item');
+  await (wrapper.vm as any).$nextTick();
+  expect(scroll).toHaveBeenCalledTimes(2);
+
+  (wrapper.vm as any).$data.items.push('Here\'s two items in a row!');
+  (wrapper.vm as any).$data.items.push('This should call scroll just once!');
+  await (wrapper.vm as any).$nextTick();
+  expect(scroll).toHaveBeenCalledTimes(3);
+});
+
+test('it calls scroll when an item is removed', async () => {
+  const Component: Vue.Component = {
+    data: () => ({ items: [1, 2, 3] }),
+    template: '<div v-chat-scroll><div v-for="item in items">{{ item }}</div></div>',
+  };
+
+  const localVue = vueTestUtils.createLocalVue();
+  localVue.directive('chat-scroll', directive);
+
+  const wrapper = vueTestUtils.mount(Component, { localVue });
+  expect(scroll).toHaveBeenCalledTimes(1);
+  expect(scroll).toHaveBeenCalledWith(wrapper.element);
+
+  (wrapper.vm as any).$data.items.pop();
+  await (wrapper.vm as any).$nextTick();
+  expect(scroll).toHaveBeenCalledTimes(2);
+
+  (wrapper.vm as any).$data.items.pop();
+  (wrapper.vm as any).$data.items.pop();
+  await (wrapper.vm as any).$nextTick();
+  expect(scroll).toHaveBeenCalledTimes(3);
+});

tests/directive.spec.ts

@@ -0,0 +1,19 @@
+import { createLocalVue } from '@vue/test-utils';
+import { bootstrap, plugin } from '../src/plugin';
+import { directive } from '../src/directive';
+
+test('it registers the directive', async () => {
+  const localVue = createLocalVue();
+  localVue.directive = jest.fn();
+  localVue.use(plugin);
+  expect(localVue.directive).toHaveBeenCalledTimes(1);
+  expect(localVue.directive).toBeCalledWith('chat-scroll', directive);
+});
+
+test('it auto uses itself when window.Vue is defined', () => {
+  window.Vue = createLocalVue();
+  window.Vue.use = jest.fn();
+  bootstrap(); // We assume this gets called automatically.
+  expect(window.Vue.use).toHaveBeenCalledTimes(1);
+  expect(window.Vue.use).toBeCalledWith(plugin);
+});