Development: Add drag-and-drop exercise generation tests

src/test/javascript/spec/component/apollon-diagrams/apollon-diagram-detail.component.spec.ts

@@ -19,7 +19,6 @@ import * as testClassDiagram from '../../util/modeling/test-models/class-diagram
 import { UMLModel } from '@ls1intum/apollon';
 import { ElementRef } from '@angular/core';
 import { Text } from '@ls1intum/apollon/lib/es5/utils/svg/text';
-import { addDelay } from '../../helpers/utils/general.utils';
 
 // has to be overridden, because jsdom does not provide a getBBox() function for SVGTextElements
 Text.size = () => {
@@ -93,7 +92,7 @@ describe('ApollonDiagramDetail Component', () => {
         expect(fixture.componentInstance.apollonEditor).toBeTruthy();
 
         // test
-        await addDelay(500);
+        await fixture.componentInstance.apollonEditor?.nextRender;
         await fixture.componentInstance.saveDiagram();
         expect(updateStub).toHaveBeenCalledOnce();
         // clear the set time interval
@@ -116,14 +115,33 @@ describe('ApollonDiagramDetail Component', () => {
         const successSpy = jest.spyOn(alertService, 'success');
 
         // test
-        await addDelay(500);
+        await fixture.componentInstance.apollonEditor?.nextRender;
         await fixture.componentInstance.generateExercise();
         expect(successSpy).toHaveBeenCalledOnce();
 
         // clear the set time interval
         fixture.componentInstance.ngOnDestroy();
     });
 
+    it('validateGeneration', async () => {
+        const nonInteractiveModel = { ...model, interactive: { ...model.interactive, elements: [] } };
+
+        // setup
+        const div = document.createElement('div');
+        fixture.componentInstance.editorContainer = new ElementRef(div);
+        fixture.componentInstance.apollonDiagram = diagram;
+        fixture.componentInstance.initializeApollonEditor(nonInteractiveModel);
+        const errorSpy = jest.spyOn(alertService, 'error');
+
+        // test
+        await fixture.componentInstance.apollonEditor?.nextRender;
+        await fixture.componentInstance.generateExercise();
+        expect(errorSpy).toHaveBeenCalledOnce();
+
+        // clear the set time interval
+        fixture.componentInstance.ngOnDestroy();
+    });
+
     it('downloadSelection', async () => {
         const div = document.createElement('div');
         fixture.componentInstance.editorContainer = new ElementRef(div);
@@ -132,9 +150,10 @@ describe('ApollonDiagramDetail Component', () => {
         fixture.componentInstance.apollonDiagram = diagram;
         fixture.componentInstance.initializeApollonEditor(model);
         // ApollonEditor is the child
-        await addDelay(300).then(() => {
-            expect(div.children).toHaveLength(1);
-        });
+
+        await fixture.componentInstance.apollonEditor?.nextRender;
+        expect(div.children).toHaveLength(1);
+
         // set selection
         fixture.componentInstance.apollonEditor!.selection = { elements: model.elements.map((element) => element.id), relationships: [] };
         fixture.detectChanges();

src/test/javascript/spec/component/apollon-diagrams/exercise-generation/apollon-quiz-exercise-generation.component.spec.ts

@@ -12,7 +12,6 @@ import * as testClassDiagram from '../../../util/modeling/test-models/class-diag
 import { Text } from '@ls1intum/apollon/lib/es5/utils/svg/text';
 import { MockTranslateService } from '../../../helpers/mocks/service/mock-translate.service';
 import { MockRouter } from '../../../helpers/mocks/mock-router';
-import { addDelay } from '../../../helpers/utils/general.utils';
 import { CourseManagementService } from 'app/course/manage/course-management.service';
 import { ApollonQuizExerciseGenerationComponent } from 'app/exercises/quiz/manage/apollon-diagrams/exercise-generation/apollon-quiz-exercise-generation.component';
 import { QuizExercise } from 'app/entities/quiz/quiz-exercise.model';
@@ -103,7 +102,7 @@ describe('ApollonQuizExerciseGeneration Component', () => {
         jest.spyOn(module, 'generateDragAndDropQuizExercise').mockReturnValue(quizExercise);
         const ngbModalSpy = jest.spyOn(ngbModal, 'close');
 
-        await addDelay(500);
+        await fixture.componentInstance.apollonEditor?.nextRender;
         // test
         await fixture.componentInstance.save();
         expect(ngbModalSpy).toHaveBeenCalledOnce();

src/test/javascript/spec/component/apollon-diagrams/exercise-generation/quiz-exercise-generator.spec.ts

@@ -19,7 +19,6 @@ import { MockRouter } from '../../../helpers/mocks/mock-router';
 import { MockLocalStorageService } from '../../../helpers/mocks/service/mock-local-storage.service';
 import { MockSyncStorage } from '../../../helpers/mocks/service/mock-sync-storage.service';
 import * as testClassDiagram from '../../../util/modeling/test-models/class-diagram.json';
-import { addDelay } from '../../../helpers/utils/general.utils';
 
 // has to be overridden, because jsdom does not provide a getBBox() function for SVGTextElements
 Text.size = () => {
@@ -72,7 +71,6 @@ describe('QuizExercise Generator', () => {
         const classDiagram: UMLModel = testClassDiagram as UMLModel;
         const interactiveElements: Selection = classDiagram.interactive;
         const exerciseTitle = 'GenerateDragAndDropExerciseTest';
-        await addDelay(300);
         const generatedExercise = await generateDragAndDropQuizExercise(course, exerciseTitle, classDiagram, fileUploaderService, quizExerciseService);
         expect(generatedExercise).toBeTruthy();
         expect(generatedExercise.title).toEqual(exerciseTitle);

src/test/javascript/spec/component/modeling-editor/modeling-editor.component.spec.ts

@@ -12,7 +12,6 @@ import { ModelingEditorComponent } from 'app/exercises/modeling/shared/modeling-
 import * as testClassDiagram from '../../util/modeling/test-models/class-diagram.json';
 import { GuidedTourService } from 'app/guided-tour/guided-tour.service';
 import { ArtemisTestModule } from '../../test.module';
-import { addDelay } from '../../helpers/utils/general.utils';
 import { cloneDeep } from 'lodash-es';
 import { SimpleChange } from '@angular/core';
 import { MockComponent, MockProvider } from 'ng-mocks';
@@ -63,10 +62,10 @@ describe('ModelingEditorComponent', () => {
         const editor: ApollonEditor = component['apollonEditor'] as ApollonEditor;
         // Check that editor exists
         expect(editor).toBeDefined();
-        await addDelay(500).then(() => {
-            // check that editor contains elements of our model (direct equality check won't work somehow due to missing properties)
-            expect(editor.model.elements.map((e) => e.id)).toEqual(classDiagram.elements.map((e) => e.id));
-        });
+        await editor.nextRender;
+
+        // check that editor contains elements of our model (direct equality check won't work somehow due to missing properties)
+        expect(editor.model.elements.map((e) => e.id)).toEqual(classDiagram.elements.map((e) => e.id));
     });
 
     it('ngOnDestroy', () => {
@@ -94,14 +93,14 @@ describe('ModelingEditorComponent', () => {
         // note: using cloneDeep a default value exists, which would prevent the comparison below to pass, therefore we need to remove it here
         changedModel.default = undefined;
         // test
-        await addDelay(100);
+        await component.apollonEditor?.nextRender;
         component.ngOnChanges({
             umlModel: {
                 currentValue: changedModel,
                 previousValue: model,
             } as SimpleChange,
         });
-        await addDelay(100);
+        await component.apollonEditor?.nextRender;
         const componentModel = component['apollonEditor']!.model as UMLModel;
         expect(componentModel).toEqual(changedModel);
     });
@@ -253,25 +252,24 @@ describe('ModelingEditorComponent', () => {
         let updateSpyCallCount = 0;
         let currentUmlName = personUML.name;
 
-        await addDelay(500).then(() => {
-            subject.next(currentUmlName);
-            expect(updateSpy).toHaveBeenLastCalledWith(currentUmlName, false);
-            updateSpyCallCount++;
-            expect(updateSpy).toHaveBeenCalledTimes(updateSpyCallCount);
+        await fixture.componentInstance.apollonEditor?.nextRender;
+        subject.next(currentUmlName);
+        expect(updateSpy).toHaveBeenLastCalledWith(currentUmlName, false);
+        updateSpyCallCount++;
+        expect(updateSpy).toHaveBeenCalledTimes(updateSpyCallCount);
 
-            currentUmlName = studentUML.name;
-            subject.next(currentUmlName);
-            expect(updateSpy).toHaveBeenLastCalledWith(currentUmlName, false);
+        currentUmlName = studentUML.name;
+        subject.next(currentUmlName);
+        expect(updateSpy).toHaveBeenLastCalledWith(currentUmlName, false);
 
-            updateSpyCallCount++;
-            expect(updateSpy).toHaveBeenCalledTimes(updateSpyCallCount);
+        updateSpyCallCount++;
+        expect(updateSpy).toHaveBeenCalledTimes(updateSpyCallCount);
 
-            currentUmlName = associationUML.name;
-            subject.next(currentUmlName);
-            expect(updateSpy).toHaveBeenLastCalledWith(currentUmlName, false);
+        currentUmlName = associationUML.name;
+        subject.next(currentUmlName);
+        expect(updateSpy).toHaveBeenLastCalledWith(currentUmlName, false);
 
-            updateSpyCallCount++;
-            expect(updateSpy).toHaveBeenCalledTimes(updateSpyCallCount);
-        });
+        updateSpyCallCount++;
+        expect(updateSpy).toHaveBeenCalledTimes(updateSpyCallCount);
     });
 });

src/test/javascript/spec/helpers/utils/general.utils.ts

@@ -37,8 +37,3 @@ export const triggerChanges = (comp: OnChanges, ...changes: Array<{ property: st
     }, {});
     comp.ngOnChanges(simpleChanges);
 };
-
-// delay is used to ensure apollon editor and redux store is not null (because of React 18 behaviour)
-export const addDelay = async (timeInMs: number) => {
-    return new Promise((res) => setTimeout(res, timeInMs));
-};