Feedback

.github/workflows/verify.yaml

@@ -0,0 +1,27 @@
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  verify:
+    runs-on: ubuntu-latest
+    timeout-minutes: 2
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+      - name: install dependencies
+        run: npm ci
+      - run: npm test
+        env:
+          MONGODB_URL: ${{ secrets.MONGODB_URL }}
+      - name: Collect coverage from client
+        uses: ArtiomTr/jest-coverage-report-action@v2
+        with:
+          working-directory: client
+      - name: Collect coverage from server
+        uses: ArtiomTr/jest-coverage-report-action@v2
+        with:
+          working-directory: server
+        env:
+          MONGODB_URL: ${{ secrets.MONGODB_URL }}

.gitignore

@@ -0,0 +1,7 @@
+/.idea/
+node_modules/
+.parcel-cache/
+dist/
+server/.evn
+client/css/reset.scss
+client/css/reset.css.map

README.md

@@ -1,52 +1 @@
-# PG6301 eksamen <tittel på løsningen>
-
-[Heroku](link til heroku)
-[Test rapport](link til testrapport)
-
-## Tips
-
-* Bruk versjoner av alle dependencies som vi brukte på forelesningene. Det skjer hele tiden endringer i JavaScript-land og noen ganger vil siste versjon oppføre seg forskjellig - ikke kast bort verdifull eksamenstid. Du kan kopiere package.json fra innlevering eller en øving
-* Spesielt: React 18 kom i løpet av semesteret. Alt vi har vist er på React 17. Kjør på React 17 nå med mindre du har brukt en del tid på versjon 18 den siste måneden. Det er vesentlige problemer!
-* Start med å løse det kritiske: Deployment til Heroku
-* Ikke bli sittende med ting du ikke får til mens det er enklere ting du kunne ha gjort. Spesielt tester har overraskende mye vrient med seg. Legg det til siden og løs andre ting om du har problemer
-* Les de funksjonelle kravene grundig og test at løsningen din oppfyller dem
-* Les læringsmålene beskrevet i eksamensteksten grundig og sjekk at løsningen din demonstrere at du behersker disse
-
-Dette er versjonene vi brukte under forelesningene om som er validert som ok:
-
-```
-"jest": "^27.5.1",
-"react": "^17.0.2",
-"react-dom": "^17.0.2",
-"react-router-dom": "^6.2.2"
-```
-
-
-## Egenutfylling av funksjonelle krav
-
-* [ ] *legg inn krav fra eksamentekst*
-  * *beskriv eventuelle mangler eller problemer for delvis uttelling*
-* [ ] *legg inn krav fra eksamentekst*
-  * *beskriv eventuelle mangler eller problemer for delvis uttelling*
-
-## Egenutfylling av tekniske krav
-
-* [ ] Oppsett av package.json, parcel, express, prettier
-  * *beskriv eventuelle mangler eller problemer for delvis uttelling*
-* [ ] React Router
-  * *beskriv eventuelle mangler eller problemer for delvis uttelling*
-* [ ] Express app
-  * *beskriv eventuelle mangler eller problemer for delvis uttelling*
-* [ ] Kommunikasjon mellom frontend (React) og backend (Express)
-  * *beskriv eventuelle mangler eller problemer for delvis uttelling*
-* [ ] Deployment til Heroku
-  * *beskriv eventuelle mangler eller problemer for delvis uttelling*
-* [ ] Bruk av MongoDB
-  * *beskriv eventuelle mangler eller problemer for delvis uttelling*
-* [ ] OpenID Connect
-  * *beskriv eventuelle mangler eller problemer for delvis uttelling*
-* [ ] Web Sockets
-  * *beskriv eventuelle mangler eller problemer for delvis uttelling*
-* [ ] Jest med dokumentert testdekning
-  * *beskriv eventuelle mangler eller problemer for delvis uttelling*
-
+https://eksamarticles.herokuapp.com/

client/__tests__/CheckAccountActions.test.jsx

@@ -0,0 +1,70 @@
+
+import React from "react";
+import ReactDOM from "react-dom";
+import { act } from "react-dom/test-utils";
+import { TopBar,  } from "../components";
+
+const origin =  window.location.origin;
+const readerAccount = {email: 'email@email.em', name:'John', google: true}
+const writerAccount = {email: 'email@email.em', name:'John'}
+describe("Account Action in TopBar", () => {
+
+
+    it("shows Login buttons(Google, Azure)", async () => {
+
+        const domElement = document.createElement("div");
+        await act(async () => {
+          ReactDOM.render(<TopBar />, domElement);
+        });
+        expect(
+            Array.from(domElement.querySelectorAll("a")).map((e) => e.innerHTML)
+          ).toEqual(["News Blog", "Login as author", "Join to reader"]);
+
+        expect(
+        Array.from(domElement.querySelectorAll("a")).map((e) => e.href)
+        ).toEqual([origin+"/", origin+"/login",origin+"/logingoogle"]);
+
+
+        expect(domElement.innerHTML).toMatchSnapshot();
+    });  
+
+
+    it("shows Logout", async () => {
+
+        const domElement = document.createElement("div");
+        await act(async () => {
+          ReactDOM.render(<TopBar account={readerAccount} />, domElement);
+        });
+
+        expect(domElement.querySelector("#logout").innerHTML).toEqual(
+            "Logout"
+          );
+
+          expect(domElement.querySelector("#logout").href).toEqual(
+            origin+"/Logout"
+          );
+
+        expect(domElement.innerHTML).toMatchSnapshot();
+    });  
+
+
+    it("shows ADD And AuthorArticles And Logout Buttons for writer", async () => {
+
+        const domElement = document.createElement("div");
+        await act(async () => {
+          ReactDOM.render(<TopBar account={writerAccount} />, domElement);
+        });
+        expect(
+            Array.from(domElement.querySelectorAll("div a")).map((e) => e.innerHTML)
+          ).toEqual(["News Blog", "Add", "My articles", "Logout"]);
+
+        expect(
+        Array.from(domElement.querySelectorAll("div a")).map((e) => e.href)
+        ).toEqual([origin+"/", origin+"/add", origin+"/myarticles", origin+"/Logout"]);
+
+
+        expect(domElement.innerHTML).toMatchSnapshot();
+    });
+
+
+});

client/__tests__/ProtectAddAndEdit.test.jsx

@@ -0,0 +1,67 @@
+
+import React from "react";
+import ReactDOM from "react-dom";
+import { act } from "react-dom/test-utils";
+import { AddNewArticle, EditArticle } from "../components";
+
+const origin =  window.location.origin;
+const readerAccount = {email: 'email@email.em', name:'John', google: true}
+const writerAccount = {email: 'email@email.em', name:'John'}
+describe("List Articles", () => {
+
+      it("ADD article show error when no user logged in", async () => {
+        const domElement = document.createElement("div");
+        await act(async () => {
+          ReactDOM.render(
+            <AddNewArticle
+
+            />,
+            domElement
+          );
+        });
+
+        expect(domElement.querySelector("h1").innerHTML).toEqual(
+          "Please Login"
+        );
+        expect(domElement.innerHTML).toMatchSnapshot();
+      });
+
+
+      it("Edit article show error when no user logged in", async () => {
+        const domElement = document.createElement("div");
+        await act(async () => {
+          ReactDOM.render(
+            <EditArticle
+
+            />,
+            domElement
+          );
+        });
+
+        expect(domElement.querySelector("h1").innerHTML).toEqual(
+          "Please Login"
+        );
+        expect(domElement.innerHTML).toMatchSnapshot();
+      });
+
+
+
+      it("List articles to Edit show error when no user logged in", async () => {
+        const domElement = document.createElement("div");
+        await act(async () => {
+          ReactDOM.render(
+            <EditArticle
+
+            />,
+            domElement
+          );
+        });
+
+        expect(domElement.querySelector("h1").innerHTML).toEqual(
+          "Please Login"
+        );
+        expect(domElement.innerHTML).toMatchSnapshot();
+      });
+
+
+});

client/__tests__/listArticles.test.jsx

@@ -0,0 +1,78 @@
+
+import React from "react";
+import ReactDOM from "react-dom";
+import { act } from "react-dom/test-utils";
+import { ArticleSingle, MainPage, SidebarApplication,  } from "../components";
+
+const origin =  window.location.origin;
+const readerAccount = {email: 'email@email.em', name:'John', google: true}
+const writerAccount = {email: 'email@email.em', name:'John'}
+describe("List Articles", () => {
+    // it("shows loading screen", () => {
+    //     const domElement = document.createElement("div");
+    //     ReactDOM.render(<MainPage />, domElement);
+    //     expect(domElement.innerHTML).toMatchSnapshot();
+    // });
+
+    it("shows articles", async () => {
+        const articles = [{ title: "article 1", slug: "article-1", _id: 1 }, { title: "article 2", slug: "article-2", _id: 2 }];
+        const domElement = document.createElement("div");
+        await act(async () => {
+          ReactDOM.render(<MainPage articles={articles} />, domElement);
+        });
+        expect(
+            Array.from(domElement.querySelectorAll("a")).map((e) => e.innerHTML)
+          ).toEqual(["article 1", "article 2"]);
+          expect(
+            Array.from(domElement.querySelectorAll("a")).map((e) => e.href)
+          ).toEqual([origin+"/view/article-1", origin+"/view/article-2"]);
+        expect(domElement.innerHTML).toMatchSnapshot();
+      });
+
+      it("shows articles and topics in SidebarApplication", async () => {
+        const articles = [{ title: "article 1", slug: "article-1", _id: 1 }, { title: "article 2", slug: "article-2", _id: 2 }];
+        const cats = ["Life", "Health"];
+        const domElement = document.createElement("div");
+        await act(async () => {
+          ReactDOM.render(<SidebarApplication articles={articles} cats={cats} />, domElement);
+        });
+        expect(
+            Array.from(domElement.querySelectorAll(".articlessidebar-container a")).map((e) => e.innerHTML)
+          ).toEqual(["article 1", "article 2"]);
+        expect(
+        Array.from(domElement.querySelectorAll(".topics-container a")).map((e) => e.innerHTML)
+        ).toEqual(["Life", "Health"]);
+        expect(
+        Array.from(domElement.querySelectorAll(".articlessidebar-container a")).map((e) => e.href)
+        ).toEqual([origin+"/view/article-1",origin+"/view/article-2"]);
+
+        expect(
+            Array.from(domElement.querySelectorAll(".topics-container a")).map((e) => e.href)
+            ).toEqual([origin+"/topic/Life", origin+"/topic/Health"]);
+        expect(domElement.innerHTML).toMatchSnapshot();
+      });
+
+
+      it("show error to not logged in user in article", async () => {
+        const domElement = document.createElement("div");
+        await act(async () => {
+          ReactDOM.render(
+            <ArticleSingle
+
+            />,
+            domElement
+          );
+        });
+
+        expect(domElement.querySelector("h1").innerHTML).toEqual(
+          "Please login by google to read the article"
+        );
+        expect(domElement.innerHTML).toMatchSnapshot();
+      });
+
+
+
+
+
+
+});