<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="Electron" modified="2026-02-23T08:00:00.000Z" agent="draw.io" version="24.0.0">
  <diagram name="Testing Pyramid" id="testing-strategy">
    <mxGraphModel dx="1300" dy="800" grid="1" gridSize="10">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />

        <!-- Title -->
        <mxCell id="title" value="TechShop Testing Pyramid — Angular 21 + .NET 10 (Part 9)" style="text;html=1;strokeColor=none;fillColor=none;align=center;fontSize=17;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="80" y="20" width="1030" height="40" as="geometry" />
        </mxCell>

        <!-- Pyramid visual (static level boxes) -->

        <!-- Layer 1: Static Analysis -->
        <mxCell id="l0" value="Layer 0 — Static Analysis" style="rounded=1;fillColor=#E0E0E0;strokeColor=#757575;fontSize=12;fontStyle=1;whiteSpace=wrap;" vertex="1" parent="1">
          <mxGeometry x="160" y="590" width="560" height="40" as="geometry" />
        </mxCell>
        <mxCell id="l0-desc" value="TypeScript strict mode · ESLint flat config · dotnet analyzer · no `any`" style="text;html=1;align=center;fontSize=11;" vertex="1" parent="1">
          <mxGeometry x="760" y="593" width="380" height="35" as="geometry" />
        </mxCell>

        <!-- Layer 1: Unit Tests -->
        <mxCell id="l1" value="Layer 1 — Unit Tests (200+)" style="rounded=1;fillColor=#E8F5E9;strokeColor=#2E7D32;fontSize=12;fontStyle=1;whiteSpace=wrap;" vertex="1" parent="1">
          <mxGeometry x="210" y="480" width="460" height="80" as="geometry" />
        </mxCell>
        <mxCell id="l1-desc-ng" value="&lt;b&gt;Angular (Vitest)&lt;/b&gt;&lt;br/&gt;CartService · ProductStore&lt;br/&gt;85% statements coverage" style="rounded=1;fillColor=#F1F8E9;strokeColor=#2E7D32;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="760" y="478" width="190" height="80" as="geometry" />
        </mxCell>
        <mxCell id="l1-desc-dn" value="&lt;b&gt;.NET (xUnit)&lt;/b&gt;&lt;br/&gt;Domain entities · Value objects&lt;br/&gt;95% Domain coverage" style="rounded=1;fillColor=#F1F8E9;strokeColor=#2E7D32;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="965" y="478" width="190" height="80" as="geometry" />
        </mxCell>

        <!-- Layer 2: Component / Integration -->
        <mxCell id="l2" value="Layer 2 — Component + Integration Tests (50+)" style="rounded=1;fillColor=#E3F2FD;strokeColor=#1565C0;fontSize=12;fontStyle=1;whiteSpace=wrap;" vertex="1" parent="1">
          <mxGeometry x="270" y="360" width="340" height="90" as="geometry" />
        </mxCell>
        <mxCell id="l2-ng" value="&lt;b&gt;Angular Testing Library&lt;/b&gt;&lt;br/&gt;ProductListComponent&lt;br/&gt;User-facing behavior" style="rounded=1;fillColor=#E3F2FD;strokeColor=#1565C0;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="760" y="360" width="190" height="80" as="geometry" />
        </mxCell>
        <mxCell id="l2-dn" value="&lt;b&gt;WebApplicationFactory&lt;/b&gt;&lt;br/&gt;GET /api/products · 404 PD&lt;br/&gt;Postgres integration" style="rounded=1;fillColor=#E3F2FD;strokeColor=#1565C0;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="965" y="360" width="190" height="80" as="geometry" />
        </mxCell>

        <!-- Layer 3: E2E -->
        <mxCell id="l3" value="Layer 3 — E2E (5 critical paths)" style="rounded=1;fillColor=#FFF3E0;strokeColor=#E65100;fontSize=12;fontStyle=1;whiteSpace=wrap;" vertex="1" parent="1">
          <mxGeometry x="350" y="260" width="180" height="75" as="geometry" />
        </mxCell>
        <mxCell id="l3-desc" value="&lt;b&gt;Playwright&lt;/b&gt;&lt;br/&gt;Search → Product → Cart → Checkout → Confirm&lt;br/&gt;Out-of-stock · SignalR real-time&lt;br/&gt;Mobile Safari · Desktop Chrome" style="rounded=1;fillColor=#FFF3E0;strokeColor=#E65100;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="760" y="255" width="395" height="80" as="geometry" />
        </mxCell>

        <!-- Apex -->
        <mxCell id="apex" value="100% Critical E2E" style="ellipse;fillColor=#C62828;fontColor=#ffffff;strokeColor=#7f0000;fontSize=11;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="395" y="200" width="90" height="45" as="geometry" />
        </mxCell>

        <!-- Strategy labels -->
        <mxCell id="s-fast" value="⚡ Fast (ms)" style="text;fontSize=11;fontStyle=1;fontColor=#2E7D32;" vertex="1" parent="1">
          <mxGeometry x="100" y="510" width="80" height="20" as="geometry" />
        </mxCell>
        <mxCell id="s-slow" value="🐢 Slower (minutes)" style="text;fontSize=11;fontStyle=1;fontColor=#E65100;" vertex="1" parent="1">
          <mxGeometry x="100" y="270" width="150" height="20" as="geometry" />
        </mxCell>

        <!-- CI commands strip -->
        <mxCell id="ci-bg" value="CI Commands" style="swimlane;startSize=30;fillColor=#1a1a2e;fontColor=#ffffff;strokeColor=#0f3460;fontSize=12;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="60" y="680" width="1095" height="80" as="geometry" />
        </mxCell>
        <mxCell id="ci1" value="nx affected --target=test&lt;br/&gt;(Angular, PR)" style="rounded=1;fillColor=#E8F5E9;strokeColor=#2E7D32;fontSize=10;whiteSpace=wrap;" vertex="1" parent="ci-bg">
          <mxGeometry x="15" y="30" width="220" height="40" as="geometry" />
        </mxCell>
        <mxCell id="ci2" value="dotnet test --filter Category=Integration&lt;br/&gt;(.NET, PR)" style="rounded=1;fillColor=#E3F2FD;strokeColor=#1565C0;fontSize=10;whiteSpace=wrap;" vertex="1" parent="ci-bg">
          <mxGeometry x="255" y="30" width="260" height="40" as="geometry" />
        </mxCell>
        <mxCell id="ci3" value="playwright test --project=chromium&lt;br/&gt;(Staging, post-deploy)" style="rounded=1;fillColor=#FFF3E0;strokeColor=#E65100;fontSize=10;whiteSpace=wrap;" vertex="1" parent="ci-bg">
          <mxGeometry x="535" y="30" width="260" height="40" as="geometry" />
        </mxCell>
        <mxCell id="ci4" value="playwright test --project='Mobile Safari'&lt;br/&gt;(Staging, full suite)" style="rounded=1;fillColor=#FFF3E0;strokeColor=#E65100;fontSize=10;whiteSpace=wrap;" vertex="1" parent="ci-bg">
          <mxGeometry x="815" y="30" width="260" height="40" as="geometry" />
        </mxCell>

      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
