alle componenten hebben slagende component tests

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

Hide file tree

Showing 8 changed files with 34 additions and 21 deletions.
diff --git a/frontend/frontend/cypress/component/LanguageSwitcher.cy.tsx b/frontend/frontend/cypress/component/LanguageSwitcher.cy.tsx
@@ -4,8 +4,8 @@ describe('LanguageSwitcher', () => {
 
     it('renders', () => {
         cy.mount(<LanguageSwitcher />)
-        cy.get('#en').should('exist').should('have.text', 'en');
-        cy.get('#nl').should('exist').should('have.text', 'nl');
+        cy.get('[data-cy=en]').should('exist').should('have.text', 'En');
+        cy.get('[data-cy=nl]').should('exist').should('have.text', 'Nl');
     });
 
 })
diff --git a/frontend/frontend/cypress/component/SubmissionListItemStudentPage.cy.tsx b/frontend/frontend/cypress/component/SubmissionListItemStudentPage.cy.tsx
@@ -3,7 +3,8 @@ import { BrowserRouter } from 'react-router-dom';
 
 describe('SubmissionListItemStudentPage', () => {
     const mockProps = {
-        id: 1,
+        realId: "1",
+        visualId: "Logisch programmeren - Opdracht 1",
         timestamp: new Date().toLocaleString(),
         status: true,
         assignment_id: 1,
@@ -12,21 +13,19 @@ describe('SubmissionListItemStudentPage', () => {
 
     it('renders correct submission', () => {
         cy.mount(<BrowserRouter><SubmissionListItemStudentPage {...mockProps} /></BrowserRouter>);
-        cy.get('#submission' + mockProps.id).should('exist');
         cy.get('.MuiListItemButton-root').should('exist');
-        cy.get('#submissionId').should('exist').should('have.text', mockProps.id);
-        cy.get('#submissionTimestamp').should('exist').should('have.text', mockProps.timestamp);
+        cy.get('[data-cy=visualId]').should('exist').should('have.text', mockProps.visualId);
+        cy.get('[data-cy=submissionTimestamp]').should('exist').should('have.text', mockProps.timestamp);
         cy.get('#check').should('exist');
         cy.get('#cross').should('not.exist');
     });
 
     it('renders incorrect submission', () => {
         mockProps.status = false;
         cy.mount(<BrowserRouter><SubmissionListItemStudentPage {...mockProps} /></BrowserRouter>);
-        cy.get('#submission' + mockProps.id).should('exist');
         cy.get('.MuiListItemButton-root').should('exist');
-        cy.get('#submissionId').should('exist').should('have.text', mockProps.id);
-        cy.get('#submissionTimestamp').should('exist').should('have.text', mockProps.timestamp);
+        cy.get('[data-cy=visualId]').should('exist').should('have.text', mockProps.visualId);
+        cy.get('[data-cy=submissionTimestamp]').should('exist').should('have.text', mockProps.timestamp);
         cy.get('#check').should('not.exist');
         cy.get('#cross').should('exist');
     });

diff --git a/frontend/frontend/cypress/component/SubmissionListItemTeacherPage.cy.tsx b/frontend/frontend/cypress/component/SubmissionListItemTeacherPage.cy.tsx
@@ -3,6 +3,7 @@ import { BrowserRouter } from 'react-router-dom';
 
 describe('SubmissionListItemTeacherPage', () => {
     const mockProps = {
+        group_name: 'group1',
         group_id: 1,
         assignment_id: 1,
         course_id: 1,
@@ -11,14 +12,14 @@ describe('SubmissionListItemTeacherPage', () => {
     it('renders correct submission', () => {
         // The data needs to be fetched from the backend, so we can't check that
         cy.mount(<BrowserRouter><SubmissionListItemTeacherPage {...mockProps} /></BrowserRouter>);
-        cy.get('#submission' + mockProps.group_id).should('exist');
         cy.get('.MuiListItemButton-root').should('exist');
-        cy.get('#submissionId').should('exist').should('have.text', mockProps.group_id);
-        cy.get('#submissionTimestamp').should('exist');
-        cy.get('#submissionScore').should('exist');
-        cy.get('#check').should('not.exist');
-        cy.get('#cross').should('not.exist');
-        cy.get('#downloadIconGray').should('exist');
-        cy.get('#downloadIconColor').should('not.exist');
+        cy.get('[data-cy=submissionTimestamp]').should('exist');
+        cy.get('[data-cy=groupName').should('exist').should('have.text', mockProps.group_name);
+        cy.get('[data-cy=submissionScore]').should('exist');
+        cy.get('[data-cy=statusIcon]').should('exist');
+        cy.get('[data-cy=check]').should('not.exist');
+        cy.get('[data-cy=cross]').should('exist');
+        cy.get('[data-cy=downloadIconGray]').should('exist');
+        cy.get('[data-cy=downloadIconColor]').should('not.exist');
     });
 });
diff --git a/frontend/frontend/cypress/component/WarningPopup.cy.tsx b/frontend/frontend/cypress/component/WarningPopup.cy.tsx
@@ -17,7 +17,7 @@ describe('WarningPopup', () => {
         cy.get('#popUpTitle').should('exist').should('have.text', fixtures.title);
         cy.get('#popUpText').should('exist').should('have.text', fixtures.warning);
         cy.get('#cancelButton').should('exist');
-        cy.get('#actionButton').should('exist').should('have.text', fixtures.button);
+        cy.get('#confirm').should('exist').should('have.text', fixtures.button);
     });
 
     it('renders closed', () => {

diff --git a/frontend/frontend/src/components/LanguageSwitcher.tsx b/frontend/frontend/src/components/LanguageSwitcher.tsx
@@ -20,6 +20,7 @@ export function LanguageSwitcher() {
             {/* Map through language options and render a MenuItem for each */}
             <Box display={'flex'} flexDirection={'row'} alignItems={'center'}>
                 <Button
+                    data-cy="en"
                     sx={{
                         color: 'background.default',
                         paddingTop: 1,
@@ -47,6 +48,7 @@ export function LanguageSwitcher() {
                     }}
                 />
                 <Button
+                    data-cy="nl"
                     sx={{
                         color: 'background.default',
                         paddingTop: 1,

diff --git a/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx b/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx
@@ -59,6 +59,7 @@ export function SubmissionListItemStudentPage({
                     <EvenlySpacedRow
                         items={[
                             <ListItemText
+                                data-cy="visualId"
                                 sx={{
                                     color: 'primary.main',
                                     '&:hover': {
@@ -68,16 +69,19 @@ export function SubmissionListItemStudentPage({
                                 primary={visualId}
                             />,
                             <ListItemText
+                                data-cy="submissionTimestamp"
                                 primary={timestamp ? timestamp : t('time')}
                             />,
                             <Box sx={{ maxWidth: '24px' }}>
                                 <ListItemIcon sx={{ minWidth: 35 }}>
                                     {status ? (
                                         <CheckCircleOutlineIcon
+                                            id="check"
                                             sx={{ color: 'success.main' }}
                                         />
                                     ) : (
                                         <HighlightOffIcon
+                                            id="cross"
                                             sx={{ color: 'error.main' }}
                                         />
                                     )}

diff --git a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
@@ -145,6 +145,7 @@ export function SubmissionListItemTeacherPage({
                     <EvenlySpacedRow
                         items={[
                             <ListItemText
+                                data-cy="groupName"
                                 sx={{
                                     color: 'primary.main',
                                     '&:hover': {
@@ -154,6 +155,7 @@ export function SubmissionListItemTeacherPage({
                                 primary={group_name}
                             />,
                             <ListItemText
+                                data-cy="submissionTimestamp"
                                 primary={
                                     submitted
                                         ? dayjs(submitted.tijdstip).format(
@@ -163,21 +165,24 @@ export function SubmissionListItemTeacherPage({
                                 }
                             />,
                             <ListItemText
+                                data-cy="submissionScore"
                                 primary={
                                     score
                                         ? `${Number(score.score)}` + '/20'
                                         : t('no_score_yet')
                                 }
                             />,
                             <Box sx={{ maxWidth: '24px' }}>
-                                <ListItemIcon>
+                                <ListItemIcon data-cy="statusIcon">
                                     {!submitted?.status ? (
                                         <HighlightOffIcon
+                                            data-cy="cross"
                                             sx={{ color: 'error.main' }}
                                         />
                                     ) : (
                                         submitted !== undefined && (
                                             <CheckCircleOutlineIcon
+                                                data-cy="check"
                                                 sx={{ color: 'success.main' }}
                                             />
                                         )
@@ -189,6 +194,7 @@ export function SubmissionListItemTeacherPage({
                                     <div onClick={handleDownloadClick}>
                                         {submitted ? (
                                             <DownloadIcon
+                                                data-cy="downloadIconColor"
                                                 sx={{
                                                     color: 'primary.main',
                                                     '&:hover': {
@@ -198,6 +204,7 @@ export function SubmissionListItemTeacherPage({
                                             />
                                         ) : (
                                             <DownloadIcon
+                                                data-cy="downloadIconGray"
                                                 sx={{ color: 'gray' }}
                                             />
                                         )}

diff --git a/frontend/frontend/src/components/WarningPopup.tsx b/frontend/frontend/src/components/WarningPopup.tsx
@@ -52,11 +52,11 @@ export default function WarningPopup({
                     </DialogContentText>
                 </DialogContent>
                 <DialogActions sx={{ justifyContent: 'center' }}>
-                    <SecondaryButton onClick={handleClose}>
+                    <SecondaryButton id="cancelButton" onClick={handleClose}>
                         {t('cancel')}
                     </SecondaryButton>
                     {/* Action button */}
-                    <Button id='confirm' onClick={hanldeAction} autoFocus>
+                    <Button id="confirm" onClick={hanldeAction} autoFocus>
                         {buttonName}
                     </Button>
                 </DialogActions>