Merge pull request #59 from Shinyaigeek/update/fix-test

Fix: handling self closing tag

src/visitor/convertTsx2TemplateLiteral/convertJsxElementToTemplateLiteral/__tests__/SelfClosing.tsx

@@ -0,0 +1 @@
+export const SelfClosing = () => <input type="text" className="test" />;

src/visitor/convertTsx2TemplateLiteral/convertJsxElementToTemplateLiteral/convertJsxElementToTemplateLiteral.test.ts

@@ -75,4 +75,30 @@ describe("convertJsxElementToTemplateLiteral", () => {
     <div>asdf</div>
   \`;`);
   });
+
+  test("self closing jsx", () => {
+    const jsx = extractJsxElementFromSouceFile(
+      join(__dirname, "./__tests__/SelfClosing.tsx")
+    )[0];
+
+    // TODO fix type
+    const converter = new ConvertJSXElementToTemplateLiteral(jsx!, "" as any);
+
+    converter.traverse();
+
+    const raw = generate(
+      file(
+        program([
+          variableDeclaration("const", [
+            variableDeclarator(
+              identifier("SelfClosing"),
+              arrowFunctionExpression([], converter.render())
+            ),
+          ]),
+        ])
+      )
+    ).code;
+
+    expect(raw).toBe(`const SelfClosing = () => \`<input type="text" class="test" />\`;`);
+  });
 });

src/visitor/convertTsx2TemplateLiteral/convertJsxElementToTemplateLiteral/convertJsxElementToTemplateLiteral.ts

@@ -207,7 +207,11 @@ export class ConvertJSXElementToTemplateLiteral {
           }
         });
 
-        this.query += " />";
+        if (jsx.openingElement.selfClosing) {
+          this.query += " />";
+        } else {
+          this.query += ">";
+        }
 
         if (this.unsafeMarkup) {
           this.queries.push(
@@ -265,8 +269,9 @@ export class ConvertJSXElementToTemplateLiteral {
             "jsx closingElement shouldn't be jsx member expression"
           );
         }
-
-        this.query += `</${jsx.openingElement.name.name}>`;
+        if (!jsx.openingElement.selfClosing) {
+          this.query += `</${jsx.openingElement.name.name}>`;
+        }
       }
     }