From eb196548d89f1139358826f1424163ef6f8c4caf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Artemis=20Aar=C3=B8?= Date: Fri, 4 Oct 2024 09:38:24 +0200 Subject: [PATCH 1/3] feat: landing page with corresponding tests Closes #17 --- frontend/.env.example | 25 --- .../1-getting-started/pages/landingpage.cy.js | 55 +++++++ .../cypress/e2e/1-getting-started/todo.cy.js | 143 ------------------ .../misc.cy.js/my-image.png | Bin 213139 -> 0 bytes frontend/package-lock.json | 10 +- frontend/package.json | 2 +- frontend/public/homepagepicture.jpg | Bin 0 -> 204843 bytes frontend/src/app/page.tsx | 23 ++- package-lock.json | 7 + 9 files changed, 86 insertions(+), 179 deletions(-) delete mode 100644 frontend/.env.example create mode 100644 frontend/cypress/e2e/1-getting-started/pages/landingpage.cy.js delete mode 100644 frontend/cypress/e2e/1-getting-started/todo.cy.js delete mode 100644 frontend/cypress/screenshots/2-advanced-examples/misc.cy.js/my-image.png create mode 100644 frontend/public/homepagepicture.jpg create mode 100644 package-lock.json diff --git a/frontend/.env.example b/frontend/.env.example deleted file mode 100644 index 5217cc1..0000000 --- a/frontend/.env.example +++ /dev/null @@ -1,25 +0,0 @@ -# Since the ".env" file is gitignored, you can use the ".env.example" file to -# build a new ".env" file when you clone the repo. Keep this file up-to-date -# when you add new variables to `.env`. - -# This file will be committed to version control, so make sure not to have any -# secrets in it. If you are cloning this repo, create a copy of this file named -# ".env" and populate it with your secrets. - -# When adding additional environment variables, the schema in "/src/env.js" -# should be updated accordingly. - -# Prisma -# https://www.prisma.io/docs/reference/database-reference/connection-urls#env -DATABASE_URL="mysql://root:password@localhost:3306/ntnu-kpro-ai-assistant" - -# Next Auth -# You can generate a new secret on the command line with: -# openssl rand -base64 32 -# https://next-auth.js.org/configuration/options#secret -# NEXTAUTH_SECRET="" -NEXTAUTH_URL="http://localhost:3000" - -# Next Auth Discord Provider -DISCORD_CLIENT_ID="" -DISCORD_CLIENT_SECRET="" diff --git a/frontend/cypress/e2e/1-getting-started/pages/landingpage.cy.js b/frontend/cypress/e2e/1-getting-started/pages/landingpage.cy.js new file mode 100644 index 0000000..689aa8d --- /dev/null +++ b/frontend/cypress/e2e/1-getting-started/pages/landingpage.cy.js @@ -0,0 +1,55 @@ + +describe('Landing page', () => { + it('should load the landing page successfully', () => { + cy.visit('http://localhost:3000/'); + cy.url().should("eq", "http://localhost:3000/") + }); +}); + +describe("Make sure landing page is visitable/ displays data properly", () => { + beforeEach(() => { + cy.visit("http://localhost:3000/") + }) + + it("test landingpage has navigation bar", () => { + cy.contains("Før Søknad") + cy.contains("Under Søknad") + cy.contains("Mottakskontroll") + }) + + it("landing page has welcoming paragraph", () => { + cy.get("#welcome-text").should("be.visible") + }) + + it("landing page has image", () => { + cy.get("#homepage-picture").should("be.visible") + }) +}); + +//todo: update when navbar is made +describe("Make sure navbar on landing page get you to intended target", () => { + beforeEach(() => { + cy.visit("http://localhost:3000/") + }) + + it("test før søknad", () => { + cy.contains("Før Søknad").click(); + cy.url().should("eq", "http://localhost:3000/bygget") + }) + + it("test under søknad", () => { + cy.contains("Under Søknad").click(); + cy.url().should("eq", "http://localhost:3000/soknad") + }) + + it("test Mottakskontroll", () => { + cy.contains("Mottakskontroll").click(); + cy.url().should("eq", "http://localhost:3000/admin") + }) +}) + + + + + + diff --git a/frontend/cypress/e2e/1-getting-started/todo.cy.js b/frontend/cypress/e2e/1-getting-started/todo.cy.js deleted file mode 100644 index 4768ff9..0000000 --- a/frontend/cypress/e2e/1-getting-started/todo.cy.js +++ /dev/null @@ -1,143 +0,0 @@ -/// - -// Welcome to Cypress! -// -// This spec file contains a variety of sample tests -// for a todo list app that are designed to demonstrate -// the power of writing tests in Cypress. -// -// To learn more about how Cypress works and -// what makes it such an awesome testing tool, -// please read our getting started guide: -// https://on.cypress.io/introduction-to-cypress - -describe('example to-do app', () => { - beforeEach(() => { - // Cypress starts out with a blank slate for each test - // so we must tell it to visit our website with the `cy.visit()` command. - // Since we want to visit the same URL at the start of all our tests, - // we include it in our beforeEach function so that it runs before each test - cy.visit('https://example.cypress.io/todo') - }) - - it('displays two todo items by default', () => { - // We use the `cy.get()` command to get all elements that match the selector. - // Then, we use `should` to assert that there are two matched items, - // which are the two default items. - cy.get('.todo-list li').should('have.length', 2) - - // We can go even further and check that the default todos each contain - // the correct text. We use the `first` and `last` functions - // to get just the first and last matched elements individually, - // and then perform an assertion with `should`. - cy.get('.todo-list li').first().should('have.text', 'Pay electric bill') - cy.get('.todo-list li').last().should('have.text', 'Walk the dog') - }) - - it('can add new todo items', () => { - // We'll store our item text in a variable so we can reuse it - const newItem = 'Feed the cat' - - // Let's get the input element and use the `type` command to - // input our new list item. After typing the content of our item, - // we need to type the enter key as well in order to submit the input. - // This input has a data-test attribute so we'll use that to select the - // element in accordance with best practices: - // https://on.cypress.io/selecting-elements - cy.get('[data-test=new-todo]').type(`${newItem}{enter}`) - - // Now that we've typed our new item, let's check that it actually was added to the list. - // Since it's the newest item, it should exist as the last element in the list. - // In addition, with the two default items, we should have a total of 3 elements in the list. - // Since assertions yield the element that was asserted on, - // we can chain both of these assertions together into a single statement. - cy.get('.todo-list li') - .should('have.length', 3) - .last() - .should('have.text', newItem) - }) - - it('can check off an item as completed', () => { - // In addition to using the `get` command to get an element by selector, - // we can also use the `contains` command to get an element by its contents. - // However, this will yield the