component testen voor pages

SELab-2 · May 23, 2024 · b6c0d63 · b6c0d63
1 parent 97c2943
commit b6c0d63
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 39 deletions.
diff --git a/frontend/frontend/cypress/page/assignmentPage/AssignmentPage.cy.tsx b/frontend/frontend/cypress/page/assignmentPage/AssignmentPage.cy.tsx
@@ -1,18 +1,18 @@
-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'
+import { BrowserRouter } from 'react-router-dom'
 
+// 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('AssignmentPage', () => {
-
     it('renders', () => {
-        cy.mount(<BrowserRouter><AssignmentPage/></BrowserRouter>);
-        // this renders for a student, teacher will be tested in e2e tests
-        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');
-    });
-});
+        cy.mount(
+            <BrowserRouter>
+                <AssignmentPage />
+            </BrowserRouter>
+        )
+        cy.get('[data-cy=loadingAnimation]').should('exist')
+    })
+})
diff --git a/frontend/frontend/cypress/page/groupsPage/ChooseGroup.cy.tsx b/frontend/frontend/cypress/page/groupsPage/ChooseGroup.cy.tsx
@@ -0,0 +1,18 @@
+import { ChooseGroup } from '../../../src/pages/groupsPage/ChooseGroup'
+import { BrowserRouter } from 'react-router-dom'
+
+// 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('ChooseGroup', () => {
+    it('renders', () => {
+        cy.mount(
+            <BrowserRouter>
+                <ChooseGroup />
+            </BrowserRouter>
+        )
+        cy.get('[data-cy=loadingAnimation]').should('exist')
+    })
+})
diff --git a/frontend/frontend/cypress/page/groupsPage/GroupsPage.cy.tsx b/frontend/frontend/cypress/page/groupsPage/GroupsPage.cy.tsx
@@ -1,12 +1,18 @@
-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(<BrowserRouter><GroupsPage/></BrowserRouter>);
-    cy.get("#logo").should("exist");
-    cy.get("#userMenu").should("exist");
-    cy.contains("Project 1: groepen");
-  });
-});
+// 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('GroupsPage', () => {
+    it('renders', () => {
+        cy.mount(
+            <BrowserRouter>
+                <GroupsPage />
+            </BrowserRouter>
+        )
+        cy.get('[data-cy=loadingAnimation]').should('exist')
+    })
+})
diff --git 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(<BrowserRouter><LoginPage/></BrowserRouter>);
-        cy.get('#logo').should('exist');
-        cy.get('#loginButton').should('exist');
-        cy.contains('Pigeonhole');
-    });
-});
+        cy.mount(
+            <BrowserRouter>
+                <LoginPage />
+            </BrowserRouter>
+        )
+        cy.get('#logo').should('exist')
+        cy.get('[data-cy=loginButton]').should('exist')
+        cy.get('[data-cy=logoDuif]').should('exist')
+    })
+})
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
@@ -486,7 +486,10 @@ export function AddChangeAssignmentPage() {
                         height: '100vh',
                     }}
                 >
-                    <CircularProgress color={'primary'} data-cy="loadingAnimation" />
+                    <CircularProgress
+                        color={'primary'}
+                        data-cy="loadingAnimation"
+                    />
                     <Box></Box>
                 </Box>
             ) : (

diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -381,7 +381,10 @@ export function AssignmentPage() {
                         height: '100vh',
                     }}
                 >
-                    <CircularProgress color={'primary'} />
+                    <CircularProgress
+                        color={'primary'}
+                        data-cy="loadingAnimation"
+                    />
                 </Box>
             ) : (
                 <>

diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -184,7 +184,10 @@ export function ChooseGroup() {
                         height: '100vh',
                     }}
                 >
-                    <CircularProgress color={'primary'} />
+                    <CircularProgress
+                        color={'primary'}
+                        data-cy="loadingAnimation"
+                    />
                     <Box></Box>
                 </Box>
             ) : (

diff --git a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
@@ -335,7 +335,10 @@ export function GroupsPage() {
                         height: '100vh',
                     }}
                 >
-                    <CircularProgress color={'primary'} />
+                    <CircularProgress
+                        color={'primary'}
+                        data-cy="loadingAnimation"
+                    />
                     <Box></Box>
                 </Box>
             ) : (

diff --git a/frontend/frontend/src/pages/loginPage/LoginPage.tsx b/frontend/frontend/src/pages/loginPage/LoginPage.tsx
@@ -92,6 +92,7 @@ export function LoginPage() {
                             }}
                         />
                         <Box
+                            data-cy="logoDuif"
                             component="img"
                             src={'/assets/logo_duif.png'}
                             alt="logo_app"
@@ -114,7 +115,9 @@ export function LoginPage() {
                         alignSelf={'stretch'}
                         ml={4}
                     >
-                        <Button onClick={handleLogin}>{t('login')}</Button>
+                        <Button onClick={handleLogin} data-cy="loginButton">
+                            {t('login')}
+                        </Button>
                     </Box>
                 </Box>
             </Box>