Test coverage for schema range component

springwolf-ui/src/app/components/schemas/range/schema-range.component.css

@@ -2,7 +2,7 @@
 .range {
   background-color: rgb(128, 90, 213);
   color: rgb(255, 255, 255);
-  margin: 0 8 0 8;
-  padding: 2 4 2 4;
+  margin: 0 8px 0 8px;
+  padding: 2px 4px 2px 4px;
   border-radius: 4px;
 }

springwolf-ui/src/app/components/schemas/range/schema-range.component.html

@@ -4,56 +4,18 @@
     class="range"
     *ngIf="schema.minimum !== undefined && schema.maximum === undefined"
   >
-    <span
-      *ngIf="
-        schema.exclusiveMinimum;
-        then exclusiveMinimumSign;
-        else inclusiveMinimumSign
-      "
-    ></span>
-    {{ schema.minimum }}
+    {{ schema.exclusiveMinimum ? ">" : ">=" }} {{ schema.minimum }}
   </span>
   <span
     class="range"
     *ngIf="schema.minimum === undefined && schema.maximum !== undefined"
   >
-    <span
-      *ngIf="
-        schema.exclusiveMaximum;
-        then exclusiveMaximumSign;
-        else inclusiveMaximumSign
-      "
-    ></span>
-    {{ schema.maximum }}
+    {{ schema.exclusiveMaximum ? "<" : "<=" }} {{ schema.maximum }}
   </span>
   <span
     class="range"
     *ngIf="schema.minimum !== undefined && schema.maximum !== undefined"
+    >{{ schema.exclusiveMinimum ? "(" : "[" }} {{ schema.minimum }} ..
+    {{ schema.maximum }} {{ schema.exclusiveMaximum ? ")" : "]" }}</span
   >
-    <span
-      *ngIf="
-        schema.exclusiveMinimum;
-        then exclusiveMinimumBrackets;
-        else inclusiveMinimumBrackets
-      "
-    ></span>
-    {{ schema.minimum }} .. {{ schema.maximum }}
-    <span
-      *ngIf="
-        schema.exclusiveMaximum;
-        then exclusiveMaximumBrackets;
-        else inclusiveMaximumBrackets
-      "
-    ></span>
-  </span>
 </div>
-
-<ng-template #exclusiveMinimumBrackets>(</ng-template>
-<ng-template #exclusiveMaximumBrackets>)</ng-template>
-<ng-template #inclusiveMinimumBrackets>[</ng-template>
-<ng-template #inclusiveMaximumBrackets>]</ng-template>
-
-<ng-template #exclusiveMinimumSign>&gt;</ng-template>
-<ng-template #exclusiveMaximumSign>&lt;</ng-template>
-<ng-template #inclusiveMinimumSign>&gt;=</ng-template>
-<ng-template #inclusiveMaximumSign>&lt;=</ng-template>

springwolf-ui/src/app/components/schemas/range/schema-range.component.spec.ts

@@ -0,0 +1,129 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { SchemaRangeComponent } from "./schema-range.component";
+
+describe("SchemaRangeComponent", function () {
+  let component: SchemaRangeComponent;
+  let fixture: ComponentFixture<SchemaRangeComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SchemaRangeComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SchemaRangeComponent as any);
+    component = fixture.debugElement.componentInstance;
+  });
+
+  it("should create the component", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it("should have `( 0.1 .. 10 )` as value", async () => {
+    component.schema = {
+      title: "test",
+      minimum: 0.1,
+      maximum: 10,
+      exclusiveMinimum: true,
+      exclusiveMaximum: true,
+    };
+
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector("span").textContent).toContain(
+      "( 0.1 .. 10 )"
+    );
+  });
+
+  it("should have `[ 0.1 .. 10 )` as value", async () => {
+    component.schema = {
+      title: "test",
+      minimum: 0.1,
+      maximum: 10,
+      exclusiveMinimum: false,
+      exclusiveMaximum: true,
+    };
+
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector("span").textContent).toContain(
+      "[ 0.1 .. 10 )"
+    );
+  });
+
+  it("should have `( 0.1 .. 10 ]` as value", async () => {
+    component.schema = {
+      title: "test",
+      minimum: 0.1,
+      maximum: 10,
+      exclusiveMinimum: true,
+      exclusiveMaximum: false,
+    };
+
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector("span").textContent).toContain(
+      "( 0.1 .. 10 ]"
+    );
+  });
+
+  it("should have `[ 0.1 .. 10 ]` as value", async () => {
+    component.schema = {
+      title: "test",
+      minimum: 0.1,
+      maximum: 10,
+    };
+
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector("span").textContent).toContain(
+      "[ 0.1 .. 10 ]"
+    );
+  });
+
+  it("should have `> 0.1` as value", async () => {
+    component.schema = {
+      title: "test",
+      minimum: 0.1,
+      exclusiveMinimum: true,
+    };
+
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector("span").textContent).toContain("> 0.1");
+  });
+
+  it("should have `< 10` as value", async () => {
+    component.schema = {
+      title: "test",
+      maximum: 10,
+      exclusiveMaximum: true,
+    };
+
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector("span").textContent).toContain("< 10");
+  });
+
+  it("should have `>= 0.1` as value", async () => {
+    component.schema = {
+      title: "test",
+      minimum: 0.1,
+    };
+
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector("span").textContent).toContain(">= 0.1");
+  });
+
+  it("should have `<= 10` as value", async () => {
+    component.schema = {
+      title: "test",
+      maximum: 10,
+    };
+
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector("span").textContent).toContain("<= 10");
+  });
+});