basicprimitives/src/algorithms/getMergedRectangles.test.js

Basic Primitives Diagrams for JavaScript - data visualization components library that implements organizational chart and multi-parent dependency diagrams, contains implementations of JavaScript Controls and PDF rendering plugins.

import createGraphics from '../graphics/createGraphics';
import Rect from '../graphics/structs/Rect';
import PaletteItem from '../graphics/structs/PaletteItem';
import Polyline from '../graphics/structs/Polyline';
import MoveSegment from '../graphics/structs/MoveSegment';
import LineSegment from '../graphics/structs/LineSegment';
import { LineType } from '../enums';
import getMergedRectangles from './getMergedRectangles';
import puppeteer from 'puppeteer';
import { toMatchImageSnapshot } from 'jest-image-snapshot';

let browser;
beforeAll(async () => {
  browser = await puppeteer.launch({
    defaultViewport: {width: 1920, height: 1080}
  });
  expect.extend({ toMatchImageSnapshot });
});

afterAll(async () => {
  await browser.close();
});

function showLayout(visualization, polyline, width, height, title) {
  var titlePlaceholder = document.createElement("div");
  var textNode = document.createTextNode(title);
  titlePlaceholder.appendChild(textNode);
  titlePlaceholder.style.width = "640px";
  titlePlaceholder.style.height = "40px";
  titlePlaceholder.style.visibility = "visible";
  titlePlaceholder.style.position = "relative";
  titlePlaceholder.style.font = "Arial";
  titlePlaceholder.style.fontSize = "14px";
  titlePlaceholder.style.lineHeight = "40px";
  titlePlaceholder.style.textAlign = "left";
  visualization.appendChild(titlePlaceholder);

  var graphicsDiv = document.createElement("div");
  graphicsDiv.style.width = width + "px";
  graphicsDiv.style.height = height + "px";
  graphicsDiv.style.visibility = "visible";
  graphicsDiv.style.position = "relative";
  graphicsDiv.style.font = "Arial";
  graphicsDiv.style.fontSize = "12px";
  
  var placeholder = document.createElement("div");
  placeholder.className = "placeholder";
  placeholder.style.width = width + "px";
  placeholder.style.height = height + "px";

  graphicsDiv.append(placeholder);
  visualization.append(graphicsDiv);

  var graphics = createGraphics(placeholder);
  graphics.begin();
  graphics.resize("placeholder", width, height);
  graphics.activate("placeholder");
  graphics.polyline(polyline);
  graphics.end();
}

function getSize(rects) {
  var result = new Rect(0, 0, 0, 0);
  for (var index = 0; index < rects.length; index += 1) {
    var rect = rects[index];
    result.addRect(rect);
  }
  return result;
}

function getRectangles(items) {
  var result = [];
  for (var index = 0; index < items.length; index += 1) {
    var item = items[index];
    var rect = new Rect(item[0], item[1], item[2], item[3]);
    rect.context = index;
    result.push(rect);
  }
  return result;
}

function testLayout(title, items) {
  var visualization = document.createElement("div");
  visualization.style.height = "Auto";
  visualization.style.visibility = "visible";
  visualization.style.position = "relative";
  visualization.style.left = "0px";
  visualization.style.top = "0px";

  var rects = getRectangles(items);
  var paletteItem = new PaletteItem({
    lineColor: "#000000",
    lineWidth: "2",
    fillColor: "#faebd7",
    lineType: LineType.Solid,
    opacity: 1
  });

  var polyline = new Polyline(paletteItem);
  getMergedRectangles(this, rects, function (points) {
    for (var index = 0, len = points.length; index < len; index += 1) {
      var point = points[index];
      if (index == 0) {
        polyline.addSegment(new MoveSegment(point.x, point.y));
      } else {
        polyline.addSegment(new LineSegment(point.x, point.y));
      }
    }
  });

  var size = getSize(rects);

  showLayout(visualization, polyline, size.width, size.height, title);

  size.addRect(new Rect(0, 0, 250, 0));
  size.offset(0, 0, 20, 80);

  return { 
    space: size,
    visualization
  };
};

async function testByTemplate(title, items) {
  const page = await browser.newPage();
  const { visualization, result, expectedResult, space} = testLayout(title, items)

  await page.setContent(visualization.innerHTML);
  const image = await page.screenshot({
    clip: {
      x: space.x,
      y: space.y,
      width: Math.min(space.width, page.viewport().width),
      height: Math.min(space.height, page.viewport().height),
    }
  });

  await page.close();

  expect(image).toMatchImageSnapshot({
      customSnapshotIdentifier: title,
      noColors: false
  });
  expect(result).toBe(expectedResult);
}

it('getMergedRectangles-Merge single rectangle', async () => {
  await testByTemplate('getMergedRectangles-Merge single rectangle', [
    [0, 0, 100, 100]
  ])
});

it('getMergedRectangles-Merge two disconnected rectangles', async () => {
  await testByTemplate('getMergedRectangles-Merge two disconnected rectangles', [
    [0, 0, 80, 80],
    [100, 0, 80, 80]
  ])
});

it('getMergedRectangles-Merge two aligned disconnected rectangles', async () => {
  await testByTemplate('getMergedRectangles-Merge two aligned disconnected rectangles', [
    [0, 0, 80, 80],
    [80, 100, 80, 80]
  ])
});

it('getMergedRectangles-Merge two aligned disconnected rectangles 2', async () => {
  await testByTemplate('getMergedRectangles-Merge two aligned disconnected rectangles 2', [
    [0, 100, 80, 80],
    [80, 0, 80, 80]
  ])
});

it('getMergedRectangles-Merge two overlapping rectangles', async () => {
  await testByTemplate('getMergedRectangles-Merge two overlapping rectangles', [
    [0, 0, 100, 100],
    [50, 50, 100, 100]
  ])
});

it('getMergedRectangles-Merge two overlapping rectangles 2', async () => {
  await testByTemplate('getMergedRectangles-Merge two overlapping rectangles 2', [
    [0, 50, 100, 100],
    [50, 0, 100, 100]
  ])
});

it('getMergedRectangles-Merge E shape rectangles', async () => {
  await testByTemplate('getMergedRectangles-Merge E shape rectangles', [
    [0, 0, 50, 350],
    [50, 0, 50, 50],
    [50, 100, 50, 50],
    [50, 200, 50, 50],
    [50, 300, 50, 50]
  ])
});

it('getMergedRectangles-Merge E shape rectangles 2', async () => {
  await testByTemplate('getMergedRectangles-Merge E shape rectangles 2', [
    [50, 0, 50, 350],
    [0, 0, 50, 50],
    [0, 100, 50, 50],
    [0, 200, 50, 50],
    [0, 300, 50, 50]
  ])
});

it('getMergedRectangles-Merge 5 rectangles 2', async () => {
  await testByTemplate('getMergedRectangles-Merge 5 rectangles 2', [
    [0, 0, 100, 100],
    [150, 0, 100, 100],
    [0, 150, 100, 100],
    [150, 150, 100, 100],
    [50, 50, 150, 150]
  ])
});

it('getMergedRectangles-Window', async () => {
  await testByTemplate('getMergedRectangles-Window', [
    [100, 0, 150, 150],
    [100, 200, 150, 150],
    [0, 100, 150, 150],
    [200, 100, 150, 150]
  ])
});

it('getMergedRectangles-Window 2', async () => {
  await testByTemplate('getMergedRectangles-Window 2', [
    [0, 0, 150, 50],
    [0, 50, 50, 50],
    [100, 50, 50, 50],
    [0, 100, 150, 50],
    [0, 150, 50, 50],
    [100, 150, 50, 50],
    [0, 200, 150, 50]
  ])
});

it('getMergedRectangles-Dumbbell', async () => {
  await testByTemplate('getMergedRectangles-Dumbbell', [
    [0, 0, 60, 60],
    [80, 0, 60, 60],
    [50, 20, 40, 20]
  ])
});