Update test setup and add instructions to README

CHANGELOG.md

@@ -18,6 +18,8 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ### 🔧 Internal changes
 
 -   Added a changelog and pull request template.
+-   Modified `roughjs` import to be compatible with Jest's `moduleNameMapper` config option.
+-   Added instructions on the `memory-viz/README.md` for running the test suite.
 
 ## [0.1.0] - 2024-04-16
 

demo/webpack.common.js

@@ -44,7 +44,7 @@ module.exports = {
     resolve: {
         extensions: [".ts", ".tsx", ".js", ".jsx", ".json", ".css"],
         alias: {
-            "memory-viz": path.resolve(__dirname, "../memory-viz/src"),
+            "memory-viz": path.resolve(__dirname, "../memory-viz"),
         },
     },
 };

demo/webpack.dev.js

@@ -1,4 +1,5 @@
 const { merge } = require("webpack-merge");
+const path = require("path");
 const common = require("./webpack.common.js");
 
 module.exports = merge(common, {

jest.config.ts

@@ -103,7 +103,7 @@ const config: Config = {
     // preset: undefined,
 
     // Run tests from one or more projects
-    projects: ["./demo/jest.config.ts", "./memory-viz/src/jest.config.ts"],
+    projects: ["./demo/jest.config.ts", "./memory-viz/jest.config.ts"],
 
     // Use this configuration option to add custom reporters to Jest
     // reporters: undefined,

memory-viz/README.md

@@ -50,6 +50,14 @@ This will use `webpack` to watch for changes to the Javascript source files and
 
 _Note_: this command will keep running until you manually terminate it (Ctrl + C), and so you'll need to open a new terminal window to enter new terminal commands like running the demo below.
 
+### Running tests
+
+To run the test suite, execute the following command:
+
+```console
+$ npm run test --workspace=memory-viz
+```
+
 ## Usage
 
 The only function that a user will ever have to call is `user_functions.draw`.

memory-viz/src/memory_model.ts

@@ -1,4 +1,4 @@
-import rough from "roughjs/bundled/rough.esm.js";
+import rough from "roughjs";
 
 import merge from "deepmerge";
 
@@ -75,7 +75,7 @@ export class MemoryModel {
         this.svg.setAttribute("width", options.width || 800);
         this.svg.setAttribute("height", options.height || 800);
         this.seed = options.seed || 0;
-        this.rough_svg = rough.svg(this.svg, { seed: this.seed });
+        this.rough_svg = rough.svg(this.svg, { options: { seed: this.seed } });
 
         // The user must not directly use this constructor; their only interaction should be with 'user_functions.draw'.
         for (const key in config) {

memory-viz/webpack.common.js

@@ -36,5 +36,8 @@ module.exports = {
     },
     resolve: {
         extensions: [".ts", ".js"],
+        alias: {
+            roughjs: "roughjs/bundled/rough.esm.js",
+        },
     },
 };