Frontend linting

.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

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',
+        },
     },
-  },
-});
+})

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(<BrowserRouter><AssignmentListItem {...mockProps} /></BrowserRouter>);
-    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(
+            <BrowserRouter>
+                <AssignmentListItem {...mockProps} />
+            </BrowserRouter>
+        )
+        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(<BrowserRouter><AssignmentListItem {...mockProps} /></BrowserRouter>);
-    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(
+            <BrowserRouter>
+                <AssignmentListItem {...mockProps} />
+            </BrowserRouter>
+        )
+        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(<BrowserRouter><AssignmentListItem {...mockProps} /></BrowserRouter>);
-    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(
+            <BrowserRouter>
+                <AssignmentListItem {...mockProps} />
+            </BrowserRouter>
+        )
+        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(<BrowserRouter><AssignmentListItem {...mockProps} /></BrowserRouter>);
-    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(
+            <BrowserRouter>
+                <AssignmentListItem {...mockProps} />
+            </BrowserRouter>
+        )
+        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')
+    })
+})

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