diff --git a/.github/workflows/django.yml b/.github/workflows/django.yml index 3e9e74de8..f7d6d92cc 100644 --- a/.github/workflows/django.yml +++ b/.github/workflows/django.yml @@ -2,9 +2,9 @@ name: Django CI on: push: - branches: [ "develop", "tests", "main" ] + branches: [ "develop", "tests", "main", "frontend_linting" ] pull_request: - branches: [ "develop", "tests", "main" ] + branches: [ "develop", "tests", "main", "frontend_linting" ] jobs: @@ -32,6 +32,10 @@ jobs: uses: actions/setup-python@v3 with: python-version: '3.10' + - name: Set up Node.js + uses: actions/setup-node@v3 + with: + node-version: '16' - name: Install Dependencies run: | python3 -m pip install --upgrade pip @@ -41,7 +45,19 @@ jobs: cd api flake8 . cd .. - - name: Run Tests + - name: Install Dependencies Frontend + run: | + cd frontend/frontend + npm i + npm install -g eslint + cd ../.. + - name: Linting Frontend + run: | + cd frontend/frontend + npm install -g eslint + npm run lint + cd ../.. + - name: Run Backend Tests env: CLIENT_ID: ${{ secrets.CLIENT_ID }} CLIENT_SECRET: ${{ secrets.CLIENT_SECRET }} @@ -55,6 +71,7 @@ jobs: DB_PORT: ${{ secrets.DB_PORT }} DB_ENGINE: ${{secrets.DB_ENGINE}} + run: | python manage.py makemigrations api python manage.py migrate api diff --git a/frontend/frontend/cypress.config.ts b/frontend/frontend/cypress.config.ts index 45e924e1b..0339c45c4 100644 --- a/frontend/frontend/cypress.config.ts +++ b/frontend/frontend/cypress.config.ts @@ -1,16 +1,16 @@ -import { defineConfig } from "cypress"; +import { defineConfig } from 'cypress' export default defineConfig({ - e2e: { - setupNodeEvents(on, config) { - // implement node event listeners here + e2e: { + setupNodeEvents() { + // implement node event listeners here + }, }, - }, - component: { - devServer: { - framework: "react", - bundler: "vite", + component: { + devServer: { + framework: 'react', + bundler: 'vite', + }, }, - }, -}); +}) diff --git a/frontend/frontend/cypress/component/AssignmentListItem.cy.tsx b/frontend/frontend/cypress/component/AssignmentListItem.cy.tsx index 184503a6c..856ab7b21 100644 --- a/frontend/frontend/cypress/component/AssignmentListItem.cy.tsx +++ b/frontend/frontend/cypress/component/AssignmentListItem.cy.tsx @@ -1,59 +1,87 @@ -import { AssignmentListItem } from '../../src/components/AssignmentListItem'; -import { BrowserRouter } from 'react-router-dom'; -import fixtures from '../fixtures/fixtures.json'; +import { AssignmentListItem } from '../../src/components/AssignmentListItem' +import { BrowserRouter } from 'react-router-dom' +import fixtures from '../fixtures/fixtures.json' describe('AssignmentListItem', () => { - const mockProps = { - id: fixtures.id, - projectName: fixtures.project, - dueDate: new Date().toLocaleDateString(), - status: false, - isStudent: true, - }; + const mockProps = { + id: fixtures.id, + projectName: fixtures.project, + dueDate: new Date().toLocaleDateString(), + status: false, + isStudent: true, + } - it('renders with cross', () => { - cy.mount(); - cy.get('.MuiListItem-root').should('exist'); - cy.get('#project' + fixtures.id).should('exist'); - cy.get('#projectName').should('contain.text', fixtures.project); - cy.get('#dueDate').should('contain.text', new Date().toLocaleDateString()); - cy.get('#cross').should('exist'); - cy.get('#check').should('not.exist'); - }); + it('renders with cross', () => { + cy.mount( + + + + ) + cy.get('.MuiListItem-root').should('exist') + cy.get('#project' + fixtures.id).should('exist') + cy.get('#projectName').should('contain.text', fixtures.project) + cy.get('#dueDate').should( + 'contain.text', + new Date().toLocaleDateString() + ) + cy.get('#cross').should('exist') + cy.get('#check').should('not.exist') + }) - it('renders with checkmark', () => { - mockProps.status = true; - cy.mount(); - cy.get('.MuiListItem-root').should('exist'); - cy.get('#project' + fixtures.id).should('exist'); - cy.get('#projectName').should('contain.text', fixtures.project); - cy.get('#dueDate').should('contain.text', new Date().toLocaleDateString()); - cy.get('#cross').should('not.exist'); - cy.get('#check').should('exist'); - }); + it('renders with checkmark', () => { + mockProps.status = true + cy.mount( + + + + ) + cy.get('.MuiListItem-root').should('exist') + cy.get('#project' + fixtures.id).should('exist') + cy.get('#projectName').should('contain.text', fixtures.project) + cy.get('#dueDate').should( + 'contain.text', + new Date().toLocaleDateString() + ) + cy.get('#cross').should('not.exist') + cy.get('#check').should('exist') + }) - it('renders with no due date', () => { - mockProps.dueDate = undefined; - cy.mount(); - cy.get('.MuiListItem-root').should('exist'); - cy.get('#project' + fixtures.id).should('exist'); - cy.get('#projectName').should('contain.text', fixtures.project); - // normaal zou hier 'no deadline' moeten staan in de correcte taal, maar blijkbaar gaat dat niet in de testen - // omdat er hier niet echt een taal is ingesteld? - cy.get('#dueDate').should('not.contain.text', new Date().toLocaleDateString()); - cy.get('#cross').should('not.exist'); - cy.get('#check').should('exist'); - }); + it('renders with no due date', () => { + mockProps.dueDate = undefined + cy.mount( + + + + ) + cy.get('.MuiListItem-root').should('exist') + cy.get('#project' + fixtures.id).should('exist') + cy.get('#projectName').should('contain.text', fixtures.project) + // normaal zou hier 'no deadline' moeten staan in de correcte taal, maar blijkbaar gaat dat niet in de testen + // omdat er hier niet echt een taal is ingesteld? + cy.get('#dueDate').should( + 'not.contain.text', + new Date().toLocaleDateString() + ) + cy.get('#cross').should('not.exist') + cy.get('#check').should('exist') + }) - it('renders as teacher', () => { - mockProps.isStudent = false; - mockProps.dueDate = new Date().toLocaleDateString(); - cy.mount(); - cy.get('.MuiListItem-root').should('exist'); - cy.get('#project' + fixtures.id).should('exist'); - cy.get('#projectName').should('contain.text', fixtures.project); - cy.get('#dueDate').should('contain.text', new Date().toLocaleDateString()); - cy.get('#cross').should('not.exist'); - cy.get('#check').should('not.exist'); - }); -}); + it('renders as teacher', () => { + mockProps.isStudent = false + mockProps.dueDate = new Date().toLocaleDateString() + cy.mount( + + + + ) + cy.get('.MuiListItem-root').should('exist') + cy.get('#project' + fixtures.id).should('exist') + cy.get('#projectName').should('contain.text', fixtures.project) + cy.get('#dueDate').should( + 'contain.text', + new Date().toLocaleDateString() + ) + cy.get('#cross').should('not.exist') + cy.get('#check').should('not.exist') + }) +}) diff --git a/frontend/frontend/cypress/component/CourseCard.cy.tsx b/frontend/frontend/cypress/component/CourseCard.cy.tsx index a7d7f00d7..1191d4a4e 100644 --- a/frontend/frontend/cypress/component/CourseCard.cy.tsx +++ b/frontend/frontend/cypress/component/CourseCard.cy.tsx @@ -1,64 +1,82 @@ -import { CourseCard } from '../../src/components/CourseCard'; -import { BrowserRouter } from 'react-router-dom'; -import fixtures from '../fixtures/fixtures.json'; +import { CourseCard } from '../../src/components/CourseCard' +import { BrowserRouter } from 'react-router-dom' +import fixtures from '../fixtures/fixtures.json' describe('CourseCard', () => { const mockProps = { courseId: fixtures.id, archived: false, isStudent: true, - }; + } it('renders as student', () => { - cy.mount(); + cy.mount( + + + + ) // data is fetched from the backend, so we can't check that - cy.get('.MuiCard-root').should('exist'); - cy.get('.MuiCardContent-root').should('exist'); - cy.get('#courseInfo').should('have.text', 'undefined: undefined: 0').click(); - cy.get('#student').should('exist'); - cy.get('#teacherArchived').should('not.exist'); - cy.get('#teacherNonArchived').should('not.exist'); - cy.get('#project').contains('Project'); - cy.get('#deadline').contains('Deadline'); - cy.get('#status').contains('Status'); - cy.get('#archiveButton').should('not.exist'); - }); + cy.get('.MuiCard-root').should('exist') + cy.get('.MuiCardContent-root').should('exist') + cy.get('#courseInfo') + .should('have.text', 'undefined: undefined: 0') + .click() + cy.get('#student').should('exist') + cy.get('#teacherArchived').should('not.exist') + cy.get('#teacherNonArchived').should('not.exist') + cy.get('#project').contains('Project') + cy.get('#deadline').contains('Deadline') + cy.get('#status').contains('Status') + cy.get('#archiveButton').should('not.exist') + }) it('renders archived as teacher', () => { const mockProps = { courseId: fixtures.id, archived: true, isStudent: false, - }; - cy.mount(); - cy.get('.MuiCard-root').should('exist'); - cy.get('.MuiCardContent-root').should('exist'); - cy.get('#courseInfo').should('have.text', 'undefined: undefined: 0').click(); - cy.get('#student').should('not.exist'); - cy.get('#teacherArchived').should('exist'); - cy.get('#teacherNonArchived').should('not.exist'); - cy.get('#project').contains('Project'); - cy.get('#deadline').contains('Deadline'); - cy.get('#status').should('not.exist'); - cy.get('#archiveButton').should('not.exist'); - }); + } + cy.mount( + + + + ) + cy.get('.MuiCard-root').should('exist') + cy.get('.MuiCardContent-root').should('exist') + cy.get('#courseInfo') + .should('have.text', 'undefined: undefined: 0') + .click() + cy.get('#student').should('not.exist') + cy.get('#teacherArchived').should('exist') + cy.get('#teacherNonArchived').should('not.exist') + cy.get('#project').contains('Project') + cy.get('#deadline').contains('Deadline') + cy.get('#status').should('not.exist') + cy.get('#archiveButton').should('not.exist') + }) it('renders non-archived as teacher', () => { const mockProps = { courseId: fixtures.id, archived: false, isStudent: false, - }; - cy.mount(); - cy.get('.MuiCard-root').should('exist'); - cy.get('.MuiCardContent-root').should('exist'); - cy.get('#courseInfo').should('have.text', 'undefined: undefined: 0').click(); - cy.get('#student').should('not.exist'); - cy.get('#teacherArchived').should('not.exist'); - cy.get('#teacherNonArchived').should('exist'); - cy.get('#project').contains('Project'); - cy.get('#deadline').contains('Deadline'); - cy.get('#status').should('not.exist'); - cy.get('#archiveButton').should('exist'); - }); -}); \ No newline at end of file + } + cy.mount( + + + + ) + cy.get('.MuiCard-root').should('exist') + cy.get('.MuiCardContent-root').should('exist') + cy.get('#courseInfo') + .should('have.text', 'undefined: undefined: 0') + .click() + cy.get('#student').should('not.exist') + cy.get('#teacherArchived').should('not.exist') + cy.get('#teacherNonArchived').should('exist') + cy.get('#project').contains('Project') + cy.get('#deadline').contains('Deadline') + cy.get('#status').should('not.exist') + cy.get('#archiveButton').should('exist') + }) +}) diff --git a/frontend/frontend/cypress/component/FileUploadButton.cy.tsx b/frontend/frontend/cypress/component/FileUploadButton.cy.tsx index 3975f3255..e4f1199d9 100644 --- a/frontend/frontend/cypress/component/FileUploadButton.cy.tsx +++ b/frontend/frontend/cypress/component/FileUploadButton.cy.tsx @@ -1,5 +1,5 @@ -import InputFileUpload from '../../src/components/FileUploadButton'; -import fixtures from '../fixtures/fixtures.json'; +import InputFileUpload from '../../src/components/FileUploadButton' +import fixtures from '../fixtures/fixtures.json' describe('FileUploadButton', () => { const mockProps = { @@ -8,25 +8,28 @@ describe('FileUploadButton', () => { onFileChange: () => {}, fileTypes: ['pdf'], path: '../fixtures/test.pdf', - }; + } it('renders', () => { - cy.mount(); - cy.get('#uploadButton').should('exist').should('have.text', fixtures.name); - cy.get('input[type=file]').should('exist'); - cy.contains(fixtures.tooltip).should('not.exist'); - cy.get('#uploadButton').trigger('mouseover'); - cy.contains(fixtures.tooltip).should('be.visible'); - cy.get('#uploadButton').trigger('mouseout'); - cy.contains(fixtures.tooltip).should('not.exist'); - cy.get('#clearButton').should('exist'); - }); + cy.mount() + cy.get('#uploadButton') + .should('exist') + .should('have.text', fixtures.name) + cy.get('input[type=file]').should('exist') + cy.contains(fixtures.tooltip).should('not.exist') + cy.get('#uploadButton').trigger('mouseover') + cy.contains(fixtures.tooltip).should('be.visible') + cy.get('#uploadButton').trigger('mouseout') + cy.contains(fixtures.tooltip).should('not.exist') + cy.get('#clearButton').should('exist') + }) it('no path', () => { - mockProps.path = ''; - cy.mount(); - cy.get('#uploadButton').should('exist').should('have.text', fixtures.name); - cy.get('#clearButton').should('not.exist'); - }); - -}); \ No newline at end of file + mockProps.path = '' + cy.mount() + cy.get('#uploadButton') + .should('exist') + .should('have.text', fixtures.name) + cy.get('#clearButton').should('not.exist') + }) +}) diff --git a/frontend/frontend/cypress/component/GroupAccessComponent.cy.tsx b/frontend/frontend/cypress/component/GroupAccessComponent.cy.tsx index 2640353e8..db464283f 100644 --- a/frontend/frontend/cypress/component/GroupAccessComponent.cy.tsx +++ b/frontend/frontend/cypress/component/GroupAccessComponent.cy.tsx @@ -1,7 +1,6 @@ import { GroupAccessComponent } from '../../src/components/GroupAccessComponent' import { BrowserRouter } from 'react-router-dom' - describe('GroupAccessComponent', () => { const mockProps = { assignmentid: 1, @@ -9,9 +8,13 @@ describe('GroupAccessComponent', () => { } it('toggles group access', () => { - cy.mount() + cy.mount( + + + + ) cy.get('#groupButton').should('not.exist') cy.get('#groupSwitch').click() cy.get('#groupButton').should('exist') }) -}) \ No newline at end of file +}) diff --git a/frontend/frontend/cypress/component/Header.cy.tsx b/frontend/frontend/cypress/component/Header.cy.tsx index ffbecd7fb..3b4fa3bb3 100644 --- a/frontend/frontend/cypress/component/Header.cy.tsx +++ b/frontend/frontend/cypress/component/Header.cy.tsx @@ -5,51 +5,62 @@ import fixtures from '../fixtures/fixtures.json' describe('Header', () => { const mockProps = { // variant: "not_main" | "editable" | "default"; - variant: "not_main", + variant: 'not_main', title: fixtures.title, - }; + } it('renders not main', () => { - cy.mount(
) - cy.get('.MuiToolbar-root').should('exist'); - cy.get('#title').should('exist').should('have.text', fixtures.title); - cy.get('#logo').click(); - cy.get('#editButton').should('not.exist'); - cy.get('#backButton').trigger('mouseover'); - cy.contains('back').should('be.visible'); - cy.get('#userMenu').click(); - cy.contains('en').should('be.visible'); - cy.contains('nl').should('be.visible'); - cy.contains('Logout').should('be.visible'); - - }); + cy.mount( + +
+ + ) + cy.get('.MuiToolbar-root').should('exist') + cy.get('#title').should('exist').should('have.text', fixtures.title) + cy.get('#logo').click() + cy.get('#editButton').should('not.exist') + cy.get('#backButton').trigger('mouseover') + cy.contains('back').should('be.visible') + cy.get('#userMenu').click() + cy.contains('en').should('be.visible') + cy.contains('nl').should('be.visible') + cy.contains('Logout').should('be.visible') + }) - it ('renders editable', () => { - mockProps.variant = "editable"; - cy.mount(
) - cy.get('.MuiToolbar-root').should('exist'); - cy.get('#title').should('exist').should('have.text', fixtures.title); - cy.get('#logo').click(); - cy.get('#editButton').should('exist'); - cy.get('#backButton').trigger('mouseover'); + it('renders editable', () => { + mockProps.variant = 'editable' + cy.mount( + +
+ + ) + cy.get('.MuiToolbar-root').should('exist') + cy.get('#title').should('exist').should('have.text', fixtures.title) + cy.get('#logo').click() + cy.get('#editButton').should('exist') + cy.get('#backButton').trigger('mouseover') cy.contains('back').should('be.visible') - cy.get('#userMenu').click(); - cy.contains('en').should('be.visible'); - cy.contains('nl').should('be.visible'); - cy.contains('Logout').should('be.visible'); - }); + cy.get('#userMenu').click() + cy.contains('en').should('be.visible') + cy.contains('nl').should('be.visible') + cy.contains('Logout').should('be.visible') + }) - it ('renders default', () => { - mockProps.variant = "default"; - cy.mount(
) - cy.get('.MuiToolbar-root').should('exist'); - cy.get('#title').should('exist').should('have.text', fixtures.title); - cy.get('#logo').click(); - cy.get('#editButton').should('not.exist'); - cy.get('#backButton').should('not.exist'); - cy.get('#userMenu').click(); - cy.contains('en').should('be.visible'); - cy.contains('nl').should('be.visible'); - cy.contains('Logout').should('be.visible'); - }); -}) \ No newline at end of file + it('renders default', () => { + mockProps.variant = 'default' + cy.mount( + +
+ + ) + cy.get('.MuiToolbar-root').should('exist') + cy.get('#title').should('exist').should('have.text', fixtures.title) + cy.get('#logo').click() + cy.get('#editButton').should('not.exist') + cy.get('#backButton').should('not.exist') + cy.get('#userMenu').click() + cy.contains('en').should('be.visible') + cy.contains('nl').should('be.visible') + cy.contains('Logout').should('be.visible') + }) +}) diff --git a/frontend/frontend/cypress/component/ItemList.cy.tsx b/frontend/frontend/cypress/component/ItemList.cy.tsx index 69ae86358..ef0272106 100644 --- a/frontend/frontend/cypress/component/ItemList.cy.tsx +++ b/frontend/frontend/cypress/component/ItemList.cy.tsx @@ -1,29 +1,50 @@ -import { ItemList } from '../../src/components/ItemList'; -import fixtures from '../fixtures/fixtures.json'; +import { ItemList } from '../../src/components/ItemList' +import fixtures from '../fixtures/fixtures.json' describe('ItemList', () => { const mockProps = { itemList: fixtures.itemList, - }; + } it('renders', () => { - cy.mount(); - cy.get('.MuiPaper-root').should('exist'); - cy.get('.MuiTable-root').should('exist'); - cy.get('#head').should('exist'); - cy.get('#head').find('#opdracht').should('exist').should('have.text', 'Opdracht'); - cy.get('#head').find('#deadline').should('exist').should('have.text', 'Deadline'); - cy.get('#head').find('#status').should('exist').should('have.text', 'Status'); - cy.get('#body').should('exist'); - cy.get('.MuiTableCell-root').should('exist'); - cy.get('.MuiTableRow-root').should('exist'); + cy.mount() + cy.get('.MuiPaper-root').should('exist') + cy.get('.MuiTable-root').should('exist') + cy.get('#head').should('exist') + cy.get('#head') + .find('#opdracht') + .should('exist') + .should('have.text', 'Opdracht') + cy.get('#head') + .find('#deadline') + .should('exist') + .should('have.text', 'Deadline') + cy.get('#head') + .find('#status') + .should('exist') + .should('have.text', 'Status') + cy.get('#body').should('exist') + cy.get('.MuiTableCell-root').should('exist') + cy.get('.MuiTableRow-root').should('exist') for (let i = 0; i < fixtures.itemList.length; i++) { - cy.get(`#${i}`).should('exist'); - cy.get(`#${i}`).find('#opdracht').should('exist').should('have.text', fixtures.itemList[i].opdracht); - cy.get(`#${i}`).find('#deadline').should('exist').should('have.text', fixtures.itemList[i].deadline); - cy.get(`#${i}`).find('#status').should('exist').should('have.text', fixtures.itemList[i].status); - cy.get(`#${i}`).find('#score').should('exist').should('have.text', fixtures.itemList[i].score); + cy.get(`#${i}`).should('exist') + cy.get(`#${i}`) + .find('#opdracht') + .should('exist') + .should('have.text', fixtures.itemList[i].opdracht) + cy.get(`#${i}`) + .find('#deadline') + .should('exist') + .should('have.text', fixtures.itemList[i].deadline) + cy.get(`#${i}`) + .find('#status') + .should('exist') + .should('have.text', fixtures.itemList[i].status) + cy.get(`#${i}`) + .find('#score') + .should('exist') + .should('have.text', fixtures.itemList[i].score) } - }); -}); \ No newline at end of file + }) +}) diff --git a/frontend/frontend/cypress/component/LanguageSwitcher.cy.tsx b/frontend/frontend/cypress/component/LanguageSwitcher.cy.tsx index e7e184be1..b264351f5 100644 --- a/frontend/frontend/cypress/component/LanguageSwitcher.cy.tsx +++ b/frontend/frontend/cypress/component/LanguageSwitcher.cy.tsx @@ -1,11 +1,9 @@ -import { LanguageSwitcher } from "../../src/components/LanguageSwitcher"; +import { LanguageSwitcher } from '../../src/components/LanguageSwitcher' describe('LanguageSwitcher', () => { - it('renders', () => { cy.mount() - cy.get('#en').should('exist').should('have.text', 'en'); - cy.get('#nl').should('exist').should('have.text', 'nl'); - }); - -}) \ No newline at end of file + cy.get('#en').should('exist').should('have.text', 'en') + cy.get('#nl').should('exist').should('have.text', 'nl') + }) +}) diff --git a/frontend/frontend/cypress/component/RestrictionCard.cy.tsx b/frontend/frontend/cypress/component/RestrictionCard.cy.tsx index d6a44fd87..3798ebb73 100644 --- a/frontend/frontend/cypress/component/RestrictionCard.cy.tsx +++ b/frontend/frontend/cypress/component/RestrictionCard.cy.tsx @@ -1,4 +1,4 @@ -import { RestrictionCard } from '../../src/components/RestrictionCard'; +import { RestrictionCard } from '../../src/components/RestrictionCard' describe('RestrictionCard', () => { const mockProps = { @@ -7,11 +7,13 @@ describe('RestrictionCard', () => { }, restrictions: [], setRestrictions: () => {}, - }; + } it('renders', () => { - cy.mount(); - cy.get('#script').should('exist').should('have.text', 'This is a test script'); - cy.get('#closeButton').should('exist').click(); - }); -}); \ No newline at end of file + cy.mount() + cy.get('#script') + .should('exist') + .should('have.text', 'This is a test script') + cy.get('#closeButton').should('exist').click() + }) +}) diff --git a/frontend/frontend/cypress/component/SubmissionListItemStudentPage.cy.tsx b/frontend/frontend/cypress/component/SubmissionListItemStudentPage.cy.tsx index 9d4d65bb1..b7468d08d 100644 --- a/frontend/frontend/cypress/component/SubmissionListItemStudentPage.cy.tsx +++ b/frontend/frontend/cypress/component/SubmissionListItemStudentPage.cy.tsx @@ -1,5 +1,5 @@ -import { SubmissionListItemStudentPage } from '../../src/components/SubmissionListItemStudentPage'; -import { BrowserRouter } from 'react-router-dom'; +import { SubmissionListItemStudentPage } from '../../src/components/SubmissionListItemStudentPage' +import { BrowserRouter } from 'react-router-dom' describe('SubmissionListItemStudentPage', () => { const mockProps = { @@ -8,27 +8,42 @@ describe('SubmissionListItemStudentPage', () => { status: true, assignment_id: 1, course_id: 1, - }; + } it('renders correct submission', () => { - cy.mount(); - cy.get('#submission' + mockProps.id).should('exist'); - cy.get('.MuiListItemButton-root').should('exist'); - cy.get('#submissionId').should('exist').should('have.text', mockProps.id); - cy.get('#submissionTimestamp').should('exist').should('have.text', mockProps.timestamp); - cy.get('#check').should('exist'); - cy.get('#cross').should('not.exist'); - }); + cy.mount( + + + + ) + cy.get('#submission' + mockProps.id).should('exist') + cy.get('.MuiListItemButton-root').should('exist') + cy.get('#submissionId') + .should('exist') + .should('have.text', mockProps.id) + cy.get('#submissionTimestamp') + .should('exist') + .should('have.text', mockProps.timestamp) + cy.get('#check').should('exist') + cy.get('#cross').should('not.exist') + }) it('renders incorrect submission', () => { - mockProps.status = false; - cy.mount(); - cy.get('#submission' + mockProps.id).should('exist'); - cy.get('.MuiListItemButton-root').should('exist'); - cy.get('#submissionId').should('exist').should('have.text', mockProps.id); - cy.get('#submissionTimestamp').should('exist').should('have.text', mockProps.timestamp); - cy.get('#check').should('not.exist'); - cy.get('#cross').should('exist'); - }); - -}); \ No newline at end of file + mockProps.status = false + cy.mount( + + + + ) + cy.get('#submission' + mockProps.id).should('exist') + cy.get('.MuiListItemButton-root').should('exist') + cy.get('#submissionId') + .should('exist') + .should('have.text', mockProps.id) + cy.get('#submissionTimestamp') + .should('exist') + .should('have.text', mockProps.timestamp) + cy.get('#check').should('not.exist') + cy.get('#cross').should('exist') + }) +}) diff --git a/frontend/frontend/cypress/component/SubmissionListItemTeacherPage.cy.tsx b/frontend/frontend/cypress/component/SubmissionListItemTeacherPage.cy.tsx index 6216b6f6f..351b202ad 100644 --- a/frontend/frontend/cypress/component/SubmissionListItemTeacherPage.cy.tsx +++ b/frontend/frontend/cypress/component/SubmissionListItemTeacherPage.cy.tsx @@ -1,24 +1,30 @@ -import { SubmissionListItemTeacherPage } from '../../src/components/SubmissionListItemTeacherPage'; -import { BrowserRouter } from 'react-router-dom'; +import { SubmissionListItemTeacherPage } from '../../src/components/SubmissionListItemTeacherPage' +import { BrowserRouter } from 'react-router-dom' describe('SubmissionListItemTeacherPage', () => { const mockProps = { group_id: 1, assignment_id: 1, course_id: 1, - }; + } it('renders correct submission', () => { // The data needs to be fetched from the backend, so we can't check that - cy.mount(); - cy.get('#submission' + mockProps.group_id).should('exist'); - cy.get('.MuiListItemButton-root').should('exist'); - cy.get('#submissionId').should('exist').should('have.text', mockProps.group_id); - cy.get('#submissionTimestamp').should('exist'); - cy.get('#submissionScore').should('exist'); - cy.get('#check').should('not.exist'); - cy.get('#cross').should('not.exist'); - cy.get('#downloadIconGray').should('exist'); - cy.get('#downloadIconColor').should('not.exist'); - }); -}); \ No newline at end of file + cy.mount( + + + + ) + cy.get('#submission' + mockProps.group_id).should('exist') + cy.get('.MuiListItemButton-root').should('exist') + cy.get('#submissionId') + .should('exist') + .should('have.text', mockProps.group_id) + cy.get('#submissionTimestamp').should('exist') + cy.get('#submissionScore').should('exist') + cy.get('#check').should('not.exist') + cy.get('#cross').should('not.exist') + cy.get('#downloadIconGray').should('exist') + cy.get('#downloadIconColor').should('not.exist') + }) +}) diff --git a/frontend/frontend/cypress/component/TabSwitcher.cy.tsx b/frontend/frontend/cypress/component/TabSwitcher.cy.tsx index 64d31c4fd..dd5e38175 100644 --- a/frontend/frontend/cypress/component/TabSwitcher.cy.tsx +++ b/frontend/frontend/cypress/component/TabSwitcher.cy.tsx @@ -1,44 +1,42 @@ -import TabSwitcher from "../../src/components/TabSwitcher"; -import { ThemeProvider } from '@mui/system'; -import theme from '../../src/Theme.ts'; - +import TabSwitcher from '../../src/components/TabSwitcher' +import { ThemeProvider } from '@mui/system' +import theme from '../../src/Theme.ts' describe('TabSwitcher', () => { const mockProps = { titles: ['assignment', 'students', 'groups'], nodes: [
node1
,
node2
,
node3
], - }; - + } + it('renders', () => { cy.mount( - + - ); + ) // the titles do not render because of internationalization? - cy.get('#tab0').should('exist'); - cy.get('#node0').should('exist').should('be.visible'); - cy.get('#node1').should('exist').should('not.be.visible'); - cy.get('#node2').should('exist').should('not.be.visible'); - cy.contains('node1').should('exist'); - cy.contains('node2').should('not.exist'); - cy.contains('node3').should('not.exist'); - - cy.get('#tab1').click(); - cy.get('#node0').should('exist').should('not.be.visible'); - cy.get('#node1').should('exist').should('be.visible'); - cy.get('#node2').should('exist').should('not.be.visible'); - cy.contains('node1').should('not.exist'); - cy.contains('node2').should('exist'); - cy.contains('node3').should('not.exist'); + cy.get('#tab0').should('exist') + cy.get('#node0').should('exist').should('be.visible') + cy.get('#node1').should('exist').should('not.be.visible') + cy.get('#node2').should('exist').should('not.be.visible') + cy.contains('node1').should('exist') + cy.contains('node2').should('not.exist') + cy.contains('node3').should('not.exist') - cy.get('#tab2').click(); - cy.get('#node0').should('exist').should('not.be.visible'); - cy.get('#node1').should('exist').should('not.be.visible'); - cy.get('#node2').should('exist').should('be.visible'); - cy.contains('node1').should('not.exist'); - cy.contains('node2').should('not.exist'); - cy.contains('node3').should('exist'); + cy.get('#tab1').click() + cy.get('#node0').should('exist').should('not.be.visible') + cy.get('#node1').should('exist').should('be.visible') + cy.get('#node2').should('exist').should('not.be.visible') + cy.contains('node1').should('not.exist') + cy.contains('node2').should('exist') + cy.contains('node3').should('not.exist') - }); -}); \ No newline at end of file + cy.get('#tab2').click() + cy.get('#node0').should('exist').should('not.be.visible') + cy.get('#node1').should('exist').should('not.be.visible') + cy.get('#node2').should('exist').should('be.visible') + cy.contains('node1').should('not.exist') + cy.contains('node2').should('not.exist') + cy.contains('node3').should('exist') + }) +}) diff --git a/frontend/frontend/cypress/component/WarningPopup.cy.tsx b/frontend/frontend/cypress/component/WarningPopup.cy.tsx index 8279c4c48..b2bb188d1 100644 --- a/frontend/frontend/cypress/component/WarningPopup.cy.tsx +++ b/frontend/frontend/cypress/component/WarningPopup.cy.tsx @@ -1,5 +1,5 @@ -import WarningPopup from '../../src/components/WarningPopup'; -import fixtures from '../fixtures/fixtures.json'; +import WarningPopup from '../../src/components/WarningPopup' +import fixtures from '../fixtures/fixtures.json' describe('WarningPopup', () => { const mockProps = { @@ -9,23 +9,29 @@ describe('WarningPopup', () => { open: true, handleClose: () => {}, doAction: () => {}, - }; + } it('renders', () => { - cy.mount(); + cy.mount() // cancel not visible because of internationlization - cy.get('#popUpTitle').should('exist').should('have.text', fixtures.title); - cy.get('#popUpText').should('exist').should('have.text', fixtures.warning); - cy.get('#cancelButton').should('exist'); - cy.get('#actionButton').should('exist').should('have.text', fixtures.button); - }); + cy.get('#popUpTitle') + .should('exist') + .should('have.text', fixtures.title) + cy.get('#popUpText') + .should('exist') + .should('have.text', fixtures.warning) + cy.get('#cancelButton').should('exist') + cy.get('#actionButton') + .should('exist') + .should('have.text', fixtures.button) + }) it('renders closed', () => { - mockProps.open = false; - cy.mount(); - cy.get('#popUpTitle').should('not.exist'); - cy.get('#popUpText').should('not.exist'); - cy.get('#cancelButton').should('not.exist'); - cy.get('#actionButton').should('not.exist'); - }); -}); \ No newline at end of file + mockProps.open = false + cy.mount() + cy.get('#popUpTitle').should('not.exist') + cy.get('#popUpText').should('not.exist') + cy.get('#cancelButton').should('not.exist') + cy.get('#actionButton').should('not.exist') + }) +}) diff --git a/frontend/frontend/cypress/e2e/pages/MainPage.cy.tsx b/frontend/frontend/cypress/e2e/pages/MainPage.cy.tsx index 16fa86991..dc3c85e3e 100644 --- a/frontend/frontend/cypress/e2e/pages/MainPage.cy.tsx +++ b/frontend/frontend/cypress/e2e/pages/MainPage.cy.tsx @@ -2,26 +2,21 @@ describe('mainpage', () => { beforeEach(() => { - cy.visit('http://localhost:5173/') - cy.task('db:seed') - cy.loginByAuth0Api( - Cypress.env('auth0_username'), - Cypress.env('auth0_password') - ) + cy.visit('http://localhost:5173/') + cy.task('db:seed') + cy.loginByAuth0Api( + Cypress.env('auth0_username'), + Cypress.env('auth0_password') + ) }) - - it('displays two todo items by default', () => { - cy.get('div').should('exist') + it('displays two todo items by default', () => { + cy.get('div').should('exist') }) - beforeEach(function () { - - }) - - it('shows onboarding', function () { - cy.contains('Get Started').should('be.visible') - }) + beforeEach(function () {}) + it('shows onboarding', function () { + cy.contains('Get Started').should('be.visible') + }) }) - \ No newline at end of file diff --git a/frontend/frontend/cypress/page/addChangeAssignmentPage/AddChangeAssignmentPage.cy.tsx b/frontend/frontend/cypress/page/addChangeAssignmentPage/AddChangeAssignmentPage.cy.tsx index 887df0a6b..fc4918257 100644 --- a/frontend/frontend/cypress/page/addChangeAssignmentPage/AddChangeAssignmentPage.cy.tsx +++ b/frontend/frontend/cypress/page/addChangeAssignmentPage/AddChangeAssignmentPage.cy.tsx @@ -1,56 +1,68 @@ -import {AddChangeAssignmentPage} from '../../../src/pages/addChangeAssignmentPage/AddChangeAssignmentPage'; // Check if the file path is correct and if the required module exists in the specified location. -import {BrowserRouter} from 'react-router-dom'; -import fixtures from '../../fixtures/fixtures.json'; +import { AddChangeAssignmentPage } from '../../../src/pages/addChangeAssignmentPage/AddChangeAssignmentPage' // Check if the file path is correct and if the required module exists in the specified location. +import { BrowserRouter } from 'react-router-dom' describe('AddChangeAssignmentPage', () => { - it('renders assignment name', () => { - cy.mount(); + cy.mount( + + + + ) // check if the header is rendered - cy.get('#logo').should('exist'); - cy.get('#userMenu').should('exist'); + cy.get('#logo').should('exist') + cy.get('#userMenu').should('exist') // title field - cy.get('#titleField').should('have.attr', 'placeholder', 'Title'); - cy.get('#titleField').type('New title'); - cy.get('#titleField').should('have.value', 'New title'); - cy.get('#uploadButton').should('exist'); + cy.get('#titleField').should('have.attr', 'placeholder', 'Title') + cy.get('#titleField').type('New title') + cy.get('#titleField').should('have.value', 'New title') + cy.get('#uploadButton').should('exist') // deadline field - cy.get('#deadline').should('have.text', 'Deadline:'); - cy.get('#deadlineField').should('have.attr', 'placeholder', 'DD/MM/YYYY hh:mm'); - cy.get('#deadlineField').type('311220252359'); - cy.get('#deadlineField').should('have.value', '31/12/2025 23:59'); + cy.get('#deadline').should('have.text', 'Deadline:') + cy.get('#deadlineField').should( + 'have.attr', + 'placeholder', + 'DD/MM/YYYY hh:mm' + ) + cy.get('#deadlineField').type('311220252359') + cy.get('#deadlineField').should('have.value', '31/12/2025 23:59') // extra deadline field - cy.get('#extraDeadline').should('have.text', 'Extra Deadline:'); - cy.get('#extraDeadlineField').should('have.attr', 'placeholder', 'DD/MM/YYYY hh:mm'); - cy.get('#extraDeadlineField').type('311220262359'); - cy.get('#extraDeadlineField').should('have.value', '31/12/2026 23:59'); + cy.get('#extraDeadline').should('have.text', 'Extra Deadline:') + cy.get('#extraDeadlineField').should( + 'have.attr', + 'placeholder', + 'DD/MM/YYYY hh:mm' + ) + cy.get('#extraDeadlineField').type('311220262359') + cy.get('#extraDeadlineField').should('have.value', '31/12/2026 23:59') //description field - cy.get('#descriptionField').should('have.attr', 'placeholder', 'Description'); - cy.get('#descriptionField').type('New description'); - cy.get('#descriptionField').should('have.value', 'New description'); + cy.get('#descriptionField').should( + 'have.attr', + 'placeholder', + 'Description' + ) + cy.get('#descriptionField').type('New description') + cy.get('#descriptionField').should('have.value', 'New description') // restrictions field - cy.get('#addRestrictionButton').should('exist').click(); - cy.get('#upload').should('exist'); - cy.get('#newScript').should('exist'); - cy.get('#fileExtensionCheck').should('exist'); - cy.get('#filesPresentCheck').should('exist'); - cy.get('#mustPassSwitch').should('exist'); - cy.get('#cancelButton').should('exist').click(); + cy.get('#addRestrictionButton').should('exist').click() + cy.get('#upload').should('exist') + cy.get('#newScript').should('exist') + cy.get('#fileExtensionCheck').should('exist') + cy.get('#filesPresentCheck').should('exist') + cy.get('#mustPassSwitch').should('exist') + cy.get('#cancelButton').should('exist').click() // max score field - cy.get('#maxScore').should('have.text', 'Max Score:'); - cy.get('#maxScoreField').should('have.value', '20'); - cy.get('#maxScoreField').clear().type('30'); - cy.get('#maxScoreField').should('have.value', '30'); + cy.get('#maxScore').should('have.text', 'Max Score:') + cy.get('#maxScoreField').should('have.value', '20') + cy.get('#maxScoreField').clear().type('30') + cy.get('#maxScoreField').should('have.value', '30') // all buttons - cy.get('#visibilityOff').should('exist').click(); - cy.get('#visibilityOn').should('exist').click(); - cy.get('#cancel').should('exist').click(); + cy.get('#visibilityOff').should('exist').click() + cy.get('#visibilityOn').should('exist').click() + cy.get('#cancel').should('exist').click() // these have popups - cy.get('#submit').should('exist').click(); - cy.get('#cancelButton').should('exist').click(); - cy.get('#delete').should('exist').click(); - cy.get('#actionButton').should('exist').click(); - - }); - -}); \ No newline at end of file + cy.get('#submit').should('exist').click() + cy.get('#cancelButton').should('exist').click() + cy.get('#delete').should('exist').click() + cy.get('#actionButton').should('exist').click() + }) +}) diff --git a/frontend/frontend/cypress/page/addChangeAssignmentPage/AddRestrictionButton.cy.tsx b/frontend/frontend/cypress/page/addChangeAssignmentPage/AddRestrictionButton.cy.tsx index fe324a96c..00dff4b1d 100644 --- a/frontend/frontend/cypress/page/addChangeAssignmentPage/AddRestrictionButton.cy.tsx +++ b/frontend/frontend/cypress/page/addChangeAssignmentPage/AddRestrictionButton.cy.tsx @@ -1,22 +1,24 @@ -import AddRestrictionButton from '../../../src/pages/addChangeAssignmentPage/AddRestrictionButton'; -import {BrowserRouter} from 'react-router-dom'; +import AddRestrictionButton from '../../../src/pages/addChangeAssignmentPage/AddRestrictionButton' +import { BrowserRouter } from 'react-router-dom' describe('AddRestrictionsButton', () => { - const mockProps = { restrictions: [], - setRestrictions: () => {} - }; + setRestrictions: () => {}, + } it('renders the restrictions add button', () => { - cy.mount(); - cy.get('#addRestrictionButton').should('exist').click(); - cy.get('#upload').should('exist'); - cy.get('#newScript').should('exist'); - cy.get('#fileExtensionCheck').should('exist'); - cy.get('#filesPresentCheck').should('exist'); - cy.get('#mustPassSwitch').should('exist').click(); - cy.get('#cancelButton').should('exist').click(); - }); - -}); \ No newline at end of file + cy.mount( + + + + ) + cy.get('#addRestrictionButton').should('exist').click() + cy.get('#upload').should('exist') + cy.get('#newScript').should('exist') + cy.get('#fileExtensionCheck').should('exist') + cy.get('#filesPresentCheck').should('exist') + cy.get('#mustPassSwitch').should('exist').click() + cy.get('#cancelButton').should('exist').click() + }) +}) diff --git a/frontend/frontend/cypress/page/addChangeAssignmentPage/RestrictionsDialog.cy.tsx b/frontend/frontend/cypress/page/addChangeAssignmentPage/RestrictionsDialog.cy.tsx index 5e4859b16..31f29406a 100644 --- a/frontend/frontend/cypress/page/addChangeAssignmentPage/RestrictionsDialog.cy.tsx +++ b/frontend/frontend/cypress/page/addChangeAssignmentPage/RestrictionsDialog.cy.tsx @@ -1,21 +1,23 @@ -import RestrictionsDialog from '../../../src/pages/addChangeAssignmentPage/RestrictionsDialog'; -import {BrowserRouter} from 'react-router-dom'; +import RestrictionsDialog from '../../../src/pages/addChangeAssignmentPage/RestrictionsDialog' +import { BrowserRouter } from 'react-router-dom' describe('RestrictionsDialog', () => { - const mockProps = { restrictions: [], setRestrictions: () => {}, closeParentDialog: () => {}, - }; + } it('renders the dialog', () => { - cy.mount(); - cy.get('#upload').should('exist'); - cy.get('#newScript').should('exist'); - cy.get('#fileExtensionCheck').should('exist'); - cy.get('#filesPresentCheck').should('exist'); - cy.get('#mustPassSwitch').should('exist').click(); - }); - -}); \ No newline at end of file + cy.mount( + + + + ) + cy.get('#upload').should('exist') + cy.get('#newScript').should('exist') + cy.get('#fileExtensionCheck').should('exist') + cy.get('#filesPresentCheck').should('exist') + cy.get('#mustPassSwitch').should('exist').click() + }) +}) diff --git a/frontend/frontend/cypress/page/assignmentPage/AssignmentPage.cy.tsx b/frontend/frontend/cypress/page/assignmentPage/AssignmentPage.cy.tsx index a1156c52d..fbf6f90ab 100644 --- a/frontend/frontend/cypress/page/assignmentPage/AssignmentPage.cy.tsx +++ b/frontend/frontend/cypress/page/assignmentPage/AssignmentPage.cy.tsx @@ -1,18 +1,20 @@ -import {AssignmentPage} from '../../../src/pages/assignmentPage/AssignmentPage'; // Check if the file path is correct and if the required module exists in the specified location. -import {BrowserRouter} from 'react-router-dom'; -import fixtures from '../../fixtures/fixtures.json'; +import { AssignmentPage } from '../../../src/pages/assignmentPage/AssignmentPage' // Check if the file path is correct and if the required module exists in the specified location. +import { BrowserRouter } from 'react-router-dom' describe('AssignmentPage', () => { - it('renders', () => { - cy.mount(); + cy.mount( + + + + ) // this renders for a student, teacher will be tested in e2e tests - cy.get('#logo').should('exist'); - cy.get('#userMenu').should('exist'); + cy.get('#logo').should('exist') + cy.get('#userMenu').should('exist') - cy.contains('Deadline: no deadline'); - cy.contains('Status'); - cy.contains('Confirm Upload'); - cy.get('#uploadButton').should('exist'); - }); -}); \ No newline at end of file + cy.contains('Deadline: no deadline') + cy.contains('Status') + cy.contains('Confirm Upload') + cy.get('#uploadButton').should('exist') + }) +}) diff --git a/frontend/frontend/cypress/page/groupsPage/GroupsPage.cy.tsx b/frontend/frontend/cypress/page/groupsPage/GroupsPage.cy.tsx index 1ad559ac2..45a2af162 100644 --- a/frontend/frontend/cypress/page/groupsPage/GroupsPage.cy.tsx +++ b/frontend/frontend/cypress/page/groupsPage/GroupsPage.cy.tsx @@ -1,12 +1,15 @@ -import { GroupsPage } from "../../../src/pages/groupsPage/GroupsPage"; -import { BrowserRouter } from "react-router-dom"; -import fixtures from "../../fixtures/fixtures.json"; +import { GroupsPage } from '../../../src/pages/groupsPage/GroupsPage' +import { BrowserRouter } from 'react-router-dom' -describe("GroupsPage", () => { - it("renders", () => { - cy.mount(); - cy.get("#logo").should("exist"); - cy.get("#userMenu").should("exist"); - cy.contains("Project 1: groepen"); - }); -}); \ No newline at end of file +describe('GroupsPage', () => { + it('renders', () => { + cy.mount( + + + + ) + cy.get('#logo').should('exist') + cy.get('#userMenu').should('exist') + cy.contains('Project 1: groepen') + }) +}) diff --git a/frontend/frontend/cypress/page/loginPage/LoginPage.cy.tsx b/frontend/frontend/cypress/page/loginPage/LoginPage.cy.tsx index a9ee7ef25..fb5473745 100644 --- a/frontend/frontend/cypress/page/loginPage/LoginPage.cy.tsx +++ b/frontend/frontend/cypress/page/loginPage/LoginPage.cy.tsx @@ -1,11 +1,15 @@ -import {LoginPage} from '../../../src/pages/loginPage/LoginPage.tsx'; -import {BrowserRouter} from 'react-router-dom'; +import { LoginPage } from '../../../src/pages/loginPage/LoginPage.tsx' +import { BrowserRouter } from 'react-router-dom' describe('LoginPage', () => { it('renders', () => { - cy.mount(); - cy.get('#logo').should('exist'); - cy.get('#loginButton').should('exist'); - cy.contains('Pigeonhole'); - }); -}); \ No newline at end of file + cy.mount( + + + + ) + cy.get('#logo').should('exist') + cy.get('#loginButton').should('exist') + cy.contains('Pigeonhole') + }) +}) diff --git a/frontend/frontend/cypress/page/mainPage/ArchivedView.cy.tsx b/frontend/frontend/cypress/page/mainPage/ArchivedView.cy.tsx index 8364bf685..d8b0a2ae3 100644 --- a/frontend/frontend/cypress/page/mainPage/ArchivedView.cy.tsx +++ b/frontend/frontend/cypress/page/mainPage/ArchivedView.cy.tsx @@ -1,29 +1,38 @@ -import { ArchivedView } from '../../../src/pages/mainPage/ArchivedView'; -import {BrowserRouter} from 'react-router-dom'; +import { ArchivedView } from '../../../src/pages/mainPage/ArchivedView' +import { BrowserRouter } from 'react-router-dom' describe('ArchivedView', () => { - const mockProps = { isStudent: false, archivedCourses: [], pinnedCourses: [1], pinCourse: () => {}, - }; + } it('renders no archived courses', () => { - cy.mount(); - cy.get('div').should('exist'); - cy.contains('Project').should('not.exist'); - cy.contains('Deadline').should('not.exist'); - }); + cy.mount( + + + + ) + cy.get('div').should('exist') + cy.contains('Project').should('not.exist') + cy.contains('Deadline').should('not.exist') + }) it('renders archived courses', () => { - mockProps.archivedCourses = [{vak_id: 1},{vak_id: 2},]; - cy.mount(); - cy.get('div').should('exist'); - cy.contains('Project').should('exist'); - cy.contains('Deadline').should('exist'); - cy.get('.MuiPaper-root').should('have.length', mockProps.archivedCourses.length); - }); - -}); \ No newline at end of file + mockProps.archivedCourses = [{ vak_id: 1 }, { vak_id: 2 }] + cy.mount( + + + + ) + cy.get('div').should('exist') + cy.contains('Project').should('exist') + cy.contains('Deadline').should('exist') + cy.get('.MuiPaper-root').should( + 'have.length', + mockProps.archivedCourses.length + ) + }) +}) diff --git a/frontend/frontend/cypress/page/mainPage/CoursesView.cy.tsx b/frontend/frontend/cypress/page/mainPage/CoursesView.cy.tsx index 48ffa80f8..d7b35b353 100644 --- a/frontend/frontend/cypress/page/mainPage/CoursesView.cy.tsx +++ b/frontend/frontend/cypress/page/mainPage/CoursesView.cy.tsx @@ -1,17 +1,19 @@ -import { CoursesView } from '../../../src/pages/mainPage/CoursesView'; -import {BrowserRouter} from 'react-router-dom'; +import { CoursesView } from '../../../src/pages/mainPage/CoursesView' +import { BrowserRouter } from 'react-router-dom' describe('CoursesView', () => { - const mockProps = { isStudent: false, - activecourses: [] - }; + activecourses: [], + } it('renders the CoursesView', () => { - cy.mount(); + cy.mount( + + + + ) // Het enige dat in deze pagina gegarandeerd is is een plus button voor de vakken. - cy.get('button').should('exist'); - }); - -}); \ No newline at end of file + cy.get('button').should('exist') + }) +}) diff --git a/frontend/frontend/cypress/page/scoresPage/ProjectScoresPage.cy.tsx b/frontend/frontend/cypress/page/scoresPage/ProjectScoresPage.cy.tsx index 8c2ae1499..ff2521899 100644 --- a/frontend/frontend/cypress/page/scoresPage/ProjectScoresPage.cy.tsx +++ b/frontend/frontend/cypress/page/scoresPage/ProjectScoresPage.cy.tsx @@ -1,15 +1,19 @@ -import { ProjectScoresPage } from "../../../src/pages/scoresPage/ProjectScoresPage"; -import { BrowserRouter } from "react-router-dom"; +import { ProjectScoresPage } from '../../../src/pages/scoresPage/ProjectScoresPage' +import { BrowserRouter } from 'react-router-dom' -describe("ProjectScoresPage", () => { - it("renders", () => { - cy.mount(); - cy.get("#logo").should("exist"); - cy.get("#userMenu").should("exist"); - cy.contains("Scores"); - cy.get('#exportSubmissionsButton').should('exist'); - cy.get('#uploadScoresButton').should('exist'); - cy.get('#saveScoresButton').should('exist'); - cy.get('#deleteScoresButton').should('exist'); - }); -}); \ No newline at end of file +describe('ProjectScoresPage', () => { + it('renders', () => { + cy.mount( + + + + ) + cy.get('#logo').should('exist') + cy.get('#userMenu').should('exist') + cy.contains('Scores') + cy.get('#exportSubmissionsButton').should('exist') + cy.get('#uploadScoresButton').should('exist') + cy.get('#saveScoresButton').should('exist') + cy.get('#deleteScoresButton').should('exist') + }) +}) diff --git a/frontend/frontend/cypress/page/scoresPage/StudentScoreListItem.cy.tsx b/frontend/frontend/cypress/page/scoresPage/StudentScoreListItem.cy.tsx index f852b0e81..40a4ce9b2 100644 --- a/frontend/frontend/cypress/page/scoresPage/StudentScoreListItem.cy.tsx +++ b/frontend/frontend/cypress/page/scoresPage/StudentScoreListItem.cy.tsx @@ -1,5 +1,5 @@ -import { StudentScoreListItem } from '../../../src/pages/scoresPage/StudentScoreListItem'; -import fixtures from '../../fixtures/fixtures.json'; +import { StudentScoreListItem } from '../../../src/pages/scoresPage/StudentScoreListItem' +import fixtures from '../../fixtures/fixtures.json' describe('StudentScoreListItem', () => { const mockProps = { @@ -10,13 +10,15 @@ describe('StudentScoreListItem', () => { score: fixtures.score, maxScore: fixtures.maxScore, changeScore: () => {}, - }; + } it('renders', () => { - cy.mount(); + cy.mount() // The student needs to be fetched from the backend, so we can't check the name - cy.get(`#group${mockProps.groupNumber}`).should('exist'); - cy.get('#noScore').should('exist').should('contain', '0/' + mockProps.maxScore); - cy.get('#downloadSubmissionButton').should('exist'); - }); -}); \ No newline at end of file + cy.get(`#group${mockProps.groupNumber}`).should('exist') + cy.get('#noScore') + .should('exist') + .should('contain', '0/' + mockProps.maxScore) + cy.get('#downloadSubmissionButton').should('exist') + }) +}) diff --git a/frontend/frontend/cypress/page/scoresPage/studentsView.cy.tsx b/frontend/frontend/cypress/page/scoresPage/studentsView.cy.tsx index 8b5cc6182..feb3e4bfe 100644 --- a/frontend/frontend/cypress/page/scoresPage/studentsView.cy.tsx +++ b/frontend/frontend/cypress/page/scoresPage/studentsView.cy.tsx @@ -1,20 +1,23 @@ -import { StudentsView } from "../../../src/pages/scoresPage/StudentsView"; -import { BrowserRouter } from "react-router-dom"; -import fixtures from "../../fixtures/fixtures.json"; - -describe("StudentsView", () => { +import { StudentsView } from '../../../src/pages/scoresPage/StudentsView' +import { BrowserRouter } from 'react-router-dom' +import fixtures from '../../fixtures/fixtures.json' +describe('StudentsView', () => { const mockProps = { project: fixtures.fullProject, groepen: fixtures.scoreGroups, setGroepen: () => {}, changeScore: () => {}, - }; - - it("renders", () => { - cy.mount(); - for (let i = 0; i < mockProps.groepen.length; i++) { - cy.get(`#group${mockProps.groepen[i].group_number}`).should('exist'); } - }); -}); \ No newline at end of file + + it('renders', () => { + cy.mount( + + + + ) + for (let i = 0; i < mockProps.groepen.length; i++) { + cy.get(`#group${mockProps.groepen[i].group_number}`).should('exist') + } + }) +}) diff --git a/frontend/frontend/cypress/page/subjectsPage/AssignmentListItemSubjectsPage.cy.tsx b/frontend/frontend/cypress/page/subjectsPage/AssignmentListItemSubjectsPage.cy.tsx index ee6689195..e8bbdf8e7 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,54 @@ 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); - }); + 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 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 + 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') + }) +}) diff --git a/frontend/frontend/cypress/page/subjectsPage/ProjectsView.cy.tsx b/frontend/frontend/cypress/page/subjectsPage/ProjectsView.cy.tsx index 00b716070..0f73fdf53 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' 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/SubjectsPage.cy.tsx b/frontend/frontend/cypress/page/subjectsPage/SubjectsPage.cy.tsx index 0a8c9e668..14784ca5a 100644 --- a/frontend/frontend/cypress/page/subjectsPage/SubjectsPage.cy.tsx +++ b/frontend/frontend/cypress/page/subjectsPage/SubjectsPage.cy.tsx @@ -1,6 +1,3 @@ -import { SubjectsPage } from '../../../src/pages/subjectsPage/SubjectsPage' -import { BrowserRouter } from 'react-router-dom' - describe('SubjectsPage', () => { it('renders the SubjectsPage', () => { // Mount the SubjectsPage component within a BrowserRouter diff --git a/frontend/frontend/cypress/page/submissionPage/SubmissionPage.cy.tsx b/frontend/frontend/cypress/page/submissionPage/SubmissionPage.cy.tsx index 136f7cf03..f9bc1eaa9 100644 --- a/frontend/frontend/cypress/page/submissionPage/SubmissionPage.cy.tsx +++ b/frontend/frontend/cypress/page/submissionPage/SubmissionPage.cy.tsx @@ -1,16 +1,19 @@ -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' 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('#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') + }) +}) diff --git a/frontend/frontend/cypress/support/commands.ts b/frontend/frontend/cypress/support/commands.ts index 698b01a42..95857aea4 100644 --- a/frontend/frontend/cypress/support/commands.ts +++ b/frontend/frontend/cypress/support/commands.ts @@ -34,4 +34,4 @@ // visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable // } // } -// } \ No newline at end of file +// } diff --git a/frontend/frontend/cypress/support/component.ts b/frontend/frontend/cypress/support/component.ts index 37f59edbe..bf23061e1 100644 --- a/frontend/frontend/cypress/support/component.ts +++ b/frontend/frontend/cypress/support/component.ts @@ -25,15 +25,15 @@ import { mount } from 'cypress/react18' // your custom command. // Alternatively, can be defined in cypress/support/component.d.ts // with a at the top of your spec. -declare global { - namespace Cypress { - interface Chainable { - mount: typeof mount - } - } -} +// declare global { +// namespace Cypress { +// interface Chainable { +// mount: typeof mount +// } +// } +// } Cypress.Commands.add('mount', mount) // Example use: -// cy.mount() \ No newline at end of file +// cy.mount() diff --git a/frontend/frontend/cypress/support/e2e.ts b/frontend/frontend/cypress/support/e2e.ts index f80f74f8e..ed5730de1 100644 --- a/frontend/frontend/cypress/support/e2e.ts +++ b/frontend/frontend/cypress/support/e2e.ts @@ -17,4 +17,4 @@ import './commands' // Alternatively you can use CommonJS syntax: -// require('./commands') \ No newline at end of file +// require('./commands') diff --git a/frontend/frontend/package.json b/frontend/frontend/package.json index 0ee31d1be..0bfbf703c 100644 --- a/frontend/frontend/package.json +++ b/frontend/frontend/package.json @@ -9,7 +9,10 @@ "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview", "format": "prettier --write .", - "prepare": "cd ../.. && husky frontend/frontend/.husky" + "prepare": "cd ../.. && husky frontend/frontend/.husky", + "cypress-open": "node_modules/.bin/cypress open", + "cypress-e2e": "node_modules/.bin/cypress run", + "cypress-component": "node_modules/.bin/cypress run --component" }, "dependencies": { "@azure/msal-browser": "^3.11.0", diff --git a/frontend/frontend/src/components/CourseCard.tsx b/frontend/frontend/src/components/CourseCard.tsx index c59b055b1..e305961b6 100644 --- a/frontend/frontend/src/components/CourseCard.tsx +++ b/frontend/frontend/src/components/CourseCard.tsx @@ -135,7 +135,7 @@ export function CourseCard({ fetchData().catch((error) => console.error('Error fetching data:', error) ) - }, [courseId]) + }, [courseId, isStudent, userid]) // Function to handle card click event. const handleCardClick = () => { diff --git a/frontend/frontend/src/components/DeadlineCalendar.tsx b/frontend/frontend/src/components/DeadlineCalendar.tsx index 4bb319404..4f4e945c1 100644 --- a/frontend/frontend/src/components/DeadlineCalendar.tsx +++ b/frontend/frontend/src/components/DeadlineCalendar.tsx @@ -65,15 +65,16 @@ function ServerDay( key={props.day.toString()} overlap="circular" badgeContent={ - isSelected - ? props.day.isBefore(dayjs()) - ? ( - - ) - : ( - - ) - : undefined + isSelected ? ( + props.day.isBefore(dayjs()) ? ( + + ) : ( + + ) + ) : undefined } >