ChargeBar.unit.test.jsx.snap

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

exports[`ChargeBar component Should match the snapshot of ChargeBar 1`] = `
<DocumentFragment>
  .c4 {
  overflow: hidden;
  position: relative;
  border-radius: 4px;
  height: 4px;
  background-color: rgba(18,80,196,0.39);
  width: 250px;
  margin-top: 4px;
}

.c5 {
  border-radius: 8px;
  display: inline-block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: width 0.4s linear;
  transition: width 0.4s linear;
  background-color: #1250C4;
  width: 50%;
}

.c0 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  font-stretch: normal;
  font-style: normal;
  font-weight: normal;
  -webkit-letter-spacing: 0.18px;
  -moz-letter-spacing: 0.18px;
  -ms-letter-spacing: 0.18px;
  letter-spacing: 0.18px;
  line-height: 1.5;
  width: 250px;
  color: #1250C4;
  font-size: 14px;
}

.c3 {
  display: inline-block;
}

.c1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c1 svg + span {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.c2 {
  margin-left: 8px;
  height: 17px;
}

@media (min-width:1024px) {
  .c4 {
    border-radius: 8px;
    height: 8px;
  }
}

<div
    class="c0"
    width="250px"
  >
    <div
      class="c1"
      id="chargebar-label"
    >
      <svg
        aria-hidden="true"
        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
        data-qtm-preloader="icon"
        data-testid="WhatshotIcon"
        focusable="false"
        style="color: rgb(18, 80, 196); font-size: 16px; max-width: 16px;"
        viewBox="0 0 24 24"
      >
        <path
          d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67M11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8"
        />
      </svg>
      <span
        class="c2"
        spacing="[object Object]"
      >
        default informative text
      </span>
      <span
        class="c3"
      >
        50%
      </span>
    </div>
    <div
      aria-labelledby="chargebar-label"
      class="c4"
      role="progressbar"
      spacing="[object Object]"
      tabindex="0"
      width="250px"
    >
      <div
        class="c5"
      />
    </div>
  </div>
</DocumentFragment>
`;

exports[`ChargeBar component Should match the snapshot of ChargeBar 2`] = `
<DocumentFragment>
  .c4 {
  overflow: hidden;
  position: relative;
  border-radius: 4px;
  height: 4px;
  background-color: rgba(222,0,89,0.39);
  width: 250px;
  margin-top: 4px;
}

.c5 {
  border-radius: 8px;
  display: inline-block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: width 0.4s linear;
  transition: width 0.4s linear;
  background-color: #DE0059;
  width: 50%;
}

.c0 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  font-stretch: normal;
  font-style: normal;
  font-weight: normal;
  -webkit-letter-spacing: 0.18px;
  -moz-letter-spacing: 0.18px;
  -ms-letter-spacing: 0.18px;
  letter-spacing: 0.18px;
  line-height: 1.5;
  width: 250px;
  color: #DE0059;
  font-size: 14px;
}

.c3 {
  display: inline-block;
}

.c1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c1 svg + span {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.c2 {
  margin-left: 8px;
  height: 17px;
}

@media (min-width:1024px) {

}

@media (min-width:1024px) {
  .c4 {
    border-radius: 8px;
    height: 8px;
  }
}

<div
    class="c0"
    width="250px"
  >
    <div
      class="c1"
      id="chargebar-label"
    >
      <svg
        aria-hidden="true"
        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
        data-qtm-preloader="icon"
        data-testid="WhatshotIcon"
        focusable="false"
        style="color: rgb(222, 0, 89); font-size: 16px; max-width: 16px;"
        viewBox="0 0 24 24"
      >
        <path
          d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67M11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8"
        />
      </svg>
      <span
        class="c2"
        spacing="[object Object]"
      >
        default informative text
      </span>
      <span
        class="c3"
      >
        50%
      </span>
    </div>
    <div
      aria-labelledby="chargebar-label"
      class="c4"
      role="progressbar"
      spacing="[object Object]"
      tabindex="0"
      width="250px"
    >
      <div
        class="c5"
      />
    </div>
  </div>
</DocumentFragment>
`;

exports[`ChargeBar component Should match the snapshot of ChargeBar 3`] = `
<DocumentFragment>
  .c4 {
  overflow: hidden;
  position: relative;
  border-radius: 4px;
  height: 4px;
  background-color: rgba(59,97,15,0.39);
  width: 250px;
  margin-top: 4px;
}

.c5 {
  border-radius: 8px;
  display: inline-block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: width 0.4s linear;
  transition: width 0.4s linear;
  background-color: #3b610f;
  width: 50%;
}

.c0 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  font-stretch: normal;
  font-style: normal;
  font-weight: normal;
  -webkit-letter-spacing: 0.18px;
  -moz-letter-spacing: 0.18px;
  -ms-letter-spacing: 0.18px;
  letter-spacing: 0.18px;
  line-height: 1.5;
  width: 250px;
  color: #3b610f;
  font-size: 14px;
}

.c3 {
  display: inline-block;
}

.c1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c1 svg + span {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.c2 {
  margin-left: 8px;
  height: 17px;
}

@media (min-width:1024px) {

}

@media (min-width:1024px) {

}

@media (min-width:1024px) {
  .c4 {
    border-radius: 8px;
    height: 8px;
  }
}

<div
    class="c0"
    width="250px"
  >
    <div
      class="c1"
      id="chargebar-label"
    >
      <svg
        aria-hidden="true"
        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
        data-qtm-preloader="icon"
        data-testid="WhatshotIcon"
        focusable="false"
        style="color: rgb(59, 97, 15); font-size: 16px; max-width: 16px;"
        viewBox="0 0 24 24"
      >
        <path
          d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67M11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8"
        />
      </svg>
      <span
        class="c2"
        spacing="[object Object]"
      >
        default informative text
      </span>
      <span
        class="c3"
      >
        50%
      </span>
    </div>
    <div
      aria-labelledby="chargebar-label"
      class="c4"
      role="progressbar"
      spacing="[object Object]"
      tabindex="0"
      width="250px"
    >
      <div
        class="c5"
      />
    </div>
  </div>
</DocumentFragment>
`;

exports[`ChargeBar component Should match the snapshot of ChargeBar 4`] = `
<DocumentFragment>
  .c4 {
  overflow: hidden;
  position: relative;
  border-radius: 4px;
  height: 4px;
  background-color: rgba(66,66,66,0.39);
  width: 250px;
  margin-top: 4px;
}

.c5 {
  border-radius: 8px;
  display: inline-block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: width 0.4s linear;
  transition: width 0.4s linear;
  background-color: #424242;
  width: 50%;
}

.c0 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  font-stretch: normal;
  font-style: normal;
  font-weight: normal;
  -webkit-letter-spacing: 0.18px;
  -moz-letter-spacing: 0.18px;
  -ms-letter-spacing: 0.18px;
  letter-spacing: 0.18px;
  line-height: 1.5;
  width: 250px;
  color: #424242;
  font-size: 14px;
}

.c3 {
  display: inline-block;
}

.c1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c1 svg + span {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.c2 {
  margin-left: 8px;
  height: 17px;
}

@media (min-width:1024px) {

}

@media (min-width:1024px) {

}

@media (min-width:1024px) {

}

@media (min-width:1024px) {
  .c4 {
    border-radius: 8px;
    height: 8px;
  }
}

<div
    class="c0"
    width="250px"
  >
    <div
      class="c1"
      id="chargebar-label"
    >
      <svg
        aria-hidden="true"
        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
        data-qtm-preloader="icon"
        data-testid="WhatshotIcon"
        focusable="false"
        style="color: rgb(66, 66, 66); font-size: 16px; max-width: 16px;"
        viewBox="0 0 24 24"
      >
        <path
          d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67M11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8"
        />
      </svg>
      <span
        class="c2"
        spacing="[object Object]"
      >
        default informative text
      </span>
      <span
        class="c3"
      >
        50%
      </span>
    </div>
    <div
      aria-labelledby="chargebar-label"
      class="c4"
      role="progressbar"
      spacing="[object Object]"
      tabindex="0"
      width="250px"
    >
      <div
        class="c5"
      />
    </div>
  </div>
</DocumentFragment>
`;

exports[`ChargeBar component Should match the snapshot of ChargeBar 5`] = `
<DocumentFragment>
  .c4 {
  overflow: hidden;
  position: relative;
  border-radius: 4px;
  height: 4px;
  background-color: rgba(18,80,196,0.39);
  width: 250px;
  margin-top: 4px;
}

.c5 {
  border-radius: 8px;
  display: inline-block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: width 0.4s linear;
  transition: width 0.4s linear;
  background-color: #1250C4;
  width: 75%;
}

.c0 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  font-stretch: normal;
  font-style: normal;
  font-weight: normal;
  -webkit-letter-spacing: 0.18px;
  -moz-letter-spacing: 0.18px;
  -ms-letter-spacing: 0.18px;
  letter-spacing: 0.18px;
  line-height: 1.5;
  width: 250px;
  color: #1250C4;
  font-size: 14px;
}

.c3 {
  display: inline-block;
}

.c1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c1 svg + span {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.c2 {
  margin-left: 8px;
  height: 17px;
}

@media (min-width:1024px) {
  .c4 {
    border-radius: 8px;
    height: 8px;
  }
}

@media (min-width:1024px) {

}

@media (min-width:1024px) {

}

@media (min-width:1024px) {

}

<div
    class="c0"
    width="250px"
  >
    <div
      class="c1"
      id="chargebar-label"
    >
      <svg
        aria-hidden="true"
        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
        data-qtm-preloader="icon"
        data-testid="WhatshotIcon"
        focusable="false"
        style="color: rgb(18, 80, 196); font-size: 16px; max-width: 16px;"
        viewBox="0 0 24 24"
      >
        <path
          d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67M11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8"
        />
      </svg>
      <span
        class="c2"
        spacing="[object Object]"
      >
        curriculum force
      </span>
      <span
        class="c3"
      >
        75%
      </span>
    </div>
    <div
      aria-labelledby="chargebar-label"
      class="c4"
      role="progressbar"
      spacing="[object Object]"
      tabindex="0"
      width="250px"
    >
      <div
        class="c5"
      />
    </div>
  </div>
</DocumentFragment>
`;