styleSheetSerializer.spec.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`any component: mount 1`] = `
.c0 {
  color: palevioletred;
  font-weight: bold;
}

<div>
  <Link>
    <a>
      Unstyled, boring Link
    </a>
  </Link>
  <br />
  <Styled(Link)>
    <Link
      className="c0"
    >
      <a
        className="c0"
      >
        Styled, exciting Link
      </a>
    </Link>
  </Styled(Link)>
</div>
`;

exports[`any component: react-test-renderer 1`] = `
.c0 {
  color: palevioletred;
  font-weight: bold;
}

<div>
  <a>
    Unstyled, boring Link
  </a>
  <br />
  <a
    className="c0"
  >
    Styled, exciting Link
  </a>
</div>
`;

exports[`any component: react-testing-library 1`] = `
.c0 {
  color: palevioletred;
  font-weight: bold;
}

<div>
  <a>
    Unstyled, boring Link
  </a>
  <br />
  <a
    class="c0"
  >
    Styled, exciting Link
  </a>
</div>
`;

exports[`any component: shallow 1`] = `
<div>
  <Link>
    Unstyled, boring Link
  </Link>
  <br />
  <Styled(Link)>
    Styled, exciting Link
  </Styled(Link)>
</div>
`;

exports[`attaching additional props: mount 1`] = `
.c0 {
  color: red;
}

<styled.div>
  <div
    className="c0 div"
  />
</styled.div>
`;

exports[`attaching additional props: react-test-renderer 1`] = `
.c0 {
  color: red;
}

<div
  className="c0 div"
/>
`;

exports[`attaching additional props: react-testing-library 1`] = `
.c0 {
  color: red;
}

<div
  class="c0 div"
/>
`;

exports[`attaching additional props: shallow 1`] = `
.c0 {
  color: red;
}

<div
  className="c0 div"
/>
`;

exports[`basic: mount 1`] = `
.c0 {
  padding: 4em;
  background: papayawhip;
}

.c1 {
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
}

<styled.section>
  <section
    className="c0"
  >
    <styled.h1>
      <h1
        className="c1"
      >
        Hello World, this is my first styled component!
      </h1>
    </styled.h1>
  </section>
</styled.section>
`;

exports[`basic: react-test-renderer 1`] = `
.c0 {
  padding: 4em;
  background: papayawhip;
}

.c1 {
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
}

<section
  className="c0"
>
  <h1
    className="c1"
  >
    Hello World, this is my first styled component!
  </h1>
</section>
`;

exports[`basic: react-testing-library 1`] = `
.c0 {
  padding: 4em;
  background: papayawhip;
}

.c1 {
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
}

<section
  class="c0"
>
  <h1
    class="c1"
  >
    Hello World, this is my first styled component!
  </h1>
</section>
`;

exports[`basic: shallow 1`] = `
.c0 {
  padding: 4em;
  background: papayawhip;
}

<section
  className="c0"
>
  <styled.h1>
    Hello World, this is my first styled component!
  </styled.h1>
</section>
`;

exports[`duplicated components: mount 1`] = `
.c0 {
  color: red;
}

.c1 {
  color: green;
}

<div>
  <styled.div>
    <div
      className="c0"
    />
  </styled.div>
   
  <styled.div>
    <div
      className="c0"
    />
  </styled.div>
   
  <styled.div>
    <div
      className="c1"
    />
  </styled.div>
</div>
`;

exports[`duplicated components: react-test-renderer 1`] = `
.c0 {
  color: red;
}

.c1 {
  color: green;
}

<div>
  <div
    className="c0"
  />
   
  <div
    className="c0"
  />
   
  <div
    className="c1"
  />
</div>
`;

exports[`duplicated components: react-testing-library 1`] = `
.c0 {
  color: red;
}

.c1 {
  color: green;
}

<div>
  <div
    class="c0"
  />
   
  <div
    class="c0"
  />
   
  <div
    class="c1"
  />
</div>
`;

exports[`duplicated components: shallow 1`] = `
<div>
  <styled.div />
   
  <styled.div />
   
  <styled.div />
</div>
`;

exports[`empty style: mount 1`] = `
<styled.div>
  <div
    className=""
  />
</styled.div>
`;

exports[`empty style: react-test-renderer 1`] = `
<div
  className=""
/>
`;

exports[`empty style: react-testing-library 1`] = `
<div
  class=""
/>
`;

exports[`empty style: shallow 1`] = `
<div
  className=""
/>
`;

exports[`included class name: mount 1`] = `
.c0 {
  color: red;
}

<styled.div>
  <div
    className="c0 i"
  />
</styled.div>
`;

exports[`included class name: react-test-renderer 1`] = `
.c0 {
  color: red;
}

<div
  className="c0 i"
/>
`;

exports[`included class name: react-testing-library 1`] = `
.c0 {
  color: red;
}

<div
  class="c0 i"
/>
`;

exports[`included class name: shallow 1`] = `
.c0 {
  color: red;
}

<div
  className="c0 i"
/>
`;

exports[`leading white spaces: mount 1`] = `
<Div>
  <div
    className="  div"
  />
</Div>
`;

exports[`leading white spaces: react-test-renderer 1`] = `
<div
  className="  div"
/>
`;

exports[`leading white spaces: react-testing-library 1`] = `
<div
  class="  div"
/>
`;

exports[`leading white spaces: shallow 1`] = `
<div
  className="  div"
/>
`;

exports[`non-styled: mount 1`] = `<div />`;

exports[`non-styled: react-test-renderer 1`] = `<div />`;

exports[`non-styled: react-testing-library 1`] = `<div />`;

exports[`non-styled: shallow 1`] = `<div />`;

exports[`null 1`] = `null`;

exports[`referring to other components: mount 1`] = `
.c1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 5px 10px;
  background: papayawhip;
  color: palevioletred;
}

.c2 {
  -webkit-transition: fill 0.25s;
  transition: fill 0.25s;
  width: 48px;
  height: 48px;
}

.c0:hover .c2 {
  fill: rebeccapurple;
}

.c3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 1.2;
}

.c3::before {
  content: '◀';
  margin: 0 10px;
}

.sc-fzXfLU .c4 {
  color: yellow;
  background-color: green;
}

.sc-fzXfLU .c5 {
  color: yellow;
  background-color: red;
}

<styled.a
  href="#"
>
  <a
    className="c0 c1"
    href="#"
  >
    <styled.svg>
      <svg
        className="c2"
      />
    </styled.svg>
    <styled.span>
      <span
        className="c3"
      >
        Hovering my parent changes my style!
      </span>
    </styled.span>
    <styled.span>
      <span
        className="c4"
      >
        I should be green
      </span>
    </styled.span>
    <styled.span
      error={true}
    >
      <span
        className="c5"
      >
        I should be red
      </span>
    </styled.span>
  </a>
</styled.a>
`;

exports[`referring to other components: react-test-renderer 1`] = `
.c1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 5px 10px;
  background: papayawhip;
  color: palevioletred;
}

.c2 {
  -webkit-transition: fill 0.25s;
  transition: fill 0.25s;
  width: 48px;
  height: 48px;
}

.c0:hover .c2 {
  fill: rebeccapurple;
}

.c3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 1.2;
}

.c3::before {
  content: '◀';
  margin: 0 10px;
}

.sc-fzXfLU .c4 {
  color: yellow;
  background-color: green;
}

.sc-fzXfLU .c5 {
  color: yellow;
  background-color: red;
}

<a
  className="c0 c1"
  href="#"
>
  <svg
    className="c2"
  />
  <span
    className="c3"
  >
    Hovering my parent changes my style!
  </span>
  <span
    className="c4"
  >
    I should be green
  </span>
  <span
    className="c5"
  >
    I should be red
  </span>
</a>
`;

exports[`referring to other components: react-testing-library 1`] = `
.c1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 5px 10px;
  background: papayawhip;
  color: palevioletred;
}

.c2 {
  -webkit-transition: fill 0.25s;
  transition: fill 0.25s;
  width: 48px;
  height: 48px;
}

.c0:hover .c2 {
  fill: rebeccapurple;
}

.c3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 1.2;
}

.c3::before {
  content: '◀';
  margin: 0 10px;
}

.sc-fzXfLU .c4 {
  color: yellow;
  background-color: green;
}

.sc-fzXfLU .c5 {
  color: yellow;
  background-color: red;
}

<a
  class="c0 c1"
  href="#"
>
  <svg
    class="c2"
  />
  <span
    class="c3"
  >
    Hovering my parent changes my style!
  </span>
  <span
    class="c4"
  >
    I should be green
  </span>
  <span
    class="c5"
  >
    I should be red
  </span>
</a>
`;

exports[`referring to other unreferenced components: mount 1`] = `
.c0 {
  font-size: 1.5em;
  color: palevioletred;
  font-weight: bold;
}

<div>
  <Styled(styled.a)>
    <a
      className="c0"
    >
      Styled, exciting Link
    </a>
  </Styled(styled.a)>
</div>
`;

exports[`referring to other unreferenced components: react-test-renderer 1`] = `
.c0 {
  font-size: 1.5em;
  color: palevioletred;
  font-weight: bold;
}

<div>
  <a
    className="c0"
  >
    Styled, exciting Link
  </a>
</div>
`;

exports[`referring to other unreferenced components: react-testing-library 1`] = `
.c0 {
  font-size: 1.5em;
  color: palevioletred;
  font-weight: bold;
}

<div>
  <a
    class="c0"
  >
    Styled, exciting Link
  </a>
</div>
`;

exports[`referring to other unreferenced components: shallow 1`] = `
<div>
  <Styled(styled.a)>
    Styled, exciting Link
  </Styled(styled.a)>
</div>
`;

exports[`shallow with theme 1`] = `
.c0 {
  color: mediumseagreen;
}

<button
  className="c0"
>
  Themed
</button>
`;

exports[`supported css: mount 1`] = `
.c0 {
  padding: 2em 1em;
  background: papayawhip;
}

.c0:hover {
  background: palevioletred;
}

.c0 > p {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

html.test .c0 {
  display: none;
}

@media (max-width:600px) {
  .c0 {
    background: tomato;
  }

  .c0:hover {
    background: yellow;
  }
}

<styled.div>
  <div
    className="c0"
  >
    <p>
      Hello World!
    </p>
  </div>
</styled.div>
`;

exports[`supported css: react-test-renderer 1`] = `
.c0 {
  padding: 2em 1em;
  background: papayawhip;
}

.c0:hover {
  background: palevioletred;
}

.c0 > p {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

html.test .c0 {
  display: none;
}

@media (max-width:600px) {
  .c0 {
    background: tomato;
  }

  .c0:hover {
    background: yellow;
  }
}

<div
  className="c0"
>
  <p>
    Hello World!
  </p>
</div>
`;

exports[`supported css: react-testing-library 1`] = `
.c0 {
  padding: 2em 1em;
  background: papayawhip;
}

.c0:hover {
  background: palevioletred;
}

.c0 > p {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

html.test .c0 {
  display: none;
}

@media (max-width:600px) {
  .c0 {
    background: tomato;
  }

  .c0:hover {
    background: yellow;
  }
}

<div
  class="c0"
>
  <p>
    Hello World!
  </p>
</div>
`;

exports[`supported css: shallow 1`] = `
.c0 {
  padding: 2em 1em;
  background: papayawhip;
}

.c0:hover {
  background: palevioletred;
}

.c0 > p {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

html.test .c0 {
  display: none;
}

@media (max-width:600px) {
  .c0 {
    background: tomato;
  }

  .c0:hover {
    background: yellow;
  }
}

<div
  className="c0"
>
  <p>
    Hello World!
  </p>
</div>
`;

exports[`theming: mount 1`] = `
.c0 {
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  color: palevioletred;
  border: 2px solid palevioletred;
}

.c1 {
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  color: mediumseagreen;
  border: 2px solid mediumseagreen;
}

<div>
  <styled.button
    theme={
      Object {
        "main": "palevioletred",
      }
    }
  >
    <button
      className="c0"
    >
      Normal
    </button>
  </styled.button>
  <ThemeProvider
    theme={
      Object {
        "main": "mediumseagreen",
      }
    }
  >
    <styled.button
      theme={
        Object {
          "main": "palevioletred",
        }
      }
    >
      <button
        className="c1"
      >
        Themed
      </button>
    </styled.button>
  </ThemeProvider>
</div>
`;

exports[`theming: react-test-renderer 1`] = `
.c0 {
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  color: palevioletred;
  border: 2px solid palevioletred;
}

.c1 {
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  color: mediumseagreen;
  border: 2px solid mediumseagreen;
}

<div>
  <button
    className="c0"
  >
    Normal
  </button>
  <button
    className="c1"
  >
    Themed
  </button>
</div>
`;

exports[`theming: react-testing-library 1`] = `
.c0 {
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  color: palevioletred;
  border: 2px solid palevioletred;
}

.c1 {
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  color: mediumseagreen;
  border: 2px solid mediumseagreen;
}

<div>
  <button
    class="c0"
  >
    Normal
  </button>
  <button
    class="c1"
  >
    Themed
  </button>
</div>
`;

exports[`theming: shallow 1`] = `
<div>
  <styled.button
    theme={
      Object {
        "main": "palevioletred",
      }
    }
  >
    Normal
  </styled.button>
  <ThemeProvider
    theme={
      Object {
        "main": "mediumseagreen",
      }
    }
  >
    <styled.button
      theme={
        Object {
          "main": "palevioletred",
        }
      }
    >
      Themed
    </styled.button>
  </ThemeProvider>
</div>
`;

exports[`trailing white spaces: mount 1`] = `
.c0 {
  color: red;
}

<styled.div>
  <div
    className="c0 div  "
  />
</styled.div>
`;

exports[`trailing white spaces: react-test-renderer 1`] = `
.c0 {
  color: red;
}

<div
  className="c0 div  "
/>
`;

exports[`trailing white spaces: react-testing-library 1`] = `
.c0 {
  color: red;
}

<div
  class="c0 div  "
/>
`;

exports[`trailing white spaces: shallow 1`] = `
.c0 {
  color: red;
}

<div
  className="c0 div  "
/>
`;