From 84f4b8976759c3210e72ee0709e25a4790c7df53 Mon Sep 17 00:00:00 2001 From: Mathis De Witte Date: Thu, 23 May 2024 18:49:06 +0200 Subject: [PATCH] component testen afwerken --- .../subjectsPage/AddChangeSubjectsPage.cy.tsx | 18 ++++++ .../AssignmentListItemSubjectsPage.cy.tsx | 63 +++++++++++-------- .../page/subjectsPage/ProjectsView.cy.tsx | 21 ++++--- .../page/subjectsPage/StudentPopUp.cy.tsx | 30 +++++++++ .../page/subjectsPage/SubjectsPage.cy.tsx | 16 +++-- .../page/submissionPage/SubmissionPage.cy.tsx | 35 +++++++---- .../subjectsPage/AddChangeSubjectPage.tsx | 5 +- .../AssignmentListItemSubjectsPage.tsx | 9 ++- .../src/pages/subjectsPage/StudentPopUp.tsx | 20 ++++-- .../src/pages/subjectsPage/SubjectsPage.tsx | 7 ++- .../pages/submissionPage/SubmissionPage.tsx | 27 ++++++-- 11 files changed, 185 insertions(+), 66 deletions(-) create mode 100644 frontend/frontend/cypress/page/subjectsPage/AddChangeSubjectsPage.cy.tsx create mode 100644 frontend/frontend/cypress/page/subjectsPage/StudentPopUp.cy.tsx diff --git a/frontend/frontend/cypress/page/subjectsPage/AddChangeSubjectsPage.cy.tsx b/frontend/frontend/cypress/page/subjectsPage/AddChangeSubjectsPage.cy.tsx new file mode 100644 index 00000000..823033ad --- /dev/null +++ b/frontend/frontend/cypress/page/subjectsPage/AddChangeSubjectsPage.cy.tsx @@ -0,0 +1,18 @@ +import { AddChangeSubjectPage } from '../../../src/pages/subjectsPage/AddChangeSubjectPage' +import { BrowserRouter } from 'react-router-dom' + +// This page fetches data from the backend. +// So as far as the component test is concerned, +// we can only show what shows up before the fetch. +// This is why only the loading animation is checked. +// The rest of the tests are in the integration tests. +describe('AddChangeSubjectsPage', () => { + it('renders', () => { + cy.mount( + + + + ) + cy.get('[data-cy=loadingAnimation]').should('exist') + }) +}) diff --git a/frontend/frontend/cypress/page/subjectsPage/AssignmentListItemSubjectsPage.cy.tsx b/frontend/frontend/cypress/page/subjectsPage/AssignmentListItemSubjectsPage.cy.tsx index ee668919..704f2d0b 100644 --- a/frontend/frontend/cypress/page/subjectsPage/AssignmentListItemSubjectsPage.cy.tsx +++ b/frontend/frontend/cypress/page/subjectsPage/AssignmentListItemSubjectsPage.cy.tsx @@ -1,10 +1,9 @@ -import { AssignmentListItemSubjectsPage } from '../../../src/pages/subjectsPage/AssignmentListItemSubjectsPage'; -import { BrowserRouter } from 'react-router-dom'; -import fixtures from '../../fixtures/fixtures.json'; -import dayjs from 'dayjs'; +import { AssignmentListItemSubjectsPage } from '../../../src/pages/subjectsPage/AssignmentListItemSubjectsPage' +import { BrowserRouter } from 'react-router-dom' +import fixtures from '../../fixtures/fixtures.json' +import dayjs from 'dayjs' describe('AssignmentListItemSubjectsPage', () => { - const mockProps = { projectName: fixtures.project, dueDate: fixtures.fullProject.deadline, @@ -19,30 +18,42 @@ describe('AssignmentListItemSubjectsPage', () => { visibilityEvent: () => {}, courseId: fixtures.id, assignmentId: fixtures.id, - }; + } - it('renders', () => { - cy.mount(); - cy.get(`#projectName`).should('exist').should('contain', mockProps.projectName); - cy.get('#deadline').should('exist').should('contain', dayjs(mockProps.dueDate).format('DD/MM/YYYY HH:mm')); - cy.get('#score').should('exist').should('contain', mockProps.score.score + '/' + mockProps.maxScore); - cy.get('#submissions').should('exist').should('contain', mockProps.submissions); + it('renders as student', () => { + cy.mount( + + + + ) + cy.get(`#${mockProps.projectName.replace(/\s/g, '')}`) + .should('exist') + .should('contain', mockProps.projectName) + cy.get('[data-cy=deadline]') + .should('exist') + .should( + 'contain', + dayjs(mockProps.dueDate).format('DD/MM/YYYY HH:mm') + ) + cy.get('[data-cy=score]') + .should('exist') + .should('contain', mockProps.score.score + '/' + mockProps.maxScore) + cy.get('[data-cy=submissions]') + .should('exist') + .should('contain', mockProps.submissions) }); it('renders as teacher', () => { mockProps.isStudent = false; cy.mount(); - cy.get(`#projectName`).should('exist').should('contain', mockProps.projectName); - cy.get('#deadline').should('exist').should('contain', dayjs(mockProps.dueDate).format('DD/MM/YYYY HH:mm')); - cy.get('#score').should('not.exist'); - cy.get('#submissions').should('not.exist'); - cy.get('#archive').should('exist'); - cy.get('#delete').should('exist'); - cy.get('#notVisible').should('not.exist'); - cy.get('#visible').should('exist').click(); - cy.get('#visible').should('not.exist'); - cy.get('#notVisible').should('exist'); - - - }); -}); \ No newline at end of file + cy.get(`[data-cy=teacherProjectName]`) + .should('exist') + .should('contain', mockProps.projectName) + cy.get('[data-cy=teacherDeadline]') + .should('exist') + .should( + 'contain', + dayjs(mockProps.dueDate).format('DD/MM/YYYY HH:mm') + ) + }) +}) diff --git a/frontend/frontend/cypress/page/subjectsPage/ProjectsView.cy.tsx b/frontend/frontend/cypress/page/subjectsPage/ProjectsView.cy.tsx index 00b71607..785a1c1b 100644 --- a/frontend/frontend/cypress/page/subjectsPage/ProjectsView.cy.tsx +++ b/frontend/frontend/cypress/page/subjectsPage/ProjectsView.cy.tsx @@ -1,9 +1,8 @@ -import { ProjectsView } from '../../../src/pages/subjectsPage/ProjectsView'; -import { BrowserRouter } from 'react-router-dom'; -import fixtures from '../../fixtures/fixtures'; +import { ProjectsView } from '../../../src/pages/subjectsPage/ProjectsView' +import { BrowserRouter } from 'react-router-dom' +import fixtures from '../../fixtures/fixtures.json' describe('ProjectsView', () => { - const mockProps = { gebruiker: fixtures.gebruiker, archived: false, @@ -15,10 +14,16 @@ describe('ProjectsView', () => { } it('renders', () => { - cy.mount(); + cy.mount( + + + + ) for (const assignment of mockProps.assignments) { - cy.get('#' + assignment.titel.replace(/\s/g, '')).contains(assignment.titel); + cy.get('#' + assignment.titel.replace(/\s/g, '')).contains( + assignment.titel + ) // dit is een assignmentListItem en wordt in een andere test al getest } - }); -}); \ No newline at end of file + }) +}) diff --git a/frontend/frontend/cypress/page/subjectsPage/StudentPopUp.cy.tsx b/frontend/frontend/cypress/page/subjectsPage/StudentPopUp.cy.tsx new file mode 100644 index 00000000..09df8770 --- /dev/null +++ b/frontend/frontend/cypress/page/subjectsPage/StudentPopUp.cy.tsx @@ -0,0 +1,30 @@ +import StudentPopUp from '../../../src/pages/subjectsPage/StudentPopUp' +import { BrowserRouter } from 'react-router-dom' +import fixtures from '../../fixtures/fixtures.json' +import { t } from 'i18next' + +describe('StudentPopUp', () => { + const mockProps = { + students: [], + text: 'test popup text', + noGroup: false, + } + + it('renders', () => { + cy.mount( + + + + ) + cy.get('[data-cy=secondaryButton]').should('exist') + cy.get('#scroll-dialog-title').should('not.exist') + //cy.get('#scroll-dialog-title').should('have.text', mockProps.text) + //cy.get('[data-cy=noGroup]').should('exist') + //cy.get('[data-cy=noGroup]').should('have.text', t('noGroup')) + //cy.get('[data-cy=contactTeacher]').should('exist') + //cy.get('[data-cy=contactTeacher]').should( + // 'have.text', + // t('contactTeacher') + //) + }) +}) diff --git a/frontend/frontend/cypress/page/subjectsPage/SubjectsPage.cy.tsx b/frontend/frontend/cypress/page/subjectsPage/SubjectsPage.cy.tsx index 0a8c9e66..fb4ae10f 100644 --- a/frontend/frontend/cypress/page/subjectsPage/SubjectsPage.cy.tsx +++ b/frontend/frontend/cypress/page/subjectsPage/SubjectsPage.cy.tsx @@ -1,14 +1,20 @@ import { SubjectsPage } from '../../../src/pages/subjectsPage/SubjectsPage' import { BrowserRouter } from 'react-router-dom' +// This page fetches data from the backend. +// So as far as the component test is concerned, +// we can only show what shows up before the fetch. +// This is why only the loading animation is checked. +// The rest of the tests are in the integration tests. describe('SubjectsPage', () => { it('renders the SubjectsPage', () => { // Mount the SubjectsPage component within a BrowserRouter - cy.mount(``) + cy.mount( + + + + ) - // You may want to add assertions here to verify the rendered output - // For example, check if certain elements exist in the rendered output - // cy.get('button').should('exist'); - // cy.get('ul').should('exist'); + cy.get('[data-cy=loadingAnimation]').should('exist') }) }) diff --git a/frontend/frontend/cypress/page/submissionPage/SubmissionPage.cy.tsx b/frontend/frontend/cypress/page/submissionPage/SubmissionPage.cy.tsx index 136f7cf0..5f8dc2f0 100644 --- a/frontend/frontend/cypress/page/submissionPage/SubmissionPage.cy.tsx +++ b/frontend/frontend/cypress/page/submissionPage/SubmissionPage.cy.tsx @@ -1,16 +1,25 @@ -import { SubmissionPage } from '../../../src/pages/submissionPage/SubmissionPage'; -import { BrowserRouter } from 'react-router-dom'; +import { SubmissionPage } from '../../../src/pages/submissionPage/SubmissionPage' +import { BrowserRouter } from 'react-router-dom' +import { t } from 'i18next' describe('SubmissionPage', () => { - it('renders', () => { - cy.mount(); - cy.get('#logo').should('exist'); - cy.get('#title').should('exist'); - cy.get('#userMenu').should('exist'); - cy.get('#backButton').should('exist'); - cy.get('#deadline').should('exist'); - cy.get('#description').should('exist'); - cy.get('#downloadButton').should('exist'); - }); -}); + cy.mount( + + + + ) + cy.get('[data-cy=header]').should('exist') + cy.get('[data-cy=assignmentTitle]').should('exist') + cy.get('[data-cy=assignmentTitle]').should('have.text', t('assignment')) + cy.get('[data-cy=projectBeschrijving]').should('exist') + cy.get('[data-cy=filename]').should('exist') + cy.get('[data-cy=filename]').should('have.text', t('filename')) + cy.get('[data-cy=downloadSubmissionButton]').should('exist') + cy.get('[data-cy=restrictionsTitle]').should('exist') + cy.get('[data-cy=statusTitle]').should('exist') + cy.get('[data-cy=statusTitle]').should('have.text', t('status') + ':') + cy.get('[data-cy=resultTitle]').should('exist') + cy.get('[data-cy=resultTitle]').should('have.text', t('result')) + }) +}) diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx index 02103e22..43647a32 100644 --- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx +++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx @@ -620,7 +620,10 @@ export function AddChangeSubjectPage() { height: '100vh', }} > - + ) : ( diff --git a/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx index 5b9013fa..bf4233ae 100644 --- a/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx +++ b/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx @@ -111,6 +111,7 @@ export function AssignmentListItemSubjectsPage({ : 'text.primary' : 'text.primary' } + data-cy="deadline" > {dueDate ? dayjs(dueDate).format( @@ -131,6 +132,7 @@ export function AssignmentListItemSubjectsPage({ t('submission') : t('no_submissions') } + data-cy="submissions" />, <> {submissions > 0 ? ( @@ -140,6 +142,7 @@ export function AssignmentListItemSubjectsPage({ ? `${score.score}/${maxScore} (${(100 * score.score) / maxScore}%)` : t('no_score_yet') } + data-cy="score" /> ) : ( , + , {dueDate ? dayjs(dueDate).format( diff --git a/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx b/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx index f045e495..71cca1e1 100644 --- a/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx +++ b/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx @@ -20,7 +20,11 @@ interface StudentPopUpProps { noGroup: boolean } -export default function StudentPopUp({ students, text, noGroup }: StudentPopUpProps) { +export default function StudentPopUp({ + students, + text, + noGroup, +}: StudentPopUpProps) { const [open, setOpen] = React.useState(false) const handleClose = () => { @@ -34,6 +38,7 @@ export default function StudentPopUp({ students, text, noGroup }: StudentPopUpPr onClick={() => { setOpen(true) }} + data-cy="secondaryButton" > {t(text)} @@ -60,16 +65,19 @@ export default function StudentPopUp({ students, text, noGroup }: StudentPopUpPr - {noGroup ? + {noGroup ? ( <> - + {t('noGroup')} - + {t('contactTeacher')} - : + ) : ( <> {/* List of Students */} {students.length > 0 ? ( @@ -88,7 +96,7 @@ export default function StudentPopUp({ students, text, noGroup }: StudentPopUpPr )} - } + )} diff --git a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx index 414fa6b5..ac449209 100644 --- a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx +++ b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx @@ -233,7 +233,10 @@ export function SubjectsPage() { justifyContent={'center'} sx={{ width: '100vw', height: '100vh' }} > - + ) : ( <> @@ -354,7 +357,7 @@ export function SubjectsPage() { placement={'top'} > {t('assignment')} - + {project?.beschrijving} @@ -355,6 +360,7 @@ export function SubmissionPage() { fontWeight={'bold'} aria-label={'title'} margin={0} + data-cy="filename" > {t('filename')} @@ -362,6 +368,7 @@ export function SubmissionPage() { id="downloadButton" startIcon={} onClick={downloadSubmission} + data-cy="downloadSubmissionButton" > {loading ? ( - + {t('restrictions')} @@ -502,7 +513,11 @@ export function SubmissionPage() { gap: 2, }} > - + {t('status') + ':'} {loading ? ( @@ -541,7 +556,11 @@ export function SubmissionPage() { maxHeight: '15vh', }} > - + {t('result')}