add testing and debugging

Author: solygambas

05-game-of-life/Cargo.toml

@@ -33,6 +33,12 @@ wee_alloc = { version = "0.4.5", optional = true }
 [dev-dependencies]
 wasm-bindgen-test = "0.3.13"
 
+[dependencies.web-sys]
+version = "0.3"
+features = [
+  "console",
+]
+
 [profile.release]
 # Tell `rustc` to optimize for small code size.
 opt-level = "s"

05-game-of-life/README.md

@@ -12,5 +12,6 @@ A zero-player game to learn how to use Rust, WebAssembly, and JavaScript togethe
 - serving locally with webpack.
 - implementing the Game of Life with Rust.
 - rendering to canvas directly from memory with JavaScript.
+- testing the tick function and debugging.
 
-Based on [The Rust and WebAssembly Book](https://rustwasm.github.io/docs/book/) by The Rust and WebAssembly Working Group (2021).
+Based on [The Rust and WebAssembly Book](https://rustwasm.github.io/docs/book/) by The Rust and WebAssembly Working Group (2021).

05-game-of-life/src/lib.rs

@@ -3,6 +3,14 @@ mod utils;
 use std::fmt;
 use wasm_bindgen::prelude::*;
 extern crate js_sys;
+extern crate web_sys;
+
+// A macro to provide `println!(..)`-style syntax for `console.log` logging.
+macro_rules! log {
+    ($( $t:tt)* ) => {
+        web_sys::console::log_1(&format!( $( $t )*).into());
+    };
+}
 
 #[wasm_bindgen]
 #[repr(u8)]
@@ -39,6 +47,19 @@ impl Universe {
         }
         count
     }
+
+    /// Get the dead and alive values of the entire universe.
+    pub fn get_cells(&self) -> &[Cell] {
+        &self.cells
+    }
+    /// Set cells to be alive in a universe by passing the row and column
+    /// of each cell as an array.
+    pub fn set_cells(&mut self, cells: &[(u32, u32)]) {
+        for (row, col) in cells.iter().cloned() {
+            let idx = self.get_index(row, col);
+            self.cells[idx] = Cell::Alive;
+        }
+    }
 }
 
 /// Public methods, exported to JavaScript.
@@ -53,6 +74,14 @@ impl Universe {
                 let cell = self.cells[idx];
                 let live_neighbors = self.live_neighbor_count(row, col);
 
+                log!(
+                    "cell[{}, {}] is initially {:?} and has {} live neighbors",
+                    row,
+                    col,
+                    cell,
+                    live_neighbors
+                );
+
                 let next_cell = match (cell, live_neighbors) {
                     // Rule 1: Any live cell with fewer than two live neighbours
                     // dies, as if caused by underpopulation.
@@ -69,13 +98,17 @@ impl Universe {
                     // All other cells remain in the same state.
                     (otherwise, _) => otherwise,
                 };
+
+                log!("it becomes {:?}", next_cell);
+
                 next[idx] = next_cell;
             }
         }
         self.cells = next;
     }
 
     pub fn new() -> Universe {
+        utils::set_panic_hook();
         let width = 64;
         let height = 64;
 
@@ -111,6 +144,22 @@ impl Universe {
     pub fn cells(&self) -> *const Cell {
         self.cells.as_ptr()
     }
+
+    /// Set the width of the universe.
+    ///
+    /// Resets all cells to the dead state.
+    pub fn set_width(&mut self, width: u32) {
+        self.width = width;
+        self.cells = (0..width * self.height).map(|_i| Cell::Dead).collect();
+    }
+
+    /// Set the height of the universe.
+    ///
+    /// Resets all cells to the dead state.
+    pub fn set_height(&mut self, height: u32) {
+        self.height = height;
+        self.cells = (0..self.width * height).map(|_i| Cell::Dead).collect();
+    }
 }
 
 impl fmt::Display for Universe {

05-game-of-life/tests/web.rs

@@ -1,13 +1,47 @@
 //! Test suite for the Web and headless browsers.
+// wasm-pack test --chrome --headless
 
 #![cfg(target_arch = "wasm32")]
 
 extern crate wasm_bindgen_test;
 use wasm_bindgen_test::*;
 
+extern crate game_of_life;
+use game_of_life::Universe;
+
 wasm_bindgen_test_configure!(run_in_browser);
 
 #[wasm_bindgen_test]
 fn pass() {
     assert_eq!(1 + 1, 2);
 }
+
+#[cfg(test)]
+pub fn input_spaceship() -> Universe {
+    let mut universe = Universe::new();
+    universe.set_width(6);
+    universe.set_height(6);
+    universe.set_cells(&[(1, 2), (2, 3), (3, 1), (3, 2), (3, 3)]);
+    universe
+}
+
+#[cfg(test)]
+pub fn expected_spaceship() -> Universe {
+    let mut universe = Universe::new();
+    universe.set_width(6);
+    universe.set_height(6);
+    universe.set_cells(&[(2, 1), (2, 3), (3, 2), (3, 3), (4, 2)]); // expected position after 1 tick
+    universe
+}
+
+#[wasm_bindgen_test]
+pub fn test_tick() {
+    // Let's create a smaller Universe with a small spaceship to test!
+    let mut input_universe = input_spaceship();
+    // This is what our spaceship should look like
+    let expected_universe = expected_spaceship();
+    // after one tick in our universe.
+    // Call `tick` and then see if the cells in the `Universe`s are the same.
+    input_universe.tick();
+    assert_eq!(&input_universe.get_cells(), &expected_universe.get_cells());
+}

05-game-of-life/www/index.js

@@ -1,4 +1,4 @@
-import { memory } from 'game-of-life/game_of_life_bg';
+import { memory } from "game-of-life/game_of_life_bg";
 import { Universe, Cell } from "game-of-life";
 
 // const pre = document.getElementById("game-of-life-canvas");
@@ -7,7 +7,7 @@ import { Universe, Cell } from "game-of-life";
 // const renderLoop = () => {
 //     pre.textContent = universe.render();
 //     universe.tick();
-  
+
 //     requestAnimationFrame(renderLoop);
 //   };
 
@@ -29,50 +29,56 @@ const canvas = document.getElementById("game-of-life-canvas");
 canvas.height = (CELL_SIZE + 1) * height + 1;
 canvas.width = (CELL_SIZE + 1) * width + 1;
 
-const ctx = canvas.getContext('2d');
+const ctx = canvas.getContext("2d");
 
 const renderLoop = () => {
-    universe.tick();
-    drawGrid();
-    drawCells();
-    requestAnimationFrame(renderLoop);
-}
+  debugger;
+  universe.tick();
+  drawGrid();
+  drawCells();
+  requestAnimationFrame(renderLoop);
+};
 
 const drawGrid = () => {
-    ctx.beginPath();
-    ctx.strokeStyle = GRID_COLOR;
+  ctx.beginPath();
+  ctx.strokeStyle = GRID_COLOR;
 
-// Vertical lines
-for (let i = 0; i <= width; i++) {
+  // Vertical lines
+  for (let i = 0; i <= width; i++) {
     ctx.moveTo(i * (CELL_SIZE + 1) + 1, 0);
     ctx.lineTo(i * (CELL_SIZE + 1) + 1, (CELL_SIZE + 1) * height + 1);
-}
+  }
 
-// Horizontal lines
-for (let j = 0; j <= height; j++) {
-    ctx.moveTo(0, j* (CELL_SIZE + 1) + 1);
-    ctx.lineTo((CELL_SIZE + 1) * width + 1, j* (CELL_SIZE + 1) + 1);
-}
-}
+  // Horizontal lines
+  for (let j = 0; j <= height; j++) {
+    ctx.moveTo(0, j * (CELL_SIZE + 1) + 1);
+    ctx.lineTo((CELL_SIZE + 1) * width + 1, j * (CELL_SIZE + 1) + 1);
+  }
+};
 
 const getIndex = (row, column) => {
-    return row * width + column;
-}
+  return row * width + column;
+};
 
 const drawCells = () => {
-    const cellsPtr = universe.cells();
-    const cells = new Uint8Array(memory.buffer, cellsPtr, width * height);
-    ctx.beginPath();
-    for (let row = 0; row < height; row ++) {
-        for (let col = 0; col < width; col++) {
-            const idx = getIndex(row, col);
-            ctx.fillStyle = cells[idx] === Cell.Dead ? DEAD_COLOR : ALIVE_COLOR;
-            ctx.fillRect(col * (CELL_SIZE + 1) + 1, row * (CELL_SIZE + 1) + 1, CELL_SIZE, CELL_SIZE);
-        }
+  const cellsPtr = universe.cells();
+  const cells = new Uint8Array(memory.buffer, cellsPtr, width * height);
+  ctx.beginPath();
+  for (let row = 0; row < height; row++) {
+    for (let col = 0; col < width; col++) {
+      const idx = getIndex(row, col);
+      ctx.fillStyle = cells[idx] === Cell.Dead ? DEAD_COLOR : ALIVE_COLOR;
+      ctx.fillRect(
+        col * (CELL_SIZE + 1) + 1,
+        row * (CELL_SIZE + 1) + 1,
+        CELL_SIZE,
+        CELL_SIZE
+      );
     }
-    ctx.stroke();
-}
+  }
+  ctx.stroke();
+};
 
 drawGrid();
 drawCells();
-requestAnimationFrame(renderLoop);
+requestAnimationFrame(renderLoop);

README.md

@@ -103,5 +103,6 @@ A zero-player game to learn how to use Rust, WebAssembly, and JavaScript togethe
 - serving locally with webpack.
 - implementing the Game of Life with Rust.
 - rendering to canvas directly from memory with JavaScript.
+- testing the tick function and debugging.
 
 Based on [The Rust and WebAssembly Book](https://rustwasm.github.io/docs/book/) by The Rust and WebAssembly Working Group (2021).