Exercise 7

backend/src/permissions.js

@@ -24,7 +24,7 @@ export const permissions = shield(
     {
         Query: {
             "*": forbidden,
-            posts: isAuthenticated,
+            posts: allow,
             users: isAuthenticated,
         },
         Mutation: {
@@ -39,6 +39,5 @@ export const permissions = shield(
     },
     {
         allowExternalErrors: true,
-        fallbackRule: isAuthenticated,
     }
 );

backend/src/posts.spec.js

@@ -71,16 +71,6 @@ describe("queries", () => {
 
         let postQuery = () => query({ query: POSTS });
 
-        it("throws error when user is not authorised", async () => {
-            userId = null;
-            await expect(postQuery()).resolves.toMatchObject({
-                data: {
-                    posts: null,
-                },
-                errors: [expect.objectContaining({ message: "Not Authorised!" })],
-            });
-        });
-
         it("returns empty array", async () => {
             await expect(postQuery()).resolves.toMatchObject({
                 errors: undefined,

webapp/.gitignore

@@ -19,4 +19,5 @@ npm-debug.log*
 storybook-static
 
 ### Nuxt.js###
-.nuxt
+.nuxt
+static/sw.js

webapp/README.md

@@ -2,19 +2,39 @@
 
 ## Build Setup
 
-```bash
-# install dependencies
-$ npm install
+### install dependencies
 
-# serve with hot reload at localhost:3000
-$ npm run dev
+```
+npm install
+```
+
+### serve with hot reload at localhost:3000
+
+```
+npm run dev
+```
+
+### build for production and launch server
+
+```
+npm run build
+npm run start
+```
 
-# build for production and launch server
-$ npm run build
-$ npm run start
+### generate static project
 
-# generate static project
-$ npm run generate
 ```
+npm run generate
+```
+
+### Lint files
 
-For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
+```
+npm run lint
+```
+
+### Run Storybook
+
+```
+npm run storybook
+```

webapp/components/LoginForm/LoginForm.spec.js

@@ -0,0 +1,75 @@
+import { createLocalVue, shallowMount } from "@vue/test-utils";
+import Vuex from "vuex";
+import LoginForm from "./LoginForm.vue";
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe("LoginForm.vue", () => {
+    let wrapper;
+    let actions;
+    let store;
+
+    const createComponent = () => {
+        store = new Vuex.Store({
+            actions,
+        });
+        wrapper = shallowMount(LoginForm, {
+            store,
+            localVue,
+        });
+    };
+
+    afterEach(() => {
+        wrapper.destroy();
+    });
+
+    it("renders a Vue component", () => {
+        createComponent();
+        expect(wrapper.exists()).toBe(true);
+    });
+
+    it("renders an email input field", () => {
+        createComponent();
+        const emailInput = wrapper.find("input#email");
+        expect(emailInput.exists()).toBe(true);
+    });
+
+    it("renders a password input field", () => {
+        createComponent();
+        const passwordInput = wrapper.find("input#password");
+        expect(passwordInput.exists()).toBe(true);
+    });
+
+    it("renders a submit button", () => {
+        createComponent();
+        const submitBtn = wrapper.find("input#submit");
+        expect(submitBtn.exists()).toBe(true);
+    });
+
+    describe("invalid credentials", () => {
+        let login;
+        beforeEach(() => {
+            login = jest.fn().mockRejectedValue(new Error("test"));
+            actions = {
+                login,
+            };
+            createComponent();
+        });
+
+        describe("click submit button", () => {
+            beforeEach(() => {
+                const submitBtn = wrapper.find("input#submit");
+                submitBtn.trigger("click");
+            });
+            it("calls login", () => {
+                expect(login.mock.calls.length).toBe(1);
+            });
+            it("renders error message", () => {
+                const invCredentialsMsg = wrapper.find("#invCredentialsMsg");
+                expect(invCredentialsMsg.exists()).toBe(true);
+                expect(invCredentialsMsg.text()).toContain("Falsche Email oder Passwort");
+            });
+        });
+    });
+});

webapp/components/LoginForm/LoginForm.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <form onsubmit="event.preventDefault();">
+      <input
+        id="email"
+        type="email"
+        aria-label="Email"
+        v-model="email"
+        placeholder="Email"
+      />
+      <input
+        id="password"
+        type="password"
+        aria-label="Password"
+        v-model="password"
+        placeholder="Password"
+      />
+      <div id="invCredentialsMsg" v-if="invalidCredentials">
+        Falsche Email oder Passwort
+      </div>
+      <input
+        id="submit"
+        type="submit"
+        aria-label="Login"
+        value="Login"
+        @click="submit"
+      />
+    </form>
+  </div>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+export default {
+  methods: {
+    ...mapActions(["login"]),
+    submit: async function () {
+      try {
+        await this.login({
+          email: this.email,
+          password: this.password,
+          apolloClient: this.$apollo,
+        });
+        this.$router.push({
+          path: "/",
+        });
+        this.invalidCredentials = false;
+      } catch (error) {
+        this.invalidCredentials = true;
+      }
+    },
+  },
+  data: function () {
+    return {
+      email: "",
+      password: "",
+      invalidCredentials: false,
+    };
+  },
+};
+</script>
+
+<style>
+</style>

webapp/components/NavBar/NavBar.spec.js

@@ -0,0 +1,86 @@
+import { createLocalVue, shallowMount, RouterLinkStub } from "@vue/test-utils";
+import Vuex from "vuex";
+import NavBar from "./NavBar.vue";
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe("NavBar.vue", () => {
+    let wrapper;
+    let actions;
+    let getters;
+    let store;
+
+    const createComponent = () => {
+        store = new Vuex.Store({
+            actions,
+            getters,
+        });
+        wrapper = shallowMount(NavBar, {
+            store,
+            localVue,
+            stubs: {
+                NuxtLink: RouterLinkStub,
+            },
+        });
+    };
+    beforeEach(() => {
+        getters = {
+            loggedIn: () => false,
+        };
+    });
+
+    afterEach(() => {
+        wrapper.destroy();
+    });
+
+    it("renders a Vue component", () => {
+        createComponent();
+        expect(wrapper.exists()).toBe(true);
+    });
+
+    describe("not logged in", () => {
+        beforeEach(() => createComponent());
+
+        it("shows login link", () => {
+            const loginLink = wrapper.findComponent(RouterLinkStub);
+            expect(loginLink.exists()).toBe(true);
+        });
+        it("links to /login page", () => {
+            const loginLink = wrapper.findComponent(RouterLinkStub);
+            expect(loginLink.props().to).toBe("/login");
+        });
+        it("does not show logout button", () => {
+            const logoutBtn = wrapper.find("#logoutBtn");
+            expect(logoutBtn.exists()).toBe(false);
+        });
+    });
+
+    describe("logged in", () => {
+        let logout = jest.fn();
+
+        beforeEach(() => {
+            getters = {
+                loggedIn: () => true,
+            };
+            actions = {
+                logout,
+            };
+            createComponent();
+        });
+
+        it("shows logout button", () => {
+            const logoutBtn = wrapper.find("#logoutBtn");
+            expect(logoutBtn.exists()).toBe(true);
+        });
+        it("calls logout when logout button is clicked", () => {
+            const logoutBtn = wrapper.find("#logoutBtn");
+            logoutBtn.trigger("click");
+            expect(logout.mock.calls.length).toBe(1);
+        });
+        it("does not show login link", () => {
+            const loginLink = wrapper.findComponent(RouterLinkStub);
+            expect(loginLink.exists()).toBe(false);
+        });
+    });
+});

webapp/components/NavBar/NavBar.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <template v-if="loggedIn">
+      <button id="logoutBtn" @click="logout">Logout</button>
+    </template>
+    <template v-else>
+      <NuxtLink to="/login">Login</NuxtLink>
+    </template>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from "vuex";
+
+export default {
+  computed: {
+    ...mapGetters(["loggedIn"]),
+  },
+  methods: {
+    ...mapActions(["logout"]),
+  },
+};
+</script>
+
+<style>
+</style>