masonry: add interaction tests to calc and to_do_list examples (#1340)

masonry/examples/calc_masonry.rs

@@ -15,7 +15,7 @@ use std::str::FromStr;
 
 use masonry::core::{
     CollectionWidget, DefaultProperties, ErasedAction, NewWidget, Property, PropertySet,
-    PropertyStack, Selector, StyleProperty, Widget, WidgetId,
+    PropertyStack, Selector, StyleProperty, Widget, WidgetId, WidgetTag,
 };
 use masonry::dpi::LogicalSize;
 use masonry::layout::AsUnit;
@@ -59,6 +59,12 @@ impl Default for CalcAction {
     }
 }
 
+const DISPLAY_TAG: WidgetTag<Label> = WidgetTag::named("calc-display");
+const BTN_1: WidgetTag<Button> = WidgetTag::named("btn-1");
+const BTN_2: WidgetTag<Button> = WidgetTag::named("btn-2");
+const BTN_PLUS: WidgetTag<Button> = WidgetTag::named("btn-plus");
+const BTN_EQUALS: WidgetTag<Button> = WidgetTag::named("btn-equals");
+
 // ---
 
 impl CalcState {
@@ -216,9 +222,10 @@ fn digit_button(digit: u8) -> NewWidget<Button> {
 /// Build the widget tree
 pub fn build_calc() -> NewWidget<impl Widget> {
     let display = Label::new(String::new()).with_style(StyleProperty::FontSize(32.));
+    let display_widget = display.prepare().with_tag(DISPLAY_TAG);
     let display = Flex::column()
         .with_spacer(1.)
-        .with_fixed(display.prepare())
+        .with_fixed(display_widget)
         .with_spacer(1.)
         .cross_axis_alignment(CrossAxisAlignment::End);
 
@@ -243,14 +250,14 @@ pub fn build_calc() -> NewWidget<impl Widget> {
         .with(digit_button(5), button_params(1, 3))
         .with(digit_button(6), button_params(2, 3))
         .with(op_button('−'), button_params(3, 3))
-        .with(digit_button(1), button_params(0, 4))
-        .with(digit_button(2), button_params(1, 4))
+        .with(digit_button(1).with_tag(BTN_1), button_params(0, 4))
+        .with(digit_button(2).with_tag(BTN_2), button_params(1, 4))
         .with(digit_button(3), button_params(2, 4))
-        .with(op_button('+'), button_params(3, 4))
+        .with(op_button('+').with_tag(BTN_PLUS), button_params(3, 4))
         .with(op_button('±'), button_params(0, 5))
         .with(digit_button(0), button_params(1, 5))
         .with(op_button('.'), button_params(2, 5))
-        .with(op_button('='), button_params(3, 5));
+        .with(op_button('=').with_tag(BTN_EQUALS), button_params(3, 5));
 
     NewWidget::new(root_widget).with_props(
         PropertySet::new()
@@ -335,6 +342,7 @@ fn main() {
 // --- MARK: TESTS
 #[cfg(test)]
 mod tests {
+    use masonry::core::PointerButton;
     use masonry_testing::{TestHarness, TestHarnessParams, assert_render_snapshot};
 
     use super::*;
@@ -347,7 +355,51 @@ mod tests {
             TestHarnessParams::default(),
         );
         assert_render_snapshot!(harness, "example_calc_masonry_initial");
+    }
 
-        // TODO - Test clicking buttons
+    #[test]
+    fn click_buttons() {
+        let mut harness = TestHarness::create_with(
+            custom_property_set(),
+            build_calc(),
+            TestHarnessParams::default(),
+        );
+
+        let press = |harness: &mut TestHarness<_>, tag: WidgetTag<Button>| {
+            let id = harness.get_widget(tag).id();
+            harness.mouse_click_on(id, Some(PointerButton::Primary));
+            assert_eq!(
+                harness.pop_action::<ButtonPress>(),
+                Some((
+                    ButtonPress {
+                        button: Some(PointerButton::Primary),
+                    },
+                    id,
+                ))
+            );
+        };
+
+        press(&mut harness, BTN_1);
+        press(&mut harness, BTN_PLUS);
+        press(&mut harness, BTN_2);
+        press(&mut harness, BTN_EQUALS);
+
+        let mut state = CalcState {
+            value: "0".to_string(),
+            operand: 0.0,
+            operator: 'C',
+            in_num: false,
+            window_id: WindowId::next(),
+        };
+        state.digit(1);
+        state.op('+');
+        state.digit(2);
+        state.op('=');
+        assert_eq!(state.value, "3");
+
+        harness.edit_widget(DISPLAY_TAG, |mut label| {
+            Label::set_text(&mut label, &*state.value);
+        });
+        assert_render_snapshot!(harness, "example_calc_masonry_after_1_plus_2");
     }
 }

masonry/examples/to_do_list.rs

@@ -20,6 +20,7 @@ use masonry_winit::winit::window::Window;
 
 const TEXT_INPUT_TAG: WidgetTag<TextInput> = WidgetTag::named("text-input");
 const LIST_TAG: WidgetTag<Flex> = WidgetTag::named("list");
+const ADD_BUTTON_TAG: WidgetTag<Button> = WidgetTag::named("add-button");
 const WIDGET_SPACING: Length = Length::const_px(5.0);
 
 struct Driver {
@@ -66,7 +67,7 @@ pub fn make_widget_tree() -> NewWidget<impl Widget> {
         TextInput::new("").with_placeholder("ex: 'Do the dishes', 'File my taxes', ..."),
     )
     .with_tag(TEXT_INPUT_TAG);
-    let button = NewWidget::new(Button::with_text("Add task"));
+    let button = NewWidget::new(Button::with_text("Add task")).with_tag(ADD_BUTTON_TAG);
 
     let portal = Portal::new(
         NewWidget::new(Flex::column().cross_axis_alignment(CrossAxisAlignment::Start))
@@ -118,17 +119,53 @@ fn main() {
 // --- MARK: TESTS
 #[cfg(test)]
 mod tests {
+    use masonry::core::PointerButton;
     use masonry_testing::{TestHarness, assert_render_snapshot};
 
     use super::*;
 
     #[test]
     fn screenshot_test() {
         let mut harness = TestHarness::create(default_property_set(), make_widget_tree());
-
         assert_render_snapshot!(harness, "example_to_do_list_initial");
+    }
+
+    #[test]
+    fn add_tasks() {
+        let mut harness = TestHarness::create(default_property_set(), make_widget_tree());
+        let text_input_id = harness.get_widget(TEXT_INPUT_TAG).id();
+        let add_btn_id = harness.get_widget(ADD_BUTTON_TAG).id();
+
+        // Type a task name, click Add, then replicate Driver::on_action's
+        // work (clear the input, append a label). Re-focus on each call:
+        // clicking Add can shift focus, so the next typed text would be lost.
+        let add_task = |harness: &mut TestHarness<_>, task: &str| {
+            harness.focus_on(Some(text_input_id));
+            harness.keyboard_type_chars(task);
+            harness.mouse_click_on(add_btn_id, Some(PointerButton::Primary));
+            assert_eq!(
+                harness.pop_action::<ButtonPress>(),
+                Some((
+                    ButtonPress {
+                        button: Some(PointerButton::Primary),
+                    },
+                    add_btn_id,
+                ))
+            );
+
+            harness.edit_widget(TEXT_INPUT_TAG, |mut text_input| {
+                let mut text_area = TextInput::text_mut(&mut text_input);
+                TextArea::reset_text(&mut text_area, "");
+            });
+            harness.edit_widget(LIST_TAG, |mut list| {
+                Flex::add_fixed(&mut list, Label::new(task.to_string()).prepare());
+            });
+        };
+
+        add_task(&mut harness, "Buy milk");
+        assert_render_snapshot!(harness, "example_to_do_list_after_add");
 
-        // TODO - Test clicking buttons
-        // TODO - Test typing text
+        add_task(&mut harness, "Do laundry");
+        assert_render_snapshot!(harness, "example_to_do_list_two_tasks");
     }
 }