linting voor component tests

SELab-2 · May 23, 2024 · 70055c3 · 70055c3
1 parent 4deae73
commit 70055c3
Show file tree

Hide file tree

Showing 12 changed files with 399 additions and 284 deletions.
diff --git a/frontend/frontend/cypress/component/AssignmentListItem.cy.tsx b/frontend/frontend/cypress/component/AssignmentListItem.cy.tsx
@@ -1,76 +1,108 @@
-import { AssignmentListItem } from '../../src/components/AssignmentListItem';
-import { BrowserRouter } from 'react-router-dom';
-import fixtures from '../fixtures/fixtures.json';
-import { SubmissionStatus } from '../../src/pages/submissionPage/SubmissionPage';
+import { AssignmentListItem } from '../../src/components/AssignmentListItem'
+import { BrowserRouter } from 'react-router-dom'
+import fixtures from '../fixtures/fixtures.json'
+import { SubmissionStatus } from '../../src/pages/submissionPage/SubmissionPage'
 
 describe('AssignmentListItem', () => {
-  const mockProps = {
-    id: fixtures.id,
-    course_id: fixtures.course_id,
-    projectName: fixtures.project,
-    dueDate: new Date().toLocaleDateString(),
-    status: SubmissionStatus.FAIL,
-    isStudent: true,
-  };
+    const mockProps = {
+        id: fixtures.id,
+        course_id: fixtures.course_id,
+        projectName: fixtures.project,
+        dueDate: new Date().toLocaleDateString(),
+        status: SubmissionStatus.FAIL,
+        isStudent: true,
+    }
 
-  it('renders with cross', () => {
-    cy.mount(<BrowserRouter><AssignmentListItem {...mockProps} /></BrowserRouter>);
-    cy.get('.MuiListItem-root').should('exist');
-    cy.get('#project' + fixtures.id).should('exist');
-    cy.get('[data-cy=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');
-    cy.get('#clock').should('not.exist');
-  });
+    it('renders with cross', () => {
+        cy.mount(
+            <BrowserRouter>
+                <AssignmentListItem {...mockProps} />
+            </BrowserRouter>
+        )
+        cy.get('.MuiListItem-root').should('exist')
+        cy.get('#project' + fixtures.id).should('exist')
+        cy.get('[data-cy=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')
+        cy.get('#clock').should('not.exist')
+    })
 
-  it('renders with checkmark', () => {
-    mockProps.status = SubmissionStatus.PASSED;
-    cy.mount(<BrowserRouter><AssignmentListItem {...mockProps} /></BrowserRouter>);
-    cy.get('.MuiListItem-root').should('exist');
-    cy.get('#project' + fixtures.id).should('exist');
-    cy.get('[data-cy=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');
-    cy.get('#clock').should('not.exist');
-  });
+    it('renders with checkmark', () => {
+        mockProps.status = SubmissionStatus.PASSED
+        cy.mount(
+            <BrowserRouter>
+                <AssignmentListItem {...mockProps} />
+            </BrowserRouter>
+        )
+        cy.get('.MuiListItem-root').should('exist')
+        cy.get('#project' + fixtures.id).should('exist')
+        cy.get('[data-cy=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')
+        cy.get('#clock').should('not.exist')
+    })
 
-  it('renders with alarm', () => {
-    mockProps.status = SubmissionStatus.PENDING;
-    cy.mount(<BrowserRouter><AssignmentListItem {...mockProps} /></BrowserRouter>);
-    cy.get('.MuiListItem-root').should('exist');
-    cy.get('#project' + fixtures.id).should('exist');
-    cy.get('[data-cy=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');
-    cy.get('#clock').should('exist');
-  });
+    it('renders with alarm', () => {
+        mockProps.status = SubmissionStatus.PENDING
+        cy.mount(
+            <BrowserRouter>
+                <AssignmentListItem {...mockProps} />
+            </BrowserRouter>
+        )
+        cy.get('.MuiListItem-root').should('exist')
+        cy.get('#project' + fixtures.id).should('exist')
+        cy.get('[data-cy=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')
+        cy.get('#clock').should('exist')
+    })
 
-  it('renders with no due date', () => {
-    mockProps.dueDate = undefined;
-    mockProps.status = SubmissionStatus.PASSED;
-    cy.mount(<BrowserRouter><AssignmentListItem {...mockProps} /></BrowserRouter>);
-    cy.get('.MuiListItem-root').should('exist');
-    cy.get('#project' + fixtures.id).should('exist');
-    cy.get('[data-cy=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
+        mockProps.status = SubmissionStatus.PASSED
+        cy.mount(
+            <BrowserRouter>
+                <AssignmentListItem {...mockProps} />
+            </BrowserRouter>
+        )
+        cy.get('.MuiListItem-root').should('exist')
+        cy.get('#project' + fixtures.id).should('exist')
+        cy.get('[data-cy=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(<BrowserRouter><AssignmentListItem {...mockProps} /></BrowserRouter>);
-    cy.get('.MuiListItem-root').should('exist');
-    cy.get('#project' + fixtures.id).should('exist');
-    cy.get('[data-cy=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(
+            <BrowserRouter>
+                <AssignmentListItem {...mockProps} />
+            </BrowserRouter>
+        )
+        cy.get('.MuiListItem-root').should('exist')
+        cy.get('#project' + fixtures.id).should('exist')
+        cy.get('[data-cy=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
@@ -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(<BrowserRouter><CourseCard {...mockProps} /></BrowserRouter>);
+        cy.mount(
+            <BrowserRouter>
+                <CourseCard {...mockProps} />
+            </BrowserRouter>
+        )
         // 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(<BrowserRouter><CourseCard {...mockProps} /></BrowserRouter>);
-        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(
+            <BrowserRouter>
+                <CourseCard {...mockProps} />
+            </BrowserRouter>
+        )
+        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(<BrowserRouter><CourseCard {...mockProps} /></BrowserRouter>);
-        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');
-    });
-});
+        }
+        cy.mount(
+            <BrowserRouter>
+                <CourseCard {...mockProps} />
+            </BrowserRouter>
+        )
+        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
@@ -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,24 +8,25 @@ describe('FileUploadButton', () => {
         onFileChange: () => {},
         fileTypes: ['pdf'],
         path: '../fixtures/test.pdf',
-    };
+    }
 
     it('renders', () => {
-        cy.mount(<InputFileUpload {...mockProps} />);
-        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.get('#uploadButton').trigger('mouseout');
-        cy.contains(fixtures.tooltip).should('not.exist');
-        cy.get('#clearButton').should('exist');
-    });
+        cy.mount(<InputFileUpload {...mockProps} />)
+        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.get('#uploadButton').trigger('mouseout')
+        cy.contains(fixtures.tooltip).should('not.exist')
+        cy.get('#clearButton').should('exist')
+    })
 
     it('no path', () => {
-        mockProps.path = '';
-        cy.mount(<InputFileUpload {...mockProps} />);
-        cy.get('#uploadButton').should('exist').should('have.text', fixtures.name);
-        cy.get('#clearButton').should('not.exist');
-    });
-
-});
+        mockProps.path = ''
+        cy.mount(<InputFileUpload {...mockProps} />)
+        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
@@ -1,15 +1,18 @@
 import { GroupAccessComponent } from '../../src/components/GroupAccessComponent'
 import { BrowserRouter } from 'react-router-dom'
 
-
 describe('GroupAccessComponent', () => {
     const mockProps = {
         assignmentid: 1,
         courseid: 1,
     }
 
     it('toggles group access', () => {
-        cy.mount(<BrowserRouter><GroupAccessComponent {...mockProps} /></BrowserRouter>)
+        cy.mount(
+            <BrowserRouter>
+                <GroupAccessComponent {...mockProps} />
+            </BrowserRouter>
+        )
         cy.get('[data-cy=groupButton]').should('exist')
     })
-})
+})