wardley.spec.js

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

describe('Wardley Maps', () => {
  it('1: should render Tea Shop', () => {
    imgSnapshotTest(
      `
wardley-beta
title Tea Shop
size [1100, 800]

anchor Business [0.95, 0.63]
anchor Public [0.95, 0.78]
component Cup of Tea [0.79, 0.61] label [19, -4]
component Cup [0.73, 0.78]
component Tea [0.63, 0.81]
component Hot Water [0.52, 0.80]
component Water [0.38, 0.82]
component Kettle [0.43, 0.35] label [-57, 4]
component Power [0.1, 0.7] label [-27, 20]

Business -> Cup of Tea
Public -> Cup of Tea
Cup of Tea -> Cup
Cup of Tea -> Tea
Cup of Tea -> Hot Water
Hot Water -> Water
Hot Water -> Kettle
Kettle -> Power

evolve Kettle 0.62
evolve Power 0.89

note "Standardising power allows Kettles to evolve faster" [0.30, 0.49]
note "Hot water is obvious and well known" [0.48, 0.80]
note "A generic note appeared" [0.23, 0.33]
      `,
      {}
    );
  });

  it('2: should render Data Evolution Stages', () => {
    imgSnapshotTest(
      `
wardley-beta
title Data Evolution Pipeline
size [1100, 800]

evolution Unmodelled -> Divergent -> Convergent -> Modelled

component User Needs [0.95, 0.05]
component Data Collection [0.80, 0.15]
component Custom Analytics [0.70, 0.35]
component Standardized Reports [0.65, 0.65]
component Commodity Storage [0.60, 0.85]

User Needs -> Data Collection
Data Collection -> Custom Analytics
Custom Analytics -> Standardized Reports
Standardized Reports -> Commodity Storage

evolve Custom Analytics 0.60
evolve Standardized Reports 0.85
      `,
      {}
    );
  });

  it('3: should render Pipelines', () => {
    imgSnapshotTest(
      `
wardley-beta
title Kettle Evolution Pipeline
size [1100, 800]

component Kettle [0.57, 0.45]
component Power [0.10, 0.70]
component User [0.95, 0.50]

Kettle -> Power
User -> Electric Kettle

pipeline Kettle {
  component Campfire Kettle [0.35] label [-60, 35]
  component Electric Kettle [0.53] label [-60, 35]
  component Smart Kettle [0.72] label [-30, 35]
}

Campfire Kettle -> Kettle
Electric Kettle -> Kettle
Smart Kettle -> Kettle
      `,
      {}
    );
  });

  it('4: should render Link Types and Annotations', () => {
    imgSnapshotTest(
      `
wardley-beta
title Link Features Demo
size [1100, 800]

component User [0.95, 0.90]
component App [0.75, 0.75]
component API [0.60, 0.60]
component Cache [0.65, 0.45]
component Database [0.15, 0.80]
component Service [0.45, 0.50]

User -> App
App +> API; +>
API -> Database; constraint
API +<> Cache; +<>
Cache +< Service; +<
Service +'backup'> Database
      `,
      {}
    );
  });

  it('5: should render Custom Canvas Size', () => {
    imgSnapshotTest(
      `
wardley-beta
title Custom Size Map
size [600, 800]

anchor User [0.95, 0.90]
component App [0.75, 0.85]
component API [0.50, 0.70]
component Database [0.30, 0.50]
component Cloud [0.15, 0.30]

User -> App
App -> API
API -> Database
Database -> Cloud

evolve Database 0.60
      `,
      {}
    );
  });

  ['dark', 'forest', 'neutral', 'base'].forEach((theme) => {
    it(`should render under the ${theme} theme`, () => {
      imgSnapshotTest(
        `
wardley-beta
title Theme Test - ${theme}
size [1100, 800]

anchor User [0.95, 0.85]
component App [0.75, 0.70]
component API [0.55, 0.55]
component Database [0.30, 0.60]
component Cache [0.50, 0.40]

User -> App
App -> API
API -> Database
API -> Cache

evolve Database 0.80
        `,
        { theme }
      );
    });
  });

  it('6: should render GPT Tokeniser Architecture', () => {
    imgSnapshotTest(
      `
wardley-beta
title GPT Tokeniser
size [1100, 800]

anchor GPT Tokeniser [0.90, 0.58]

component tokeniser [0.81, 0.58]
component encoder [0.60, 0.32] label [1, -9]
component decoder [0.60, 0.72]
component methodology [0.72, 0.53]
component training code [0.68, 0.26] label [-90, 2]
component inference code [0.65, 0.37] label [-50, -12]
component algo [0.53, 0.50] label [-15, -17]
component GPT2 [0.81, 0.65] label [-14, 27]
component GPT3 [0.81, 0.73] label [-15, 27]
component GPT4 [0.81, 0.77] label [-14, 28]
component GPT5 [0.81, 0.37] label [-10, 28]
component GPT6 [0.81, 0.17] label [-20, 28]
component GPT7 [0.81, 0.13] label [-13, 27]
component tokeniser training data [0.29, 0.34] label [-74, -32]
component special tokens [0.59, 0.26] label [-61, 15]
component UTF8 [0.17, 0.74]
component token vocabulary [0.41, 0.56] label [-25, 16]
component byte pair encoding (BPE) [0.53, 0.76] label [-27, 19]
component english text data [0.15, 0.37] label [0, 10]
component code data [0.15, 0.30] label [-31, 23]
component foreign text data [0.15, 0.23] label [-51, 18]
component python [0.35, 0.84]
component sentencepiece [0.25, 0.80] label [-49, 19]
component IDE [0.27, 0.86]
component MEGABYTE [0.53, 0.18] label [-28, 28]
component text merging rules [0.60, 0.21] label [-64, -10]
component security framework [0.67, 0.58] label [-27, 10]
component Unicode Consortium [0.06, 0.55]
component Unicode License v3 [0.13, 0.72] label [-29, 11]

GPT Tokeniser -> tokeniser

tokeniser -> methodology
methodology -> training code
methodology -> inference code
methodology -> security framework

training code -> special tokens
training code -> python

algo -> tokeniser training data
training code -> text merging rules

training code -> encoder
inference code -> decoder
encoder -> algo
decoder -> algo

algo -> token vocabulary

byte pair encoding (BPE) -> UTF8
MEGABYTE -> UTF8
UTF8 -> Unicode License v3
Unicode License v3 -> Unicode Consortium

tokeniser training data -> english text data
tokeniser training data -> code data
tokeniser training data -> foreign text data

python -> IDE
python -> sentencepiece

pipeline tokeniser {
  component tokeniser v1 [0.11]
  component tokeniser v2 [0.80]
}

pipeline methodology {
  component methodology v1 [0.20]
  component methodology v2 [0.80]
}

pipeline algo {
  component algo v1 [0.14]
  component algo v2 [0.80]
}

deaccelerator License Play [0.13, 0.78]

annotations [1, 0]
annotation 1,[0.57, 0.16] "Alternative algos in research"
annotation 2,[0.57, 0.76] "Most popular, but not the most efficient"
annotation 3,[0.20, 0.3] "Ensure balanced token vocabulary"
annotation 4,[0.60, 0.28] "Required for delimiters"
annotation 5,[0.70, 0.50] "A structured approach for achieving a goal"

note "Voting members: Adobe, Amazon, Apple, Google, Meta, Microsoft, Netflix, Salesforce" [0.04, 0.35]
      `,
      {}
    );
  });

  it('should render component sourcing strategies including market and ecosystem', () => {
    imgSnapshotTest(
      `
wardley-beta
title Sourcing Strategies
size [1100, 800]

component Custom Built [0.80, 0.20] (build)
component Off The Shelf [0.65, 0.45] (buy)
component Outsourced Service [0.50, 0.65] (outsource)
component Marketplace [0.35, 0.80] (market)
component Platform [0.20, 0.92] (ecosystem)
      `,
      {}
    );
  });

  it('should render pioneers/settlers/townplanners attitude zones', () => {
    imgSnapshotTest(
      `
wardley-beta
title Pioneers, Settlers, Town Planners
size [1100, 800]

pioneers [0.95, 0.05, 0.55, 0.30]
settlers [0.95, 0.35, 0.55, 0.65]
townplanners [0.95, 0.70, 0.55, 0.95]

component Custom Research [0.80, 0.15]
component Product [0.55, 0.50]
component Commodity Service [0.30, 0.85]
      `,
      {}
    );
  });

  it('should render dense map labels without overlap when autoPlaceLabels is enabled', () => {
    // Seven long-named components packed into a tiny coordinate box. Without
    // auto-placement their default NE-offset labels collide into an unreadable
    // blob, so this map genuinely exercises the placement algorithm.
    imgSnapshotTest(
      `
wardley-beta
title Overlapping Label Stress Test
size [1100, 800]

component Customer Service Portal [0.55, 0.62]
component Customer Support Desk [0.58, 0.60]
component Customer Records Store [0.52, 0.64]
component Customer Data Platform [0.56, 0.585]
component Account Management API [0.53, 0.59]
component Billing And Invoicing [0.57, 0.635]
component Identity Provider [0.545, 0.61]

Customer Service Portal -> Customer Data Platform
Customer Support Desk -> Customer Records Store
Account Management API -> Billing And Invoicing
Identity Provider -> Customer Data Platform
      `,
      { 'wardley-beta': { autoPlaceLabels: true } }
    );
  });

  it('should keep collision-free manual labels when autoPlaceLabels is enabled', () => {
    // Three cases: `Kept Manual Label` is isolated with a manual label that
    // lands in clear space and has no link touching it -> kept untouched.
    // `Colliding Manual` has a manual label dropped onto a node cluster ->
    // re-placed. The remaining components are untuned -> auto-placed.
    imgSnapshotTest(
      `
wardley-beta
title Manual Label Mix
size [1100, 800]

component Kept Manual Label [0.25, 0.30] label [20, -18]
component Colliding Manual [0.55, 0.60] label [-90, 2]
component Crowded Node A [0.52, 0.62]
component Crowded Node B [0.56, 0.585]
component Crowded Node C [0.53, 0.59]
component Untuned Component [0.78, 0.40]

Colliding Manual -> Crowded Node B
Crowded Node A -> Untuned Component
      `,
      { 'wardley-beta': { autoPlaceLabels: true } }
    );
  });

  it('should place pipeline child labels underneath when autoPlaceLabels is enabled', () => {
    // Pipeline child components have no manual `label [x,y]`, so they are
    // auto-placed; their preferred direction is straight down.
    imgSnapshotTest(
      `
wardley-beta
title Pipeline Autoplace
size [1100, 800]

component Kettle [0.57, 0.45]
component Power [0.10, 0.70]

Kettle -> Power

pipeline Kettle {
  component Campfire Kettle [0.30]
  component Electric Kettle [0.52]
  component Smart Kettle [0.74]
}

Campfire Kettle -> Kettle
Electric Kettle -> Kettle
Smart Kettle -> Kettle
      `,
      { 'wardley-beta': { autoPlaceLabels: true } }
    );
  });
});