From 0a90c3c377c27b0b2236759f67fd6f3df049cc83 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 15 Jan 2023 12:35:34 -0600
Subject: [PATCH] Add tests to components with signup CTAs

---
 .../components/__tests__/cta-banner.test.tsx  | 14 +++++
 .../ui/components/__tests__/navbar.test.tsx   | 40 ++++++++++++
 .../__tests__/landing-page-modal.test.tsx     | 40 ++++++++++++
 .../__tests__/unauthorized-modal.test.tsx     | 40 ++++++++++++
 app/soapbox/features/ui/components/navbar.tsx |  2 +-
 .../panels/__tests__/sign-up-panel.test.tsx   | 35 +++++++++++
 .../ui/components/panels/sign-up-panel.tsx    |  2 +-
 .../__tests__/useRegistrationStatus.test.ts   | 62 +++++++++++++++++++
 8 files changed, 233 insertions(+), 2 deletions(-)
 create mode 100644 app/soapbox/features/ui/components/__tests__/navbar.test.tsx
 create mode 100644 app/soapbox/features/ui/components/modals/__tests__/landing-page-modal.test.tsx
 create mode 100644 app/soapbox/features/ui/components/modals/__tests__/unauthorized-modal.test.tsx
 create mode 100644 app/soapbox/features/ui/components/panels/__tests__/sign-up-panel.test.tsx
 create mode 100644 app/soapbox/hooks/__tests__/useRegistrationStatus.test.ts

diff --git a/app/soapbox/features/ui/components/__tests__/cta-banner.test.tsx b/app/soapbox/features/ui/components/__tests__/cta-banner.test.tsx
index 90ba1dcc3..f7ce106a7 100644
--- a/app/soapbox/features/ui/components/__tests__/cta-banner.test.tsx
+++ b/app/soapbox/features/ui/components/__tests__/cta-banner.test.tsx
@@ -1,3 +1,4 @@
+import { fromJS } from 'immutable';
 import React from 'react';
 
 import { normalizeInstance } from 'soapbox/normalizers';
@@ -30,4 +31,17 @@ describe('<CtaBanner />', () => {
       expect(screen.queryAllByTestId('cta-banner')).toHaveLength(0);
     });
   });
+
+  describe('with Pepe enabled', () => {
+    it('renders the banner', () => {
+      const store = {
+        instance: normalizeInstance({ registrations: false }),
+        soapbox: fromJS({ extensions: { pepe: { enabled: true } } }),
+        verification: { instance: fromJS({ registrations: true }) },
+      };
+
+      render(<CtaBanner />, undefined, store);
+      expect(screen.getByTestId('cta-banner')).toHaveTextContent(/sign up/i);
+    });
+  });
 });
diff --git a/app/soapbox/features/ui/components/__tests__/navbar.test.tsx b/app/soapbox/features/ui/components/__tests__/navbar.test.tsx
new file mode 100644
index 000000000..92c295bf1
--- /dev/null
+++ b/app/soapbox/features/ui/components/__tests__/navbar.test.tsx
@@ -0,0 +1,40 @@
+import { fromJS } from 'immutable';
+import React from 'react';
+
+import { render, screen } from 'soapbox/jest/test-helpers';
+import { normalizeInstance } from 'soapbox/normalizers';
+
+import Navbar from '../navbar';
+
+describe('<Navbar />', () => {
+  it('successfully renders', () => {
+    render(<Navbar />);
+    expect(screen.getByTestId('navbar')).toBeInTheDocument();
+  });
+
+  it('doesn\'t display the signup button by default', () => {
+    render(<Navbar />);
+    expect(screen.queryByText('Sign up')).not.toBeInTheDocument();
+  });
+
+  describe('with registrations enabled', () => {
+    it('displays the signup button', () => {
+      const store = { instance: normalizeInstance({ registrations: true }) };
+      render(<Navbar />, undefined, store);
+      expect(screen.getByText('Sign up')).toBeInTheDocument();
+    });
+  });
+
+  describe('with registrations closed, Pepe enabled', () => {
+    it('displays the signup button', () => {
+      const store = {
+        instance: normalizeInstance({ registrations: false }),
+        soapbox: fromJS({ extensions: { pepe: { enabled: true } } }),
+        verification: { instance: fromJS({ registrations: true }) },
+      };
+
+      render(<Navbar />, undefined, store);
+      expect(screen.getByText('Sign up')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/app/soapbox/features/ui/components/modals/__tests__/landing-page-modal.test.tsx b/app/soapbox/features/ui/components/modals/__tests__/landing-page-modal.test.tsx
new file mode 100644
index 000000000..13602d7b2
--- /dev/null
+++ b/app/soapbox/features/ui/components/modals/__tests__/landing-page-modal.test.tsx
@@ -0,0 +1,40 @@
+import { fromJS } from 'immutable';
+import React from 'react';
+
+import { render, screen } from 'soapbox/jest/test-helpers';
+import { normalizeInstance } from 'soapbox/normalizers';
+
+import LandingPageModal from '../landing-page-modal';
+
+describe('<LandingPageModal />', () => {
+  it('successfully renders', () => {
+    render(<LandingPageModal onClose={jest.fn} />);
+    expect(screen.getByTestId('modal')).toBeInTheDocument();
+  });
+
+  it('doesn\'t display the signup button by default', () => {
+    render(<LandingPageModal onClose={jest.fn} />);
+    expect(screen.queryByText('Register')).not.toBeInTheDocument();
+  });
+
+  describe('with registrations enabled', () => {
+    it('displays the signup button', () => {
+      const store = { instance: normalizeInstance({ registrations: true }) };
+      render(<LandingPageModal onClose={jest.fn} />, undefined, store);
+      expect(screen.getByText('Register')).toBeInTheDocument();
+    });
+  });
+
+  describe('with registrations closed, Pepe enabled', () => {
+    it('displays the signup button', () => {
+      const store = {
+        instance: normalizeInstance({ registrations: false }),
+        soapbox: fromJS({ extensions: { pepe: { enabled: true } } }),
+        verification: { instance: fromJS({ registrations: true }) },
+      };
+
+      render(<LandingPageModal onClose={jest.fn} />, undefined, store);
+      expect(screen.getByText('Register')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/app/soapbox/features/ui/components/modals/__tests__/unauthorized-modal.test.tsx b/app/soapbox/features/ui/components/modals/__tests__/unauthorized-modal.test.tsx
new file mode 100644
index 000000000..5f79db2d6
--- /dev/null
+++ b/app/soapbox/features/ui/components/modals/__tests__/unauthorized-modal.test.tsx
@@ -0,0 +1,40 @@
+import { fromJS } from 'immutable';
+import React from 'react';
+
+import { render, screen } from 'soapbox/jest/test-helpers';
+import { normalizeInstance } from 'soapbox/normalizers';
+
+import UnauthorizedModal from '../unauthorized-modal';
+
+describe('<UnauthorizedModal />', () => {
+  it('successfully renders', () => {
+    render(<UnauthorizedModal onClose={jest.fn} action='FOLLOW' />);
+    expect(screen.getByTestId('modal')).toBeInTheDocument();
+  });
+
+  it('doesn\'t display the signup button by default', () => {
+    render(<UnauthorizedModal onClose={jest.fn} action='FOLLOW' />);
+    expect(screen.queryByText('Sign up')).not.toBeInTheDocument();
+  });
+
+  describe('with registrations enabled', () => {
+    it('displays the signup button', () => {
+      const store = { instance: normalizeInstance({ registrations: true }) };
+      render(<UnauthorizedModal onClose={jest.fn} action='FOLLOW' />, undefined, store);
+      expect(screen.getByText('Sign up')).toBeInTheDocument();
+    });
+  });
+
+  describe('with registrations closed, Pepe enabled', () => {
+    it('displays the signup button', () => {
+      const store = {
+        instance: normalizeInstance({ registrations: false }),
+        soapbox: fromJS({ extensions: { pepe: { enabled: true } } }),
+        verification: { instance: fromJS({ registrations: true }) },
+      };
+
+      render(<UnauthorizedModal onClose={jest.fn} action='FOLLOW' />, undefined, store);
+      expect(screen.getByText('Sign up')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index 0b772f459..dc8896e33 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/app/soapbox/features/ui/components/navbar.tsx
@@ -63,7 +63,7 @@ const Navbar = () => {
   if (mfaToken) return <Redirect to={`/login?token=${encodeURIComponent(mfaToken)}`} />;
 
   return (
-    <nav className='bg-white dark:bg-primary-900 shadow z-50 sticky top-0' ref={node}>
+    <nav className='bg-white dark:bg-primary-900 shadow z-50 sticky top-0' ref={node} data-testid='navbar'>
       <div className='max-w-7xl mx-auto px-2 sm:px-6 lg:px-8'>
         <div className='relative flex justify-between h-12 lg:h-16'>
           {account && (
diff --git a/app/soapbox/features/ui/components/panels/__tests__/sign-up-panel.test.tsx b/app/soapbox/features/ui/components/panels/__tests__/sign-up-panel.test.tsx
new file mode 100644
index 000000000..003727ab7
--- /dev/null
+++ b/app/soapbox/features/ui/components/panels/__tests__/sign-up-panel.test.tsx
@@ -0,0 +1,35 @@
+import { fromJS } from 'immutable';
+import React from 'react';
+
+import { render, screen } from 'soapbox/jest/test-helpers';
+import { normalizeInstance } from 'soapbox/normalizers';
+
+import SignUpPanel from '../sign-up-panel';
+
+describe('<SignUpPanel />', () => {
+  it('doesn\'t render by default', () => {
+    render(<SignUpPanel />);
+    expect(screen.queryByTestId('sign-up-panel')).not.toBeInTheDocument();
+  });
+
+  describe('with registrations enabled', () => {
+    it('successfully renders', () => {
+      const store = { instance: normalizeInstance({ registrations: true }) };
+      render(<SignUpPanel />, undefined, store);
+      expect(screen.getByTestId('sign-up-panel')).toBeInTheDocument();
+    });
+  });
+
+  describe('with registrations closed, Pepe enabled', () => {
+    it('successfully renders', () => {
+      const store = {
+        instance: normalizeInstance({ registrations: false }),
+        soapbox: fromJS({ extensions: { pepe: { enabled: true } } }),
+        verification: { instance: fromJS({ registrations: true }) },
+      };
+
+      render(<SignUpPanel />, undefined, store);
+      expect(screen.getByTestId('sign-up-panel')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/app/soapbox/features/ui/components/panels/sign-up-panel.tsx b/app/soapbox/features/ui/components/panels/sign-up-panel.tsx
index 7df125591..f5e6c9222 100644
--- a/app/soapbox/features/ui/components/panels/sign-up-panel.tsx
+++ b/app/soapbox/features/ui/components/panels/sign-up-panel.tsx
@@ -12,7 +12,7 @@ const SignUpPanel = () => {
   if (me || !isOpen) return null;
 
   return (
-    <Stack space={2}>
+    <Stack space={2} data-testid='sign-up-panel'>
       <Stack>
         <Text size='lg' weight='bold'>
           <FormattedMessage id='signup_panel.title' defaultMessage='New to {site_title}?' values={{ site_title: instance.title }} />
diff --git a/app/soapbox/hooks/__tests__/useRegistrationStatus.test.ts b/app/soapbox/hooks/__tests__/useRegistrationStatus.test.ts
new file mode 100644
index 000000000..4dd9e42ce
--- /dev/null
+++ b/app/soapbox/hooks/__tests__/useRegistrationStatus.test.ts
@@ -0,0 +1,62 @@
+import { fromJS } from 'immutable';
+
+import { renderHook } from 'soapbox/jest/test-helpers';
+import { normalizeInstance } from 'soapbox/normalizers';
+
+import { useRegistrationStatus } from '../useRegistrationStatus';
+
+describe('useRegistrationStatus()', () => {
+  test('Registrations open', () => {
+    const store = { instance: normalizeInstance({ registrations: true }) };
+    const { result } = renderHook(useRegistrationStatus, undefined, store);
+
+    expect(result.current).toMatchObject({
+      isOpen: true,
+      pepeEnabled: false,
+      pepeOpen: false,
+    });
+  });
+
+  test('Registrations closed', () => {
+    const store = { instance: normalizeInstance({ registrations: false }) };
+    const { result } = renderHook(useRegistrationStatus, undefined, store);
+
+    expect(result.current).toMatchObject({
+      isOpen: false,
+      pepeEnabled: false,
+      pepeOpen: false,
+    });
+  });
+
+  test('Registrations closed, Pepe enabled & open', () => {
+    const store = {
+      instance: normalizeInstance({ registrations: false }),
+      soapbox: fromJS({ extensions: { pepe: { enabled: true } } }),
+      verification: { instance: fromJS({ registrations: true }) },
+    };
+
+    const { result } = renderHook(useRegistrationStatus, undefined, store);
+
+    expect(result.current).toMatchObject({
+      isOpen: true,
+      pepeEnabled: true,
+      pepeOpen: true,
+    });
+  });
+
+  test('Registrations closed, Pepe enabled & closed', () => {
+    const store = {
+      instance: normalizeInstance({ registrations: false }),
+      soapbox: fromJS({ extensions: { pepe: { enabled: true } } }),
+      verification: { instance: fromJS({ registrations: false }) },
+    };
+
+    const { result } = renderHook(useRegistrationStatus, undefined, store);
+
+    expect(result.current).toMatchObject({
+      isOpen: false,
+      pepeEnabled: true,
+      pepeOpen: false,
+    });
+  });
+});