1import { mount, createWrapper } from '@vue/test-utils';
2import AppNavigation from '@/components/AppNavigation';
3import Vue from 'vue';
4import VueRouter from 'vue-router';
5import { BootstrapVue } from 'bootstrap-vue';
6
7describe('AppNavigation.vue', () => {
8  let wrapper;
9  Vue.use(BootstrapVue);
10  Vue.use(VueRouter);
11  const router = new VueRouter();
12
13  wrapper = mount(AppNavigation, {
14    router,
15    mocks: {
16      $t: (key) => key,
17    },
18  });
19
20  it('should exist', async () => {
21    expect(wrapper.exists()).toBe(true);
22  });
23
24  it('should render correctly', () => {
25    expect(wrapper.element).toMatchSnapshot();
26  });
27
28  it('should render with nav-container open', () => {
29    wrapper.vm.isNavigationOpen = true;
30    expect(wrapper.element).toMatchSnapshot();
31  });
32
33  it('Nav Overlay click should emit change-is-navigation-open event', async () => {
34    const rootWrapper = createWrapper(wrapper.vm.$root);
35    const navOverlay = wrapper.find('#nav-overlay');
36    navOverlay.trigger('click');
37    await wrapper.vm.$nextTick();
38    expect(rootWrapper.emitted('change-is-navigation-open')).toBeTruthy();
39  });
40
41  it('toggle-navigation event should toggle isNavigation data prop value', async () => {
42    const rootWrapper = createWrapper(wrapper.vm.$root);
43    wrapper.vm.isNavigationOpen = false;
44    rootWrapper.vm.$emit('toggle-navigation');
45    expect(wrapper.vm.isNavigationOpen).toBe(true);
46    rootWrapper.vm.$emit('toggle-navigation');
47    expect(wrapper.vm.isNavigationOpen).toBe(false);
48  });
49});
50