@mirai/core 0.3.138 → 0.3.140

package/build/components/__shared__/Payment/__tests__/__snapshots__/Payment.test.js.snap

@@ -0,0 +1,750 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component:<Payment> inherit:className 1`] = `
+<DocumentFragment>
+  <div
+    class="view mirai"
+  >
+    <div
+      class="view"
+    >
+      <div
+        class="pressable disabled"
+        disabled=""
+      >
+        <h3
+          class="text bold headline-3"
+        >
+          payments.label.card
+        </h3>
+        <img
+          alt="VISA"
+          class="view"
+          src="https://static.mirai.com/payments/images/cards/visa.png"
+        />
+        <img
+          alt="MASTERCARD"
+          class="view"
+          src="https://static.mirai.com/payments/images/cards/mastercard.png"
+        />
+      </div>
+      <div
+        class="view"
+      >
+        <fieldset
+          autocomplete="off"
+        >
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.card_number
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  maxlength="19"
+                  name="card"
+                  placeholder="0000 0000 0000 0000"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.card_name
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  maxlength="100"
+                  minlength="3"
+                  name="name"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.expiration
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  maxlength="5"
+                  name="expire"
+                  placeholder="payments.label.month_format/payments.label.year_format"
+                  required=""
+                  type="inputDate"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.cvv
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  maxlength="3"
+                  name="CVV"
+                  placeholder="000"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Payment> renders 1`] = `
+<DocumentFragment>
+  <div
+    class="view"
+  >
+    <div
+      class="view"
+    >
+      <div
+        class="pressable disabled"
+        disabled=""
+      >
+        <h3
+          class="text bold headline-3"
+        >
+          payments.label.card
+        </h3>
+        <img
+          alt="VISA"
+          class="view"
+          src="https://static.mirai.com/payments/images/cards/visa.png"
+        />
+        <img
+          alt="MASTERCARD"
+          class="view"
+          src="https://static.mirai.com/payments/images/cards/mastercard.png"
+        />
+      </div>
+      <div
+        class="view"
+      >
+        <fieldset
+          autocomplete="off"
+        >
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.card_number
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  maxlength="19"
+                  name="card"
+                  placeholder="0000 0000 0000 0000"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.card_name
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  maxlength="100"
+                  minlength="3"
+                  name="name"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.expiration
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  maxlength="5"
+                  name="expire"
+                  placeholder="payments.label.month_format/payments.label.year_format"
+                  required=""
+                  type="inputDate"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.cvv
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  maxlength="3"
+                  name="CVV"
+                  placeholder="000"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Payment> renders some methods 1`] = `
+<DocumentFragment>
+  <div
+    class="view"
+  >
+    <div
+      class="view"
+    >
+      <div
+        class="pressable"
+      >
+        <div
+          class="radio"
+        >
+          <input
+            class="input"
+            name="method"
+            type="radio"
+            value="CARD"
+          />
+          <span
+            class="checkmark"
+          />
+        </div>
+        <span
+          class="text bold paragraph"
+        >
+          payments.label.card
+        </span>
+      </div>
+    </div>
+    <div
+      class="view"
+    >
+      <div
+        class="pressable"
+      >
+        <div
+          class="radio"
+        >
+          <input
+            class="input"
+            name="method"
+            type="radio"
+            value="TPV"
+          />
+          <span
+            class="checkmark"
+          />
+        </div>
+        <span
+          class="text bold paragraph"
+        >
+          payments.label.tpv
+        </span>
+      </div>
+    </div>
+    <div
+      class="view"
+    >
+      <div
+        class="pressable"
+      >
+        <div
+          class="radio"
+        >
+          <input
+            class="input"
+            name="method"
+            type="radio"
+            value="AMAZON_PAY"
+          />
+          <span
+            class="checkmark"
+          />
+        </div>
+        <span
+          class="text bold paragraph"
+        >
+          payments.label.amazon
+        </span>
+        <img
+          alt="AMAZON PAY"
+          class="view"
+          src="https://static.mirai.com/payments/images/amazonpay.png"
+        />
+      </div>
+    </div>
+    <div
+      class="view"
+    >
+      <div
+        class="pressable"
+      >
+        <div
+          class="radio"
+        >
+          <input
+            class="input"
+            name="method"
+            type="radio"
+            value="PAYPAL"
+          />
+          <span
+            class="checkmark"
+          />
+        </div>
+        <span
+          class="text bold paragraph"
+        >
+          payments.label.paypal
+        </span>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Payment> testID with one method 1`] = `
+<DocumentFragment>
+  <div
+    class="view"
+    data-testid="mirai"
+  >
+    <div
+      class="view"
+    >
+      <div
+        class="pressable disabled"
+        data-testid="mirai-item-CARD"
+        disabled=""
+      >
+        <h3
+          class="text bold headline-3"
+          data-testid="mirai-text-CARD"
+        >
+          payments.label.card
+        </h3>
+        <img
+          alt="VISA"
+          class="view"
+          src="https://static.mirai.com/payments/images/cards/visa.png"
+        />
+        <img
+          alt="MASTERCARD"
+          class="view"
+          src="https://static.mirai.com/payments/images/cards/mastercard.png"
+        />
+      </div>
+      <div
+        class="view"
+        data-testid="mirai-container-CARD"
+      >
+        <fieldset
+          autocomplete="off"
+          data-testid="mirai"
+        >
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.card_number
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  data-testid="mirai-card"
+                  maxlength="19"
+                  name="card"
+                  placeholder="0000 0000 0000 0000"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.card_name
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  data-testid="mirai-name"
+                  maxlength="100"
+                  minlength="3"
+                  name="name"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.expiration
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  data-testid="mirai-expire"
+                  maxlength="5"
+                  name="expire"
+                  placeholder="payments.label.month_format/payments.label.year_format"
+                  required=""
+                  type="inputDate"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.cvv
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  data-testid="mirai-CVV"
+                  maxlength="3"
+                  name="CVV"
+                  placeholder="000"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Payment> testID with some methods 1`] = `
+<DocumentFragment>
+  <div
+    class="view"
+    data-testid="mirai"
+  >
+    <div
+      class="view"
+    >
+      <div
+        class="pressable"
+        data-testid="mirai-item-CARD"
+      >
+        <div
+          class="radio"
+        >
+          <input
+            class="input"
+            name="method"
+            type="radio"
+            value="CARD"
+          />
+          <span
+            class="checkmark"
+          />
+        </div>
+        <span
+          class="text bold paragraph"
+          data-testid="mirai-text-CARD"
+        >
+          payments.label.card
+        </span>
+      </div>
+    </div>
+    <div
+      class="view"
+    >
+      <div
+        class="pressable"
+        data-testid="mirai-item-TPV"
+      >
+        <div
+          class="radio"
+        >
+          <input
+            class="input"
+            name="method"
+            type="radio"
+            value="TPV"
+          />
+          <span
+            class="checkmark"
+          />
+        </div>
+        <span
+          class="text bold paragraph"
+          data-testid="mirai-text-TPV"
+        >
+          payments.label.tpv
+        </span>
+      </div>
+    </div>
+    <div
+      class="view"
+    >
+      <div
+        class="pressable"
+        data-testid="mirai-item-AMAZON_PAY"
+      >
+        <div
+          class="radio"
+        >
+          <input
+            class="input"
+            name="method"
+            type="radio"
+            value="AMAZON_PAY"
+          />
+          <span
+            class="checkmark"
+          />
+        </div>
+        <span
+          class="text bold paragraph"
+          data-testid="mirai-text-AMAZON_PAY"
+        >
+          payments.label.amazon
+        </span>
+        <img
+          alt="AMAZON PAY"
+          class="view"
+          src="https://static.mirai.com/payments/images/amazonpay.png"
+        />
+      </div>
+    </div>
+    <div
+      class="view"
+    >
+      <div
+        class="pressable"
+        data-testid="mirai-item-PAYPAL"
+      >
+        <div
+          class="radio"
+        >
+          <input
+            class="input"
+            name="method"
+            type="radio"
+            value="PAYPAL"
+          />
+          <span
+            class="checkmark"
+          />
+        </div>
+        <span
+          class="text bold paragraph"
+          data-testid="mirai-text-PAYPAL"
+        >
+          payments.label.paypal
+        </span>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;