Merge branch 'api-login-unit-tests' into 'main'

API login mock tests

See merge request !12

.gitlab-ci.yml

@@ -16,30 +16,41 @@
 stages:          # List of stages for jobs, and their order of execution
   - build
   - test
-  - deploy
 
-build-job:       # This job runs in the build stage, which runs first.
+image: node:16
+
+cache:
+  paths:
+    - node_modules/
+
+install_dependencies_job:       # This job runs in the build stage, which runs first.
   stage: build
-  script:
-    - echo "Compiling the code..."
-    - echo "Compile complete."
 
-unit-test-job:   # This job runs in the test stage.
-  stage: test    # It only starts when the job in the build stage completes successfully.
   script:
-    - echo "Running unit tests... This will take about 60 seconds."
-    - sleep 60
-    - echo "Code coverage is 90%"
+    - echo "Installing dependencies..."
+    - npm install
+    - echo "Dependencies installed."
+  artifacts:
+    paths:
+      - node_modules/
+
 
 lint-test-job:   # This job also runs in the test stage.
   stage: test    # It can run at the same time as unit-test-job (in parallel).
   script:
-    - echo "Linting code... This will take about 10 seconds."
-    - sleep 10
-    - echo "No lint issues found."
+    - echo "Linting the code..."
+    - npm run lint
+    - echo "Code-linting complete."
+  artifacts:
+    paths:
+      - node_modules/
 
-deploy-job:      # This job runs in the deploy stage.
-  stage: deploy  # It only runs when *both* jobs in the test stage complete successfully.
+unit-test-job:   # This job runs in the test stage.
+  stage: test    # It only starts when the job in the build stage completes successfully.
   script:
-    - echo "Deploying application..."
-    - echo "Application successfully deployed."
+    - echo "Running unit tests..."
+    - npm run test:unit -- --coverage
+    - echo "Unit tests complete."
+  artifacts:
+    paths:
+      - node_modules/

src/components/HelloWorld.vue

 <template>
-  <v-container>
-    <v-row class="text-center">
-      <v-col cols="12">
-        <v-img
-          :src="require('../assets/logo.svg')"
-          class="my-3"
-          contain
-          height="200"
-        />
-      </v-col>
+  <div class="flex justify-center">
+    <router-link to="/" class="m-6">Logg inn</router-link>
 
-      <v-col class="mb-4">
-        <h1 class="display-2 font-weight-bold mb-3">
-          Welcome to the Vuetify 3 Beta
-        </h1>
+    <router-link to="/register" class="m-6">Registrer deg</router-link>
 
-        <p class="subheading font-weight-regular">
-          For help and collaboration with other Vuetify developers,
-          <br />please join our online
-          <a href="https://community.vuetifyjs.com" target="_blank"
-            >Discord Community</a
-          >
-        </p>
-      </v-col>
-
-      <v-col class="mb-5" cols="12">
-        <h2 class="headline font-weight-bold mb-5">What's next?</h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(next, i) in whatsNext"
-            :key="i"
-            :href="next.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ next.text }}
-          </a>
-        </v-row>
-      </v-col>
-
-      <v-col class="mb-5" cols="12">
-        <h2 class="headline font-weight-bold mb-5">Important Links</h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(link, i) in importantLinks"
-            :key="i"
-            :href="link.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ link.text }}
-          </a>
-        </v-row>
-      </v-col>
-
-      <v-col class="mb-5" cols="12">
-        <h2 class="headline font-weight-bold mb-5">Ecosystem</h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(eco, i) in ecosystem"
-            :key="i"
-            :href="eco.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ eco.text }}
-          </a>
-        </v-row>
-      </v-col>
-    </v-row>
-  </v-container>
+    <router-link to="/about" class="m-6">Om BoCo</router-link>
+  </div>
 </template>
 
 <script>
@@ -80,52 +13,7 @@ export default {
   name: "HelloWorld",
 
   data: () => ({
-    ecosystem: [
-      {
-        text: "vuetify-loader",
-        href: "https://github.com/vuetifyjs/vuetify-loader",
-      },
-      {
-        text: "github",
-        href: "https://github.com/vuetifyjs/vuetify",
-      },
-      {
-        text: "awesome-vuetify",
-        href: "https://github.com/vuetifyjs/awesome-vuetify",
-      },
-    ],
-    importantLinks: [
-      {
-        text: "Chat",
-        href: "https://community.vuetifyjs.com",
-      },
-      {
-        text: "Made with Vuetify",
-        href: "https://madewithvuejs.com/vuetify",
-      },
-      {
-        text: "Twitter",
-        href: "https://twitter.com/vuetifyjs",
-      },
-      {
-        text: "Articles",
-        href: "https://medium.com/vuetify",
-      },
-    ],
-    whatsNext: [
-      {
-        text: "Explore components",
-        href: "https://vuetifyjs.com",
-      },
-      {
-        text: "Roadmap",
-        href: "https://vuetifyjs.com/introduction/roadmap/",
-      },
-      {
-        text: "Frequently Asked Questions",
-        href: "https://vuetifyjs.com/getting-started/frequently-asked-questions",
-      },
-    ],
-  }),
-};
+
+}),
+}
 </script>

src/components/LoginForm.vue

@@ -52,6 +52,7 @@
         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
         v-model="v$.user.password.$model"
         required
+        @keyup.enter="loginClicked"
       />
       <!-- error message -->
       <div
@@ -83,14 +84,14 @@
       >
         Logg inn
       </button>
-      <div class="flex justify-center align-items: flex-end; mb-6 mt-6">
+      <div class="align-items: flex-end; mb-6 mt-6">
         <div class="ml-3 text-sm">
           <router-link to="register" class="text-blue-600"
             >Ny bruker</router-link
           >
         </div>
       </div>
-      <div class="flex flex-row min-h-screen justify-center items-center">
+      <div class="flex justify-center">
         <label>{{ message }}</label>
       </div>
     </div>
@@ -153,11 +154,16 @@ export default {
 
       const loginResponse = await doLogin(loginRequest);
 
-      if (loginResponse.data === "Login failed") {
+      if (loginResponse.isLoggedIn === false) {
         this.message = "Feil e-post/passord";
         this.$store.commit("logout");
-      } else {
-        this.$store.commit("saveToken", loginResponse);
+      }
+      else if (loginResponse.isLoggedIn === true) {
+        this.$store.commit("saveToken", loginResponse.token);
+        await this.$router.push("/endre");
+      }
+      else {
+        console.log("Something went wrong");
       }
     },
 

src/utils/apiutil.js

@@ -3,14 +3,17 @@ import axios from "axios";
 const API_URL = process.env.VUE_APP_BASEURL;
 
 export function doLogin(loginRequest) {
+  const auth = {isLoggedIn: false, token: ""};
   return axios
     .post(API_URL + "login/authentication", loginRequest)
     .then((response) => {
-      return response.data;
+      auth.isLoggedIn = true;
+      auth.token = response.data;
+      return auth;
     })
     .catch((error) => {
       console.log(error.response);
-      return error.response;
+      return auth;
     });
 }
 

tests/unit/apiutil-login-mock.spec.js

@@ -4,42 +4,39 @@ import axios from "axios";
 jest.mock("axios");
 
 describe("testing mocking of apiutil.js", () => {
+
   it("check that login fails with wrong credentials - against mock", async () => {
-    // mock api response on POST call (once)
-    const expectedLoginResponse = { response: "Login failed" };
+
+    const loginRequest = {
+      email: "wrong@email.com",
+      password: "thisiswrong123"};
+
+    const expectedLoginResponse = { isLoggedIn: false, token: "" }
+
     axios.post.mockImplementation(() =>
       Promise.resolve({ data: expectedLoginResponse })
     );
 
-    // do the call
-    const loginRequest = {
-      email: "wrong@email.com",
-      password: "thisiswrong123",
-    };
     const loginResponse = await doLogin(loginRequest);
 
-    //  check response
-    //  note that even if wrong username and password are used, mock is configured to return Success
-    expect(loginResponse).toEqual(expectedLoginResponse);
+    expect(loginResponse.token.isLoggedIn).toEqual(expectedLoginResponse.isLoggedIn);
   });
+
   it("check that login succeeds when correct credentials - against mock", async () => {
-    // mock api response on POST call (once)
-    const apiResponse = {
-      response:
-        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c",
-    };
-    const expectedLoginResponse = { response: "Login failed" };
-    axios.post.mockImplementation(() => Promise.resolve({ data: apiResponse }));
 
-    // do the call
     const loginRequest = {
       email: "correct@email.com",
-      password: "thisiscorrect123",
-    };
+      password: "thisiscorrect123"};
+
+    const apiResponse = {isLoggedIn: true, token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM" +
+          "0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"};
+
+    const expectedLoginResponse = {isLoggedIn: false, token: ""};
+
+    axios.post.mockImplementation(() => Promise.resolve({ data: apiResponse }));
+
     const loginResponse = await doLogin(loginRequest);
 
-    //  check response
-    //  note that even if wrong username and password are used, mock is configured to return Success
-    expect(loginResponse).not.toEqual(expectedLoginResponse);
+    expect(loginResponse.token.isLoggedIn).not.toEqual(expectedLoginResponse.isLoggedIn);
   });
 });