Merge branch 'frontend_testen' of github.com:SELab-2/UGent-4 into fro…

…ntend_testen
SELab-2 · May 23, 2024 · 2f0a26f · 2f0a26f
2 parents 8dad93d + f325c2c
commit 2f0a26f
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 43 deletions.
diff --git a/frontend/frontend/cypress/page/scoresPage/ProjectScoresPage.cy.tsx b/frontend/frontend/cypress/page/scoresPage/ProjectScoresPage.cy.tsx
@@ -1,15 +1,18 @@
-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(<BrowserRouter><ProjectScoresPage/></BrowserRouter>);
-    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');
-  });
-});
+// This page fetches data from the backend.
+// So as far as the component test is concerned,
+// we can only show what shows up before the fetch.
+// This is why only the loading animation is checked.
+// The rest of the tests are in the integration tests.
+describe('ProjectScoresPage', () => {
+    it('renders', () => {
+        cy.mount(
+            <BrowserRouter>
+                <ProjectScoresPage />
+            </BrowserRouter>
+        )
+        cy.get('[data-cy=loadingAnimation]').should('exist')
+    })
+})
diff --git a/frontend/frontend/cypress/page/scoresPage/StudentScoreListItem.cy.tsx b/frontend/frontend/cypress/page/scoresPage/StudentScoreListItem.cy.tsx
@@ -1,6 +1,11 @@
-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'
 
+// This page fetches data from the backend.
+// So as far as the component test is concerned,
+// we can only show what shows up before the fetch.
+// This is why only the loading animation is checked.
+// The rest of the tests are in the integration tests.
 describe('StudentScoreListItem', () => {
     const mockProps = {
         key: fixtures.id,
@@ -10,13 +15,10 @@ describe('StudentScoreListItem', () => {
         score: fixtures.score,
         maxScore: fixtures.maxScore,
         changeScore: () => {},
-    };
+    }
 
     it('renders', () => {
-        cy.mount(<StudentScoreListItem {...mockProps} />);
-        // 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');
-    });
-});
+        cy.mount(<StudentScoreListItem {...mockProps} />)
+        cy.get('[data-cy=loadingAnimation]').should('exist')
+    })
+})
diff --git a/frontend/frontend/cypress/page/scoresPage/studentsView.cy.tsx b/frontend/frontend/cypress/page/scoresPage/studentsView.cy.tsx
@@ -1,20 +1,25 @@
-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'
+import { t } from 'i18next'
 
+describe('StudentsView', () => {
     const mockProps = {
         project: fixtures.fullProject,
         groepen: fixtures.scoreGroups,
         setGroepen: () => {},
         changeScore: () => {},
-    };
-
-  it("renders", () => {
-    cy.mount(<BrowserRouter><StudentsView {...mockProps}/></BrowserRouter>);
-    for (let i = 0; i < mockProps.groepen.length; i++) {
-        cy.get(`#group${mockProps.groepen[i].group_number}`).should('exist');
     }
-    });
-});
+
+    it('renders', () => {
+        cy.mount(
+            <BrowserRouter>
+                <StudentsView {...mockProps} />
+            </BrowserRouter>
+        )
+        //cy.get('[data-cy=groupHeader]').should('have.text', t('group'))
+        //cy.get('[data-cy=timeHeader]').should('have.text', t('time'))
+        cy.get('[data-cy=scoreHeader]').should('have.text', 'Score')
+        cy.get('[data-cy=downloadHeader]').should('have.text', 'Download')
+    })
+})
diff --git a/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx b/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
@@ -299,7 +299,10 @@ export function ProjectScoresPage() {
                         height: '100vh',
                     }}
                 >
-                    <CircularProgress color={'primary'} />
+                    <CircularProgress
+                        color={'primary'}
+                        data-cy="loadingAnimation"
+                    />
                     <Box></Box>
                 </Box>
             ) : (

diff --git a/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx b/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx
@@ -101,7 +101,11 @@ export function StudentScoreListItem({
                     {/* Content section */}
                     <>
                         {loading ? (
-                            <CircularProgress size={20} color={'primary'} />
+                            <CircularProgress
+                                size={20}
+                                color={'primary'}
+                                data-cy="loadingAnimation"
+                            />
                         ) : (
                             <EvenlySpacedRow
                                 items={[

diff --git a/frontend/frontend/src/pages/scoresPage/StudentsView.tsx b/frontend/frontend/src/pages/scoresPage/StudentsView.tsx
@@ -123,16 +123,32 @@ export function StudentsView({
             >
                 <EvenlySpacedRow
                     items={[
-                        <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
+                        <Typography
+                            variant="h5"
+                            sx={{ fontWeight: 'bold' }}
+                            data-cy="groupHeader"
+                        >
                             {t('group')}
                         </Typography>,
-                        <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
+                        <Typography
+                            variant="h5"
+                            sx={{ fontWeight: 'bold' }}
+                            data-cy="timeHeader"
+                        >
                             {t('time')}
                         </Typography>,
-                        <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
+                        <Typography
+                            variant="h5"
+                            sx={{ fontWeight: 'bold' }}
+                            data-cy="scoreHeader"
+                        >
                             Score
                         </Typography>,
-                        <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
+                        <Typography
+                            variant="h5"
+                            sx={{ fontWeight: 'bold' }}
+                            data-cy="downloadHeader"
+                        >
                             Download
                         </Typography>,
                     ]}