BC-3475 - Add alternative text to file content element

apps/server/src/modules/board/controller/api-test/card-create.api.spec.ts

@@ -126,6 +126,7 @@ describe(`card create (api)`, () => {
 					type: 'file',
 					content: {
 						caption: '',
+						alternativeText: '',
 					},
 				},
 			];

apps/server/src/modules/board/controller/api-test/content-element-update-content.spec.ts

@@ -2,16 +2,23 @@ import { EntityManager } from '@mikro-orm/mongodb';
 import { HttpStatus, INestApplication } from '@nestjs/common';
 import { Test, TestingModule } from '@nestjs/testing';
 import { sanitizeRichText } from '@shared/controller';
-import { BoardExternalReferenceType, InputFormat, RichTextElementNode } from '@shared/domain';
 import {
+	BoardExternalReferenceType,
+	ContentElementType,
+	FileElementNode,
+	InputFormat,
+	RichTextElementNode,
+} from '@shared/domain';
+import {
+	TestApiClient,
+	UserAndAccountTestFactory,
 	cardNodeFactory,
 	cleanupCollections,
 	columnBoardNodeFactory,
 	columnNodeFactory,
 	courseFactory,
+	fileElementNodeFactory,
 	richTextElementNodeFactory,
-	TestApiClient,
-	UserAndAccountTestFactory,
 } from '@shared/testing';
 import { ServerTestModule } from '@src/modules/server/server.module';
 
@@ -52,51 +59,93 @@ describe(`content element update content (api)`, () => {
 
 			const column = columnNodeFactory.buildWithId({ parent: columnBoardNode });
 			const parentCard = cardNodeFactory.buildWithId({ parent: column });
-			const element = richTextElementNodeFactory.buildWithId({ parent: parentCard });
-
-			await em.persistAndFlush([teacherAccount, teacherUser, parentCard, column, columnBoardNode, element]);
+			const richTextelement = richTextElementNodeFactory.buildWithId({ parent: parentCard });
+			const fileElement = fileElementNodeFactory.buildWithId({ parent: parentCard });
+
+			await em.persistAndFlush([
+				teacherAccount,
+				teacherUser,
+				parentCard,
+				column,
+				columnBoardNode,
+				richTextelement,
+				fileElement,
+			]);
 			em.clear();
 
 			const loggedInClient = await testApiClient.login(teacherAccount);
 
-			return { loggedInClient, element };
+			return { loggedInClient, richTextelement, fileElement };
 		};
 
 		it('should return status 204', async () => {
-			const { loggedInClient, element } = await setup();
+			const { loggedInClient, richTextelement } = await setup();
 
-			const response = await loggedInClient.patch(`${element.id}/content`, {
-				data: { content: { text: 'hello world', inputFormat: InputFormat.RICH_TEXT_CK5 }, type: 'richText' },
+			const response = await loggedInClient.patch(`${richTextelement.id}/content`, {
+				data: {
+					content: { text: 'hello world', inputFormat: InputFormat.RICH_TEXT_CK5 },
+					type: ContentElementType.RICH_TEXT,
+				},
 			});
 
 			expect(response.statusCode).toEqual(204);
 		});
 
 		it('should actually change content of the element', async () => {
-			const { loggedInClient, element } = await setup();
+			const { loggedInClient, richTextelement } = await setup();
 
-			await loggedInClient.patch(`${element.id}/content`, {
-				data: { content: { text: 'hello world', inputFormat: InputFormat.RICH_TEXT_CK5 }, type: 'richText' },
+			await loggedInClient.patch(`${richTextelement.id}/content`, {
+				data: {
+					content: { text: 'hello world', inputFormat: InputFormat.RICH_TEXT_CK5 },
+					type: ContentElementType.RICH_TEXT,
+				},
 			});
-			const result = await em.findOneOrFail(RichTextElementNode, element.id);
+			const result = await em.findOneOrFail(RichTextElementNode, richTextelement.id);
 
 			expect(result.text).toEqual('hello world');
 		});
 
 		it('should sanitize rich text before changing content of the element', async () => {
-			const { loggedInClient, element } = await setup();
+			const { loggedInClient, richTextelement } = await setup();
 
 			const text = '<iframe>rich text 1</iframe> some more text';
 
 			const sanitizedText = sanitizeRichText(text, InputFormat.RICH_TEXT_CK5);
 
-			await loggedInClient.patch(`${element.id}/content`, {
-				data: { content: { text, inputFormat: InputFormat.RICH_TEXT_CK5 }, type: 'richText' },
+			await loggedInClient.patch(`${richTextelement.id}/content`, {
+				data: { content: { text, inputFormat: InputFormat.RICH_TEXT_CK5 }, type: ContentElementType.RICH_TEXT },
 			});
-			const result = await em.findOneOrFail(RichTextElementNode, element.id);
+			const result = await em.findOneOrFail(RichTextElementNode, richTextelement.id);
 
 			expect(result.text).toEqual(sanitizedText);
 		});
+
+		it('should sanitize caption parameter before changing caption of the element', async () => {
+			const { loggedInClient, fileElement } = await setup();
+
+			const caption = '<iframe>rich text 1</iframe> some more text';
+
+			await loggedInClient.patch(`${fileElement.id}/content`, {
+				data: { content: { caption, alternativeText: '' }, type: ContentElementType.FILE },
+			});
+
+			const result = await em.findOneOrFail(FileElementNode, fileElement.id);
+
+			expect(result.caption).toEqual('rich text 1 some more text');
+		});
+
+		it('should sanitize alternativeText parameter before changing caption of the element', async () => {
+			const { loggedInClient, fileElement } = await setup();
+
+			const alternativeText = '<iframe>rich text 1</iframe> some more text';
+
+			await loggedInClient.patch(`${fileElement.id}/content`, {
+				data: { content: { caption: '', alternativeText }, type: ContentElementType.FILE },
+			});
+			const result = await em.findOneOrFail(FileElementNode, fileElement.id);
+
+			expect(result.alternativeText).toEqual('rich text 1 some more text');
+		});
 	});
 
 	describe('with invalid user', () => {

apps/server/src/modules/board/controller/dto/element/file-element.response.ts

@@ -3,12 +3,16 @@ import { ContentElementType } from '@shared/domain';
 import { TimestampsResponse } from '../timestamps.response';
 
 export class FileElementContent {
-	constructor({ caption }: FileElementContent) {
+	constructor({ caption, alternativeText }: FileElementContent) {
 		this.caption = caption;
+		this.alternativeText = alternativeText;
 	}
 
 	@ApiProperty()
 	caption: string;
+
+	@ApiProperty()
+	alternativeText: string;
 }
 
 export class FileElementResponse {

apps/server/src/modules/board/controller/dto/element/update-element-content.body.params.ts

@@ -17,6 +17,10 @@ export class FileContentBody {
 	@IsString()
 	@ApiProperty({})
 	caption!: string;
+
+	@IsString()
+	@ApiProperty({})
+	alternativeText!: string;
 }
 
 export class FileElementContentBody extends ElementContentBody {

apps/server/src/modules/board/controller/mapper/file-element-response.mapper.ts

@@ -18,7 +18,7 @@ export class FileElementResponseMapper implements BaseResponseMapper {
 			id: element.id,
 			timestamps: new TimestampsResponse({ lastUpdatedAt: element.updatedAt, createdAt: element.createdAt }),
 			type: ContentElementType.FILE,
-			content: new FileElementContent({ caption: element.caption }),
+			content: new FileElementContent({ caption: element.caption, alternativeText: element.alternativeText }),
 		});
 
 		return result;

apps/server/src/modules/board/repo/board-do.builder-impl.ts

@@ -94,6 +94,7 @@ export class BoardDoBuilderImpl implements BoardDoBuilder {
 		const element = new FileElement({
 			id: boardNode.id,
 			caption: boardNode.caption,
+			alternativeText: boardNode.alternativeText,
 			children: [],
 			createdAt: boardNode.createdAt,
 			updatedAt: boardNode.updatedAt,

apps/server/src/modules/board/repo/recursive-save.visitor.spec.ts

@@ -125,6 +125,7 @@ describe(RecursiveSaveVisitor.name, () => {
 				id: fileElement.id,
 				type: BoardNodeType.FILE_ELEMENT,
 				caption: fileElement.caption,
+				alternativeText: fileElement.alternativeText,
 			};
 			expect(visitor.createOrUpdateBoardNode).toHaveBeenCalledWith(expect.objectContaining(expectedNode));
 		});

apps/server/src/modules/board/repo/recursive-save.visitor.ts

@@ -96,6 +96,7 @@ export class RecursiveSaveVisitor implements BoardCompositeVisitor {
 		const boardNode = new FileElementNode({
 			id: fileElement.id,
 			caption: fileElement.caption,
+			alternativeText: fileElement.alternativeText,
 			parent: parentData?.boardNode,
 			position: parentData?.position,
 		});

apps/server/src/modules/board/service/content-element-update.visitor.ts

@@ -6,6 +6,7 @@ import {
 	Column,
 	ColumnBoard,
 	FileElement,
+	InputFormat,
 	RichTextElement,
 	SubmissionContainerElement,
 	SubmissionItem,
@@ -35,7 +36,8 @@ export class ContentElementUpdateVisitor implements BoardCompositeVisitor {
 
 	visitFileElement(fileElement: FileElement): void {
 		if (this.content instanceof FileContentBody) {
-			fileElement.caption = this.content.caption;
+			fileElement.caption = sanitizeRichText(this.content.caption, InputFormat.PLAIN_TEXT);
+			fileElement.alternativeText = sanitizeRichText(this.content.alternativeText, InputFormat.PLAIN_TEXT);
 		} else {
 			this.throwNotHandled(fileElement);
 		}

apps/server/src/modules/board/service/content-element.service.spec.ts

@@ -204,6 +204,7 @@ describe(ContentElementService.name, () => {
 
 				const content = new FileContentBody();
 				content.caption = 'this has been updated';
+				content.alternativeText = 'this altText has been updated';
 				const card = cardFactory.build();
 				boardDoRepo.findParentOfId.mockResolvedValue(card);
 
@@ -216,6 +217,7 @@ describe(ContentElementService.name, () => {
 				await service.update(fileElement, content);
 
 				expect(fileElement.caption).toEqual(content.caption);
+				expect(fileElement.alternativeText).toEqual(content.alternativeText);
 			});
 
 			it('should persist the element', async () => {

apps/server/src/modules/board/uc/element.uc.spec.ts

@@ -98,7 +98,7 @@ describe(ElementUc.name, () => {
 			const setup = () => {
 				const user = userFactory.build();
 				const fileElement = fileElementFactory.build();
-				const content = { caption: 'this has been updated' };
+				const content = { caption: 'this has been updated', alternativeText: 'this altText has been updated' };
 
 				const elementSpy = elementService.findById.mockResolvedValue(fileElement);
 

apps/server/src/shared/domain/domainobject/board/content-element.factory.ts

@@ -37,6 +37,7 @@ export class ContentElementFactory {
 		const element = new FileElement({
 			id: new ObjectId().toHexString(),
 			caption: '',
+			alternativeText: '',
 			children: [],
 			createdAt: new Date(),
 			updatedAt: new Date(),

apps/server/src/shared/domain/domainobject/board/file-element.do.spec.ts

@@ -23,6 +23,16 @@ describe(FileElement.name, () => {
 		});
 	});
 
+	describe('update alternative text', () => {
+		it('should be able to update alternative text', () => {
+			const fileElement = fileElementFactory.build();
+			const text = 'this is the titanic movie from 1997 in Blue-Ray Quality';
+			fileElement.alternativeText = text;
+
+			expect(fileElement.alternativeText).toEqual(text);
+		});
+	});
+
 	describe('accept', () => {
 		it('should call the right visitor method', () => {
 			const visitor = createMock<BoardCompositeVisitor>();

apps/server/src/shared/domain/domainobject/board/file-element.do.ts

@@ -10,6 +10,14 @@ export class FileElement extends BoardComposite<FileElementProps> {
 		this.props.caption = value;
 	}
 
+	get alternativeText(): string {
+		return this.props.alternativeText;
+	}
+
+	set alternativeText(value: string) {
+		this.props.alternativeText = value;
+	}
+
 	isAllowedAsChild(): boolean {
 		return false;
 	}
@@ -25,4 +33,5 @@ export class FileElement extends BoardComposite<FileElementProps> {
 
 export interface FileElementProps extends BoardCompositeProps {
 	caption: string;
+	alternativeText: string;
 }

apps/server/src/shared/domain/entity/boardnode/file-element-node.entity.spec.ts

@@ -23,7 +23,7 @@ describe(FileElementNode.name, () => {
 
 	describe('useDoBuilder()', () => {
 		const setup = () => {
-			const element = new FileElementNode({ caption: 'Test' });
+			const element = new FileElementNode({ caption: 'Test', alternativeText: 'altTest' });
 			const builder: DeepMocked<BoardDoBuilder> = createMock<BoardDoBuilder>();
 			const elementDo = fileElementFactory.build();
 

apps/server/src/shared/domain/entity/boardnode/file-element-node.entity.ts

@@ -8,10 +8,14 @@ export class FileElementNode extends BoardNode {
 	@Property()
 	caption: string;
 
+	@Property()
+	alternativeText: string;
+
 	constructor(props: FileElementNodeProps) {
 		super(props);
 		this.type = BoardNodeType.FILE_ELEMENT;
 		this.caption = props.caption;
+		this.alternativeText = props.alternativeText;
 	}
 
 	useDoBuilder(builder: BoardDoBuilder): AnyBoardDo {
@@ -23,4 +27,5 @@ export class FileElementNode extends BoardNode {
 
 export interface FileElementNodeProps extends BoardNodeProps {
 	caption: string;
+	alternativeText: string;
 }

apps/server/src/shared/testing/factory/boardnode/file-element-node.factory.ts

@@ -7,6 +7,7 @@ export const fileElementNodeFactory = BaseFactory.define<FileElementNode, FileEl
 	({ sequence }) => {
 		return {
 			caption: `caption #${sequence}`,
+			alternativeText: `alternativeText #${sequence}`,
 		};
 	}
 );

apps/server/src/shared/testing/factory/domainobject/board/file-element.do.factory.ts

@@ -8,6 +8,7 @@ export const fileElementFactory = BaseFactory.define<FileElement, FileElementPro
 		id: new ObjectId().toHexString(),
 		children: [],
 		caption: `<p>caption #${sequence}</p>`,
+		alternativeText: `alternativeText #${sequence}`,
 		createdAt: new Date(),
 		updatedAt: new Date(),
 	};