pancakeswap · hachiojidev · Apr 5, 2021 · Apr 3, 2021
diff --git a/packages/pancake-uikit/jest.config.js b/packages/pancake-uikit/jest.config.js
@@ -1,4 +1,8 @@
 module.exports = {
   preset: "ts-jest",
   testPathIgnorePatterns: ["/node_modules/", "/dist/", "/.storybook/"],
+  setupFilesAfterEnv: ["<rootDir>/src/setupTests.js"],
+  transform: {
+    '\\.(js|jsx)?$': 'babel-jest',
+  },
 };
diff --git a/packages/pancake-uikit/src/__tests__/components/alert.test.tsx b/packages/pancake-uikit/src/__tests__/components/alert.test.tsx
@@ -7,14 +7,66 @@ it("renders correctly", () => {
 
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
-      <div
-        class="sc-eCImvq sc-jRQAMF sc-pVTma bvbNmj hCaNlo kiiDNf"
+      .c3 {
+      fill: currentColor;
+      -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+      flex-shrink: 0;
+    }
+
+    .c5 {
+      color: #452A7A;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 1.5;
+    }
+
+    .c6 {
+      color: #452A7A;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 1.5;
+    }
+
+    .c0 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+    }
+
+    .c2 {
+      background-color: #7645D9;
+      border-radius: 16px 0 0 16px;
+      color: #FFFFFF;
+      padding: 12px;
+    }
+
+    .c4 {
+      -webkit-flex: 1;
+      -ms-flex: 1;
+      flex: 1;
+      padding-bottom: 12px;
+      padding-left: 12px;
+      padding-right: 12px;
+      padding-top: 12px;
+    }
+
+    .c1 {
+      position: relative;
+      background-color: #FFFFFF;
+      border-radius: 16px;
+      box-shadow: 0px 20px 36px -8px rgba(14,14,44,0.1),0px 1px 1px rgba(0,0,0,0.05);
+    }
+
+    <div
+        class="c0 c1"
       >
         <div
-          class="sc-gKckTs bRlQtq"
+          class="c2"
         >
           <svg
-            class="sc-bdvvaa ekSmlT"
+            class="c3"
             color="currentColor"
             viewBox="0 0 24 24"
             width="24px"
@@ -26,16 +78,16 @@ it("renders correctly", () => {
           </svg>
         </div>
         <div
-          class="sc-iCfLBT fSnOLT"
+          class="c4"
         >
           <div
-            class="sc-gsDJrp bRnxSN"
+            class="c5"
             color="text"
           >
             Alert title
           </div>
           <p
-            class="sc-gsDJrp iTStsT"
+            class="c6"
             color="text"
           >
             Description

diff --git a/packages/pancake-uikit/src/__tests__/components/balanceinput.test.tsx b/packages/pancake-uikit/src/__tests__/components/balanceinput.test.tsx
@@ -8,18 +8,105 @@ it("renders correctly", () => {
   const { asFragment } = renderWithTheme(<BalanceInput value="14" currencyValue="15 USD" onChange={handleChange} />);
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
-      <div
-        class="sc-gsDJrp sc-hKwCoD cXGWwC csIqRJ"
+      .c3 {
+      color: #8f80ba;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 1.5;
+      font-size: 12px;
+      text-align: right;
+    }
+
+    .c1 {
+      background-color: #eeeaf4;
+      border: 0;
+      border-radius: 16px;
+      box-shadow: inset 0px 2px 2px -1px rgba(74,74,104,0.1);
+      color: #452A7A;
+      display: block;
+      font-size: 16px;
+      height: 40px;
+      outline: 0;
+      padding: 0 16px;
+      width: 100%;
+    }
+
+    .c1::-webkit-input-placeholder {
+      color: #8f80ba;
+    }
+
+    .c1::-moz-placeholder {
+      color: #8f80ba;
+    }
+
+    .c1:-ms-input-placeholder {
+      color: #8f80ba;
+    }
+
+    .c1::placeholder {
+      color: #8f80ba;
+    }
+
+    .c1:disabled {
+      background-color: #E9EAEB;
+      box-shadow: none;
+      color: #BDC2C4;
+      cursor: not-allowed;
+    }
+
+    .c1:focus:not(:disabled) {
+      box-shadow: 0px 0px 0px 1px #7645D9,0px 0px 0px 4px rgba(118,69,217,0.6);
+    }
+
+    .c0 {
+      background-color: #eeeaf4;
+      border: 1px solid #d7caec;
+      border-radius: 16px;
+      box-shadow: inset 0px 2px 2px -1px rgba(74,74,104,0.1);
+      padding: 8px 16px;
+    }
+
+    .c2 {
+      background: transparent;
+      border-radius: 0;
+      box-shadow: none;
+      padding-left: 0;
+      padding-right: 0;
+      text-align: right;
+    }
+
+    .c2::-webkit-input-placeholder {
+      color: #8f80ba;
+    }
+
+    .c2::-moz-placeholder {
+      color: #8f80ba;
+    }
+
+    .c2:-ms-input-placeholder {
+      color: #8f80ba;
+    }
+
+    .c2::placeholder {
+      color: #8f80ba;
+    }
+
+    .c2:focus:not(:disabled) {
+      box-shadow: none;
+    }
+
+    <div
+        class="c0"
       >
         <input
-          class="sc-dkPtyc sc-eCImvq eEGAVJ jnjkdV"
+          class="c1 c2"
           placeholder="0.0"
           scale="md"
           type="text"
           value="14"
         />
         <div
-          class="sc-bdvvaa ctIsWd"
+          class="c3"
           color="textSubtle"
           font-size="12px"
         >

diff --git a/packages/pancake-uikit/src/__tests__/components/breadcrumbs.test.tsx b/packages/pancake-uikit/src/__tests__/components/breadcrumbs.test.tsx
@@ -6,8 +6,24 @@ it("renders correctly", () => {
   const { asFragment } = renderWithTheme(<Breadcrumbs>Link</Breadcrumbs>);
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
-      <ul
-        class="sc-dkPtyc iziLLx"
+      .c0 {
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      color: #BDC2C4;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+      list-style-type: none;
+    }
+
+    <ul
+        class="c0"
       />
     </DocumentFragment>
   `);

diff --git a/packages/pancake-uikit/src/__tests__/components/button.test.tsx b/packages/pancake-uikit/src/__tests__/components/button.test.tsx
@@ -6,8 +6,60 @@ it("renders correctly", () => {
   const { asFragment } = renderWithTheme(<Button>Submit</Button>);
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
-      <button
-        class="sc-bdvvaa cJbNWK"
+      .c0 {
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      border: 0;
+      border-radius: 16px;
+      box-shadow: 0px -1px 0px 0px rgba(14,14,44,0.4) inset;
+      cursor: pointer;
+      display: -webkit-inline-box;
+      display: -webkit-inline-flex;
+      display: -ms-inline-flexbox;
+      display: inline-flex;
+      font-family: inherit;
+      font-size: 16px;
+      font-weight: 600;
+      -webkit-box-pack: center;
+      -webkit-justify-content: center;
+      -ms-flex-pack: center;
+      justify-content: center;
+      -webkit-letter-spacing: 0.03em;
+      -moz-letter-spacing: 0.03em;
+      -ms-letter-spacing: 0.03em;
+      letter-spacing: 0.03em;
+      line-height: 1;
+      opacity: 1;
+      outline: 0;
+      -webkit-transition: background-color 0.2s,opacity 0.2s;
+      transition: background-color 0.2s,opacity 0.2s;
+      height: 48px;
+      padding: 0 24px;
+      background-color: #1FC7D4;
+      color: white;
+    }
+
+    .c0:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) {
+      opacity: 0.65;
+    }
+
+    .c0:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) {
+      opacity: 0.85;
+    }
+
+    .c0:disabled,
+    .c0.pancake-button--disabled {
+      background-color: #E9EAEB;
+      border-color: #E9EAEB;
+      box-shadow: none;
+      color: #BDC2C4;
+      cursor: not-allowed;
+    }
+
+    <button
+        class="c0"
         scale="md"
       >
         Submit