Merged PR 1866: Anlage Komponenten und Directives + Unit Tests und Stories

Related work items: #5175

libs/shared/product-format/README.md

@@ -0,0 +1,7 @@
+# shared-product-format
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test shared-product-format` to execute the unit tests.

libs/shared/product-format/eslint.config.js

@@ -0,0 +1,34 @@
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../../eslint.config.js');
+
+module.exports = [
+  ...baseConfig,
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'shared',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'shared',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {},
+  },
+];

libs/shared/product-format/jest.config.ts

@@ -0,0 +1,21 @@
+export default {
+  displayName: 'shared-product-format',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../coverage/libs/shared/product-format',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

libs/shared/product-format/project.json

@@ -0,0 +1,20 @@
+{
+  "name": "shared-product-format",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/shared/product-format/src",
+  "prefix": "shared",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/shared/product-format/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

libs/shared/product-format/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/product-format-icon.component';
+export * from './lib/product-format.component';

libs/shared/product-format/src/lib/product-format-icon.component.spec.ts

@@ -0,0 +1,30 @@
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+import { ProductFormatIconComponent } from './product-format-icon.component';
+import { NgIcon } from '@ng-icons/core';
+
+describe('ProductFormatIconComponent', () => {
+  let spectator: Spectator<ProductFormatIconComponent>;
+  const createComponent = createComponentFactory({
+    component: ProductFormatIconComponent,
+  });
+
+  beforeEach(() => {
+    spectator = createComponent({ props: { format: 'HC' } });
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  it('should render ng-icon with lowercased format as name', () => {
+    const icon = spectator.query(NgIcon);
+    expect(icon).toBeTruthy();
+    expect(icon?.name()).toBe('hc');
+  });
+
+  it('should set correct data attributes on host', () => {
+    const host = spectator.element;
+    expect(host).toHaveAttribute('data-what', 'product-format-icon');
+    expect(host).toHaveAttribute('data-which', 'shared-product-format-icon');
+  });
+});

libs/shared/product-format/src/lib/product-format-icon.component.ts

@@ -0,0 +1,20 @@
+import { Component, computed, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { ProductFormatIconGroup } from '@isa/icons';
+
+@Component({
+  selector: 'shared-product-format-icon',
+  template: `<ng-icon [name]="formatLowerCase()" size="1.5rem"></ng-icon>`,
+  imports: [NgIcon],
+  providers: [provideIcons(ProductFormatIconGroup)],
+  host: {
+    '[class]': '["inline-block","text-isa-neutral-900", "size-6"]',
+    'data-what': 'product-format-icon',
+    'data-which': 'shared-product-format-icon',
+  },
+})
+export class ProductFormatIconComponent {
+  format = input.required<string>();
+
+  formatLowerCase = computed(() => this.format().toLowerCase());
+}

libs/shared/product-format/src/lib/product-format.component.spec.ts

@@ -0,0 +1,38 @@
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+import { ProductFormatComponent } from './product-format.component';
+import { ProductFormatIconComponent } from './product-format-icon.component';
+
+describe('ProductFormatComponent', () => {
+  let spectator: Spectator<ProductFormatComponent>;
+  const createComponent = createComponentFactory({
+    component: ProductFormatComponent,
+    imports: [ProductFormatIconComponent],
+  });
+
+  beforeEach(() => {
+    spectator = createComponent({
+      props: { format: 'HC', formatDetail: 'Hardcover' },
+    });
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  it('should render ProductFormatIconComponent with correct format', () => {
+    const icon = spectator.query(ProductFormatIconComponent);
+    expect(icon).toBeTruthy();
+    // Check input binding
+    expect(icon?.format()).toBe('HC');
+  });
+
+  it('should render the formatDetail text', () => {
+    expect(spectator.query('span')).toHaveText('Hardcover');
+  });
+
+  it('should set correct data attributes on host', () => {
+    const host = spectator.element;
+    expect(host).toHaveAttribute('data-what', 'product-format');
+    expect(host).toHaveAttribute('data-which', 'shared-product-format');
+  });
+});

libs/shared/product-format/src/lib/product-format.component.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ProductFormatIconComponent } from './product-format-icon.component';
+
+@Component({
+  selector: 'shared-product-format',
+  template: `<shared-product-format-icon
+      [format]="format()"
+    ></shared-product-format-icon>
+    <span class="isa-text-body-2-regular text-isa-secondary-900 truncate">
+      {{ formatDetail() }}
+    </span>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ProductFormatIconComponent],
+  host: {
+    '[class]': '["flex", "items-center", "gap-2"]',
+    'data-what': 'product-format',
+    'data-which': 'shared-product-format',
+  },
+})
+export class ProductFormatComponent {
+  format = input.required<string>();
+
+  formatDetail = input.required<string>();
+}

libs/shared/product-format/src/test-setup.ts

@@ -0,0 +1,10 @@
+// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+globalThis.ngJest = {
+  testEnvironmentOptions: {
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+  },
+};
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv();

libs/shared/product-format/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

libs/shared/product-format/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": ["src/**/*.ts"]
+}

libs/shared/product-format/tsconfig.spec.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}