From c9cc789f1d4980910c28fe46def6b51fcfb637c9 Mon Sep 17 00:00:00 2001 From: Samuel Degueldre Date: Fri, 15 Oct 2021 11:40:37 +0200 Subject: [PATCH] [IMP] components: add back style_class tests The tests have been adapted to the new way of doing things, some tests are skipped because they rely on features that are not implemented yet --- .../__snapshots__/style_class.test.ts.snap | 97 +++++++++++++++ tests/components/style_class.test.ts | 113 +++++++++++++++++- 2 files changed, 209 insertions(+), 1 deletion(-) diff --git a/tests/components/__snapshots__/style_class.test.ts.snap b/tests/components/__snapshots__/style_class.test.ts.snap index 7edc52c5..878bb5c6 100644 --- a/tests/components/__snapshots__/style_class.test.ts.snap +++ b/tests/components/__snapshots__/style_class.test.ts.snap @@ -137,6 +137,21 @@ exports[`style and class handling can set style and class inside component 1`] = }" `; +exports[`style and class handling class on components do not interfere with user defined classes 1`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component } = bdom; + let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers; + + let block1 = createBlock(\`
\`); + + return function template(ctx, node, key = \\"\\") { + let d1 = {c:ctx['state'].c}; + return block1([d1]); + } +}" +`; + exports[`style and class handling class on sub component, which is switched to another 1`] = ` "function anonymous(bdom, helpers ) { @@ -281,6 +296,33 @@ exports[`style and class handling component class and parent class combine toget }" `; +exports[`style and class handling dynamic t-att-style is properly added and updated on widget root el 1`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component } = bdom; + let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers; + + let block1 = createBlock(\`
\`); + + return function template(ctx, node, key = \\"\\") { + let d1 = {'font-size':'20px',...ctx['props'].style}; + return block1([d1]); + } +}" +`; + +exports[`style and class handling dynamic t-att-style is properly added and updated on widget root el 2`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component } = bdom; + let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers; + + return function template(ctx, node, key = \\"\\") { + return component(\`Child\`, {style: ctx['state'].style}, key + \`__1\`, node, ctx); + } +}" +`; + exports[`style and class handling empty class attribute is not added on widget root el 1`] = ` "function anonymous(bdom, helpers ) { @@ -311,6 +353,34 @@ exports[`style and class handling empty class attribute is not added on widget r }" `; +exports[`style and class handling error in subcomponent with class 1`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component } = bdom; + let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers; + + let block1 = createBlock(\`
\`); + + return function template(ctx, node, key = \\"\\") { + let d1 = ctx['props'].class; + let d2 = this.will.crash; + return block1([d1, d2]); + } +}" +`; + +exports[`style and class handling error in subcomponent with class 2`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component } = bdom; + let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers; + + return function template(ctx, node, key = \\"\\") { + return component(\`Child\`, {class: 'a'}, key + \`__1\`, node, ctx); + } +}" +`; + exports[`style and class handling no class is set is child ignores it 1`] = ` "function anonymous(bdom, helpers ) { @@ -364,6 +434,33 @@ exports[`style and class handling no class is set is parent does not give it as }" `; +exports[`style and class handling style is properly added on widget root el 1`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component } = bdom; + let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers; + + let block1 = createBlock(\`
\`); + + return function template(ctx, node, key = \\"\\") { + let d1 = ctx['props'].style; + return block1([d1]); + } +}" +`; + +exports[`style and class handling style is properly added on widget root el 2`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component } = bdom; + let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers; + + return function template(ctx, node, key = \\"\\") { + return component(\`Child\`, {style: 'font-weight: bold;'}, key + \`__1\`, node, ctx); + } +}" +`; + exports[`style and class handling t-att-class is properly added/removed on widget root el (v2) 1`] = ` "function anonymous(bdom, helpers ) { diff --git a/tests/components/style_class.test.ts b/tests/components/style_class.test.ts index 9a89fe91..529c4f49 100644 --- a/tests/components/style_class.test.ts +++ b/tests/components/style_class.test.ts @@ -1,4 +1,4 @@ -import { Component, mount, useState, xml } from "../../src"; +import { Component, mount, useState, useRef, xml } from "../../src"; import { makeTestFixture, nextTick, snapshotEverything } from "../helpers"; snapshotEverything(); @@ -195,6 +195,7 @@ describe("style and class handling", () => { expect(fixture.innerHTML).toBe(`

`); }); + // TODO: adapt name (t-att-class no longer makes sense on Components) test("t-att-class is properly added/removed on widget root el (v2)", async () => { let child: any = null; class Child extends Component { @@ -234,4 +235,114 @@ describe("style and class handling", () => { await nextTick(); expect(span.className).toBe("c b d"); }); + + // TODO: adapt name (t-att-class no longer makes sense on Components) + // TODO: this test depends on ref to components + test.skip("t-att-class is properly added/removed on widget root el (v3)", async () => { + class Child extends Component { + static template = ``; + state = useState({ d: true }); + } + class Parent extends Component { + static template = xml`` + static components = { Child }; + state = useState({ b: true }); + child = useRef("child"); + } + const widget = await mount(Parent, fixture); + + const span = fixture.querySelector("span")!; + expect(span.className).toBe("c d a b"); + + widget.state.b = false; + await nextTick(); + expect(span.className).toBe("c d a"); + + (widget.child.comp as Child).state.d = false; + await nextTick(); + expect(span.className).toBe("c a"); + + widget.state.b = true; + await nextTick(); + expect(span.className).toBe("c a b"); + + (widget.child.comp as Child).state.d = true; + await nextTick(); + expect(span.className).toBe("c a b d"); + }); + + test.skip("class on components do not interfere with user defined classes", async () => { + class App extends Component { + static template = xml`
`; + state = useState({ c: true }); + mounted() { + (this.el!).classList.add("user"); + } + } + const widget = await mount(App, fixture); + + expect(fixture.innerHTML).toBe('
'); + + widget.state.c = false; + await nextTick(); + + expect(fixture.innerHTML).toBe('
'); + }); + + // TODO: adapt name + test("style is properly added on widget root el", async () => { + class SomeComponent extends Component { + static template = xml`
`; + } + + class ParentWidget extends Component { + static components = { Child: SomeComponent }; + static template = xml``; + } + await mount(ParentWidget, fixture); + expect(fixture.innerHTML).toBe(`
`); + }); + + // TODO: adapt name + // TODO: t-att-style as object (like class) + test.skip("dynamic t-att-style is properly added and updated on widget root el", async () => { + class SomeComponent extends Component { + static template = xml`
`; + } + + class ParentWidget extends Component { + static template = xml``; + static components = { Child: SomeComponent }; + state = useState({ style: { "font-size": "20px" } }); + } + const widget = await mount(ParentWidget, fixture); + + expect(fixture.innerHTML).toBe(`
`); + + widget.state.style["font-size"] = "30px" ; + await nextTick(); + + expect(fixture.innerHTML).toBe(`
`); + }); + + // TODO: does this test need to be moved? (class now a standard prop) + test("error in subcomponent with class", async () => { + class Child extends Component { + static template = xml`
`; + } + class ParentWidget extends Component { + static template = xml``; + static components = { Child }; + } + let error; + try { + await mount(ParentWidget, fixture); + } catch (e) { + error = e; + } + expect(error).toBeDefined(); + const regexp = /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g; + expect(error.message).toMatch(regexp); + expect(fixture.innerHTML).toBe(""); + }); });