Add tests to components with signup CTAs

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);
+    });
+  });
 });

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();
+    });
+  });
+});

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();
+    });
+  });
+});

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();
+    });
+  });
+});

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 && (

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();
+    });
+  });
+});

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 }} />

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,
+    });
+  });
+});