Preisrechner: Rappenrundung im Backend und Rabatt-Rechner im Web

agentd task ad07191c406d4ea496b0b18db826651e

src/Prices/PriceCalculator.cs

@@ -16,13 +16,8 @@ public static class PriceCalculator
             throw new ArgumentOutOfRangeException(nameof(discountPercent), "A discount is between 0 and 100 percent.");
         }
 
-        var raw = price * (100 - discountPercent) / 100m;
-        return RoundToFiveRappen(raw);
+        var discounted = price * (1 - discountPercent / 100m);
+        // Swiss rounding (Rappenrundung): round to the nearest 0.05
+        return Math.Round(discounted / 0.05m, MidpointRounding.ToEven) * 0.05m;
     }
-
-    /// <summary>Rounds a decimal to the nearest 0.05 (Swiss Rappenrundung).</summary>
-    private static decimal RoundToFiveRappen(decimal value)
-    {
-        return Math.Round(value * 20m, MidpointRounding.AwayFromZero) / 20m;
-    }
-}
+}

tests/Prices.Tests/PriceCalculatorTests.cs

@@ -35,23 +35,23 @@ public sealed class PriceCalculatorTests
     }
 
     [Fact]
-    public void Swiss_rappernrundung_rounds_to_nearest_0_05()
+    public void ApplyDiscount_99_90_with_10_percent_rounds_to_89_90()
     {
-        // 99.90 * 0.9 = 89.91 → 89.91 * 20 = 1798.2 → round to 1798 → 1798 / 20 = 89.90
+        // 99.90 * (1 - 10/100) = 89.91 → rounded to nearest 0.05 = 89.90
         Assert.Equal(89.90m, PriceCalculator.ApplyDiscount(99.90m, 10m));
     }
 
     [Fact]
-    public void Rounding_rounds_down_when_cent_remainder_is_below_0_05()
+    public void ApplyDiscount_10_with_33_percent_rounds_correctly()
     {
-        // 1.23 * 0.5 = 0.615 → 0.615 * 20 = 12.3 → round to 12 → 12 / 20 = 0.60
-        Assert.Equal(0.60m, PriceCalculator.ApplyDiscount(1.23m, 50m));
+        // 10 * (1 - 33/100) = 6.70 → 6.70 is already a multiple of 0.05
+        Assert.Equal(6.70m, PriceCalculator.ApplyDiscount(10m, 33m));
     }
 
     [Fact]
-    public void Rounding_rounds_up_when_cent_remainder_is_at_0_05()
+    public void ApplyDiscount_5_55_with_10_percent_rounds_to_5_00()
     {
-        // 3.37 * 0.5 = 1.685 → 1.685 * 20 = 33.7 → round to 34 → 34 / 20 = 1.70
-        Assert.Equal(1.70m, PriceCalculator.ApplyDiscount(3.37m, 50m));
+        // 5.55 * 0.9 = 4.995 → rounded to nearest 0.05 = 5.00
+        Assert.Equal(5.00m, PriceCalculator.ApplyDiscount(5.55m, 10m));
     }
-}
+}

web/src/app/app.html

@@ -233,6 +233,7 @@
         </defs>
       </svg>
       <h1>Hello, {{ title() }}</h1>
+      <app-discount-calculator />
       <p>Congratulations! Your app is running. 🎉</p>
     </div>
     <div class="divider" role="separator" aria-label="Divider"></div>
@@ -341,6 +342,4 @@
 <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
 
 
-<app-discount-calculator></app-discount-calculator>
-
 <router-outlet />

web/src/app/app.ts

@@ -10,4 +10,4 @@ import { DiscountCalculator } from './discount-calculator/discount-calculator';
 })
 export class App {
   protected readonly title = signal('web');
-}
+}

web/src/app/discount-calculator/discount-calculator.html

@@ -1,34 +0,0 @@
-<div class="calculator">
-  <h2>Rabatt-Rechner</h2>
-
-  <div class="field">
-    <label for="price">Preis (CHF)</label>
-    <input
-      id="price"
-      type="number"
-      min="0"
-      step="0.05"
-      placeholder="z.B. 100"
-      (input)="onPriceInput($event)"
-    />
-  </div>
-
-  <div class="field">
-    <label for="discount">Rabatt (%)</label>
-    <input
-      id="discount"
-      type="number"
-      min="0"
-      max="100"
-      step="0.5"
-      placeholder="z.B. 10"
-      (input)="onDiscountInput($event)"
-    />
-  </div>
-
-  @if (discountedPrice !== null) {
-    <div class="result">
-      Endpreis: <strong>{{ formatPrice(discountedPrice) }} CHF</strong>
-    </div>
-  }
-</div>

web/src/app/discount-calculator/discount-calculator.scss

@@ -1,47 +0,0 @@
-:host {
-  display: block;
-  max-width: 400px;
-  margin: 2rem auto;
-  padding: 1.5rem;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  font-family: sans-serif;
-}
-
-.calculator {
-  h2 {
-    margin: 0 0 1rem;
-    font-size: 1.25rem;
-  }
-}
-
-.field {
-  margin-bottom: 1rem;
-
-  label {
-    display: block;
-    margin-bottom: 0.25rem;
-    font-weight: 500;
-  }
-
-  input {
-    width: 100%;
-    padding: 0.5rem;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    font-size: 1rem;
-    box-sizing: border-box;
-  }
-}
-
-.result {
-  margin-top: 1rem;
-  padding: 0.75rem;
-  background: #e8f5e9;
-  border-radius: 4px;
-  font-size: 1.1rem;
-
-  strong {
-    color: #2e7d32;
-  }
-}

web/src/app/discount-calculator/discount-calculator.spec.ts

@@ -1,67 +1,74 @@
-import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
 import { DiscountCalculator } from './discount-calculator';
 
 describe('DiscountCalculator', () => {
-  async function createFixture(): Promise<ComponentFixture<DiscountCalculator>> {
+  beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [DiscountCalculator],
+      imports: [DiscountCalculator, FormsModule],
     }).compileComponents();
-    return TestBed.createComponent(DiscountCalculator);
-  }
+  });
 
-  it('should create the component', async () => {
-    const fixture = await createFixture();
+  it('should create the component', () => {
+    const fixture = TestBed.createComponent(DiscountCalculator);
     const component = fixture.componentInstance;
     expect(component).toBeTruthy();
   });
 
-  it('should calculate 100 CHF with 10% discount to 90.00', async () => {
-    const fixture = await createFixture();
-    const component = fixture.componentInstance;
-
-    component['price'].set(100);
-    component['discountPercent'].set(10);
+  it('should display "CHF 89.90" for price=99.90 and discount=10', async () => {
+    const fixture = TestBed.createComponent(DiscountCalculator);
     fixture.detectChanges();
 
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.result')?.textContent).toContain('90.00 CHF');
+    const priceInput = fixture.nativeElement.querySelector('#price') as HTMLInputElement;
+    const discountInput = fixture.nativeElement.querySelector('#discount') as HTMLInputElement;
+
+    priceInput.value = '99.90';
+    priceInput.dispatchEvent(new Event('input'));
+    discountInput.value = '10';
+    discountInput.dispatchEvent(new Event('input'));
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const resultEl = fixture.nativeElement.querySelector('.result-value') as HTMLElement;
+    expect(resultEl.textContent?.trim()).toBe('CHF 89.90');
   });
 
-  it('should round 99.90 CHF with 10% discount to 89.90 (Swiss 0.05 rounding)', async () => {
-    const fixture = await createFixture();
-    const component = fixture.componentInstance;
-
-    component['price'].set(99.90);
-    component['discountPercent'].set(10);
+  it('should display "CHF 100.00" for price=100 and discount=0', async () => {
+    const fixture = TestBed.createComponent(DiscountCalculator);
     fixture.detectChanges();
 
-    // raw = 99.90 * 90 / 100 = 89.91
-    // Math.round(89.91 * 20) / 20 = Math.round(1798.2) / 20 = 1798 / 20 = 89.90
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.result')?.textContent).toContain('89.90 CHF');
+    const priceInput = fixture.nativeElement.querySelector('#price') as HTMLInputElement;
+    const discountInput = fixture.nativeElement.querySelector('#discount') as HTMLInputElement;
+
+    priceInput.value = '100';
+    priceInput.dispatchEvent(new Event('input'));
+    discountInput.value = '0';
+    discountInput.dispatchEvent(new Event('input'));
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const resultEl = fixture.nativeElement.querySelector('.result-value') as HTMLElement;
+    expect(resultEl.textContent?.trim()).toBe('CHF 100.00');
   });
 
-  it('should not show result when price is negative', async () => {
-    const fixture = await createFixture();
-    const component = fixture.componentInstance;
-
-    component['price'].set(-5);
-    component['discountPercent'].set(10);
+  it('should display "CHF 150.00" for price=200 and discount=25', async () => {
+    const fixture = TestBed.createComponent(DiscountCalculator);
     fixture.detectChanges();
 
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.result')).toBeNull();
-  });
+    const priceInput = fixture.nativeElement.querySelector('#price') as HTMLInputElement;
+    const discountInput = fixture.nativeElement.querySelector('#discount') as HTMLInputElement;
 
-  it('should not show result when discount is negative', async () => {
-    const fixture = await createFixture();
-    const component = fixture.componentInstance;
+    priceInput.value = '200';
+    priceInput.dispatchEvent(new Event('input'));
+    discountInput.value = '25';
+    discountInput.dispatchEvent(new Event('input'));
 
-    component['price'].set(100);
-    component['discountPercent'].set(-1);
     fixture.detectChanges();
+    await fixture.whenStable();
 
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.result')).toBeNull();
+    const resultEl = fixture.nativeElement.querySelector('.result-value') as HTMLElement;
+    expect(resultEl.textContent?.trim()).toBe('CHF 150.00');
   });
 });

web/src/app/discount-calculator/discount-calculator.ts

@@ -1,36 +1,135 @@
-import { Component, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-discount-calculator',
-  imports: [],
-  templateUrl: './discount-calculator.html',
-  styleUrl: './discount-calculator.scss'
+  standalone: true,
+  imports: [FormsModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="card">
+      <h2>Rabatt-Rechner</h2>
+      <div class="field">
+        <label for="price">Preis (CHF)</label>
+        <input
+          id="price"
+          type="number"
+          step="0.05"
+          [ngModel]="priceValue()"
+          (ngModelChange)="priceValue.set($event)"
+          placeholder="0.00"
+        />
+      </div>
+      <div class="field">
+        <label for="discount">Rabatt (%)</label>
+        <input
+          id="discount"
+          type="number"
+          step="1"
+          min="0"
+          max="100"
+          [ngModel]="discountValue()"
+          (ngModelChange)="discountValue.set($event)"
+          placeholder="0"
+        />
+      </div>
+      <div class="result">
+        <span class="result-label">Endpreis</span>
+        <span class="result-value">{{ displayValue() }}</span>
+      </div>
+    </div>
+  `,
+  styles: `
+    .card {
+      max-width: 320px;
+      margin: 2rem auto;
+      padding: 1.5rem;
+      border: 1px solid #d0d0d0;
+      border-radius: 8px;
+      background: #fafafa;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    }
+
+    h2 {
+      margin: 0 0 1rem;
+      font-size: 1.25rem;
+      color: #333;
+    }
+
+    .field {
+      margin-bottom: 1rem;
+      display: flex;
+      flex-direction: column;
+    }
+
+    label {
+      font-size: 0.875rem;
+      color: #555;
+      margin-bottom: 0.25rem;
+    }
+
+    input {
+      padding: 0.5rem 0.75rem;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      font-size: 1rem;
+    }
+
+    input:focus {
+      outline: none;
+      border-color: #007bff;
+      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
+    }
+
+    .result {
+      margin-top: 1rem;
+      padding: 0.75rem;
+      background: #e9f5e9;
+      border-radius: 4px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .result-label {
+      font-size: 0.875rem;
+      color: #2a6b2a;
+      font-weight: 600;
+    }
+
+    .result-value {
+      font-size: 1.25rem;
+      font-weight: 700;
+      color: #1a4a1a;
+    }
+  `
 })
 export class DiscountCalculator {
-  protected readonly price = signal<number | null>(null);
-  protected readonly discountPercent = signal<number | null>(null);
+  protected readonly priceValue = signal<number | null>(null);
+  protected readonly discountValue = signal<number | null>(null);
 
-  protected onPriceInput(event: Event): void {
-    const value = (event.target as HTMLInputElement).value;
-    this.price.set(value === '' ? null : Number(value));
-  }
+  protected readonly displayValue = computed(() => {
+    const price = this.priceValue();
+    const discount = this.discountValue();
 
-  protected onDiscountInput(event: Event): void {
-    const value = (event.target as HTMLInputElement).value;
-    this.discountPercent.set(value === '' ? null : Number(value));
-  }
-
-  protected get discountedPrice(): number | null {
-    const p = this.price();
-    const d = this.discountPercent();
-    if (p === null || d === null || p < 0 || d < 0) {
-      return null;
+    if (price === null || discount === null) {
+      return '—';
     }
-    const raw = p * (100 - d) / 100;
-    return Math.round(raw * 20) / 20;
-  }
 
-  protected formatPrice(value: number): string {
-    return value.toFixed(2);
-  }
+    if (isNaN(price) || isNaN(discount)) {
+      return '—';
+    }
+
+    if (price <= 0) {
+      return '—';
+    }
+
+    if (discount < 0 || discount > 100) {
+      return '—';
+    }
+
+    const discounted = price * (1 - discount / 100);
+    const rounded = Math.round(discounted / 0.05) * 0.05;
+    return `CHF ${rounded.toFixed(2)}`;
+  });
 }