Implement unit tests for example

Author: mahdikhashan

.babelrc

@@ -1,5 +1,5 @@
 {
   "presets": [
-    "env"
+    ["@babel/preset-env"]
   ]
 }

component/Component.spec.js

@@ -0,0 +1,46 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { mount } from '@vue/test-utils'
+
+import clickOutSide from "../lib";
+
+import Box from './Component.vue'
+
+test('box element is not visible at first', () => {
+  const wrapper = mount(Box)
+
+  expect(wrapper.find('.box').exists()).toBe(true)
+})
+
+test('box counter increases if button is clicked', async () => {
+  const wrapper = mount(Box)
+
+  expect(wrapper.find('.box').exists()).toBe(true)
+
+  const button = wrapper.find('.box')
+  await button.trigger('click')
+
+  expect(wrapper.find('.box').text()).toBe('BOX 1')
+})
+
+// TODO: fix it.
+test('box element is invisible if data visible is false', async () => {
+  const wrapper = mount(Box, {
+    global: {
+      directives: {
+        clickOutSide,
+      }
+    }
+  })
+
+  const box = wrapper.find('.box')
+  const main = wrapper.find('main')
+
+  expect(box.exists()).toBe(true)
+
+  await main.trigger('click')
+
+  expect(box.isVisible()).toBe(false)
+})

component/Component.vue

@@ -0,0 +1,52 @@
+<template>
+  <main>
+    <div
+      v-if="visible"
+      @click="counter++"
+      v-click-out-side="customMethod"
+      class="box"
+    >
+      BOX {{ counter }}
+    </div>
+    <br />
+    <p>Outside of the box</p>
+  </main>
+</template>
+
+<script>
+import clickOutSide from "../lib";
+
+export default {
+  name: "Box",
+  directives: {
+    clickOutSide,
+  },
+  data() {
+    return {
+      visible: true,
+      counter: 0,
+    };
+  },
+  methods: {
+    customMethod() {
+      this.visible = false;
+    },
+  },
+};
+</script>
+
+<style scoped>
+div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2rem;
+  background-color: red;
+  width: 100px;
+  height: 100px;
+}
+p {
+  font-size: 2rem;
+  font-weight: 800;
+}
+</style>