Feedback

.github/workflows/verify.yaml

@@ -0,0 +1,29 @@
+on:
+  push:
+    branches:
+      - main
+      - master
+
+jobs:
+  verify:
+    permissions: write-all
+    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
+        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,9 @@
+/.idea/
+/node_modules/
+/server/node_modules/
+/client/node_modules/
+/client/.parcel-cache/
+/client/dist/
+/server/.env
+/client/coverage/
+/server/coverage/

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run prettier:check

.prettierignore

@@ -0,0 +1,3 @@
+/client/dist/
+/client/coverage/
+/server/coverage/

README.md

@@ -1,52 +1,65 @@
-# PG6301 eksamen <tittel på løsningen>
+# PG6301 eksamen <Express Yourself>
 
-[Heroku](link til heroku)
-[Test rapport](link til testrapport)
-
-## Tips
+[Heroku](https://pgr6301-exam-gilajoanna.herokuapp.com)
+[Test rapport]()
+ 
+[![.github/workflows/verify.yaml](https://github.com/kristiania-pg6301-2022/pgr6301-exam-Gilajoanna/actions/workflows/verify.yaml/badge.svg)](https://github.com/kristiania-pg6301-2022/pgr6301-exam-Gilajoanna/actions/workflows/verify.yaml)
 
-* 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
+## EXPRESS YOURSELF
+Min version av oppgaven där registrerade användare kan skriva egna och läsa andras opinions-artiklar!
+
+ ## OBS!
+ På grund av slut på minuter så kör inte mina tester längre i Github actions. Jag har lagt ved screenshots av gröna tester och av testdekkning i den zippade filen.
 
-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"
-```
+## Kode brukt från föreläsning
+* AppContext är inspirerat av Reference 12 MovieApiContext. Jag tyckte att denna var en god lösning för att spara linjer med kode och ha den globalt och enkelt tillgänglig för alla filer. 
+* postJSON, fetchJSON, useLoader
+* Jag har sammarbetat med ett fåtal andra personer när jag gjorde min mock-examen. Denna har jag använt och modifierat kod ifrån.
 
 
 ## 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*
+* [x] Anonyme brukere skal se nyhetsaker når de kommer til nettsiden. Legg inn noen nyhetssaker for å demonstrere.
+  *Listan med nyhetstitlar till vänster syns också för brukere som inte är inloggade.* 
+  *Ett problem här är att den listan inte uppdaterar sig med mindre man refresher sidan när man har lagt till ny artikel* 
+
+* [x] En bruker som er logget inn kan klikke på en nyhetssak for å se detaljene om nyhetssaken.
+  *Det var tänkt att listan med artikel-titlar skulle haft en läs-knapp bruker skulle trycka på så visas enskild artikel. Jag fick bara implementerat att om man är inloggad bruker så har man tillgång till detaljerad artikel-lista.*
+
+* [x] Redaksjonelle brukere kan publisere nye nyhetsartikler
+  *I min lösning så fick jag inte till att hardkode in en admin bruker med särkilda permissions som att skriva, uppdatera och delete. Därför kan alla inloggade lägga till och ta bort artiklar.*
+
+* [x] Brukeren skal forhindres fra å sende inn en nyhetsartikkel som mangler kategori, tittel eller tekst
+  *Inte löst på bästa sätt då jag inte fick ut en error-melding i en ny div. Nu visas en Alert och bruker får inte lagt till i databasen.*
+
+* Övriga kommentarer
+  *Grunnet lite ont om tid så är det bara implementerat en enkel grid layout för att uppfylla kravet om Holy Grail Layout.*
+
+## Må-krav til teknisk løsning
+* [x] Besvarelsen skal inneholde en README-fil med link til Heroku og test coverage. 
+* [x] npm start skal starte server og klient. Concurrently og parcel anbefales
+* [x] npm test skal kjøre tester. Testene skal ikke feile
+* [x] Koden skal ha konsistent formattering. Prettier og Husky anbefales
+* [x] Nettsidene skal ha god layout med CSS Grid (Holy Grail layout) og horisontal navigasjonsmeny. Brukeren må kunne navigere overalt uten å bruke "back" eller redigere URL
+* [x] Serveren validerer at brukeren er logget inn
+* [ ] Innleveringen skal være i form av en ZIP-fil. Maks størrelse på fila er 1MB Artikler skal lagres i MongoDB
+* [x] Applikasjonen skal deployes til Heroku
+* [x] Testene skal kjøre på Github Actions
+
 
 ## 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*
+* [x] Oppsett av package.json, parcel, express, prettier
+* [x] React Router
+* [x] Express app
+* [x] Kommunikasjon mellom frontend (React) og backend (Express)
+* [x] Deployment til Heroku
+* [x] Bruk av MongoDB
+  * *Har inte fått till update av existerande document, men implementerat delete av document.*
+* [x] OpenID Connect
 * [ ] Web Sockets
-  * *beskriv eventuelle mangler eller problemer for delvis uttelling*
-* [ ] Jest med dokumentert testdekning
-  * *beskriv eventuelle mangler eller problemer for delvis uttelling*
+  * *Inte fått implementerat*
+* [x] Jest med dokumentert testdekning
+  * *På grund av slut på minuter så kör inte mina tester längre i Github actions. Jag har lagt ved screenshots av gröna tester och av testdekkning.*
 

client/__tests__/__snapshots__/articles.test.jsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`List articles component renders ListArticle 1`] = `"<div>Please wait..</div>"`;
+
+exports[`List articles component renders article card 1`] = `"<div>Please log in to have full access to articles.</div>"`;
+
+exports[`List articles component shows error in article list 1`] = `"<div><h1>An error occurred</h1><div id=\\"error-message\\">Something went wrong. Please try again.</div></div>"`;
+
+exports[`List articles component shows error in aside article list 1`] = `"<div><h1>An error occurred</h1><div id=\\"error-message\\">Something went wrong. Please try again.</div></div>"`;
+
+exports[`List articles component shows list of articles 1`] = `"<div><div><h2>Article</h2><div><strong></strong></div><div>Writer: <i></i></div><div></div><button type=\\"submit\\">Delete Article</button></div></div>"`;

client/__tests__/__snapshots__/homePage.test.jsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Home page component renders HomePage 1`] = `"<div>Please log in to have full access to articles.</div>"`;

client/__tests__/__snapshots__/login.test.jsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Login renders LoginPage 1`] = `"<div><h2>Login to read articles</h2><div><button>Login with Google</button></div></div>"`;

client/__tests__/__snapshots__/nonUser.test.jsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Non user component renders Non user 1`] = `"<article><div>Please wait..</div></article>"`;

client/__tests__/__snapshots__/notFound.test.jsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Not found component renders NotFound 1`] = `"<div><h2>Page not found</h2></div>"`;

client/__tests__/__snapshots__/userProfile.test.jsx.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserProfile component renders UserProfile 1`] = `"<div>Loading..</div>"`;
+
+exports[`UserProfile component shows error in user profile 1`] = `"<div id=\\"error-message\\">Error! ReferenceError: fetch is not defined</div>"`;

client/__tests__/__snapshots__/writeNewArticle.test.jsx.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Write new article renders article form 1`] = `"<div><label></label> <input type=\\"text\\" name=\\"title\\" value=\\"\\"></div>"`;
+
+exports[`Write new article shows article form 1`] = `"<div><form><h1>Write new article</h1><div><label>Title:</label> <input type=\\"text\\" name=\\"title\\" value=\\"\\"></div><div><label>Category:</label> <input type=\\"text\\" name=\\"title\\" value=\\"\\"></div><div><label>Content:</label> <input type=\\"text\\" name=\\"title\\" value=\\"\\"></div><div><label>Author:</label> <input type=\\"text\\" name=\\"title\\" value=\\"\\"></div><button type=\\"submit\\">Publish</button></form></div>"`;

client/__tests__/articles.test.jsx

@@ -0,0 +1,72 @@
+import * as ReactDOM from "react-dom";
+import * as React from "react";
+import { AsideArticleList, ListArticles } from "../components/articles.jsx";
+import { act } from "react-dom/test-utils";
+import { HomePage } from "../components/homePage";
+
+describe("List articles component", () => {
+  it("renders ListArticle", () => {
+    const element = document.createElement("div");
+    ReactDOM.render(<ListArticles />, element);
+    expect(element.innerHTML).toMatchSnapshot();
+  });
+
+  it("renders article card", () => {
+    const element = document.createElement("div");
+    ReactDOM.render(<HomePage />, element);
+    expect(element.innerHTML).toMatchSnapshot();
+  });
+
+  it("shows list of articles", async () => {
+    const article = [{ title: "Article" }];
+    const element = document.createElement("div");
+    await act(async () => {
+      ReactDOM.render(
+        <ListArticles listAllArticles={() => article} />,
+        element
+      );
+    });
+
+    expect(
+      Array.from(element.querySelectorAll("h2")).map((e) => e.innerHTML)
+    ).toEqual(["Article"]);
+
+    expect(element.innerHTML).toMatchSnapshot();
+  });
+
+  it("shows error in article list", async () => {
+    const element = document.createElement("div");
+    await act(async () => {
+      ReactDOM.render(
+        <ListArticles
+          listAllArticles={() => {
+            throw new Error("Something went wrong. Please try again.");
+          }}
+        />,
+        element
+      );
+    });
+    expect(element.querySelector("#error-message").innerHTML).toEqual(
+      "Something went wrong. Please try again."
+    );
+    expect(element.innerHTML).toMatchSnapshot();
+  });
+
+  it("shows error in aside article list", async () => {
+    const element = document.createElement("div");
+    await act(async () => {
+      ReactDOM.render(
+        <AsideArticleList
+          listAllArticles={() => {
+            throw new Error("Something went wrong. Please try again.");
+          }}
+        />,
+        element
+      );
+    });
+    expect(element.querySelector("#error-message").innerHTML).toEqual(
+      "Something went wrong. Please try again."
+    );
+    expect(element.innerHTML).toMatchSnapshot();
+  });
+});

client/__tests__/homePage.test.jsx

@@ -0,0 +1,11 @@
+import * as ReactDOM from "react-dom";
+import * as React from "react";
+import { HomePage } from "../components/homePage";
+
+describe("Home page component", () => {
+  it("renders HomePage", () => {
+    const element = document.createElement("div");
+    ReactDOM.render(<HomePage />, element);
+    expect(element.innerHTML).toMatchSnapshot();
+  });
+});

client/__tests__/login.test.jsx

@@ -0,0 +1,17 @@
+import * as ReactDOM from "react-dom";
+import * as React from "react";
+import { LoginPage } from "../components/login";
+import { MemoryRouter } from "react-router-dom";
+
+describe("Login", () => {
+  it("renders LoginPage", () => {
+    const element = document.createElement("div");
+    ReactDOM.render(
+      <MemoryRouter>
+        <LoginPage />
+      </MemoryRouter>,
+      element
+    );
+    expect(element.innerHTML).toMatchSnapshot();
+  });
+});

client/__tests__/nonUser.test.jsx

@@ -0,0 +1,11 @@
+import * as ReactDOM from "react-dom";
+import * as React from "react";
+import { NonUser } from "../components/nonUser";
+
+describe("Non user component", () => {
+  it("renders Non user", () => {
+    const element = document.createElement("div");
+    ReactDOM.render(<NonUser />, element);
+    expect(element.innerHTML).toMatchSnapshot();
+  });
+});

client/__tests__/notFound.test.jsx

@@ -0,0 +1,11 @@
+import * as ReactDOM from "react-dom";
+import * as React from "react";
+import { NotFound } from "../components/notFound";
+
+describe("Not found component", () => {
+  it("renders NotFound", () => {
+    const element = document.createElement("div");
+    ReactDOM.render(<NotFound />, element);
+    expect(element.innerHTML).toMatchSnapshot();
+  });
+});

client/__tests__/userProfile.test.jsx

@@ -0,0 +1,30 @@
+import * as ReactDOM from "react-dom";
+import * as React from "react";
+import { UserProfile } from "../components/userProfile";
+import { act } from "react-dom/test-utils";
+
+describe("UserProfile component", () => {
+  it("renders UserProfile", () => {
+    const element = document.createElement("div");
+    ReactDOM.render(<UserProfile />, element);
+    expect(element.innerHTML).toMatchSnapshot();
+  });
+
+  it("shows error in user profile", async () => {
+    const element = document.createElement("div");
+    await act(async () => {
+      ReactDOM.render(
+        <UserProfile
+          user={() => {
+            throw new Error("Error! ReferenceError: fetch is not defined");
+          }}
+        />,
+        element
+      );
+    });
+    expect(element.querySelector("#error-message").innerHTML).toEqual(
+      "Error! ReferenceError: fetch is not defined"
+    );
+    expect(element.innerHTML).toMatchSnapshot();
+  });
+});