More tests

test/browser/component.js

@@ -307,28 +307,19 @@ describe(`Nested Component instance`, function() {
       expect(childEl.findPanelParentByTagName(`nested-app`)).to.equal(el);
     });
 
-    it(`passes state updates from child to parent`, function() {
-      el.connectedCallback();
-      childEl = document.createElement(`nested-child`);
-      childEl.$panelParentID = el.panelID;
-      childEl.$panelParent = childEl.$panelRoot = el;
-      childEl.connectedCallback();
-      childEl.update({animal: `capybara`});
-      expect(el.state.animal).to.equal(`capybara`);
-    });
-
     it(`flushes child state updates to parent`, async function() {
       el.connectedCallback();
-      expect(el.state).to.not.have.all.keys(`animal`, `stateFromChild`);
+      expect(el.state).to.not.have.property(`childAnimal`);
       childEl = document.createElement(`nested-child`);
       childEl.$panelParentID = el.panelID;
       childEl.$panelParent = childEl.$panelRoot = el;
       // state updates happening in child menu should be flushed to parent when connected
-      expect(el.state).to.not.have.all.keys(`animal`, `stateFromChild`);
-      childEl.setAttribute(`animal`, `attribute-animal`);
+      childEl.setAttribute(`child-animal`, `attribute-animal`);
+      childEl.update({animal: `capybara`});
       childEl.connectedCallback();
-      expect(childEl.state).to.include({animal: `attribute-animal`, stateFromChild: `value`});
-      expect(el.state).to.include({animal: `attribute-animal`, stateFromChild: `value`});
+
+      expect(childEl.state).to.include({animal: `capybara`, childAnimal: `attribute-animal`});
+      expect(el.state).to.include({animal: `capybara`, childAnimal: `attribute-animal`});
     });
   });
 
@@ -356,6 +347,10 @@ describe(`Nested Component instance`, function() {
       expect(childEl.textContent).to.include(`parent title: test`);
     });
 
+    it(`flushes child state to parent state`, async function() {
+      expect(childEl.textContent).to.include(`child animal: fox`);
+    });
+
     it(`passes attributes to the child component`, function() {
       expect(childEl.textContent).to.include(`animal: llama`);
     });
@@ -402,9 +397,11 @@ describe(`Nested Component instance with partially shared state`, function() {
       childEl = document.createElement(`nested-partial-state-child`);
       childEl.$panelParentID = parentEl.panelID;
       childEl.$panelParent = childEl.$panelRoot = parentEl;
-      childEl.connectedCallback();
+      // app state updates happening in child menu should be flushed to parent when connected
+      childEl.setAttribute(`child-animal`, `attribute-animal`);
       childEl.updateApp({title: `new title!`});
-      expect(parentEl.appState.title).to.equal(`new title!`);
+      childEl.connectedCallback();
+      expect(parentEl.appState).to.include({title: `new title!`, childAnimal: `attribute-animal`});
     });
   });
 
@@ -426,6 +423,10 @@ describe(`Nested Component instance with partially shared state`, function() {
       expect(childEl.textContent).to.include(`child: parentOnlyState: undefined`);
     });
 
+    it(`flushes shared app state from child to parent`, async function() {
+      expect(childEl.textContent).to.include(`shared child animal: fox`);
+    });
+
     it(`passes only shared app state updates from parent to child`, async function() {
       expect(childEl.textContent).to.include(`shared title: test`);
       expect(parentEl.textContent).to.include(`parent: nonSharedStateExample: I am parent`);

test/fixtures/nested-app.js

@@ -14,36 +14,33 @@ export class NestedApp extends Component {
 
       template: state => h(`div`, {class: {'nested-foo': true}}, [
         h(`h1`, `Nested app: ${state.title}`),
-        this.child(`nested-child`, {attrs: {'child-title': `test`, 'state-animal': `llama`}}),
+        h(`h2`, `Nested child: ${state.childAnimal || `Not defined`}`),
+        this.child(`nested-child`, {attrs: {'child-animal': `fox`, 'state-animal': `llama`}}),
       ]),
     };
   }
 }
 
 export class NestedChild extends Component {
   static get attrsSchema() {
-    return {'animal': `string`};
+    return {'child-animal': `string`};
   }
 
   get config() {
     return {
       template: state => h(`div`, {class: {'nested-foo-child': true}}, [
         h(`p`, `parent title: ${state.title}`),
         h(`p`, `animal: ${state.animal}`),
+        h(`p`, `child animal: ${state.childAnimal}`),
       ]),
     };
   }
 
   attributeChangedCallback(attr, oldVal, newVal) {
     super.attributeChangedCallback(attr, oldVal, newVal);
 
-    if (attr === `animal`) {
-      this.update({animal: newVal});
+    if (attr === `child-animal`) {
+      this.update({childAnimal: newVal});
     }
   }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.update({stateFromChild: `value`});
-  }
 }

test/fixtures/nested-partial-state-app.js

@@ -18,13 +18,17 @@ export class NestedPartialStateParent extends Component {
         h(`p`, `parent: parentOnlyState: ${state.parentOnlyState}`),
         h(`p`, `parent: childOnlyState: ${state.childOnlyState}`),
         h(`p`, `parent: nonSharedStateExample: ${state.nonSharedStateExample}`),
-        this.child(`nested-partial-state-child`),
+        this.child(`nested-partial-state-child`, {attrs: {'child-animal': `fox`}}),
       ]),
     };
   }
 }
 
 export class NestedPartialStateChild extends Component {
+  static get attrsSchema() {
+    return {'child-animal': `string`};
+  }
+
   get config() {
     return {
       defaultState: {
@@ -35,11 +39,20 @@ export class NestedPartialStateChild extends Component {
 
       template: state => h(`div`, {class: {'nested-partial-child': true}}, [
         h(`p`, `shared title: ${state.$app.title}`),
+        h(`p`, `shared child animal: ${state.$app.childAnimal}`),
         h(`p`, `component-specific title: ${state.title}`),
         h(`p`, `childOnlyState: ${state.childOnlyState}`),
         h(`p`, `child: parentOnlyState: ${state.parentOnlyState}`),
         h(`p`, `child: nonSharedStateExample: ${state.nonSharedStateExample}`),
       ]),
     };
   }
+
+  attributeChangedCallback(attr, oldVal, newVal) {
+    super.attributeChangedCallback(attr, oldVal, newVal);
+
+    if (attr === `child-animal`) {
+      this.updateApp({childAnimal: newVal});
+    }
+  }
 }