fix: first round of input component testing (#19137)

* fix: first round of input component testing * ensure input is styled when not labelled
PostHog · Dec 6, 2023 · e97a423 · e97a423
1 parent 7a37963
commit e97a423
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 15 deletions.
diff --git a/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap b/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap
@@ -663,7 +663,7 @@ exports[`replay/transform transform inputs input - $inputType - hello 1`] = `
                 {
                   "attributes": {},
                   "childNodes": [],
-                  "id": 145,
+                  "id": 147,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -808,7 +808,7 @@ exports[`replay/transform transform inputs input - checkbox - $value 1`] = `
                         {
                           "attributes": {
                             "checked": true,
-                            "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;",
+                            "style": null,
                             "type": "checkbox",
                           },
                           "childNodes": [],
@@ -894,7 +894,7 @@ exports[`replay/transform transform inputs input - checkbox - $value 2`] = `
                       "childNodes": [
                         {
                           "attributes": {
-                            "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;",
+                            "style": null,
                             "type": "checkbox",
                           },
                           "childNodes": [],
@@ -982,7 +982,7 @@ exports[`replay/transform transform inputs input - checkbox - $value 3`] = `
                           "attributes": {
                             "checked": true,
                             "disabled": true,
-                            "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;",
+                            "style": null,
                             "type": "checkbox",
                           },
                           "childNodes": [],
@@ -1431,19 +1431,28 @@ exports[`replay/transform transform inputs input - select - hello 1`] = `
                         {
                           "attributes": {
                             "selected": true,
-                            "value": "hello",
                           },
-                          "childNodes": [],
+                          "childNodes": [
+                            {
+                              "id": 144,
+                              "textContent": "hello",
+                              "type": 3,
+                            },
+                          ],
                           "id": 143,
                           "tagName": "option",
                           "type": 2,
                         },
                         {
-                          "attributes": {
-                            "value": "world",
-                          },
-                          "childNodes": [],
-                          "id": 144,
+                          "attributes": {},
+                          "childNodes": [
+                            {
+                              "id": 146,
+                              "textContent": "world",
+                              "type": 3,
+                            },
+                          ],
+                          "id": 145,
                           "tagName": "option",
                           "type": 2,
                         },
@@ -2153,7 +2162,7 @@ exports[`replay/transform transform inputs wrapping with labels 1`] = `
                       "childNodes": [
                         {
                           "attributes": {
-                            "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;",
+                            "style": null,
                             "type": "checkbox",
                           },
                           "childNodes": [],

diff --git a/ee/frontend/mobile-replay/transformers.ts b/ee/frontend/mobile-replay/transformers.ts
@@ -140,11 +140,13 @@ function inputAttributes<T extends wireframeInputComponent>(wireframe: T): attri
         case 'checkbox':
             return {
                 ...attributes,
+                style: null, // checkboxes are styled by being combined with a label
                 ...(wireframe.checked ? { checked: wireframe.checked } : {}),
             }
         case 'radio':
             return {
                 ...attributes,
+                style: null, // radio buttons are styled by being combined with a label
                 ...(wireframe.checked ? { checked: wireframe.checked } : {}),
                 // radio value defaults to the string "on" if not specified
                 // we're not really submitting the form, so it doesn't matter 🤞
@@ -191,11 +193,16 @@ function makeSelectOptionElement(option: string, selected: boolean): serializedN
         type: NodeType.Element,
         tagName: 'option',
         attributes: {
-            value: option,
             ...(selected ? { selected: selected } : {}),
         },
         id: idSequence.next().value,
-        childNodes: [],
+        childNodes: [
+            {
+                type: NodeType.Text,
+                textContent: option,
+                id: idSequence.next().value,
+            },
+        ],
     }
 }
 
@@ -284,7 +291,14 @@ function makeInputElement(
             ],
         }
     } else {
-        return theInputElement
+        return {
+            ...theInputElement,
+            attributes: {
+                ...theInputElement.attributes,
+                // when labelled no styles are needed, when un-labelled as here - we add the styling in.
+                style: makeStylesString(wireframe),
+            },
+        }
     }
 }