Feature/tests for rebrand buttons (#2481)

* start writing tests

* adding first render test for rebrand buttons

---------

Co-authored-by: Hai-Yen Nguyen <[email protected]>

Author: hnguyen510

Diff for: test/integration/globals.js

@@ -107,5 +107,7 @@ window.__TEST_FUNDING_ELIGIBILITY__ = {
 };
 
 window.__TEST_FIRST_RENDER_EXPERIMENTS__ = {
+  isPaypalRebrandEnabled: false,
+  defaultBlueButtonColor: "gold",
   venmoWebEnabled: false,
 };

Diff for: test/integration/tests/button/style.js

@@ -11,6 +11,7 @@ import {
   getElementRecursive,
   assert,
   WEBVIEW_USER_AGENT,
+  mockProp,
 } from "../common";
 
 for (const flow of ["popup", "iframe"]) {
@@ -226,3 +227,107 @@ describe("paypal button aria-label", () => {
       });
   });
 });
+
+describe("paypal rebrand button", () => {
+  beforeEach(() => {
+    createTestContainer();
+  });
+
+  afterEach(() => {
+    destroyTestContainer();
+  });
+
+  it("should renders the legacy button when isPaypalRebrandEnabled is false", () => {
+    const mockPaypalRebrandExperiment = mockProp(
+      window.__TEST_FIRST_RENDER_EXPERIMENTS__,
+      "isPaypalRebrandEnabled",
+      false
+    );
+
+    const button = window.paypal.Buttons({});
+
+    return button.render("#testContainer").then(() => {
+      assert.ok(getElementRecursive(".paypal-button-color-gold"));
+      assert.ok(
+        getElementRecursive(".paypal-logo-paypal.paypal-logo-color-blue")
+      );
+      mockPaypalRebrandExperiment.cancel();
+    });
+  });
+
+  it("should renders the legacy button when isPaypalRebrandEnabled is true and defaultBlueButtonColor is gold", () => {
+    const mockPaypalRebrandExperiment = mockProp(
+      window.__TEST_FIRST_RENDER_EXPERIMENTS__,
+      "isPaypalRebrandEnabled",
+      true
+    );
+
+    const button = window.paypal.Buttons({});
+
+    return button.render("#testContainer").then(() => {
+      assert.ok(getElementRecursive(".paypal-button-color-gold"));
+      assert.ok(
+        getElementRecursive(".paypal-logo-paypal.paypal-logo-color-blue")
+      );
+      mockPaypalRebrandExperiment.cancel();
+    });
+  });
+
+  it("should renders the light-blue button when isPaypalRebrandEnabled is true and defaultBlueButtonColor is light-blue", () => {
+    const mockPaypalRebrandExperiment = mockProp(
+      window.__TEST_FIRST_RENDER_EXPERIMENTS__,
+      "isPaypalRebrandEnabled",
+      true
+    );
+
+    const mockDefaultBlueColorExperiment = mockProp(
+      window.__TEST_FIRST_RENDER_EXPERIMENTS__,
+      "defaultBlueButtonColor",
+      "defaultBlue_lightBlue"
+    );
+
+    const button = window.paypal.Buttons({});
+
+    return button.render("#testContainer").then(() => {
+      assert.ok(
+        getElementRecursive(".paypal-button-color-defaultBlue_lightBlue")
+      );
+      assert.ok(
+        getElementRecursive(
+          ".paypal-logo-paypal-rebrand.paypal-logo-color-black"
+        )
+      );
+      mockPaypalRebrandExperiment.cancel();
+      mockDefaultBlueColorExperiment.cancel();
+    });
+  });
+
+  it("should renders the dark-blue button when isPaypalRebrandEnabled is true and defaultBlueButtonColor is dark-blue", () => {
+    const mockPaypalRebrandExperiment = mockProp(
+      window.__TEST_FIRST_RENDER_EXPERIMENTS__,
+      "isPaypalRebrandEnabled",
+      true
+    );
+
+    const mockDefaultBlueColorExperiment = mockProp(
+      window.__TEST_FIRST_RENDER_EXPERIMENTS__,
+      "defaultBlueButtonColor",
+      "defaultBlue_darkBlue"
+    );
+
+    const button = window.paypal.Buttons({});
+
+    return button.render("#testContainer").then(() => {
+      assert.ok(
+        getElementRecursive(".paypal-button-color-defaultBlue_darkBlue")
+      );
+      assert.ok(
+        getElementRecursive(
+          ".paypal-logo-paypal-rebrand.paypal-logo-color-blue"
+        )
+      );
+      mockPaypalRebrandExperiment.cancel();
+      mockDefaultBlueColorExperiment.cancel();
+    });
+  });
+});