cli-diagram/test/integration/diagram.js

Draw needlessly complex diagrams in the console

const outdent = require('outdent');
const color = require('ansi-colors');

const Diagram = require('../../src/diagram');

describe('Example diagrams', function() {
    it('is a simple diagram of three boxes with arrows', function() {
        const diagram = new Diagram()
            .box('left')
            .arrow(['<--'])
            .box('middle')
            .arrow(['-->', '<--'])
            .box('right');

        expect(diagram.toString()).to.equal(outdent`
            ┌──────────┐    ┌────────────┐    ┌───────────┐
            │          │    │            │───▶│           │
            │   left   │◀───│   middle   │    │   right   │
            │          │    │            │◀───│           │
            └──────────┘    └────────────┘    └───────────┘
        `);
    });

    it('is a diagram of three boxes of varying height from '
            + '(ltr) short to high', function() {
        const diagram = new Diagram()
            .box('short left')
            .line(3)
            .box('medium\nmiddle')
            .line(1)
            .box('high\n\nright');

        expect(diagram.draw()).to.equal(outdent`
            ┌────────────────┐    ┌────────────┐    ┌───────────┐
            │                │────│            │    │           │
            │   short left   │────│   medium   │    │   high    │
            │                │────│   middle   │────│           │
            └────────────────┘    │            │    │   right   │
                                  └────────────┘    │           │
                                                    └───────────┘
        `);
    });

    it('is a diagram of three boxes of varying height from '
            + '(ltr) short to high with different colors', function() {
        const diagram = new Diagram()
            .box('short left', {color: 'red'})
            .line(3, {color: 'yellow'})
            .box('medium\nmiddle', {color: 'green'})
            .line(1, {color: 'magenta'})
            .box('high\n\nright', {color: 'blue'});

        expect(color.unstyle(diagram.draw())).to.equal(outdent`
            ┌────────────────┐    ┌────────────┐    ┌───────────┐
            │                │────│            │    │           │
            │   short left   │────│   medium   │    │   high    │
            │                │────│   middle   │────│           │
            └────────────────┘    │            │    │   right   │
                                  └────────────┘    │           │
                                                    └───────────┘
        `);
    });

    it('is a diagram of three boxes of varying height from '
            + '(ltr) high to short', function() {
        const diagram = new Diagram()
            .box('high\n\nleft')
            .line(3)
            .box('medium\nmiddle')
            .line(1)
            .box('short right');

        expect(diagram.draw()).to.equal(outdent`
            ┌──────────┐    ┌────────────┐    ┌─────────────────┐
            │          │────│            │    │                 │
            │   high   │    │   medium   │────│   short right   │
            │          │────│   middle   │    │                 │
            │   left   │    │            │    └─────────────────┘
            │          │────└────────────┘
            └──────────┘
        `);
    });

    it('is an Olympics podium', function() {
        const diagram = new Diagram()
            .box('   2   ', {size: 2})
            .box('1', {size: 3})
            .box('      3      ', {size: 1});

        expect(diagram.draw()).to.equal(outdent`
            ┌───────────────────┐┌───────────────────┐┌───────────────────┐
            │                   ││                   ││                   │
            │                   ││                   ││         3         │
            │         2         ││                   ││                   │
            │                   ││         1         │└───────────────────┘
            │                   ││                   │
            └───────────────────┘│                   │
                                 │                   │
                                 └───────────────────┘
        `);
    });

    it('features some spaced boxes', function() {
        const diagram = new Diagram()
            .box(`I feel so small`, {size: 0})
            .space(5)
            .box('Give me some space, man!');

        expect(diagram.draw()).to.equal(outdent`
            ┌───────────────┐               ┌──────────────────────────────┐
            │I feel so small│               │                              │
            └───────────────┘               │   Give me some space, man!   │
                                            │                              │
                                            └──────────────────────────────┘
        `);
    });


    it('is a nested diagram', function() {
        const inner = new Diagram()
            .box(`Yes yes girl`)
            .arrow(['-->'])
            .box('*Steal lemons*');

        const outer = new Diagram()
            .box(`Get lemons\n${inner}\n${inner}`)
            .arrow(['-->'])
            .box('Lemonade');

        expect(outer.draw()).to.equal(outdent`
            ┌────────────────────────────────────────────────────┐    ┌──────────────┐
            │                                                    │    │              │
            │   Get lemons                                       │───▶│   Lemonade   │
            │   ┌──────────────────┐    ┌────────────────────┐   │    │              │
            │   │                  │    │                    │   │    └──────────────┘
            │   │   Yes yes girl   │───▶│   *Steal lemons*   │   │
            │   │                  │    │                    │   │
            │   └──────────────────┘    └────────────────────┘   │
            │   ┌──────────────────┐    ┌────────────────────┐   │
            │   │                  │    │                    │   │
            │   │   Yes yes girl   │───▶│   *Steal lemons*   │   │
            │   │                  │    │                    │   │
            │   └──────────────────┘    └────────────────────┘   │
            │                                                    │
            └────────────────────────────────────────────────────┘
        `);
    });

    it('has no boxes', function() {
        const diagram = new Diagram()
            .arrow(['-->'])
            .space(2)
            .line(4)
            .arrow(['<--', '--x'])
            .space(10);

        expect(diagram.draw()).to.equal(outdent`
            ───▶      ────
                      ────◀───
                      ────
                      ───────X
        `);
    });


    it('has labeled lines and arrows', function() {
        const diagram = new Diagram()
            .box(`box`)
            .line(['label A', null, 'B'])
            .box('box')
            .arrow(['left:to the left', 'right:right'])
            .box('box');

        expect(diagram.draw()).to.equal(outdent`
            ┌─────────┐             ┌─────────┐                 ┌─────────┐
            │         │──┤label A├──│         │◀─┤to the left├──│         │
            │   box   │─────────────│   box   │                 │   box   │
            │         │──┤B      ├──│         │──┤right      ├─▶│         │
            └─────────┘             └─────────┘                 └─────────┘
        `);
    });


    it('vertically aligns containers', function() {
        const bottom = new Diagram()
            .box('bottom');

        const top = new Diagram()
            .box('top');

        const middle = new Diagram()
            .box('middle');

        const diagram = new Diagram()
            .container(bottom, {verticalAlign: 'bottom'})
            .box('a\npretty\nbig\nbox')
            .container(middle, {verticalAlign: 'middle'})
            .container(top, {verticalAlign: 'top'});

        expect(diagram.draw()).to.equal(
            '              ┌────────────┐              ┌─────────┐\n' +
            '              │            │┌────────────┐│         │\n' +
            '              │   a        ││            ││   top   │\n' +
            '┌────────────┐│   pretty   ││   middle   ││         │\n' +
            '│            ││   big      ││            │└─────────┘\n' +
            '│   bottom   ││   box      │└────────────┘\n' +
            '│            ││            │\n' +
            '└────────────┘└────────────┘');
    });
});