feat: added tests for component selector

Author: codebender828

packages/styled/src/styled.tsx

@@ -69,7 +69,6 @@ export const createStyled: CreateStyled = (tag: any, options?: StyledOptions) =>
       const cache = __unusafe_useEmotionCache(defaultCache)
       const { as, ...restAttrs } = attrs || {}
 
-
       let mergedProps = { ...props, ...restAttrs }
 
       let className = attrs.staticClass ? `${attrs.staticClass} ` : ''
@@ -86,6 +85,7 @@ export const createStyled: CreateStyled = (tag: any, options?: StyledOptions) =>
           mergedProps[attr] = props[key]
         }
       }
+
       if (props.theme == null) {
         mergedProps.theme = useEmotionTheme(undefined)
       }
@@ -102,7 +102,7 @@ export const createStyled: CreateStyled = (tag: any, options?: StyledOptions) =>
           clsx(attrs.class as string)
         )
       }
-  
+
       const serialized = serializeStyles(
         styles.concat(classInterpolations),
         cache.registered,

packages/styled/tests/__snapshots__/styled.test.tsx.snap

@@ -75,6 +75,32 @@ exports[`styled call expression 1`] = `
 </DocumentFragment>
 `;
 
+exports[`styled component selectors 1`] = `
+<DocumentFragment>
+  <!---->
+  .emotion-0 {
+  color: green;
+}
+
+.emotion-0 .emotion-2 {
+  color: yellow;
+}
+
+.emotion-1 {
+  color: hotpink;
+}
+
+<div
+    class="emotion-0"
+  >
+    <!---->
+    <div
+      class="emotion-1 emotion-2"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`styled composing components 1`] = `
 <DocumentFragment>
   <!---->
@@ -550,6 +576,56 @@ exports[`styled random object expression 1`] = `
 </DocumentFragment>
 `;
 
+exports[`styled same component rendered multiple times 1`] = `
+<DocumentFragment>
+  <!---->
+  .emotion-0 {
+  color: green;
+}
+
+<div
+    class="emotion-0"
+  />
+</DocumentFragment>
+`;
+
+exports[`styled same component rendered multiple times 2`] = `
+<DocumentFragment>
+  <!---->
+  .emotion-0 {
+  color: green;
+}
+
+<div
+    class="emotion-0"
+  >
+    <!---->
+    <div
+      class="emotion-0"
+    />
+    <!---->
+    <div
+      class="emotion-0"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`styled theming 1`] = `
+<DocumentFragment>
+  <!---->
+  .emotion-0 {
+  color: hotpink;
+}
+
+<div
+    class="emotion-0"
+  >
+    this should be hotpink
+  </div>
+</DocumentFragment>
+`;
+
 exports[`styled throws if undefined is passed as the component 1`] = `
 "You are trying to create a styled element with an undefined component.
 You may have forgotten to import it."

packages/styled/tests/styled.test.tsx

@@ -1,5 +1,5 @@
 import styled from "../src"
-import { h, Fragment } from "vue"
+import { h, Fragment, defineComponent } from "vue"
 import { render } from "../../test-utils/src"
 import { createSerializer } from "@emotion/jest"
 import { css } from '../src/styled'
@@ -530,21 +530,21 @@ describe.only("styled", () => {
     expect(asFragment()).toMatchSnapshot()
   })
 
-  it.todo("Finalize unit tests for theme provider from the Styled Factory Function")
-  it.skip('theming', () => {
+  it('theming', () => {
     const Div = styled.div`
       color: ${props => props.theme.primary};
     `
 
-    const { asFragment } = render(() => {
+    const { asFragment } = render(defineComponent(() => {
       EmotionThemeProvider({
         primary: 'hotpink'
       })
 
-      return (
+      return () => (
         <Div>this should be hotpink</Div>
       )
     })
+  )
 
     expect(asFragment()).toMatchSnapshot()
   })
@@ -565,4 +565,50 @@ describe.only("styled", () => {
 
     expect(asFragment()).toMatchSnapshot()
   })
+
+  it("same component rendered multiple times", () => {
+    const SomeComponent = styled.div`
+      color: green;
+    `
+    const { asFragment } = render(() => (
+      <SomeComponent />
+    ))
+    const tree = asFragment()
+    expect(tree).toMatchSnapshot()
+    expect(render(() => (
+      <SomeComponent />
+    )).asFragment()).toEqual(render(() => (
+      <SomeComponent />
+    )).asFragment())
+
+    expect(render(() => (
+      <SomeComponent>
+        <SomeComponent />
+        <SomeComponent />
+      </SomeComponent>
+    )).asFragment()).toMatchSnapshot()
+  })
+
+  it("component selectors", () => {
+    let Target = styled('div', {
+      // if anyone is looking this
+      // please don't do this.
+      // use the babel plugin/macro.
+      target: 'e322f2d3tbrgf2e0'
+    })`
+      color: hotpink;
+    `
+
+    let SomeComponent = styled.div`
+      color: green;
+      ${Target.toString()} {
+        color: yellow;
+      }
+    `
+    expect(render(() => (
+      <SomeComponent>
+        <Target />
+      </SomeComponent>
+    )).asFragment()).toMatchSnapshot()
+  })
 })

packages/test-utils/src/render.ts

@@ -36,7 +36,7 @@ export const render = (
       name: "ChakraUIVueTestContainer",
       setup(_, { slots }) {
         useDefaultProviders()
-        return () => h(component as any, slots)
+        return () => h(component as any, {}, slots)
       },
     }),
     ...rest