public static void RunTests()
        {
            Module("(Stateful) Component Tests");

            Test("GetInitialState is called before first Render", assert =>
            {
                var done = assert.Async();
                TestComponentMounter.Render(
                    new ComponentThatRendersTextFromItsState(),
                    container =>
                {
                    container.Remove();
                    assert.StrictEqual(container.TextContent.Trim(), "Initial Text");
                    done();
                }
                    );
            });

            Test("GetInitialState is called on base component from derived component (that doesn't override it) before first Render", assert =>
            {
                var done = assert.Async();
                TestComponentMounter.Render(
                    new DerivedFromComponentThatRendersTextFromItsState(),
                    container =>
                {
                    container.Remove();
                    assert.StrictEqual(container.TextContent.Trim(), "Initial Text");
                    done();
                }
                    );
            });

            Test("GetInitialState may be called on base component from derived component that overrides it before first Render", assert =>
            {
                var done = assert.Async();
                TestComponentMounter.Render(
                    new DerivedFromComponentThatRendersTextFromItsBaseStateWithAnAnnotation(),
                    container =>
                {
                    container.Remove();
                    assert.StrictEqual(container.TextContent.Trim(), "Initial Text!");
                    done();
                }
                    );
            });

            Test("Components support properties and fields", assert =>
            {
                var done = assert.Async();
                TestComponentMounter.Render(
                    new ComponentThatRendersTextFromFieldsAndProperties(),
                    container =>
                {
                    container.Remove();
                    assert.StrictEqual(container.TextContent.Trim(), "Test1-Test2");
                    done();
                }
                    );
            });
        }
示例#2
0
        public static void RunTests()
        {
            Module("PureComponent Tests");

            Test("PureComponent re-rendered with equivalent props should not have to re-render", assert =>
            {
                // We'll create a Container component that renders a PureComponent. Each component will make a callback when they render so that we can count how many times
                // they render. The container also allows us a way to receive an async "forceReRender" method which we may call to force the Container to re-render. Since
                // the PureComponent's props don't change, forcing a single re-render should result in the Container being rendered twice (once for the initial render
                // and once for the re-render) but the PureComponent only being rendered once.
                var done = assert.Async();
                var numberOfContainerRenders     = 0;
                var numberOfPureComponentRenders = 0;
                Func <Task> forceReRender        = null;
                TestComponentMounter.Render(
                    component: new Container(
                        onContainerRender: () => numberOfContainerRenders++,
                        onPureComponentRender: () => numberOfPureComponentRenders++,
                        reRenderProvider: force => forceReRender = force
                        ),
                    ready: async container =>
                {
                    await forceReRender();
                    assert.StrictEqual(numberOfContainerRenders, 2);
                    assert.StrictEqual(numberOfPureComponentRenders, 1);
                    container.Remove();
                    done();
                }
                    );
            });

            Test("PureComponent Ref callback provides reference to mounted component", assert =>
            {
                const string name = "Test123";
                var done          = assert.Async();
                TestComponentMounter.Render(
                    component: new ExamplePureComponentWithRefLogic(
                        name: name,
                        @ref: mountedComponent =>
                {
                    // Ensure that we can access methods on the mountedComponent reference
                    assert.Equal(mountedComponent.GetName(), name);
                    done();
                }
                        ),
                    ready: container => { }
                    );
            });
        }
        public static void RunTests()
        {
            Module("StatelessComponent Tests");

            Test("Simple value-from-Props Render", assert =>
            {
                var done = assert.Async();
                TestComponentMounter.Render(
                    new MyLabel("abc"),
                    container =>
                {
                    container.Remove();
                    assert.StrictEqual(container.TextContent.Trim(), "abc");
                    done();
                }
                    );
            });
        }
        public static void RunTests()
        {
            Module("DataAttribute Tests");

            Test("DOM.Div with null attributes", assert =>
            {
                var done = assert.Async();
                TestComponentMounter.Render(
                    DOM.Div(null, "Hello"),
                    container => {
                    assert.Ok(true);                             // Only making sure that a null attributes references doesn't break thing (so no need to check markup)
                    done();
                    container.Remove();
                }
                    );
            });

            Test("DOM.Div with ClassName-only attributes (no data attributes)", assert =>
            {
                var done = assert.Async();
                TestComponentMounter.Render(
                    DOM.Div(new Attributes {
                    ClassName = "test"
                }, "Hello"),
                    container => {
                    assert.Ok(true);                             // Only making sure that a null attributes references doesn't break thing (so no need to check markup)
                    done();
                    container.Remove();
                }
                    );
            });

            Test("DOM.Div with ClassName and empty data value", assert =>
            {
                var done = assert.Async();
                TestComponentMounter.Render(
                    DOM.Div(new Attributes {
                    ClassName = "test", Data = null
                }, "Hello"),
                    container => {
                    assert.Ok(true);                             // Only making sure that a null attributes references doesn't break thing (so no need to check markup)
                    done();
                    container.Remove();
                }
                    );
            });

            Test("DOM.Div with ClassName and data 'toggle' value", assert =>
            {
                var done = assert.Async();
                TestComponentMounter.Render(
                    DOM.Div(new Attributes {
                    ClassName = "test", Data = new { toggle = "on" }
                }, "Hello"),
                    container =>
                {
                    container.Remove();
                    var div = container.QuerySelector("div.test") as HTMLElement;
                    if (div == null)
                    {
                        throw new Exception("Unable to locate 'test' div");
                    }
                    assert.StrictEqual(div.GetAttribute("data-toggle"), "on");
                    done();
                }
                    );
            });

            Test("DOM.Div with ClassName and data 'toggle_me_on' value (to demonstrate underscore-to-hyphen string name replacement)", assert =>
            {
                var done = assert.Async();
                TestComponentMounter.Render(
                    DOM.Div(new Attributes {
                    ClassName = "test", Data = new { toggle_me_on = "on" }
                }, "Hello"),
                    container =>
                {
                    container.Remove();
                    var div = container.QuerySelector("div.test") as HTMLElement;
                    if (div == null)
                    {
                        throw new Exception("Unable to locate 'test' div");
                    }
                    assert.StrictEqual(div.GetAttribute("data-toggle-me-on"), "on");
                    done();
                }
                    );
            });
        }