Add tests to BhModal component

src/bh/components/BhModal.vue

@@ -3,10 +3,12 @@
     v-show="open"
     class="bh-modal">
     <div
+      ref="background"
       class="bh-modal__background"
       @click="backgroundClose()" />
     <div class="bh-modal__close">
       <button
+        ref="closeBtn"
         class="bh-modal__close__button"
         @click="close()">
         <bh-icon

test/unit/specs/bh/BhModal.spec.js

@@ -0,0 +1,88 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+import BH from 'bh';
+import BhModal from 'bh/components/BhModal';
+
+
+describe('BhModal.vue', () => {
+  let localVue;
+  let wrapper;
+  beforeEach(() => {
+    localVue = createLocalVue();
+    localVue.use(BH);
+    wrapper = shallowMount(BhModal, {
+      localVue,
+      propsData: {
+        open: true,
+      },
+    });
+  });
+
+  test('renders correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  describe('close modal clicking in closeBtn', () => {
+    beforeEach(() => {
+      const closeBtn = wrapper.find({ ref: 'closeBtn' });
+      closeBtn.trigger('click');
+    });
+
+    test('event update:open was emitted', () => {
+      expect(wrapper.emitted('update:open')).toBeDefined();
+    });
+
+    test('event update:open was emitted with false value', () => {
+      const value = wrapper.emitted('update:open')[0][0];
+      expect(value).toBeFalsy();
+    });
+
+    test('renders correctly', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('close modal clicking in background', () => {
+    beforeEach(() => {
+      const background = wrapper.find({ ref: 'background' });
+      background.trigger('click');
+    });
+
+    test('event update:open was emitted', () => {
+      expect(wrapper.emitted('update:open')).toBeDefined();
+    });
+
+    test('event update:open was emitted with false value', () => {
+      const value = wrapper.emitted('update:open')[0][0];
+      expect(value).toBeFalsy();
+    });
+
+    test('renders correctly', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('close modal pass false via open prop', () => {
+    beforeEach(() => {
+      wrapper.setProps({
+        open: false,
+      });
+    });
+
+    test('renders correctly', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    describe('open modal pass true via open prop', () => {
+      beforeEach(() => {
+        wrapper.setProps({
+          open: true,
+        });
+      });
+
+      test('renders correctly', () => {
+        expect(wrapper).toMatchSnapshot();
+      });
+    });
+  });
+});

test/unit/specs/bh/__snapshots__/BhModal.spec.js.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BhModal.vue close modal clicking in background renders correctly 1`] = `
+<div class="bh-modal">
+  <div class="bh-modal__background"></div>
+  <div class="bh-modal__close">
+    <button class="bh-modal__close__button">
+      <bhicon-stub></bhicon-stub>
+    </button>
+  </div>
+  <bhcard-stub class="bh-modal__content"></bhcard-stub>
+</div>
+`;
+
+exports[`BhModal.vue close modal clicking in closeBtn renders correctly 1`] = `
+<div class="bh-modal">
+  <div class="bh-modal__background"></div>
+  <div class="bh-modal__close">
+    <button class="bh-modal__close__button">
+      <bhicon-stub></bhicon-stub>
+    </button>
+  </div>
+  <bhcard-stub class="bh-modal__content"></bhcard-stub>
+</div>
+`;
+
+exports[`BhModal.vue close modal pass false via open prop open modal pass true via open prop renders correctly 1`] = `
+<div class="bh-modal" style="">
+  <div class="bh-modal__background"></div>
+  <div class="bh-modal__close">
+    <button class="bh-modal__close__button">
+      <bhicon-stub></bhicon-stub>
+    </button>
+  </div>
+  <bhcard-stub class="bh-modal__content"></bhcard-stub>
+</div>
+`;
+
+exports[`BhModal.vue close modal pass false via open prop renders correctly 1`] = `
+<div class="bh-modal" style="display: none;">
+  <div class="bh-modal__background"></div>
+  <div class="bh-modal__close">
+    <button class="bh-modal__close__button">
+      <bhicon-stub></bhicon-stub>
+    </button>
+  </div>
+  <bhcard-stub class="bh-modal__content"></bhcard-stub>
+</div>
+`;
+
+exports[`BhModal.vue renders correctly 1`] = `
+<div class="bh-modal">
+  <div class="bh-modal__background"></div>
+  <div class="bh-modal__close">
+    <button class="bh-modal__close__button">
+      <bhicon-stub></bhicon-stub>
+    </button>
+  </div>
+  <bhcard-stub class="bh-modal__content"></bhcard-stub>
+</div>
+`;