fix(stark-ui): overwrite viewBox value when using starkSvgViewBox d…

…irective

  - updated test

ISSUES CLOSED: NationalBankBelgium#1216

BREAKING CHANGES: `starkSvgViewBox` will now overwrite the `viewBox` value of the svg. If this is not desired the `starkSvgViewBox` directive should be removed from the element.

packages/stark-ui/src/modules/svg-view-box/directives/svg-view-box.directive.spec.ts

@@ -1,8 +1,8 @@
-/*tslint:disable:completed-docs*/
+/*tslint:disable:completed-docs no-identical-functions*/
 import { ComponentFixture, fakeAsync, TestBed } from "@angular/core/testing";
 import { STARK_LOGGING_SERVICE } from "@nationalbankbelgium/stark-core";
 import { MockStarkLoggingService } from "@nationalbankbelgium/stark-core/testing";
-import { StarkSvgViewBoxDirective } from "./svg-view-box.directive";
+import { STARK_DEFAULT_VIEW_BOX_SIZE, StarkSvgViewBoxDirective } from "@nationalbankbelgium/stark-ui";
 import { Component, DebugElement } from "@angular/core";
 import { By } from "@angular/platform-browser";
 
@@ -16,15 +16,13 @@ describe("SvgViewBoxDirective", () => {
 	let fixture: ComponentFixture<TestComponent>;
 
 	function getTemplate(svgViewBoxDirective: string, viewBoxAttribute?: string): string {
-		return (
-			"<div " +
-			svgViewBoxDirective +
-			"><svg xmlns='http://www.w3.org/2000/svg' " +
-			viewBoxAttribute +
-			">" +
-			"<text font-size='8' font-family='serif' y='6'><![CDATA[dummy icon]]></text>" +
-			"</svg></div>"
-		);
+		return (`
+<div ${svgViewBoxDirective}>
+	<svg xmlns="http://www.w3.org/2000/svg" ${viewBoxAttribute}>
+		<text font-size="8" font-family="serif" y="6"><![CDATA[dummy icon]]></text>
+	</svg>
+</div>
+`);
 	}
 
 	function initializeComponentFixture(): void {
@@ -57,7 +55,7 @@ describe("SvgViewBoxDirective", () => {
 			const svgElement: SVGElement = parentElement.nativeElement.querySelector("svg");
 			expect(svgElement).toBeDefined();
 			expect(svgElement.hasAttribute("viewBox")).toBe(true);
-			expect(svgElement.getAttribute("viewBox")).toBe("0 0 24 24");
+			expect(svgElement.getAttribute("viewBox")).toBe(`0 0 ${STARK_DEFAULT_VIEW_BOX_SIZE} ${STARK_DEFAULT_VIEW_BOX_SIZE}`);
 		});
 	});
 
@@ -106,14 +104,14 @@ describe("SvgViewBoxDirective", () => {
 			initializeComponentFixture();
 		});
 
-		it("should keep the viewBox attribute as is", () => {
+		it("should overwrite the viewBox attribute", () => {
 			expect(fixture).toBeDefined();
 			const parentElement: DebugElement = fixture.debugElement.query(By.directive(StarkSvgViewBoxDirective));
 			expect(parentElement).toBeDefined();
 			const svgElement: SVGElement = parentElement.nativeElement.querySelector("svg");
 			expect(svgElement).toBeDefined();
 			expect(svgElement.hasAttribute("viewBox")).toBe(true);
-			expect(svgElement.getAttribute("viewBox")).toBe(viewBoxAttribute);
+			expect(svgElement.getAttribute("viewBox")).toBe(`0 0 ${STARK_DEFAULT_VIEW_BOX_SIZE} ${STARK_DEFAULT_VIEW_BOX_SIZE}`);
 		});
 	});
 });

packages/stark-ui/src/modules/svg-view-box/directives/svg-view-box.directive.ts

@@ -9,7 +9,7 @@ const directiveName = "[starkSvgViewBox]";
 /**
  * Default value for the width and height of the 'viewBox' attribute if it is not given as an input.
  */
-const DEFAULT_VIEW_BOX_SIZE = 24;
+export const STARK_DEFAULT_VIEW_BOX_SIZE = 24;
 
 /**
  * Directive to add the 'viewBox' attribute to an SVG element.
@@ -30,7 +30,7 @@ export class StarkSvgViewBoxDirective implements AfterViewChecked, OnInit {
 	 */
 	/* tslint:disable:no-input-rename */
 	@Input("starkSvgViewBox")
-	private viewBoxSize: number = DEFAULT_VIEW_BOX_SIZE;
+	private viewBoxSize: number = STARK_DEFAULT_VIEW_BOX_SIZE;
 
 	/**
 	 * SVG element to which the viewBox attribute should be added.
@@ -64,10 +64,10 @@ export class StarkSvgViewBoxDirective implements AfterViewChecked, OnInit {
 		// ensure that this should be set only once since the ngAfterViewChecked is triggered continuously
 		if (!this.svgIcon) {
 			this.svgIcon = this.element.nativeElement.querySelector("svg") || undefined;
-			this.viewBoxSize = this.viewBoxSize || DEFAULT_VIEW_BOX_SIZE;
+			this.viewBoxSize = this.viewBoxSize || STARK_DEFAULT_VIEW_BOX_SIZE;
 
 			// set the "viewBox" attribute only if the SVG element doesn't have any defined
-			if (this.svgIcon && !this.svgIcon.hasAttribute("viewBox")) {
+			if (this.svgIcon) {
 				// viewBox value: the points "seen" in the SVG drawing area. Four values separated by white space or commas. (min x, min y, width, height)
 				const viewBoxValue = `0 0 ${this.viewBoxSize} ${this.viewBoxSize}`;
 				this.renderer.setAttribute(this.svgIcon, "viewBox", viewBoxValue);