diff --git a/CHANGELOG.md b/CHANGELOG.md index 25629534..2ef23f92 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). - Fix CI build action for demo website. - Added data type and manual layout tests for the `draw` function. - Updated file paths for example files under docs to import the correct file. +- Added style and automatic layout tests for the `draw` function. ## [0.1.0] - 2024-04-16 diff --git a/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap b/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap index 1e2e4a61..e1627135 100644 --- a/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap +++ b/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap @@ -1,5 +1,27 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`draw function formats a mix of stack frame/non-stack frame objects in automatic layout 1`] = `"aid7__main__xid1yid17funcid170id81id84list"None"id10None"`; + +exports[`draw function formats non-stack frame objects in automatic layout 1`] = `"42id98intnameid12id23fruitid19id42id22id63id54list"banana"id12str"`; + +exports[`draw function renders 'fade' style preset 1`] = `"itemid45__main__"fade!"id42str"`; + +exports[`draw function renders 'fade_id' style preset 1`] = `"itemid45__main__"fade id!"id42str"`; + +exports[`draw function renders 'fade_type' style preset 1`] = `"itemid45__main__"fade_type!"id42str"`; + +exports[`draw function renders 'hide' style preset 1`] = `"itemid45__main__"hide!"id42str"`; + +exports[`draw function renders 'hide_container' style preset 1`] = `"itemid45__main__"hide container!"id42str"`; + +exports[`draw function renders 'hide_id' style preset 1`] = `"itemid45__main__"hide id!"id42str"`; + +exports[`draw function renders 'highlight' style preset 1`] = `"itemid45__main__"highlight!"id42str"`; + +exports[`draw function renders 'highlight_id' style preset 1`] = `"itemid45__main__"highlight id!"id42str"`; + +exports[`draw function renders 'highlight_type' style preset 1`] = `"itemid45__main__"highlight type!"id42str"`; + exports[`draw function renders a blank space 1`] = `""`; exports[`draw function renders a bool 1`] = `"Trueid32bool"`; @@ -38,4 +60,10 @@ exports[`draw function renders an int 1`] = `""None"id13None"`; +exports[`draw function renders blank spaces in automatic layout 1`] = `"42id98int"life"id99str"`; + +exports[`draw function renders combinations of style presets 1`] = `"itemid45__main__"combination!"id42str"`; + +exports[`draw function renders custom style (without presets) 1`] = `""David is cool!"id19str"`; + exports[`draw function should produce consistent svg when provided seed 1`] = `"lst1id82lst2id84pid99did10tid11__main__"David is cool!"id19str7id13int"`; diff --git a/memory-viz/src/tests/draw.spec.tsx b/memory-viz/src/tests/draw.spec.tsx index 6752b45e..e287862e 100644 --- a/memory-viz/src/tests/draw.spec.tsx +++ b/memory-viz/src/tests/draw.spec.tsx @@ -302,4 +302,416 @@ describe("draw function", () => { const svg: String = m.serializeSVG(); expect(svg).toMatchSnapshot(); }); + + it("renders blank spaces in automatic layout", () => { + const objects: Array = [ + { + isClass: false, + name: "int", + id: 98, + value: 42, + }, + { + name: "BLANK", + width: 100, + height: 200, + }, + { + isClass: false, + name: "str", + id: 99, + value: "life", + }, + ]; + const m: InstanceType = draw(objects, true, { + width: 1300, + seed: 12345, + }); + const svg: String = m.serializeSVG(); + expect(svg).toMatchSnapshot(); + }); + + it("formats non-stack frame objects in automatic layout", () => { + const objects: Array = [ + { + isClass: false, + name: "int", + id: 98, + value: 42, + }, + { + isClass: true, + name: "fruit", + id: 23, + value: { + name: 12, + }, + }, + { + isClass: false, + name: "list", + id: 54, + value: [19, 42, 22, 63], + }, + { + isClass: false, + name: "str", + id: 12, + value: "banana", + }, + ]; + const m: InstanceType = draw(objects, true, { + width: 1300, + seed: 12345, + }); + const svg: String = m.serializeSVG(); + expect(svg).toMatchSnapshot(); + }); + + it("formats a mix of stack frame/non-stack frame objects in automatic layout", () => { + const objects: Array = [ + { + isClass: true, + name: "__main__", + id: null, + value: { + a: 7, + }, + stack_frame: true, + }, + { + isClass: true, + name: "func", + id: null, + value: { + x: 1, + y: 17, + }, + stack_frame: true, + }, + { + isClass: false, + name: "list", + id: 84, + value: [17, 8], + show_indexes: true, + }, + { + isClass: false, + name: "None", + id: 10, + value: "None", + }, + ]; + const m: InstanceType = draw(objects, true, { + width: 1300, + seed: 12345, + }); + const svg: String = m.serializeSVG(); + expect(svg).toMatchSnapshot(); + }); + + it("renders custom style (without presets)", () => { + const objects: Array = [ + { + isClass: false, + name: "str", + id: 19, + value: "David is cool!", + style: { + text_id: { fill: "yellow" }, + text_type: { fill: "cyan", "font-size": "large" }, + text_value: { fill: "black", "font-style": "bold" }, + box_id: { fill: "red" }, + box_type: { bowing: 8, stroke: "red", strokeWidth: 3 }, + box_container: { fill: "green", fillStyle: "zigzag" }, + }, + }, + ]; + const m: InstanceType = draw(objects, true, { + width: 1300, + seed: 12345, + }); + const svg: String = m.serializeSVG(); + expect(svg).toMatchSnapshot(); + }); + + it("renders 'highlight' style preset", () => { + const objects: Array = [ + { + isClass: true, + name: "__main__", + id: null, + value: { + item: 45, + }, + stack_frame: true, + style: ["highlight"], + }, + { + isClass: false, + name: "str", + id: 42, + value: "highlight!", + style: ["highlight"], + }, + ]; + const m: InstanceType = draw(objects, true, { + width: 1300, + seed: 12345, + }); + const svg: String = m.serializeSVG(); + expect(svg).toMatchSnapshot(); + }); + + it("renders 'highlight_id' style preset", () => { + const objects: Array = [ + { + isClass: true, + name: "__main__", + id: null, + value: { + item: 45, + }, + stack_frame: true, + style: ["highlight_id"], + }, + { + isClass: false, + name: "str", + id: 42, + value: "highlight id!", + style: ["highlight_id"], + }, + ]; + const m: InstanceType = draw(objects, true, { + width: 1300, + seed: 12345, + }); + const svg: String = m.serializeSVG(); + expect(svg).toMatchSnapshot(); + }); + + it("renders 'highlight_type' style preset", () => { + const objects: Array = [ + { + isClass: true, + name: "__main__", + id: null, + value: { + item: 45, + }, + stack_frame: true, + style: ["highlight_type"], + }, + { + isClass: false, + name: "str", + id: 42, + value: "highlight type!", + style: ["highlight_type"], + }, + ]; + const m: InstanceType = draw(objects, true, { + width: 1300, + seed: 12345, + }); + const svg: String = m.serializeSVG(); + expect(svg).toMatchSnapshot(); + }); + + it("renders 'hide' style preset", () => { + const objects: Array = [ + { + isClass: true, + name: "__main__", + id: null, + value: { + item: 45, + }, + stack_frame: true, + style: ["hide"], + }, + { + isClass: false, + name: "str", + id: 42, + value: "hide!", + style: ["hide"], + }, + ]; + const m: InstanceType = draw(objects, true, { + width: 1300, + seed: 12345, + }); + const svg: String = m.serializeSVG(); + expect(svg).toMatchSnapshot(); + }); + + it("renders 'hide_id' style preset", () => { + const objects: Array = [ + { + isClass: true, + name: "__main__", + id: null, + value: { + item: 45, + }, + stack_frame: true, + style: ["hide_id"], + }, + { + isClass: false, + name: "str", + id: 42, + value: "hide id!", + style: ["hide_id"], + }, + ]; + const m: InstanceType = draw(objects, true, { + width: 1300, + seed: 12345, + }); + const svg: String = m.serializeSVG(); + expect(svg).toMatchSnapshot(); + }); + + it("renders 'hide_container' style preset", () => { + const objects: Array = [ + { + isClass: true, + name: "__main__", + id: null, + value: { + item: 45, + }, + stack_frame: true, + style: ["hide_container"], + }, + { + isClass: false, + name: "str", + id: 42, + value: "hide container!", + style: ["hide_container"], + }, + ]; + const m: InstanceType = draw(objects, true, { + width: 1300, + seed: 12345, + }); + const svg: String = m.serializeSVG(); + expect(svg).toMatchSnapshot(); + }); + + it("renders 'fade' style preset", () => { + const objects: Array = [ + { + isClass: true, + name: "__main__", + id: null, + value: { + item: 45, + }, + stack_frame: true, + style: ["fade"], + }, + { + isClass: false, + name: "str", + id: 42, + value: "fade!", + style: ["fade"], + }, + ]; + const m: InstanceType = draw(objects, true, { + width: 1300, + seed: 12345, + }); + const svg: String = m.serializeSVG(); + expect(svg).toMatchSnapshot(); + }); + + it("renders 'fade_type' style preset", () => { + const objects: Array = [ + { + isClass: true, + name: "__main__", + id: null, + value: { + item: 45, + }, + stack_frame: true, + style: ["fade_type"], + }, + { + isClass: false, + name: "str", + id: 42, + value: "fade_type!", + style: ["fade_type"], + }, + ]; + const m: InstanceType = draw(objects, true, { + width: 1300, + seed: 12345, + }); + const svg: String = m.serializeSVG(); + expect(svg).toMatchSnapshot(); + }); + + it("renders 'fade_id' style preset", () => { + const objects: Array = [ + { + isClass: true, + name: "__main__", + id: null, + value: { + item: 45, + }, + stack_frame: true, + style: ["fade_id"], + }, + { + isClass: false, + name: "str", + id: 42, + value: "fade id!", + style: ["fade_id"], + }, + ]; + const m: InstanceType = draw(objects, true, { + width: 1300, + seed: 12345, + }); + const svg: String = m.serializeSVG(); + expect(svg).toMatchSnapshot(); + }); + it("renders combinations of style presets", () => { + const objects: Array = [ + { + isClass: true, + name: "__main__", + id: null, + value: { + item: 45, + }, + stack_frame: true, + style: ["highlight", "fade", "hide_id"], + }, + { + isClass: false, + name: "str", + id: 42, + value: "combination!", + style: ["hide_id", "highlight_type"], + }, + ]; + const m: InstanceType = draw(objects, true, { + width: 1300, + seed: 12345, + }); + const svg: String = m.serializeSVG(); + expect(svg).toMatchSnapshot(); + }); });