Commit 3c3d5a29 authored by Hauk Olaussen's avatar Hauk Olaussen
Browse files

Added some documenation in the readme. I have also added one more test for the...

Added some documenation in the readme. I have also added one more test for the PoetryAPI.ts file so that we are over the minimum test requirements.
parent baa40154
# Team 61 - Project 2
**Skrevet av**: Hauk Aleksander Olaussen, Noran Baskaran og Oskar Gabrielsen
## Noran Baskaran
## Hauk Aleksander Olaussen
## Oskar Gabrielsen
## Struktur og kode
Nettsiden er utviklet med bruk av React (via Create React App) og TypeScript. Alle animasjoner er implementert med bruk av HTML5 Canvas istedet for SVG ettersom gruppen hadde mer erfaring med dette fra før.
Vi har en mappestruktur som skiller ulike deler av kodebasen:
* **__ tests __:** Her ligger alle testene for prosjektet.
* **components:** Her ligger ulike komponenter som blir importert i *App.tsx* med ulike props som kan aksesseres og brukes.
* **media:** Her ligger lydfilene som brukes på nettsiden. Alle er hentet fra YouTube med fri opphavsrett.
* **utils:** Her ligger ulike klasser og filer som brukes av komponenter. Dette inkluderer henting av data fra API, samt en fil hvor alle egendefinerte types ligger (*types.d.ts*).
Oppsettet gir et oversiktlig oppsett av prosjektet som er enkel å navigere. Vi har valgt å legge alle typene i en fil slik at disse er samlet. Ettersom vi bruker *.d.ts* suffixen, så blir disse mulig å aksessere i alle andre deler av prosjektet uten å måtte importeres.
Håndteringen av LocalStorage og SessionStorage blir håndtert av hver sin klasse som ligger i **utils**. Det er inkludert Tsdoc kommentarer for alle funksjoner og metoder i prosjektet slik at å lese koden skal være lettere. Disse klassene blir instansiert som konstanter øverst i *App.tsx*, og brukt flittig når endringer forekommer.
*PoetryAPI.ts* inneholder funksjonen som henter dikt fra [poetryDB](https://poetrydb.org/index.html). De ulike endepunktene som brukes ligger i en array lokaliser i funksjonen. Nettsiden henter de samme diktene hver gang. Vi valgte spesifikt relativt korte dikt, da noen av diktene var unødvendig lange.
## Mulige brukerinteraksjoner
## Styling og utforming
## Testing
Testene er lokalisert i <em>__ tests __ <em> mappen. Der ligger en snapshottest for *App.tsx* og en testcase som tester at funksjonen som henter dikt fra [poetryDB](https://poetrydb.org/index.html) henter fem dikt. I og med at arrayen med URLer inneholder fem forskjellige, så vil å teste at funksjonen returnerer en array med fem dikt vise at alle diktene ble hentet.
Nettsiden er testet på flere enheter. Disse inkluderer laptoper, desktoper og mobile enheter. Det er ikke testet på Mac, ettersom ingen av oss besitter en. Nettsiden er derimot testet med Safari nettleseren på en iPhone 10. Ved alle tester fungerte nettsiden som forventet.
Testene inkluderer alle interaksjonsmetoder brukeren kan bruke for å interagere med nettsiden (knapper, nedtrekksliste, størrelse på nettleser). I tillegg til dette bekreftes det at animasjoner og lyder fungerer som det skal over alle de brukte enhetene.
* **Laptop og stasjonær:** Det er på bærbare/stasjonære PCer altn av utviklingen har skjedd, og også dermed hva den er spesifisert for.
* **Mobil:** På mobil vil nettsiden få et mer kolonneformet utseende ettersom mobilskjermen er tynnere enn andre skjermer. Dette hadde ikke noen ting å si for brukervennligheten da viewport og media-queries blir brukt for å passe på at alt skal fungere fint på tvers av enheter og størrelser.
Mer om hvordan dette oppnås ligger under *Styling og utforming*
## Misc
\ No newline at end of file
import React, { useState, useEffect } from "react";
import Exhibition from "./components/Exhibition";
import { fetchPoetryFromPoetryDB } from "./utils/PoetryAPI";
import Header from "./components/Header";
import LocalStorageManager from "./utils/LocalStorageManager";
import { fetchPoetryFromPoetryDB } from "./utils/PoetryAPI";
import { animate } from "./utils/Animations";
import { Color, Theme, Font } from "./utils/Enums";
import "./App.css";
import LocalStorageManager from "./utils/LocalStorageManager";
import SessionStorageManager from "./utils/SessionStorageManager";
const ssm: SessionStorageManager = new SessionStorageManager();
const lsm: LocalStorageManager = new LocalStorageManager();
/**
* Main function loaded into the page from index.tsx
*/
......@@ -58,7 +59,6 @@ const App: React.FC = () => {
const [userEdit, setUserEdit] = useState<boolean>(true);
const [errorDisplay, setErrorDisplay] = useState<boolean>(false);
const [sessionStack, setSessionStack] = useState<SessionConfig[]>([]);
const lsm: LocalStorageManager = new LocalStorageManager();
/**
* Calls the loadPoetry method one time when the page is loaded.
......
import {fetchPoetryFromPoetryDB} from '../../utils/PoetryAPI'
test("Test 5 poetries are loaded from database", async () => {
const fetchedInstallation: Installation[] | null= await fetchPoetryFromPoetryDB()
if(fetchedInstallation === null) {
console.log("Something went wrong with the fetching from DB (the DB is down!)")
return;
}
expect(fetchedInstallation.length).toBe(5);
});
/**
* Enum for the two fonts
*/
export enum Font {
ESTEBAN = "Esteban",
LOBSTER = "Lobster",
}
/**
* Enum for the two themes
*/
export enum Theme {
DARK = 0,
LIGHT = 1,
}
/**
* Enum for the different color choices
*/
export enum Color {
RANDOM = -1,
RED = 0,
......
{
"tags":
{
"allowUnknownTags" : true
},
"plugins":[
"plugins/markdown"
,"/Users/campa/AppData/Roaming/npm/node_modules/tsdoc/template/plugins/TSDoc.js"
],
"opts":
{
"template" :"/Users/campa/AppData/Roaming/npm/node_modules/tsdoc/template",
"recurse" :"true"
},
"templates" : {
"cleverLinks" : false,
"monospaceLinks" : false
},
"source":
{
"includePattern": "(\\.d)?\\.ts$"
},
"markdown" : {
"parser" : "gfm",
"hardwrap" : true
},
"tsdoc":{
"source" :"/Users/campa/Documents/projects/prosjekt-2/src/",
"destination" :"/Users/campa/Documents/projects/prosjekt-2/docs",
"tutorials" :"",
"systemName" : "prosjekt-2",
"footer" : "",
"copyright" : "prosjekt-2 Copyright © 2020 campa.",
"outputSourceFiles" : true,
"commentsOnly": true
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment