Merge pull request #76 from o-p-e-n-s-e-t/0.5.20

0.5.20

__tests__/canvasrenderer.test.js

@@ -0,0 +1,41 @@
+const fs = require("fs");
+const PNG = require("pngjs").PNG;
+const pixelmatch = require("pixelmatch");
+const puppeteer = require("puppeteer");
+let browser, page;
+
+it("Renders Agents correctly when they wrap in a torus Environment", async () => {
+  browser = await puppeteer.launch({
+    defaultViewport: {
+      height: 200,
+      width: 800
+    }
+  });
+  page = await browser.newPage();
+  try {
+    await page.goto("http://localhost:3000/canvas-wrap", {
+      waitUntil: "networkidle2"
+    });
+  } catch {
+    console.warn(
+      "Could not connect to localhost:3000, so skipping a CanvasRenderer test. Run `npm run dev` in a separate terminal window to make sure all tests run."
+    );
+    return await browser.close();
+  }
+  const filePath = __dirname + "/screenshots/canvas-wrap.png";
+  const existingImage = fs.existsSync(filePath)
+    ? PNG.sync.read(fs.readFileSync(filePath))
+    : null;
+  await page.screenshot({ path: filePath });
+  if (!existingImage) {
+    return await browser.close();
+  }
+  const { width, height } = existingImage;
+  const newImage = PNG.sync.read(fs.readFileSync(filePath));
+  const diff = new PNG({ width, height });
+  expect(
+    pixelmatch(existingImage.data, newImage.data, diff.data, width, height)
+  ).toBe(0);
+
+  await browser.close();
+});

tests/linechart.test.js → __tests__/linechart.test.js

@@ -10,7 +10,6 @@ const pixelmatch = require("pixelmatch");
 const puppeteer = require("puppeteer");
 let browser, page;
 
-const color = "#ff0000";
 const width = 200;
 const height = 400;
 

client/models/canvas-wrap.ejs

@@ -0,0 +1,76 @@
+<style>
+  canvas {
+    margin: 0;
+  }
+</style>
+
+<div style="display: flex">
+  <div id="upper-left"></div>
+  <div id="upper-right"></div>
+  <div id="lower-left"></div>
+  <div id="lower-right"></div>
+</div>
+
+<script>
+  const [width, height] = [200, 200];
+
+  const agents = [
+    // large yellow circle
+    new Agent({
+      color: "yellow",
+      size: 80
+    }),
+    // medium-large black arrow
+    new Agent({
+      shape: "arrow",
+      vx: -1,
+      vy: -1,
+      size: 25
+    }),
+    // medium green triangle
+    new Agent({
+      color: "green",
+      shape: "triangle",
+      size: 80
+    }),
+    // small purple rectangle
+    new Agent({
+      color: "purple",
+      shape: "rect",
+      width: 20,
+      height: 40
+    })
+  ];
+
+  const coords = [
+    {
+      x: 0,
+      y: 0
+    },
+    {
+      x: width,
+      y: 0
+    },
+    {
+      x: 0,
+      y: height
+    },
+    {
+      x: height,
+      y: height
+    }
+  ];
+
+  ["upper-left", "upper-right", "lower-left", "lower-right"].forEach(
+    (id, i) => {
+      const environment = new Environment({ width, height });
+      const renderer = new CanvasRenderer(environment, { width, height });
+      renderer.mount("#" + id);
+      agents.forEach(agent => {
+        agent.set(coords[i]);
+        environment.addAgent(agent);
+      });
+      environment.tick();
+    }
+  );
+</script>