Merge pull request #384 from erwstout/bugfix/paypal-target

Open paypal link in new window, close #310

src/components/common/Footer.tsx

@@ -11,6 +11,7 @@
 import React, { Suspense } from "react";
 import { withTranslation } from "react-i18next";
 import FooterUpdateStatus from "./FooterUpdateStatus";
+import FooterDonateLink from "./FooterDonateLink";
 
 const Footer = (props: any) => {
   const { t } = props;
@@ -20,10 +21,7 @@ const Footer = (props: any) => {
       <div>
         <i className="fab fa-paypal" />
         <strong>
-          <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=3J2L3Z4DHW9UY">
-            &nbsp;
-            {t("Donate")}
-          </a>
+          <FooterDonateLink t={t} />
         </strong>{" "}
         {t("if you found this useful")}
       </div>

src/components/common/FooterDonateLink.tsx

@@ -0,0 +1,28 @@
+/* Pi-hole: A black hole for Internet advertisements
+ * (c) 2019 Pi-hole, LLC (https://pi-hole.net)
+ * Network-wide ad blocking via your own hardware.
+ *
+ * Web Interface
+ * Footer Donate Link component
+ *
+ * This file is copyright under the latest version of the EUPL.
+ * Please see LICENSE file for your rights under this license. */
+
+import React from "react";
+
+const FooterDonateLink = (props: any) => {
+  const { t } = props;
+  return (
+    <a
+      id="paypalDonation"
+      href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=3J2L3Z4DHW9UY"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      &nbsp;
+      {t("Donate")}
+    </a>
+  );
+};
+
+export default FooterDonateLink;

src/components/common/FooterUpdateStatus.tsx

@@ -9,7 +9,7 @@
  * Please see LICENSE file for your rights under this license. */
 
 import React from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
+import { WithTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 const FooterUpdateStatus = ({
@@ -27,4 +27,4 @@ const FooterUpdateStatus = ({
   );
 };
 
-export default withTranslation("footer")(FooterUpdateStatus);
+export default FooterUpdateStatus;

src/components/common/__tests__/FooterDonateLink.test.tsx

@@ -0,0 +1,25 @@
+/* Pi-hole: A black hole for Internet advertisements
+ * (c) 2019 Pi-hole, LLC (https://pi-hole.net)
+ * Network-wide ad blocking via your own hardware.
+ *
+ * Web Interface
+ * Footer component test
+ *
+ * This file is copyright under the latest version of the EUPL.
+ * Please see LICENSE file for your rights under this license. */
+
+import React from "react";
+import { shallow } from "enzyme";
+import FooterDonateLink from "../FooterDonateLink";
+
+it("opens a new tab", () => {
+  expect(
+    shallow(<FooterDonateLink t={(text: string) => text} />).prop("target")
+  ).toEqual("_blank");
+});
+
+it("opens new tab securely", () => {
+  expect(
+    shallow(<FooterDonateLink t={(text: string) => text} />).prop("rel")
+  ).toEqual("noopener noreferrer");
+});

src/components/common/__tests__/FooterUpdateStatus.test.tsx

@@ -14,15 +14,15 @@ import * as React from "react";
 import { Link } from "react-router-dom";
 
 it("renders as null if no update is available", () => {
-  const wrapper = shallow(
-    <FooterUpdateStatus updateAvailable={false} />
-  ).dive();
+  const wrapper = shallow(<FooterUpdateStatus updateAvailable={false} />);
 
   expect(wrapper).toBeEmptyRender();
 });
 
 it("renders a link to the versions page if there is an update", () => {
-  const wrapper = shallow(<FooterUpdateStatus updateAvailable={true} />).dive();
+  const wrapper = shallow(
+    <FooterUpdateStatus t={(text: string) => text} updateAvailable={true} />
+  );
 
   expect(wrapper.find(Link).props().to).toEqual("/settings/versions");
 });