mobilizon/js/tests/unit/specs/components/navbar.spec.ts

82 lines
2.2 KiB
TypeScript
Raw Normal View History

import { shallowMount, createLocalVue, Wrapper, config } from "@vue/test-utils";
import NavBar from "@/components/NavBar.vue";
import {
createMockClient,
MockApolloClient,
RequestHandler,
} from "mock-apollo-client";
import VueApollo from "vue-apollo";
import { CONFIG } from "@/graphql/config";
import { USER_SETTINGS } from "@/graphql/user";
import buildCurrentUserResolver from "@/apollo/user";
import Buefy from "buefy";
import { configMock } from "../mocks/config";
import { InMemoryCache } from "@apollo/client/cache";
const localVue = createLocalVue();
localVue.use(VueApollo);
localVue.use(Buefy);
config.mocks.$t = (key: string): string => key;
describe("App component", () => {
let wrapper: Wrapper<Vue>;
let mockClient: MockApolloClient | null;
let apolloProvider;
let requestHandlers: Record<string, RequestHandler>;
const createComponent = (handlers = {}, baseData = {}) => {
const cache = new InMemoryCache({ addTypename: false });
mockClient = createMockClient({
cache,
resolvers: buildCurrentUserResolver(cache),
});
requestHandlers = {
configQueryHandler: jest.fn().mockResolvedValue(configMock),
loggedUserQueryHandler: jest.fn().mockResolvedValue(null),
...handlers,
};
mockClient.setRequestHandler(CONFIG, requestHandlers.configQueryHandler);
mockClient.setRequestHandler(
USER_SETTINGS,
requestHandlers.loggedUserQueryHandler
);
apolloProvider = new VueApollo({
defaultClient: mockClient,
});
wrapper = shallowMount(NavBar, {
localVue,
apolloProvider,
stubs: ["router-link", "router-view"],
data() {
return {
...baseData,
};
},
});
};
afterEach(() => {
wrapper.destroy();
mockClient = null;
apolloProvider = null;
});
it("renders a Vue component", async () => {
createComponent();
await wrapper.vm.$nextTick();
expect(wrapper.exists()).toBe(true);
expect(requestHandlers.configQueryHandler).toHaveBeenCalled();
expect(wrapper.vm.$apollo.queries.config).toBeTruthy();
expect(wrapper.html()).toMatchSnapshot();
expect(wrapper.findComponent({ name: "b-navbar" }).exists()).toBeTruthy();
});
});