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