architecture.spec.ts

import { imgSnapshotTest, urlSnapshotTest } from '../../../helpers/util.ts';

describe('architecture diagram', () => {
  it('should render a simple architecture diagram with groups', () => {
    imgSnapshotTest(
      `architecture-beta
                group api(cloud)[API]

                service db(database)[Database] in api
                service disk1(disk)[Storage] in api
                service disk2(disk)[Storage] in api
                service server(server)[Server] in api
                service gateway(internet)[Gateway]

                db:L -- R:server
                disk1:T -- B:server
                disk2:T -- B:db
                server:T -- B:gateway
            `
    );
  });
  it('should render a simple architecture diagram with titleAndAccessibilities', () => {
    imgSnapshotTest(
      `architecture-beta
          title Simple Architecture Diagram
          accTitle: Accessibility Title
          accDescr: Accessibility Description
          group api(cloud)[API]

          service db(database)[Database] in api
          service disk1(disk)[Storage] in api
          service disk2(disk)[Storage] in api
          service server(server)[Server] in api

          db:L -- R:server
          disk1:T -- B:server
          disk2:T -- B:db
      `
    );
  });
  it('should render an architecture diagram with groups within groups', () => {
    imgSnapshotTest(
      `architecture-beta
                group api[API]
                group public[Public API] in api
                group private[Private API] in api

                service serv1(server)[Server] in public

                service serv2(server)[Server] in private
                service db(database)[Database] in private

                service gateway(internet)[Gateway] in api

                serv1:B -- T:serv2
                serv2:L -- R:db
                serv1:L -- R:gateway
            `
    );
  });
  it('should render an architecture diagram with the fallback icon', () => {
    imgSnapshotTest(
      `architecture-beta
                service unknown(iconnamedoesntexist)[Unknown Icon]
            `
    );
  });
  it('should render an architecture diagram with split directioning', () => {
    imgSnapshotTest(
      `architecture-beta
                service db(database)[Database]
                service s3(disk)[Storage]
                service serv1(server)[Server 1]
                service serv2(server)[Server 2]
                service disk(disk)[Disk]

                db:L -- R:s3
                serv1:L -- T:s3
                serv2:L -- B:s3
                serv1:T -- B:disk
            `
    );
  });
  it('should render an architecture diagram with directional arrows', () => {
    imgSnapshotTest(
      `architecture-beta
                service servC(server)[Server 1]
                service servL(server)[Server 2]
                service servR(server)[Server 3]
                service servT(server)[Server 4]
                service servB(server)[Server 5]

                servC:L --> R:servL
                servC:R --> L:servR
                servC:T --> B:servT
                servC:B --> T:servB

                servL:T --> L:servT
                servL:B --> L:servB
                servR:T --> R:servT
                servR:B --> R:servB
            `
    );
  });
  it('should render an architecture diagram with group edges', () => {
    imgSnapshotTest(
      `architecture-beta
                group left_group(cloud)[Left]
                group right_group(cloud)[Right]
                group top_group(cloud)[Top]
                group bottom_group(cloud)[Bottom]
                group center_group(cloud)[Center]

                service left_disk(disk)[Disk] in left_group
                service right_disk(disk)[Disk] in right_group
                service top_disk(disk)[Disk] in top_group
                service bottom_disk(disk)[Disk] in bottom_group
                service center_disk(disk)[Disk] in center_group

                left_disk{group}:R --> L:center_disk{group}
                right_disk{group}:L --> R:center_disk{group}
                top_disk{group}:B --> T:center_disk{group}
                bottom_disk{group}:T --> B:center_disk{group}
            `
    );
  });
  it('should render an architecture diagram with edge labels', () => {
    imgSnapshotTest(
      `architecture-beta
                service servC(server)[Server 1]
                service servL(server)[Server 2]
                service servR(server)[Server 3]
                service servT(server)[Server 4]
                service servB(server)[Server 5]

                servC:L -[Label]- R:servL
                servC:R -[Label]- L:servR
                servC:T -[Label]- B:servT
                servC:B -[Label]- T:servB

                servL:T -[Label]- L:servT
                servL:B -[Label]- L:servB
                servR:T -[Label]- R:servT
                servR:B -[Label]- R:servB
            `
    );
  });
  it('should render an architecture diagram with simple junction edges', () => {
    imgSnapshotTest(
      `architecture-beta
                service left_disk(disk)[Disk]
                service top_disk(disk)[Disk]
                service bottom_disk(disk)[Disk]
                service top_gateway(internet)[Gateway]
                service bottom_gateway(internet)[Gateway]
                junction juncC
                junction juncR

                left_disk:R -- L:juncC
                top_disk:B -- T:juncC
                bottom_disk:T -- B:juncC
                juncC:R -- L:juncR
                top_gateway:B -- T:juncR
                bottom_gateway:T -- B:juncR
            `
    );
  });
  it('should render an architecture diagram with complex junction edges', () => {
    imgSnapshotTest(
      `architecture-beta
                group left
                group right
                service left_disk(disk)[Disk] in left
                service top_disk(disk)[Disk] in left
                service bottom_disk(disk)[Disk] in left
                service top_gateway(internet)[Gateway] in right
                service bottom_gateway(internet)[Gateway] in right
                junction juncC in left
                junction juncR in right

                left_disk:R -- L:juncC
                top_disk:B -- T:juncC
                bottom_disk:T -- B:juncC


                top_gateway:B --> T:juncR
                bottom_gateway:T --> B:juncR

                juncC{group}:R --> L:juncR{group}
            `
    );
  });

  it('should render an architecture diagram with a reasonable height', () => {
    imgSnapshotTest(
      `architecture-beta
              group federated(cloud)[Federated Environment]
                  service server1(server)[System] in federated
                  service edge(server)[Edge Device] in federated
                  server1:R -- L:edge

              group on_prem(cloud)[Hub]
                  service firewall(server)[Firewall Device] in on_prem
                  service server(server)[Server] in on_prem
                  firewall:R -- L:server

                  service db1(database)[db1] in on_prem
                  service db2(database)[db2] in on_prem
                  service db3(database)[db3] in on_prem
                  service db4(database)[db4] in on_prem
                  service db5(database)[db5] in on_prem
                  service db6(database)[db6] in on_prem

                  junction mid in on_prem
                  server:B -- T:mid

                  junction 1Leftofmid in on_prem
                  1Leftofmid:R -- L:mid
                  1Leftofmid:B -- T:db1

                  junction 2Leftofmid in on_prem
                  2Leftofmid:R -- L:1Leftofmid
                  2Leftofmid:B -- T:db2

                  junction 3Leftofmid in on_prem
                  3Leftofmid:R -- L:2Leftofmid
                  3Leftofmid:B -- T:db3

                  junction 1RightOfMid in on_prem
                  mid:R -- L:1RightOfMid
                  1RightOfMid:B -- T:db4

                  junction 2RightOfMid in on_prem
                  1RightOfMid:R -- L:2RightOfMid
                  2RightOfMid:B -- T:db5

                  junction 3RightOfMid in on_prem
                  2RightOfMid:R -- L:3RightOfMid
                  3RightOfMid:B -- T:db6

                  edge:R -- L:firewall
      `
    );
  });
  it('should render a deterministic layout for a complex deeply-nested diagram', () => {
    imgSnapshotTest(
      `architecture-beta
                group sub1(cloud)[Subscription A]
                group vnet1(cloud)[VNet A] in sub1
                service vm1(server)[VM] in vnet1

                group sub2(cloud)[Subscription B]
                group shared(cloud)[Shared] in sub2
                service reg(database)[Registry] in shared

                group env(cloud)[Environment] in sub2
                group vnet(cloud)[VNet] in env
                group snet1(cloud)[App Subnet] in vnet
                service nsg(server)[NSG] in snet1
                service asp(server)[App Plan] in snet1
                service web(server)[Web App] in snet1

                group snet2(cloud)[PE Subnet] in vnet
                service pe1(server)[PE Blob] in snet2
                service pe2(server)[PE Bus] in snet2

                service storage(disk)[Storage] in env
                service container(disk)[Container] in env
                service bus(server)[Service Bus] in env
                service dns(server)[DNS Zone] in env

                service client(internet)[Client]

                reg:B --> T:web
                nsg:R --> L:asp
                asp:R --> L:web
                web:R --> L:pe1
                pe1:R --> L:storage
                storage:B --> T:container
                web:B --> T:pe2
                pe2:R --> L:bus
                vm1:R --> L:pe2
            `,
      { architecture: { randomize: false } }
    );
  });
  it('should render edges at correct length', () => {
    imgSnapshotTest(`
      architecture-beta
        service cell[Table Cell]
        service colspan[colspan]
        service rowspan[rowspan]
        cell:R --> L:colspan
        cell:B --> T:rowspan
    `);
  });
  it('should render with randomize: true without errors', () => {
    imgSnapshotTest(
      `architecture-beta
                group sub1(cloud)[Subscription A]
                group vnet1(cloud)[VNet A] in sub1
                service vm1(server)[VM] in vnet1

                group sub2(cloud)[Subscription B]
                group shared(cloud)[Shared] in sub2
                service reg(database)[Registry] in shared

                group env(cloud)[Environment] in sub2
                group vnet(cloud)[VNet] in env
                group snet1(cloud)[App Subnet] in vnet
                service nsg(server)[NSG] in snet1
                service asp(server)[App Plan] in snet1
                service web(server)[Web App] in snet1

                group snet2(cloud)[PE Subnet] in vnet
                service pe1(server)[PE Blob] in snet2
                service pe2(server)[PE Bus] in snet2

                service storage(disk)[Storage] in env
                service container(disk)[Container] in env
                service bus(server)[Service Bus] in env
                service dns(server)[DNS Zone] in env

                service client(internet)[Client]

                reg:B --> T:web
                nsg:R --> L:asp
                asp:R --> L:web
                web:R --> L:pe1
                pe1:R --> L:storage
                storage:B --> T:container
                web:B --> T:pe2
                pe2:R --> L:bus
                vm1:R --> L:pe2
            `,
      { architecture: { randomize: true }, screenshot: false }
    );
  });
});

describe('architecture - fcose layout knobs', () => {
  // A linear chain demonstrates `idealEdgeLengthMultiplier` cleanly: bumping the multiplier
  // visibly stretches the gap between successive nodes. The 3-DB → MCP repro for #6120 is
  // not used here because that case is rooted in the BFS spatial-map collapsing siblings to
  // the same coordinate before fcose runs, which the knobs in this PR cannot escape; the
  // declarative `align row|column` directive (separate PR) is the actual fix for that.
  const chain = `architecture-beta
    service a(server)[A]
    service b(server)[B]
    service c(server)[C]
    a:R --> L:b
    b:R --> L:c
  `;

  it('should render with default fcose knobs', () => {
    imgSnapshotTest(chain);
  });

  it('should render with an increased idealEdgeLengthMultiplier', () => {
    imgSnapshotTest(chain, { architecture: { idealEdgeLengthMultiplier: 3 } });
  });
});

describe('architecture - external', () => {
  it('should allow adding external icons', () => {
    urlSnapshotTest('/architecture-external.html');
  });
});