From fe39c9717444bbc521daed98f307831366b2bce9 Mon Sep 17 00:00:00 2001 From: oleojake Date: Wed, 31 Jul 2024 13:21:35 +0200 Subject: [PATCH] #65 unit tests to zindex --- src/core/providers/canvas/zindex.util.spec.ts | 255 ++++++++++++++++++ src/core/providers/canvas/zindex.util.ts | 8 +- 2 files changed, 259 insertions(+), 4 deletions(-) create mode 100644 src/core/providers/canvas/zindex.util.spec.ts diff --git a/src/core/providers/canvas/zindex.util.spec.ts b/src/core/providers/canvas/zindex.util.spec.ts new file mode 100644 index 00000000..28329018 --- /dev/null +++ b/src/core/providers/canvas/zindex.util.spec.ts @@ -0,0 +1,255 @@ +import { ShapeModel } from '@/core/model'; +import { + moveZIndexDownOneLevel, + moveZIndexToBottom, + moveZIndexTopOneLevel, + moveZIndexToTop, +} from './zindex.util'; + +describe('moveZIndexToTop', () => { + it('should move the shape to the end of the array', () => { + // Arrange + const selectedShapeId: string = '2'; + const shapes: ShapeModel[] = [ + { id: '1', x: 0, y: 0, width: 0, height: 0, type: 'button' }, + { id: '2', x: 0, y: 0, width: 0, height: 0, type: 'input' }, + { id: '3', x: 0, y: 0, width: 0, height: 0, type: 'combobox' }, + { id: '4', x: 0, y: 0, width: 0, height: 0, type: 'checkbox' }, + ]; + // Act + const result = moveZIndexToTop(selectedShapeId, shapes); + // Assert + expect(result).toStrictEqual([ + { id: '1', x: 0, y: 0, width: 0, height: 0, type: 'button' }, + { id: '3', x: 0, y: 0, width: 0, height: 0, type: 'combobox' }, + { id: '4', x: 0, y: 0, width: 0, height: 0, type: 'checkbox' }, + { id: '2', x: 0, y: 0, width: 0, height: 0, type: 'input' }, + ]); + }); + + it('should return the same array if the shape is already at the end', () => { + // Arrange + const selectedShapeId: string = '2'; + const shapes: ShapeModel[] = [ + { id: '1', x: 0, y: 0, width: 0, height: 0, type: 'button' }, + { id: '3', x: 0, y: 0, width: 0, height: 0, type: 'combobox' }, + { id: '4', x: 0, y: 0, width: 0, height: 0, type: 'checkbox' }, + { id: '2', x: 0, y: 0, width: 0, height: 0, type: 'input' }, + ]; + // Act + const result = moveZIndexToTop(selectedShapeId, shapes); + // Assert + expect(result).toStrictEqual(shapes); + }); + + it('should return an empty array if there is no shapes created', () => { + // Arrange + const selectedShapeId: string = '2'; + const shapes: ShapeModel[] = []; + // Act + const result = moveZIndexToTop(selectedShapeId, shapes); + // Assert + expect(result).toStrictEqual([]); + }); + + it('should return the same array if the shape is not found', () => { + // Arrange + const selectedShapeId: string = '5'; + const shapes: ShapeModel[] = [ + { id: '1', x: 0, y: 0, width: 0, height: 0, type: 'button' }, + { id: '2', x: 0, y: 0, width: 0, height: 0, type: 'input' }, + { id: '3', x: 0, y: 0, width: 0, height: 0, type: 'combobox' }, + { id: '4', x: 0, y: 0, width: 0, height: 0, type: 'checkbox' }, + ]; + // Act + const result = moveZIndexToTop(selectedShapeId, shapes); + // Assert + expect(result).toStrictEqual(shapes); + }); +}); + +describe('moveZIndexToBottom', () => { + it('should move the shape to the head of the array', () => { + // Arrange + const selectedShapeId: string = '3'; + const shapes: ShapeModel[] = [ + { id: '1', x: 0, y: 0, width: 0, height: 0, type: 'button' }, + { id: '2', x: 0, y: 0, width: 0, height: 0, type: 'input' }, + { id: '3', x: 0, y: 0, width: 0, height: 0, type: 'combobox' }, + { id: '4', x: 0, y: 0, width: 0, height: 0, type: 'checkbox' }, + ]; + // Act + const result = moveZIndexToBottom(selectedShapeId, shapes); + // Assert + expect(result).toStrictEqual([ + { id: '3', x: 0, y: 0, width: 0, height: 0, type: 'combobox' }, + { id: '1', x: 0, y: 0, width: 0, height: 0, type: 'button' }, + { id: '2', x: 0, y: 0, width: 0, height: 0, type: 'input' }, + { id: '4', x: 0, y: 0, width: 0, height: 0, type: 'checkbox' }, + ]); + }); + + it('should return the same array if the shape is already at the head', () => { + // Arrange + const selectedShapeId: string = '2'; + const shapes: ShapeModel[] = [ + { id: '2', x: 0, y: 0, width: 0, height: 0, type: 'input' }, + { id: '1', x: 0, y: 0, width: 0, height: 0, type: 'button' }, + { id: '3', x: 0, y: 0, width: 0, height: 0, type: 'combobox' }, + { id: '4', x: 0, y: 0, width: 0, height: 0, type: 'checkbox' }, + ]; + // Act + const result = moveZIndexToBottom(selectedShapeId, shapes); + // Assert + expect(result).toStrictEqual(shapes); + }); + + it('should return an empty array if there is no shapes created', () => { + // Arrange + const selectedShapeId: string = '2'; + const shapes: ShapeModel[] = []; + // Act + const result = moveZIndexToBottom(selectedShapeId, shapes); + // Assert + expect(result).toStrictEqual([]); + }); + + it('should return the same array if the shape is not found', () => { + // Arrange + const selectedShapeId: string = '5'; + const shapes: ShapeModel[] = [ + { id: '1', x: 0, y: 0, width: 0, height: 0, type: 'button' }, + { id: '2', x: 0, y: 0, width: 0, height: 0, type: 'input' }, + { id: '3', x: 0, y: 0, width: 0, height: 0, type: 'combobox' }, + { id: '4', x: 0, y: 0, width: 0, height: 0, type: 'checkbox' }, + ]; + // Act + const result = moveZIndexToBottom(selectedShapeId, shapes); + // Assert + expect(result).toStrictEqual(shapes); + }); +}); + +describe('moveZIndexDownOneLevel', () => { + it('should move the shape one level towards the start of the array', () => { + // Arrange + const selectedShapeId: string = '3'; + const shapes: ShapeModel[] = [ + { id: '1', x: 0, y: 0, width: 0, height: 0, type: 'button' }, + { id: '2', x: 0, y: 0, width: 0, height: 0, type: 'input' }, + { id: '3', x: 0, y: 0, width: 0, height: 0, type: 'combobox' }, + { id: '4', x: 0, y: 0, width: 0, height: 0, type: 'checkbox' }, + ]; + // Act + const result = moveZIndexDownOneLevel(selectedShapeId, shapes); + // Assert + expect(result).toStrictEqual([ + { id: '1', x: 0, y: 0, width: 0, height: 0, type: 'button' }, + { id: '3', x: 0, y: 0, width: 0, height: 0, type: 'combobox' }, + { id: '2', x: 0, y: 0, width: 0, height: 0, type: 'input' }, + { id: '4', x: 0, y: 0, width: 0, height: 0, type: 'checkbox' }, + ]); + }); + + it('should return the same array if the shape is already at the start', () => { + // Arrange + const selectedShapeId: string = '1'; + const shapes: ShapeModel[] = [ + { id: '1', x: 0, y: 0, width: 0, height: 0, type: 'button' }, + { id: '2', x: 0, y: 0, width: 0, height: 0, type: 'input' }, + { id: '3', x: 0, y: 0, width: 0, height: 0, type: 'combobox' }, + { id: '4', x: 0, y: 0, width: 0, height: 0, type: 'checkbox' }, + ]; + // Act + const result = moveZIndexDownOneLevel(selectedShapeId, shapes); + // Assert + expect(result).toStrictEqual(shapes); + }); + + it('should return an empty array if there is no shapes created', () => { + // Arrange + const selectedShapeId: string = '2'; + const shapes: ShapeModel[] = []; + // Act + const result = moveZIndexDownOneLevel(selectedShapeId, shapes); + // Assert + expect(result).toStrictEqual([]); + }); + + it('should return the same array if the shape is not found', () => { + // Arrange + const selectedShapeId: string = '5'; + const shapes: ShapeModel[] = [ + { id: '1', x: 0, y: 0, width: 0, height: 0, type: 'button' }, + { id: '2', x: 0, y: 0, width: 0, height: 0, type: 'input' }, + { id: '3', x: 0, y: 0, width: 0, height: 0, type: 'combobox' }, + { id: '4', x: 0, y: 0, width: 0, height: 0, type: 'checkbox' }, + ]; + // Act + const result = moveZIndexDownOneLevel(selectedShapeId, shapes); + // Assert + expect(result).toStrictEqual(shapes); + }); +}); + +describe('moveZIndexTopOneLevel', () => { + it('should move the shape one level towards the end of the array', () => { + // Arrange + const selectedShapeId: string = '2'; + const shapes: ShapeModel[] = [ + { id: '1', x: 0, y: 0, width: 0, height: 0, type: 'button' }, + { id: '2', x: 0, y: 0, width: 0, height: 0, type: 'input' }, + { id: '3', x: 0, y: 0, width: 0, height: 0, type: 'combobox' }, + { id: '4', x: 0, y: 0, width: 0, height: 0, type: 'checkbox' }, + ]; + // Act + const result = moveZIndexTopOneLevel(selectedShapeId, shapes); + // Assert + expect(result).toStrictEqual([ + { id: '1', x: 0, y: 0, width: 0, height: 0, type: 'button' }, + { id: '3', x: 0, y: 0, width: 0, height: 0, type: 'combobox' }, + { id: '2', x: 0, y: 0, width: 0, height: 0, type: 'input' }, + { id: '4', x: 0, y: 0, width: 0, height: 0, type: 'checkbox' }, + ]); + }); + + it('should return the same array if the shape is already at the end', () => { + // Arrange + const selectedShapeId: string = '4'; + const shapes: ShapeModel[] = [ + { id: '1', x: 0, y: 0, width: 0, height: 0, type: 'button' }, + { id: '2', x: 0, y: 0, width: 0, height: 0, type: 'input' }, + { id: '3', x: 0, y: 0, width: 0, height: 0, type: 'combobox' }, + { id: '4', x: 0, y: 0, width: 0, height: 0, type: 'checkbox' }, + ]; + // Act + const result = moveZIndexTopOneLevel(selectedShapeId, shapes); + // Assert + expect(result).toStrictEqual(shapes); + }); + + it('should return an empty array if there is no shapes created', () => { + // Arrange + const selectedShapeId: string = '2'; + const shapes: ShapeModel[] = []; + // Act + const result = moveZIndexTopOneLevel(selectedShapeId, shapes); + // Assert + expect(result).toStrictEqual([]); + }); + + it('should return the same array if the shape is not found', () => { + // Arrange + const selectedShapeId: string = '5'; + const shapes: ShapeModel[] = [ + { id: '1', x: 0, y: 0, width: 0, height: 0, type: 'button' }, + { id: '2', x: 0, y: 0, width: 0, height: 0, type: 'input' }, + { id: '3', x: 0, y: 0, width: 0, height: 0, type: 'combobox' }, + { id: '4', x: 0, y: 0, width: 0, height: 0, type: 'checkbox' }, + ]; + // Act + const result = moveZIndexTopOneLevel(selectedShapeId, shapes); + // Assert + expect(result).toStrictEqual(shapes); + }); +}); diff --git a/src/core/providers/canvas/zindex.util.ts b/src/core/providers/canvas/zindex.util.ts index 46b51993..b07d0fc8 100644 --- a/src/core/providers/canvas/zindex.util.ts +++ b/src/core/providers/canvas/zindex.util.ts @@ -2,7 +2,7 @@ import { ShapeModel } from '@/core/model'; import { ZIndexAction } from './canvas.model'; // TOO Add Unit tests to all these methods: #65 -const moveZIndexToTop = ( +export const moveZIndexToTop = ( selectedShapeId: string, shapeCollection: ShapeModel[] ): ShapeModel[] => { @@ -17,7 +17,7 @@ const moveZIndexToTop = ( : shapeCollection; }; -const moveZIndexToBottom = ( +export const moveZIndexToBottom = ( selectedShapeId: string, shapeCollection: ShapeModel[] ): ShapeModel[] => { @@ -32,7 +32,7 @@ const moveZIndexToBottom = ( : shapeCollection; }; -const moveZIndexDownOneLevel = ( +export const moveZIndexDownOneLevel = ( selectedShapeId: string, shapeCollection: ShapeModel[] ): ShapeModel[] => { @@ -55,7 +55,7 @@ const moveZIndexDownOneLevel = ( : shapeCollection; }; -const moveZIndexTopOneLevel = ( +export const moveZIndexTopOneLevel = ( selectedShapeId: string, shapeCollection: ShapeModel[] ): ShapeModel[] => {