-
+
diff --git a/no-nuxt-pls/pages/login.vue b/no-nuxt-pls/pages/login.vue
new file mode 100644
index 0000000..a95c0ea
--- /dev/null
+++ b/no-nuxt-pls/pages/login.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
diff --git a/no-nuxt-pls/store/auth.ts b/no-nuxt-pls/store/auth.ts
new file mode 100644
index 0000000..df0cad7
--- /dev/null
+++ b/no-nuxt-pls/store/auth.ts
@@ -0,0 +1,45 @@
+import { ActionContext } from "vuex";
+import gql from "graphql-tag";
+import { SET_CURRENT_USER, SET_LOADING, SET_TOKEN } from "~/store/index";
+
+export const state = () => ({
+ loading: false,
+ token: null,
+ currentUser: null,
+});
+
+export const getters = {
+ loggedIn(state: any) {
+ return !!state.token;
+ },
+};
+
+export const mutations = {
+ [SET_TOKEN](state: any, token: string) {
+ state.token = token;
+ },
+ [SET_CURRENT_USER](state: any, user: string) {
+ state.currentUser = user;
+ },
+ [SET_LOADING](state: any, loading: boolean) {
+ state.loading = loading;
+ },
+};
+
+export const actions = {
+ login(context: ActionContext
, credentials: any) {
+ context.commit(SET_LOADING, true);
+ try {
+ /* const { login } = await this.app.apolloProvider.defaultClient.mutate({mutation: gql`mutation ($email: String!, $password: String!){
+ login(email: $email, password: $password)
+ }`, variables: credentials});
+ await this.$apolloHelpers.onLogin(login); */
+ context.commit(SET_CURRENT_USER, credentials.email);
+ }finally {
+ context.commit(SET_LOADING, false);
+ }
+ },
+ logout(context: ActionContext) {
+ context.commit(SET_TOKEN, null);
+ }
+};
diff --git a/no-nuxt-pls/store/index.ts b/no-nuxt-pls/store/index.ts
new file mode 100644
index 0000000..4fa2915
--- /dev/null
+++ b/no-nuxt-pls/store/index.ts
@@ -0,0 +1,3 @@
+export const SET_TOKEN = 'SET_TOKEN';
+export const SET_CURRENT_USER = 'SET_USER';
+export const SET_LOADING = 'SET_LOADING';
diff --git a/no-nuxt-pls/test/Login.spec.js b/no-nuxt-pls/test/Login.spec.js
new file mode 100644
index 0000000..e2ff75a
--- /dev/null
+++ b/no-nuxt-pls/test/Login.spec.js
@@ -0,0 +1,47 @@
+import { mount, shallowMount, createLocalVue, RouterLinkStub } from '@vue/test-utils';
+import LoginForm from '@/components/LoginForm/LoginForm.vue';
+import Menu from '@/components/Menu/Menu.vue';
+
+
+describe('Menu.vue', () => {
+ test('renders login when user is not logged in', () => {
+ jest.spyOn(Menu.methods, 'setupMenu').mockImplementation(() => {});
+ const wrapper = shallowMount(Menu, {
+ stubs: {
+ NuxtLink: RouterLinkStub
+ }
+ });
+ const logoutButton = wrapper.find('button');
+ // expect(logoutButton.exists()).toBe(false);
+ expect(wrapper.html()).not.toContain('Logout');
+ });
+
+ test('renders logout when user is logged in', async () => {
+ jest.spyOn(Menu.methods, 'setupMenu').mockImplementation(() => {});
+ const wrapper = shallowMount(Menu, {
+ stubs: {
+ NuxtLink: RouterLinkStub
+ }
+ });
+ wrapper.setData({token: 'ichbingesetzt'});
+ await wrapper.vm.$nextTick();
+ const logoutButton = wrapper.find('button');
+ expect(logoutButton.exists()).toBe(true);
+ });
+});
+
+describe('LoginForm.vue', () =>
+{
+ test('not able to login with invalid credentials', async () => {
+ const msg = 'Oops! Something went wrong.';
+ const method = jest.spyOn(LoginForm.methods, 'submitLogin');
+ const wrapper = shallowMount(LoginForm, {
+ stubs: {
+ NuxtLink: RouterLinkStub
+ }
+ });
+ method.mockImplementation(() => { wrapper.vm.$data.error = {message: msg}});
+ await wrapper.find('form').trigger('submit');
+ expect(wrapper.html()).toContain(msg);
+ });
+});
diff --git a/no-nuxt-pls/test/NewsList.spec.js b/no-nuxt-pls/test/NewsList.spec.js
index 76da315..5c7ddfb 100644
--- a/no-nuxt-pls/test/NewsList.spec.js
+++ b/no-nuxt-pls/test/NewsList.spec.js
@@ -1,30 +1,97 @@
-import { mount } from '@vue/test-utils';
+import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
import NewsList from '@/components/NewsList/NewsList.vue';
import NewsItem from '@/components/NewsItem/NewsItem.vue';
describe('NewsList.vue', () => {
test('renders list is empty message when empty', async () => {
const msg = 'list is empty :(';
- const wrapper = mount(NewsList);
- const items = wrapper.findAllComponents(NewsItem);
+ jest.spyOn(NewsList.methods, 'setupNewsList').mockImplementation(() => {});
+ const wrapper = shallowMount(NewsList);
- for (let i = 0; i < items.length; i++) {
- const news = items.at(i).vm.$props.news;
- await items.at(i).vm.$emit('remove', news);
- }
+ await wrapper.setData({
+ newsItems: [],
+ token: '',
+ authorId: '',
+ });
expect(wrapper.html()).toContain(msg);
});
- test('renders for each item', () => {
- const wrapper = mount(NewsList);
+ test('renders for each item', async () => {
+ jest.spyOn(NewsList.methods, 'setupNewsList').mockImplementation(() => {});
+ const wrapper = shallowMount(NewsList);
+ wrapper.setData({
+ newsItems: [
+ {
+ id: '1',
+ title: 'Test1',
+ votes: 0,
+ author: {
+ id: '1',
+ name: 'TestMan',
+ email: 'test@test.de'
+ }
+ },{
+ id: '2',
+ title: 'Test2',
+ votes: 0,
+ author: {
+ id: '2',
+ name: 'TestMan',
+ email: 'test@test.de'
+ }
+ },
+ ],
+ token: '',
+ authorId: '',
+ });
const items = wrapper.vm.$data.newsItems;
+ await wrapper.vm.$nextTick();
expect(wrapper.findAllComponents(NewsItem).length).toBe(items.length);
});
- test('toggles between ascending and descending order', () => {
- const wrapper = mount(NewsList);
+ test('toggles between ascending and descending order', async () => {
+ jest.spyOn(NewsList.methods, 'setupNewsList').mockImplementation(() => {});
+ const wrapper = shallowMount(NewsList);
+ wrapper.setData({
+ newsItems: [
+ {
+ id: '1',
+ title: 'Test1',
+ votes: 0,
+ author: {
+ id: '1',
+ name: 'TestMan',
+ email: 'test@test.de'
+ }
+ },{
+ id: '2',
+ title: 'Test2',
+ votes: 0,
+ author: {
+ id: '2',
+ name: 'TestMan',
+ email: 'test@test.de'
+ }
+ },{
+ id: '3',
+ title: 'Test3',
+ votes: 0,
+ author: {
+ id: '2',
+ name: 'TestMan',
+ email: 'test@test.de'
+ }
+ },
+ ],
+ token: '',
+ authorId: '',
+ currentSortingOrder: 0,
+ });
+ await wrapper.vm.$nextTick(); // this is the greatest testing framework since the beginning of testing frameworks maybe ever (:
+
const startingState = wrapper.vm.$data.currentSortingOrder;
wrapper.find('button').trigger('click');