From a193b27951f9245a38b0e0b9329c9f332c6eecc4 Mon Sep 17 00:00:00 2001
From: Arne Dierick <arne.dierick@ugent.be>
Date: Thu, 16 May 2024 17:18:17 +0200
Subject: [PATCH] added lots of extra frontend tests

---
 frontend/cypress/components/CourseCard.cy.tsx | 69 +++++++++++++++++++
 .../cypress/components/CourseSection.cy.tsx   | 13 ++++
 .../components/CreateCourseModal.cy.tsx       | 16 +++++
 .../cypress/components/EditProject.cy.tsx     |  9 +++
 frontend/cypress/components/EditRole.cy.tsx   | 14 ++++
 .../cypress/components/GroupProgress.cy.tsx   | 10 +++
 frontend/cypress/components/GroupTab.cy.tsx   |  9 +++
 .../components/HorizontalCourseScroll.cy.tsx  | 26 +++++++
 frontend/cypress/components/Navbar.cy.tsx     | 13 ++++
 .../cypress/components/ProjectCard.cy.tsx     | 12 ++++
 .../cypress/components/ProjectInfo.cy.tsx     | 33 +++++++++
 .../components/ProjectStatusTag.cy.tsx        | 21 ++++++
 .../cypress/components/ProjectTable.cy.tsx    | 67 ++++++++++++++++++
 .../components/ScoreTabScoreCard.cy.tsx       |  8 +++
 .../cypress/components/SubmissionList.cy.tsx  | 12 ++++
 .../components/SubmissionStatusTag.cy.tsx     | 25 +++++++
 .../cypress/components/SubmissionTab.cy.tsx   |  9 +++
 .../components/SubmissionsTable.cy.tsx        | 15 ++++
 frontend/cypress/components/UserList.cy.tsx   | 30 ++++++++
 frontend/cypress/pages/Home.cy.tsx            | 44 ++++++++++++
 frontend/cypress/pages/Profile.cy.tsx         | 13 ++++
 frontend/cypress/pages/Project.cy.tsx         | 12 ++++
 frontend/src/pages/index/Home.tsx             |  6 +-
 23 files changed, 483 insertions(+), 3 deletions(-)
 create mode 100644 frontend/cypress/components/CourseCard.cy.tsx
 create mode 100644 frontend/cypress/components/CourseSection.cy.tsx
 create mode 100644 frontend/cypress/components/CreateCourseModal.cy.tsx
 create mode 100644 frontend/cypress/components/EditProject.cy.tsx
 create mode 100644 frontend/cypress/components/EditRole.cy.tsx
 create mode 100644 frontend/cypress/components/GroupProgress.cy.tsx
 create mode 100644 frontend/cypress/components/GroupTab.cy.tsx
 create mode 100644 frontend/cypress/components/HorizontalCourseScroll.cy.tsx
 create mode 100644 frontend/cypress/components/Navbar.cy.tsx
 create mode 100644 frontend/cypress/components/ProjectCard.cy.tsx
 create mode 100644 frontend/cypress/components/ProjectInfo.cy.tsx
 create mode 100644 frontend/cypress/components/ProjectStatusTag.cy.tsx
 create mode 100644 frontend/cypress/components/ProjectTable.cy.tsx
 create mode 100644 frontend/cypress/components/ScoreTabScoreCard.cy.tsx
 create mode 100644 frontend/cypress/components/SubmissionList.cy.tsx
 create mode 100644 frontend/cypress/components/SubmissionStatusTag.cy.tsx
 create mode 100644 frontend/cypress/components/SubmissionTab.cy.tsx
 create mode 100644 frontend/cypress/components/SubmissionsTable.cy.tsx
 create mode 100644 frontend/cypress/components/UserList.cy.tsx
 create mode 100644 frontend/cypress/pages/Home.cy.tsx
 create mode 100644 frontend/cypress/pages/Profile.cy.tsx
 create mode 100644 frontend/cypress/pages/Project.cy.tsx

diff --git a/frontend/cypress/components/CourseCard.cy.tsx b/frontend/cypress/components/CourseCard.cy.tsx
new file mode 100644
index 00000000..16bb058c
--- /dev/null
+++ b/frontend/cypress/components/CourseCard.cy.tsx
@@ -0,0 +1,69 @@
+import CourseCard from '../../src/pages/index/components/CourseCard'
+import {BrowserRouter} from "react-router-dom";
+import {ApiRoutes, CourseRelation, DockerFeedback, DockerStatus, Timestamp} from "../../src/@types/requests";
+
+const mockProjects = [
+    {course: {name: "test course 1", url: "test course 1 url", courseId: 1908},
+      deadline: "NOW",
+      description: "do something",
+      clusterId: null,
+      projectId: 35,
+      name: "test project 1",
+      submissionUrl: null,
+      testsUrl: "test project 1 url",
+      maxScore: null,
+      visible: true,
+      progress: {
+        completed: 5,
+        total: 10,
+      },
+      groupId: null,
+    },
+  {course: {name: "test course 1", url: "test course 1 url", courseId: 1908},
+    deadline: "NOW",
+    description: "do something",
+    clusterId: null,
+    projectId: 36,
+    name: "test project 2",
+    submissionUrl: null,
+    testsUrl: "test project 2 url",
+    maxScore: null,
+    visible: true,
+    progress: {
+      completed: 0,
+      total: 10,
+    },
+    groupId: null,
+  }
+  ]
+
+
+const mockCourse = {
+  courseId: 1908,
+  name: "test course 1",
+  relation: "enrolled" as CourseRelation,
+  memberCount: 20,
+  archivedAt: null,
+  year: 2023,
+  url: "test course 1 url"
+}
+
+Cypress.on('uncaught:exception', (err: any, runnable: any) => {
+  return false
+})
+
+describe('<CourseCard />', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<BrowserRouter><CourseCard adminView={false} courseProjects={{projects: mockProjects, course: mockCourse }} /></BrowserRouter>).should("exist")
+    cy.get('.ant-card-head').should("contain.text", "test course 1")
+    cy.get('.ant-list-items > :nth-child(1)').should("contain.text", "test project 1")
+        .and("contain.text", "50%")
+    cy.get('.ant-list-items > :nth-child(2)').should("contain.text", "test project 2")
+        .and("contain.text", "0%")
+    cy.get(':nth-child(1) > :nth-child(1) > :nth-child(1) > .ant-statistic > .ant-statistic-content')
+        .should("contain.text", "20")
+    cy.get(':nth-child(2) > :nth-child(1) > :nth-child(1) > .ant-statistic > .ant-statistic-content')
+        .should("contain.text", "2")
+  })
+})
\ No newline at end of file
diff --git a/frontend/cypress/components/CourseSection.cy.tsx b/frontend/cypress/components/CourseSection.cy.tsx
new file mode 100644
index 00000000..6dc81202
--- /dev/null
+++ b/frontend/cypress/components/CourseSection.cy.tsx
@@ -0,0 +1,13 @@
+import CourseSection from '../../src/pages/index/components/CourseSection'
+import {BrowserRouter} from "react-router-dom";
+
+Cypress.on('uncaught:exception', (err: any, runnable: any) => {
+  return false
+})
+
+describe('<CourseSection />', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<BrowserRouter><CourseSection /></BrowserRouter>).should("exist")
+  })
+})
\ No newline at end of file
diff --git a/frontend/cypress/components/CreateCourseModal.cy.tsx b/frontend/cypress/components/CreateCourseModal.cy.tsx
new file mode 100644
index 00000000..6e4c60d9
--- /dev/null
+++ b/frontend/cypress/components/CreateCourseModal.cy.tsx
@@ -0,0 +1,16 @@
+import CreateCourseModal from '../../src/pages/index/components/CreateCourseModal'
+import {BrowserRouter} from "react-router-dom";
+
+describe('CreateCourseModal', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<BrowserRouter><CreateCourseModal open={true} setOpen={(b: boolean) => {}}/></BrowserRouter>).should("exist")
+    cy.get("body").should("contain.text", "home.createCourse")
+        .and("contain.text", "home.courseName")
+        .and("contain.text", "project.change.description")
+        .and("contain.text", "components.write")
+        .and("contain.text", "components.preview")
+    cy.get('.ant-btn-default').should("be.visible")
+    cy.get('.ant-btn-primary').should("be.visible")
+  })
+})
\ No newline at end of file
diff --git a/frontend/cypress/components/EditProject.cy.tsx b/frontend/cypress/components/EditProject.cy.tsx
new file mode 100644
index 00000000..9d374e9c
--- /dev/null
+++ b/frontend/cypress/components/EditProject.cy.tsx
@@ -0,0 +1,9 @@
+import EditProject from '../../src/pages/editProject/EditProject'
+import {BrowserRouter} from "react-router-dom";
+
+describe('<EditProject />', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<BrowserRouter><EditProject /></BrowserRouter>).should("exist")
+  })
+})
\ No newline at end of file
diff --git a/frontend/cypress/components/EditRole.cy.tsx b/frontend/cypress/components/EditRole.cy.tsx
new file mode 100644
index 00000000..caf923f4
--- /dev/null
+++ b/frontend/cypress/components/EditRole.cy.tsx
@@ -0,0 +1,14 @@
+import EditRole from '../../src/pages/editRole/EditRole'
+
+describe('EditRole', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<EditRole />).should("exist")
+    cy.get("body").should("contain.text", "Alice Kornelis")
+        .and("contain.text", "Bob Kornelis")
+        .and("contain.text", "Charlie Kornelis")
+    cy.get('.ant-list-items > :nth-child(1)').should("contain.text", "editRole.student")
+    cy.get('.ant-list-items > :nth-child(2)').should("contain.text", "editRole.teacher")
+    cy.get('.ant-list-items > :nth-child(3)').should("contain.text", "editRole.admin")
+  })
+})
\ No newline at end of file
diff --git a/frontend/cypress/components/GroupProgress.cy.tsx b/frontend/cypress/components/GroupProgress.cy.tsx
new file mode 100644
index 00000000..3f877a77
--- /dev/null
+++ b/frontend/cypress/components/GroupProgress.cy.tsx
@@ -0,0 +1,10 @@
+import GroupProgress from '../../src/pages/index/components/GroupProgress'
+
+describe('GroupProgress', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<GroupProgress usersCompleted={10} userCount={20}/>).should("exist")
+    cy.get("body").should("be.visible")
+        .and("contain.text", "50%")
+  })
+})
\ No newline at end of file
diff --git a/frontend/cypress/components/GroupTab.cy.tsx b/frontend/cypress/components/GroupTab.cy.tsx
new file mode 100644
index 00000000..b5f36835
--- /dev/null
+++ b/frontend/cypress/components/GroupTab.cy.tsx
@@ -0,0 +1,9 @@
+import GroupTab from '../../src/pages/project/components/GroupTab'
+
+describe('GroupTab', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<GroupTab />).should("exist")
+    cy.get(".ant-spin-dot").should("be.visible")
+  })
+})
\ No newline at end of file
diff --git a/frontend/cypress/components/HorizontalCourseScroll.cy.tsx b/frontend/cypress/components/HorizontalCourseScroll.cy.tsx
new file mode 100644
index 00000000..a53a26f7
--- /dev/null
+++ b/frontend/cypress/components/HorizontalCourseScroll.cy.tsx
@@ -0,0 +1,26 @@
+import HorizontalCourseScroll from '../../src/pages/index/components/HorizontalCourseScroll'
+import {BrowserRouter} from "react-router-dom";
+
+describe('HorizontalCourseScroll', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<BrowserRouter>
+      <HorizontalCourseScroll
+        title="test horizontal scroll"
+        projects={null}
+        type="test"
+        onOpenNew={()=> {}}
+        showMore={true}
+        showPlus={true}
+        allOptions={true}
+      />
+    </BrowserRouter>).should("exist")
+    cy.get("body").should("contain.text", "test horizontal scroll")
+        .and("contain.text", "home.moreCourses")
+    cy.get(':nth-child(1) > .ant-card > .ant-card-body').should("be.visible")
+    cy.get(':nth-child(2) > .ant-card > .ant-card-body').should("be.visible")
+    cy.get(':nth-child(3) > .ant-card > .ant-card-body').should("not.be.visible")
+    cy.viewport(2560, 1440)
+    cy.get(':nth-child(3) > .ant-card > .ant-card-body').should("be.visible")
+  })
+})
\ No newline at end of file
diff --git a/frontend/cypress/components/Navbar.cy.tsx b/frontend/cypress/components/Navbar.cy.tsx
new file mode 100644
index 00000000..892adae4
--- /dev/null
+++ b/frontend/cypress/components/Navbar.cy.tsx
@@ -0,0 +1,13 @@
+import Navbar from '../../src/pages/index/landing/Navbar'
+import {BrowserRouter} from "react-router-dom";
+
+describe('Navbar', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<BrowserRouter><Navbar onLogin={() => {}}/></BrowserRouter>).should("exist")
+    cy.get(".navbar").should("be.visible")
+        .and("contain.text", "Pigeonhole")
+    cy.get(".landing-page-btn").should("be.visible")
+    cy.get(".white-color").should("be.visible")
+  })
+})
\ No newline at end of file
diff --git a/frontend/cypress/components/ProjectCard.cy.tsx b/frontend/cypress/components/ProjectCard.cy.tsx
new file mode 100644
index 00000000..59ddb61f
--- /dev/null
+++ b/frontend/cypress/components/ProjectCard.cy.tsx
@@ -0,0 +1,12 @@
+import ProjectCard from '../../src/pages/index/components/ProjectCard'
+import {BrowserRouter} from "react-router-dom";
+Cypress.on('uncaught:exception', (err: any, runnable: any) => {
+
+  return false
+})
+describe('<ProjectCard />', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<BrowserRouter><ProjectCard courseId={undefined}/></BrowserRouter>).should("exist")
+  })
+})
\ No newline at end of file
diff --git a/frontend/cypress/components/ProjectInfo.cy.tsx b/frontend/cypress/components/ProjectInfo.cy.tsx
new file mode 100644
index 00000000..61aa6388
--- /dev/null
+++ b/frontend/cypress/components/ProjectInfo.cy.tsx
@@ -0,0 +1,33 @@
+import ProjectInfo from '../../src/pages/index/components/ProjectInfo'
+const mockProject = {course: {name: "test course 1", url: "test course 1 url", courseId: 1908},
+  deadline: "2023/05/15",
+      description: "do something",
+    clusterId: null,
+    projectId: 35,
+    name: "test project 1",
+    submissionUrl: null,
+    testsUrl: "test project 1 url",
+    maxScore: null,
+    visible: true,
+    progress: {
+  completed: 5,
+      total: 10,
+},
+  groupId: null,
+}
+
+describe('<ProjectInfo />', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<ProjectInfo project={mockProject}/>).should("exist")
+    cy.get("body").should("contain.text", "home.projects.name")
+        .and("contain.text", "test course 1")
+        .and("contain.text", "home.projects.deadline")
+        .and("contain.text", "15 mei 2023")
+        .and("contain.text", "home.projects.description")
+        .and("contain.text", "do something")
+        .and("contain.text", "home.projects.projectStatus")
+        .and("contain.text", "home.projects.groupProgress")
+        .and("contain.text", "50%")
+  })
+})
\ No newline at end of file
diff --git a/frontend/cypress/components/ProjectStatusTag.cy.tsx b/frontend/cypress/components/ProjectStatusTag.cy.tsx
new file mode 100644
index 00000000..82bb2696
--- /dev/null
+++ b/frontend/cypress/components/ProjectStatusTag.cy.tsx
@@ -0,0 +1,21 @@
+import ProjectStatusTag from '../../src/pages/index/components/ProjectStatusTag'
+
+describe('ProjectStatusTag', () => {
+  it('renders when correct', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<ProjectStatusTag status="correct" icon={true}/>).should("exist")
+    cy.get("body").should("contain.text", "home.projects.status.completed")
+  })
+  it('renders when incorrect', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<ProjectStatusTag status="incorrect" icon={true}/>).should("exist")
+    cy.get("body").should("contain.text", "home.projects.status.failed")
+        .and("not.contain.text", "home.projects.status.completed")
+  })
+  it('renders when not started', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<ProjectStatusTag status="not started" icon={true}/>).should("exist")
+    cy.get("body").should("contain.text", "home.projects.status.notStarted")
+        .and("not.contain.text", "home.projects.status.completed")
+  })
+})
\ No newline at end of file
diff --git a/frontend/cypress/components/ProjectTable.cy.tsx b/frontend/cypress/components/ProjectTable.cy.tsx
new file mode 100644
index 00000000..49e2c867
--- /dev/null
+++ b/frontend/cypress/components/ProjectTable.cy.tsx
@@ -0,0 +1,67 @@
+import ProjectTable from '../../src/pages/index/components/ProjectTable'
+
+Cypress.on('uncaught:exception', (err: any, runnable: any) => {
+
+  return false
+})
+
+const mockProjects = [
+  {course: {name: "test course 1", url: "test course 1 url", courseId: 1908},
+    deadline: "2024/05/28",
+    description: "do something",
+    clusterId: null,
+    projectId: 35,
+    name: "test project 1",
+    submissionUrl: null,
+    testsUrl: "test project 1 url",
+    maxScore: null,
+    visible: true,
+    progress: {
+      completed: 5,
+      total: 10,
+    },
+    groupId: null,
+  },
+  {course: {name: "test course 1", url: "test course 1 url", courseId: 1908},
+    deadline: "2024/06/03",
+    description: "do something",
+    clusterId: null,
+    projectId: 36,
+    name: "test project 2",
+    submissionUrl: null,
+    testsUrl: "test project 2 url",
+    maxScore: null,
+    visible: true,
+    progress: {
+      completed: 0,
+      total: 10,
+    },
+    groupId: null,
+  }
+]
+
+describe('ProjectTable', () => {
+  it('renders loading correctly', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<ProjectTable projects={null}/>).should("exist")
+    cy.get('.ant-spin-dot').should("be.visible")
+  })
+  it('renders projects', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<ProjectTable projects={mockProjects}/>).should("exist")
+    cy.get('.ant-spin-dot').should("not.exist")
+    cy.get("body").should("not.contain.text", "home.projects.noProjects")
+  })
+  it('renders no projects', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<ProjectTable projects={[]}/>).should("exist")
+    cy.get('.ant-spin-dot').should("not.exist")
+    cy.get("body").should("contain.text", "home.projects.noProjects")
+        .and("contain.text", "home.projects.name")
+        .and("contain.text", "home.projects.course")
+        .and("contain.text", "home.projects.projectStatus")
+        .and("contain.text", "home.projects.deadline")
+        .and("contain.text", "home.projects.groupProgress")
+  })
+
+})
\ No newline at end of file
diff --git a/frontend/cypress/components/ScoreTabScoreCard.cy.tsx b/frontend/cypress/components/ScoreTabScoreCard.cy.tsx
new file mode 100644
index 00000000..cf4b9e2a
--- /dev/null
+++ b/frontend/cypress/components/ScoreTabScoreCard.cy.tsx
@@ -0,0 +1,8 @@
+import ScoreCard from '../../src/pages/project/components/ScoreTab'
+
+describe('ScoreCard', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<ScoreCard />).should("exist")
+  })
+})
\ No newline at end of file
diff --git a/frontend/cypress/components/SubmissionList.cy.tsx b/frontend/cypress/components/SubmissionList.cy.tsx
new file mode 100644
index 00000000..3fcfa682
--- /dev/null
+++ b/frontend/cypress/components/SubmissionList.cy.tsx
@@ -0,0 +1,12 @@
+import SubmissionList from '../../src/pages/project/components/SubmissionList'
+
+describe('SubmissionList', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<SubmissionList submissions={[]}/>).should("exist")
+    cy.get("body").should("contain.text", "project.noSubmissions")
+        .and("contain.text", "project.submission")
+        .and("contain.text", "project.submissionTime")
+        .and("contain.text", "project.status")
+  })
+})
\ No newline at end of file
diff --git a/frontend/cypress/components/SubmissionStatusTag.cy.tsx b/frontend/cypress/components/SubmissionStatusTag.cy.tsx
new file mode 100644
index 00000000..9d2697d1
--- /dev/null
+++ b/frontend/cypress/components/SubmissionStatusTag.cy.tsx
@@ -0,0 +1,25 @@
+import SubmissionStatusTag, {SubmissionStatus} from '../../src/pages/project/components/SubmissionStatusTag'
+
+describe('SubmissionStatusTag', () => {
+  it('renders when passed', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<SubmissionStatusTag status={SubmissionStatus.PASSED}/>)
+    cy.get("body").should("contain.text", "project.passed")
+        .and("not.contain.text", "project.testFailed")
+        .and("not.contain.text", "project.notSubmitted")
+  })
+  it('renders when failed', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<SubmissionStatusTag status={SubmissionStatus.DOCKER_REJECTED}/>)
+    cy.get("body").should("contain.text", "project.testFailed")
+        .and("not.contain.text", "project.passed")
+        .and("not.contain.text", "project.notSubmitted")
+  })
+  it('renders when not submitted', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<SubmissionStatusTag status={SubmissionStatus.NOT_SUBMITTED}/>)
+    cy.get("body").should("not.contain.text", "project.passed")
+        .and("not.contain.text", "project.testFailed")
+        .and("contain.text", "project.notSubmitted")
+  })
+})
\ No newline at end of file
diff --git a/frontend/cypress/components/SubmissionTab.cy.tsx b/frontend/cypress/components/SubmissionTab.cy.tsx
new file mode 100644
index 00000000..f3020cfe
--- /dev/null
+++ b/frontend/cypress/components/SubmissionTab.cy.tsx
@@ -0,0 +1,9 @@
+import SubmissionTab from '../../src/pages/project/components/SubmissionTab'
+
+describe('SubmissionTab', () => {
+  it('renders when loading', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<SubmissionTab projectId={1} courseId={1}/>).should("exist")
+    cy.get(".ant-spin-dot").should("be.visible")
+  })
+})
\ No newline at end of file
diff --git a/frontend/cypress/components/SubmissionsTable.cy.tsx b/frontend/cypress/components/SubmissionsTable.cy.tsx
new file mode 100644
index 00000000..dcd562cc
--- /dev/null
+++ b/frontend/cypress/components/SubmissionsTable.cy.tsx
@@ -0,0 +1,15 @@
+import SubmissionsTable from '../../src/pages/project/components/SubmissionsTable'
+
+describe('SubmissionsTable', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<SubmissionsTable submissions={[]} onChange={(s) => {}}/>).should("exist")
+    cy.get("body").should("contain.text", "project.noSubmissions")
+        .and("contain.text", "project.userName")
+        .and("contain.text", "project.submission")
+        .and("contain.text", "project.submissionTime")
+        .and("contain.text", "project.status")
+        .and("contain.text", "Score")
+        .and("contain.text", "Download")
+  })
+})
\ No newline at end of file
diff --git a/frontend/cypress/components/UserList.cy.tsx b/frontend/cypress/components/UserList.cy.tsx
new file mode 100644
index 00000000..d5d7cfc7
--- /dev/null
+++ b/frontend/cypress/components/UserList.cy.tsx
@@ -0,0 +1,30 @@
+import UserList from '../../src/pages/editRole/components/UserList'
+import {UsersType} from "../../src/pages/editRole/EditRole";
+
+const mockUsers : UsersType[] = [
+  {
+    name: "Test user 1", userId: 1908, url: "test/user1", email: "user1@test.com", role: "student"
+  },
+  {
+    name: "Test user 2", userId: 35, url: "test/user2", email: "user2@test.com", role: "teacher"
+  }
+]
+
+describe('UserList', () => {
+  it('renders without users', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<UserList users={[]} updateRole={(user, role) => {return}}/>)
+        .should("exist")
+    cy.get("body").should("contain.text", "No data")
+  })
+
+  it('renders with users', () => {
+    cy.mount(<UserList users={mockUsers} updateRole={(user, role) => {return}}/>)
+        .should("exist")
+    cy.get("body").should("not.contain.text", "No data")
+        .and("contain.text", "Test user 1")
+        .and("contain.text", "Test user 2")
+    cy.get('.ant-list-items > :nth-child(1)').should("contain.text", "editRole.student")
+    cy.get('.ant-list-items > :nth-child(2)').should("contain.text", "editRole.teacher")
+  })
+})
\ No newline at end of file
diff --git a/frontend/cypress/pages/Home.cy.tsx b/frontend/cypress/pages/Home.cy.tsx
new file mode 100644
index 00000000..fd0d27d7
--- /dev/null
+++ b/frontend/cypress/pages/Home.cy.tsx
@@ -0,0 +1,44 @@
+import Home from '../../src/pages/index/Home'
+import {BrowserRouter} from "react-router-dom";
+
+Cypress.on('uncaught:exception', (err: any, runnable: any) => {
+  return false
+})
+
+describe('Home', () => {
+  beforeEach(() => {
+    cy.mount(<BrowserRouter><Home /></BrowserRouter>).should("exist")
+    cy.viewport(1000, 600)
+  })
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.get("body").should("contain.text", "home.yourCourses")
+    cy.get(':nth-child(1) > .ant-card > .ant-card-body').should("be.visible")
+    cy.get(':nth-child(2) > .ant-card > .ant-card-body').should("be.visible")
+    cy.get(':nth-child(3) > .ant-card > .ant-card-body').should("be.visible")
+  })
+
+  it('shows projects by default', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.get("body").should("contain.text", "home.yourProjects")
+    cy.get(".projectTable").should("be.visible")
+    cy.get(".timeline").should("not.exist")
+    cy.get(".calendar").should("not.exist")
+  })
+  it('can show a timeline', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.get("body").should("contain.text", "home.yourProjects")
+    cy.get(':nth-child(2) > .ant-segmented-item-label').click()
+    cy.get(".projectTable").should("not.exist")
+    cy.get(".timeline").should("be.visible")
+    cy.get(".calendar").should("not.exist")
+  })
+  it('can show a calendar', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.get("body").should("contain.text", "home.yourProjects")
+    cy.get(':nth-child(3) > .ant-segmented-item-label').click()
+    cy.get(".projectTable").should("not.exist")
+    cy.get(".timeline").should("not.exist")
+    cy.get(".calendar").should("be.visible")
+  })
+})
\ No newline at end of file
diff --git a/frontend/cypress/pages/Profile.cy.tsx b/frontend/cypress/pages/Profile.cy.tsx
new file mode 100644
index 00000000..5413530b
--- /dev/null
+++ b/frontend/cypress/pages/Profile.cy.tsx
@@ -0,0 +1,13 @@
+import Profile from '../../src/pages/profile/Profile'
+import {User} from "../../src/providers/UserProvider";
+
+Cypress.on('uncaught:exception', (err: any, runnable: any) => {
+  return false
+})
+
+describe('Profile', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<Profile />).should("exist")
+  })
+})
\ No newline at end of file
diff --git a/frontend/cypress/pages/Project.cy.tsx b/frontend/cypress/pages/Project.cy.tsx
new file mode 100644
index 00000000..921cd8c2
--- /dev/null
+++ b/frontend/cypress/pages/Project.cy.tsx
@@ -0,0 +1,12 @@
+import Project from '../../src/pages/project/Project'
+
+Cypress.on('uncaught:exception', (err: any, runnable: any) => {
+  return false
+})
+
+describe('Project', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<Project />).should("exist")
+  })
+})
\ No newline at end of file
diff --git a/frontend/src/pages/index/Home.tsx b/frontend/src/pages/index/Home.tsx
index 551821d7..22a670ba 100644
--- a/frontend/src/pages/index/Home.tsx
+++ b/frontend/src/pages/index/Home.tsx
@@ -56,7 +56,7 @@ const Home = () => {
         </Typography.Title>
 
         {projectsViewMode === "table" && (
-          <Card
+          <Card className="projectTable"
             style={{
               width: "100%",
               overflow: "auto",
@@ -71,10 +71,10 @@ const Home = () => {
           </Card>
         )}
 
-        {projectsViewMode === "timeline" && <ProjectTimeline projects={projects} />}
+          {projectsViewMode === "timeline" && <div className="timeline"><ProjectTimeline  projects={projects} /> </div>}
 
         {projectsViewMode === "calendar" && (
-          <Card
+          <Card className="calendar"
             style={{
               width: "100%",
               overflow: "auto",