Frontend testing

docker-compose.yaml

@@ -37,8 +37,6 @@ services:
     container_name: dind
     image: docker:dind
     privileged: true
-    volumes:
-      - /var/lib/docker
     ports:
       - 2375:2375
     networks:

frontend/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ]
+  ]
+}

frontend/cypress.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from "cypress";
+import viteConfig from "./vite.config";
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: "react",
+      bundler: "vite",
+      // optionally pass in vite config
+      viteConfig: viteConfig,
+      // or a function - the result is merged with
+      // any `vite.config` file that is detected
+    },
+  },
+
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    viewportWidth: 1920,
+    viewportHeight: 1080,
+  },
+});

frontend/cypress/components/CourseAdminBtn.cy.tsx

@@ -0,0 +1,13 @@
+import CourseAdminBtn from '../../src/pages/course/components/tabExtraBtn/CourseAdminBtn'
+import {BrowserRouter} from "react-router-dom";
+
+Cypress.on('uncaught:exception', (err, runnable) => {
+  return false
+})
+
+describe('<CourseAdminBtn />', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<BrowserRouter><CourseAdminBtn courseId="1"/></BrowserRouter>).should("exist")
+  })
+})

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")
+  })
+})

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")
+  })
+})

frontend/cypress/components/CoursesList.cy.tsx

@@ -0,0 +1,42 @@
+import CoursesList from '../../src/pages/courses/components/CoursesList'
+import {CourseRelation} from "../../src/@types/requests";
+import {BrowserRouter} from "react-router-dom";
+
+const mockCourses = [
+  {
+    courseId: 1,
+    name: "Test course 1",
+    relation: "enrolled" as CourseRelation,
+    memberCount: 1908,
+    archivedAt: null,
+    year: 2023,
+    url: "Test course 1 url"
+  },{
+    courseId: 2,
+    name: "Test course 2",
+    relation: "enrolled" as CourseRelation,
+    memberCount: 35,
+    archivedAt: null,
+    year: 2023,
+    url: "Test course 2 url"
+  }
+]
+
+describe('CoursesList', () => {
+  it('renders with no courses', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<BrowserRouter><CoursesList courses={[]}/></BrowserRouter>).should("exist")
+    cy.get("body").should("contain.text", "courses.noCourses")
+  })
+
+  it('renders with courses', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<BrowserRouter><CoursesList courses={mockCourses} role="enrolled"/></BrowserRouter>).should("exist")
+    cy.get("body").should("not.contain.text", "courses.noCourses")
+        .and("contain.text", "Test course 1")
+        .and("contain.text", "Test course 2")
+        .and("contain.text", "2023 - 2024")
+        .and("contain.text", "1908 courses.members")
+        .and("contain.text", "35 courses.members")
+  })
+})

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")
+  })
+})

frontend/cypress/components/EditRole.cy.tsx

@@ -0,0 +1,10 @@
+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", "editRole.name")
+        .and("contain.text", "editRole.searchTutorial")
+  })
+})

frontend/cypress/components/ExtraTabBtn.cy.tsx

@@ -0,0 +1,14 @@
+import ExtraTabBtn from '../../src/pages/course/components/tabExtraBtn/ExtraTabBtn'
+
+Cypress.on('uncaught:exception', (err, runnable) => {
+  // returning false here prevents Cypress from
+  // failing the test
+  return false
+})
+
+describe('<ExtraTabBtn />', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<ExtraTabBtn />).should("exist")
+  })
+})

frontend/cypress/components/GradesCard.cy.tsx

@@ -0,0 +1,12 @@
+import GradesCard from '../../src/pages/course/components/gradesTab/GradesCard'
+
+Cypress.on('uncaught:exception', (err:any, runnable:any) => {
+
+  return false
+})
+describe('GradesCard', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<GradesCard />).should("exist")
+  })
+})

frontend/cypress/components/GradesList.cy.tsx

@@ -0,0 +1,23 @@
+import GradesList from '../../src/pages/course/components/gradesTab/GradesList'
+import {CourseGradesType} from "../../src/pages/course/components/gradesTab/GradesCard";
+import {BrowserRouter} from "react-router-dom";
+
+const mockGrades:CourseGradesType[] = [{
+  projectName: "Test Project",
+  projectUrl: "Project URL",
+  projectId: 1908,
+  maxScore: 100,
+  groupFeedback: {score: 95, feedback: "Goed gedaan", groupId:1, projectId:1908}
+}]
+
+describe('GradesList', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<BrowserRouter><GradesList feedback={mockGrades} courseId={1}/></BrowserRouter>)
+    cy.get("body").should("contain.text", "Feedback")
+    cy.get(".ant-list-item").should("exist")
+        .and("contain.text", "Test Project")
+        .and("contain.text", "Goed gedaan")
+        .and("contain.text", "95 / 100")
+  })
+})

frontend/cypress/components/GroupClusterModalContent.cy.tsx

@@ -0,0 +1,14 @@
+import GroupClusterModalContent from '../../src/pages/projectCreate/components/GroupClusterModalContent'
+
+describe('GroupClusterModalContent', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<GroupClusterModalContent courseId={1} onClusterCreated={(c) => {}} onClose={()=>{}}/>).should("exist")
+    cy.get("#name").type("TEST")
+    cy.get("body").should("contain.text", "project.change.clusterName")
+        .and("contain.text", "project.change.amountOfGroups")
+        .and("contain.text", "project.change.groupSize")
+    cy.get(':nth-child(1) > .ant-btn').should("be.visible")
+    cy.get(':nth-child(2) > .ant-btn').should("be.visible")
+  })
+})

frontend/cypress/components/GroupInfoModal.cy.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import GroupInfoModal from '../../src/pages/course/components/groupTab/GroupInfoModal'
+import {ApiRoutes, } from "../../src/@types/requests.d";
+
+Cypress.on('uncaught:exception', (err:any, runnable:any) => {
+  return false
+})
+
+const mockGroup = {
+  groupId: 1,
+  capacity: 5,
+  name: "Test group",
+  groupClusterUrl: ApiRoutes.CLUSTER as ApiRoutes.CLUSTER,
+  members:[{email: "test email", name: "TEST USER", userId: 1908}]
+}
+
+describe('GroupInfoModal', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<GroupInfoModal
+        group={mockGroup}
+        open={true}
+        setOpen={(b: boolean) => {return}}
+        removeUserFromGroup={(userId, groupId) => {return}}
+    />).should("exist")
+  })
+})

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%")
+  })
+})

frontend/cypress/components/GroupsCard.cy.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import GroupsCard from '../../src/pages/course/components/groupTab/GroupsCard'
+
+
+describe('<GroupsCard />', () => {
+  it('loads', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<GroupsCard courseId={1908}/>)
+    cy.get("body").should("contain.text", "Loading")
+  })
+})

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")
+  })
+})

frontend/cypress/components/InformationTab.cy.tsx

@@ -0,0 +1,12 @@
+import InformationTab from '../../src/pages/course/components/informationTab/InformationTab'
+
+Cypress.on('uncaught:exception', (err, runnable) => {
+  return false
+})
+
+describe('InformationTab', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<InformationTab />)
+  })
+})