Merge pull request #29 from platform-mesh/feat/link-value

feat: link value

Author: Sobyt483

projects/wc/_mocks_/ui5-mock.ts

@@ -29,5 +29,6 @@ jest.mock('@ui5/webcomponents-ngx', () => {
     ToolbarButtonComponent: MockComponent,
     ToolbarComponent: MockComponent,
     BarComponent: MockComponent,
+    LinkComponent: MockComponent,
   };
 });

…ic-ui/value-cell/value-cell.constants.ts …/boolean-value/boolean-cell.constants.tsprojects/wc/src/app/components/generic-ui/value-cell/value-cell.constants.ts renamed to projects/wc/src/app/components/generic-ui/value-cell/boolean-value/boolean-cell.constants.ts projects/wc/src/app/components/generic-ui/value-cell/value-cell.constants.ts renamed to projects/wc/src/app/components/generic-ui/value-cell/boolean-value/boolean-cell.constants.ts

@@ -0,0 +1 @@
+<ui5-icon [name]="iconName()" [design]="iconDesign()"></ui5-icon>

projects/wc/src/app/components/generic-ui/value-cell/boolean-value/boolean-value.component.html

@@ -0,0 +1,102 @@
+import {
+  ICON_DESIGN_NEGATIVE,
+  ICON_DESIGN_POSITIVE,
+  ICON_NAME_NEGATIVE,
+  ICON_NAME_POSITIVE,
+} from './boolean-cell.constants';
+import { BooleanValueComponent } from './boolean-value.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+describe('BooleanValueComponent', () => {
+  let component: BooleanValueComponent;
+  let fixture: ComponentFixture<BooleanValueComponent>;
+
+  const makeComponent = (boolValue: boolean) => {
+    fixture = TestBed.createComponent(BooleanValueComponent);
+    component = fixture.componentInstance;
+
+    fixture.componentRef.setInput('boolValue', boolValue);
+
+    fixture.detectChanges();
+
+    return { component, fixture };
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [BooleanValueComponent],
+    }).overrideComponent(BooleanValueComponent, {
+      set: {
+        imports: [],
+        schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      },
+    });
+  });
+
+  it('should create', () => {
+    const { component } = makeComponent(true);
+    expect(component).toBeTruthy();
+  });
+
+  it('should set positive icon design and name for true value', () => {
+    const { component } = makeComponent(true);
+
+    expect(component.iconDesign()).toBe(ICON_DESIGN_POSITIVE);
+    expect(component.iconName()).toBe(ICON_NAME_POSITIVE);
+  });
+
+  it('should set negative icon design and name for false value', () => {
+    const { component } = makeComponent(false);
+
+    expect(component.iconDesign()).toBe(ICON_DESIGN_NEGATIVE);
+    expect(component.iconName()).toBe(ICON_NAME_NEGATIVE);
+  });
+
+  it('should render ui5-icon for true value', () => {
+    const { fixture } = makeComponent(true);
+    const compiled = fixture.nativeElement;
+    const iconElement = compiled.querySelector('ui5-icon');
+
+    expect(iconElement).toBeTruthy();
+  });
+
+  it('should render ui5-icon for false value', () => {
+    const { fixture } = makeComponent(false);
+    const compiled = fixture.nativeElement;
+    const iconElement = compiled.querySelector('ui5-icon');
+
+    expect(iconElement).toBeTruthy();
+  });
+
+  it('should update icon when boolValue changes from true to false', () => {
+    const { component, fixture } = makeComponent(true);
+
+    expect(component.iconDesign()).toBe(ICON_DESIGN_POSITIVE);
+    expect(component.iconName()).toBe(ICON_NAME_POSITIVE);
+
+    fixture.componentRef.setInput('boolValue', false);
+    fixture.detectChanges();
+
+    expect(component.iconDesign()).toBe(ICON_DESIGN_NEGATIVE);
+    expect(component.iconName()).toBe(ICON_NAME_NEGATIVE);
+  });
+
+  it('should update icon when boolValue changes from false to true', () => {
+    const { component, fixture } = makeComponent(false);
+
+    expect(component.iconDesign()).toBe(ICON_DESIGN_NEGATIVE);
+    expect(component.iconName()).toBe(ICON_NAME_NEGATIVE);
+
+    fixture.componentRef.setInput('boolValue', true);
+    fixture.detectChanges();
+
+    expect(component.iconDesign()).toBe(ICON_DESIGN_POSITIVE);
+    expect(component.iconName()).toBe(ICON_NAME_POSITIVE);
+  });
+
+  it('should have required boolValue input', () => {
+    const { component } = makeComponent(true);
+    expect(component.boolValue()).toBe(true);
+  });
+});

projects/wc/src/app/components/generic-ui/value-cell/boolean-value/boolean-value.component.scss

@@ -0,0 +1,28 @@
+import {
+  ICON_DESIGN_NEGATIVE,
+  ICON_DESIGN_POSITIVE,
+  ICON_NAME_NEGATIVE,
+  ICON_NAME_POSITIVE,
+} from './boolean-cell.constants';
+import { Component, computed, input } from '@angular/core';
+import { IconComponent } from '@ui5/webcomponents-ngx';
+
+export type IconDesignType =
+  | typeof ICON_DESIGN_POSITIVE
+  | typeof ICON_DESIGN_NEGATIVE;
+
+@Component({
+  selector: 'wc-boolean-value',
+  imports: [IconComponent],
+  templateUrl: './boolean-value.component.html',
+  styleUrl: './boolean-value.component.scss',
+})
+export class BooleanValueComponent {
+  boolValue = input.required<boolean>();
+  iconDesign = computed<IconDesignType>(() => {
+    return this.boolValue() ? ICON_DESIGN_POSITIVE : ICON_DESIGN_NEGATIVE;
+  });
+  iconName = computed<string>(() => {
+    return this.boolValue() ? ICON_NAME_POSITIVE : ICON_NAME_NEGATIVE;
+  });
+}

projects/wc/src/app/components/generic-ui/value-cell/boolean-value/boolean-value.component.spec.ts

@@ -0,0 +1 @@
+<ui5-link (click)="stopPropagation($event)" target="_blank" [tooltip]="urlValue()" [href]="urlValue()">Link</ui5-link>

projects/wc/src/app/components/generic-ui/value-cell/boolean-value/boolean-value.component.ts

@@ -0,0 +1,103 @@
+import { LinkValueComponent } from './link-value.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+describe('LinkValueComponent', () => {
+  let component: LinkValueComponent;
+  let fixture: ComponentFixture<LinkValueComponent>;
+
+  const makeComponent = (urlValue: string) => {
+    fixture = TestBed.createComponent(LinkValueComponent);
+    component = fixture.componentInstance;
+
+    fixture.componentRef.setInput('urlValue', urlValue);
+
+    fixture.detectChanges();
+
+    return { component, fixture };
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [LinkValueComponent],
+    }).overrideComponent(LinkValueComponent, {
+      set: {
+        imports: [],
+        schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      },
+    });
+  });
+
+  it('should create', () => {
+    const { component } = makeComponent('https://example.com');
+    expect(component).toBeTruthy();
+  });
+
+  it('should render ui5-link', () => {
+    const { fixture } = makeComponent('https://example.com');
+    const compiled = fixture.nativeElement;
+    const linkElement = compiled.querySelector('ui5-link');
+
+    expect(linkElement).toBeTruthy();
+    expect(linkElement.textContent.trim()).toBe('Link');
+  });
+
+  it('should render ui5-link with different URL', () => {
+    const { fixture } = makeComponent('http://test.com');
+    const compiled = fixture.nativeElement;
+    const linkElement = compiled.querySelector('ui5-link');
+
+    expect(linkElement).toBeTruthy();
+  });
+
+  it('should call stopPropagation when link is clicked', () => {
+    const { component, fixture } = makeComponent('https://example.com');
+    const compiled = fixture.nativeElement;
+    const linkElement = compiled.querySelector('ui5-link');
+
+    const mockEvent = {
+      stopPropagation: jest.fn(),
+    };
+
+    component.stopPropagation(mockEvent as any);
+
+    expect(mockEvent.stopPropagation).toHaveBeenCalled();
+  });
+
+  it('should update when urlValue changes', () => {
+    const { fixture } = makeComponent('https://example.com');
+    const compiled = fixture.nativeElement;
+    let linkElement = compiled.querySelector('ui5-link');
+
+    expect(linkElement).toBeTruthy();
+
+    fixture.componentRef.setInput('urlValue', 'https://newurl.com');
+    fixture.detectChanges();
+
+    linkElement = compiled.querySelector('ui5-link');
+    expect(linkElement).toBeTruthy();
+  });
+
+  it('should have required urlValue input', () => {
+    const { component } = makeComponent('https://example.com');
+    expect(component.urlValue()).toBe('https://example.com');
+  });
+
+  it('should handle complex URLs with paths and parameters', () => {
+    const complexUrl = 'https://example.com/path?param=value&other=123';
+    const { fixture } = makeComponent(complexUrl);
+    const compiled = fixture.nativeElement;
+    const linkElement = compiled.querySelector('ui5-link');
+
+    expect(linkElement).toBeTruthy();
+  });
+
+  it('should handle URLs with fragments', () => {
+    const urlWithFragment = 'https://example.com/page#section';
+    const { fixture } = makeComponent(urlWithFragment);
+    const compiled = fixture.nativeElement;
+    const linkElement = compiled.querySelector('ui5-link');
+
+    expect(linkElement).toBeTruthy();
+  });
+});

projects/wc/src/app/components/generic-ui/value-cell/link-value/link-value.component.html

@@ -0,0 +1,16 @@
+import { Component, input } from '@angular/core';
+import { LinkComponent } from '@ui5/webcomponents-ngx';
+
+@Component({
+  selector: 'wc-link-value',
+  imports: [LinkComponent],
+  templateUrl: './link-value.component.html',
+  styleUrl: './link-value.component.scss',
+})
+export class LinkValueComponent {
+  urlValue = input.required<string>();
+
+  public stopPropagation(event: Event) {
+    event.stopPropagation();
+  }
+}