From 3445adb325ecbea19b2a4a57e1c83d0ea8742b07 Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Thu, 23 May 2024 09:59:46 +0200
Subject: [PATCH] AssignmentListItem test working

---
 .../component/AssignmentListItem.cy.tsx       | 29 +++++++++++++++----
 .../frontend/cypress/fixtures/fixtures.json   |  1 +
 .../src/components/AssignmentListItem.tsx     |  3 +-
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/frontend/frontend/cypress/component/AssignmentListItem.cy.tsx b/frontend/frontend/cypress/component/AssignmentListItem.cy.tsx
index 184503a6..68d5c0ba 100644
--- a/frontend/frontend/cypress/component/AssignmentListItem.cy.tsx
+++ b/frontend/frontend/cypress/component/AssignmentListItem.cy.tsx
@@ -1,13 +1,15 @@
 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: false,
+    status: SubmissionStatus.FAIL,
     isStudent: true,
   };
 
@@ -15,29 +17,44 @@ describe('AssignmentListItem', () => {
     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('[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 = true;
+    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('#projectName').should('contain.text', fixtures.project);
+    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 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('#projectName').should('contain.text', fixtures.project);
+    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());
@@ -51,7 +68,7 @@ describe('AssignmentListItem', () => {
     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('[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/fixtures/fixtures.json b/frontend/frontend/cypress/fixtures/fixtures.json
index 6bb9fa89..146052de 100644
--- a/frontend/frontend/cypress/fixtures/fixtures.json
+++ b/frontend/frontend/cypress/fixtures/fixtures.json
@@ -1,5 +1,6 @@
 {
   "id": "1",
+  "course_id": "1",
   "name": "Test Name",
   "project": "Test Project",
   "score": "10",
diff --git a/frontend/frontend/src/components/AssignmentListItem.tsx b/frontend/frontend/src/components/AssignmentListItem.tsx
index 18157710..0f49f130 100644
--- a/frontend/frontend/src/components/AssignmentListItem.tsx
+++ b/frontend/frontend/src/components/AssignmentListItem.tsx
@@ -70,6 +70,7 @@ export function AssignmentListItem({
                     {/* Project Name */}
                     <ListItemText>
                         <Typography
+                            data-cy="projectName"
                             maxWidth={170}
                             noWrap
                             textOverflow={'ellipsis'}
@@ -108,4 +109,4 @@ export function AssignmentListItem({
             </ListItem>
         </>
     )
-}
+}
\ No newline at end of file