Tidy and Tests (#7)

Author: John Richard Chipps-Harding

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@phntms/css-components",
   "description": "At its core, css-components is a simple wrapper around standard CSS. It allows you to write your CSS how you wish then compose them into a component ready to be used in React.",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "homepage": "https://github.com/phantomstudios/css-components#readme",

package.json

@@ -96,7 +96,6 @@ export const styled = <
 
       componentProps.className = componentStyles.join(" ");
       styledComponent.displayName = element.toString();
-      // console.log(componentProps);
       return createElement(element, componentProps);
     }
   );

src/index.ts

@@ -9,13 +9,13 @@ import { render } from "@testing-library/react";
 import { styled } from "../src";
 
 describe("Basic functionality", () => {
-  it("it should output the correct type of DOM node", async () => {
+  it("should return the correct type of DOM node", async () => {
     const Button = styled("button");
     const { container } = render(<Button />);
     expect(container.firstChild?.nodeName).toEqual("BUTTON");
   });
 
-  it("it should apply the base class", async () => {
+  it("should apply the base class", async () => {
     const Button = styled("button", "root");
     const { container } = render(<Button />);
     expect(container.firstChild).toHaveClass("root");
@@ -27,7 +27,19 @@ describe("Basic functionality", () => {
     expect(container.firstChild).toHaveTextContent("Hello");
   });
 
-  it("should pass provide typescript support for built in types", async () => {
+  it("should pass through multiple children", async () => {
+    const Article = styled("article");
+    const { container } = render(
+      <Article>
+        <h1>Title</h1>
+        <p>Description</p>
+      </Article>
+    );
+    expect(container.firstChild).toHaveTextContent("Title");
+    expect(container.firstChild).toHaveTextContent("Description");
+  });
+
+  it("should provide typescript support for built in types", async () => {
     const Input = styled("input");
     const onChange = jest.fn();
     const { container } = render(<Input value={"test"} onChange={onChange} />);