Revert "revert some tests that cause test errors"

This reverts commit 7b108e2.

Author: christian-bromann

src/compiler/transformers/test/convert-decorators.spec.ts

@@ -28,14 +28,14 @@ describe('convert-decorators', () => {
           return {
             "val": {
               "type": "string",
+              attribute: 'val',
               "mutable": false,
               "complexType": { "original": "string", "resolved": "string", "references": {} },
               "required": false,
               "optional": false,
               "docs": { "tags": [], "text": "" },
               "getter": false, 
               "setter": false,
-              "attribute": 'val',
               "reflect": false,
               "defaultValue": "\\"initial value\\""
             }

src/compiler/transformers/test/parse-props.spec.ts

@@ -213,6 +213,7 @@ describe('parse props', () => {
     `);
     expect(getStaticGetter(t.outputText, 'properties')).toEqual({
       val: {
+        attribute: 'val',
         complexType: {
           references: {},
           resolved: '{}', // TODO, needs to be string[]
@@ -231,7 +232,7 @@ describe('parse props', () => {
       },
     });
     expect(t.property?.type).toBe('unknown');
-    expect(t.property?.attribute).toBe(undefined);
+    expect(t.property?.attribute).toBe('val');
     expect(t.property?.reflect).toBe(false);
   });
 
@@ -819,19 +820,20 @@ describe('parse props', () => {
         return {
           val: {
             type: 'string',
+            attribute: 'val',
             mutable: false,
             complexType: { original: 'string', resolved: 'string', references: {} },
             required: false,
             optional: false,
             docs: { tags: [], text: '' },
             getter: false,
             setter: false,
-            attribute: 'val',
             reflect: false,
             defaultValue: \"'good'\",
           },
           val2: {
             type: 'string',
+            attribute: 'val-2',
             mutable: false,
             complexType: { original: 'string', resolved: 'string', references: {} },
             required: false,
@@ -840,7 +842,6 @@ describe('parse props', () => {
             getter: false,
             setter: false,
             ogPropName: 'dynVal',
-            attribute: 'val-2',
             reflect: false,
             defaultValue: \"'nice'\",
           },

src/hydrate/platform/proxy-host-element.ts

@@ -42,16 +42,7 @@ export function proxyHostElement(elm: d.HostElement, cstr: d.ComponentConstructo
     members.forEach(([memberName, [memberFlags, metaAttributeName]]) => {
       if (memberFlags & MEMBER_FLAGS.Prop) {
         const attributeName = metaAttributeName || memberName;
-        const attrValue = elm.getAttribute(attributeName);
-
-        const { get: origGetter, set: origSetter } =
-          Object.getOwnPropertyDescriptor((cstr as any).prototype, memberName) || {};
-
-        let attrPropVal: any;
-
-        if (attrValue != null) {
-          attrPropVal = parsePropertyValue(attrValue, memberFlags);
-        }
+        let attrPropVal = parsePropertyValue(elm.getAttribute(attributeName), memberFlags);
 
         const ownValue = (elm as any)[memberName];
         if (ownValue !== undefined) {
@@ -62,6 +53,9 @@ export function proxyHostElement(elm: d.HostElement, cstr: d.ComponentConstructo
           delete (elm as any)[memberName];
         }
 
+        const { get: origGetter, set: origSetter } =
+          Object.getOwnPropertyDescriptor((cstr as any).prototype, memberName) || {};
+
         if (attrPropVal !== undefined) {
           if (origSetter) {
             // we have an original setter, so let's set the value via that.

src/runtime/test/attr.spec.tsx

@@ -247,7 +247,7 @@ describe('attribute', () => {
   });
 
   describe('reflect', () => {
-    it('should reflect properties as attributes', async () => {
+    it.skip('should reflect properties as attributes', async () => {
       @Component({ tag: 'cmp-a' })
       class CmpA {
         @Element() el: any;

src/runtime/vdom/vdom-render.ts

@@ -985,13 +985,23 @@ export const renderVdom = (hostRef: d.HostRef, renderFnResults: d.VNode | d.VNod
   const hostElm = hostRef.$hostElement$;
   const cmpMeta = hostRef.$cmpMeta$;
   const oldVNode: d.VNode = hostRef.$vnode$ || newVNode(null, null);
+  const isHostElement = isHost(renderFnResults);
 
   // if `renderFnResults` is a Host node then we can use it directly. If not,
   // we need to call `h` again to wrap the children of our component in a
   // 'dummy' Host node (well, an empty vnode) since `renderVdom` assumes
   // implicitly that the top-level vdom node is 1) an only child and 2)
   // contains attrs that need to be set on the host element.
-  const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults as any);
+  const rootVnode = isHostElement ? renderFnResults : h(null, null, renderFnResults as any);
+
+  /**
+   * If the rootVnode is not a Host element, then we need to copy the attributes
+   * from the oldVNode to the rootVnode, otherwise hydrated values are not
+   * reflected on the host element.
+   */
+  if (!isHostElement) {
+    rootVnode.$attrs$ = oldVNode.$attrs$;
+  }
 
   hostTagName = hostElm.tagName;
 

test/end-to-end/src/ssr-runtime-decorators/ssr-runtime-decorators.e2e.ts

@@ -27,7 +27,7 @@ describe('different types of decorated properties and states render on both serv
     renderToString = mod.renderToString;
   });
 
-  it('renders default values', async () => {
+  it.skip('renders default values', async () => {
     const doc = await renderToString('<runtime-decorators></runtime-decorators>');
     html = doc.html;
 
@@ -108,7 +108,7 @@ describe('different types of decorated properties and states render on both serv
     expect(await txt('decoratedState')).toBe('10');
   });
 
-  it('renders different values on different component instances', async () => {
+  it.skip('renders different values on different component instances', async () => {
     const doc = await renderToString(`
       <runtime-decorators></runtime-decorators>
       <runtime-decorators 

test/wdio/complex-properties/cmp.test.tsx

@@ -43,7 +43,7 @@ describe('complex-properties', () => {
     );
   });
 
-  it.skip('can change a complex property and see it updated correctly', async () => {
+  it('can change a complex property and see it updated correctly', async () => {
     const elm = document.querySelector('complex-properties') as HTMLComplexPropertiesElement;
     elm.foo = { bar: '456', loo: [4, 5, 6], qux: { quux: Symbol('new quux') } };
     elm.kidsNames.push('Jill');