chore(test): set up regression test suite to support React 17 upgrade (WIP)

.github/workflows/regression-tests.yml

@@ -0,0 +1,23 @@
+name: Regression Tests
+
+on:
+  push:
+    branches: [ alpha ]
+  pull_request:
+    branches: [ alpha ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci || npm install
+      - name: Run regression tests
+        run: npm run test:regression

config-overrides.js

@@ -8,7 +8,6 @@ const debug = require('debug')('build:config-overrides');
 const webpack = require('webpack');
 const { injectBabelPlugin } = require('react-app-rewired');
 const rewireStyledComponents = require('react-app-rewire-styled-components');
-const rewireReactHotLoader = require('react-app-rewire-hot-loader');
 const swPrecachePlugin = require('sw-precache-webpack-plugin');
 const fs = require('fs');
 const path = require('path');
@@ -79,7 +78,6 @@ module.exports = function override(config, env) {
   }
   if (process.env.NODE_ENV === 'development') {
     config.output.path = path.join(__dirname, './build');
-    config = rewireReactHotLoader(config, env);
     config.plugins.push(
       WriteFilePlugin({
         log: true,

package.json

@@ -4,6 +4,9 @@
   "license": "BSD-3-Clause",
   "devDependencies": {
     "@babel/preset-flow": "^7.0.0",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
     "babel-cli": "^6.24.1",
     "babel-eslint": "^8.2.6",
     "babel-jest": "^22.4.4",
@@ -38,10 +41,10 @@
     "is-html": "^1.1.0",
     "lint-staged": "^3.3.0",
     "micromatch": "^3.0.4",
+    "msw": "^0.35.0",
     "prettier": "^1.14.3",
     "raw-loader": "^0.5.1",
-    "react-app-rewire-hot-loader": "^1.0.3",
-    "react-hot-loader": "^4.12.13",
+
     "react-scripts": "^1.1.5",
     "rimraf": "^2.6.1",
     "sw-precache-webpack-plugin": "^0.11.4",
@@ -152,13 +155,13 @@
     "query-string": "5.1.1",
     "raf": "^3.4.0",
     "raven": "^2.6.4",
-    "react": "^16.8.4",
+    "react": "^17.0.2",
     "react-apollo": "^2.5.1",
     "react-app-rewire-styled-components": "^3.0.0",
     "react-app-rewired": "1.6.2",
     "react-async-hook": "^1.0.0",
     "react-clipboard.js": "^2.0.1",
-    "react-dom": "npm:@hot-loader/react-dom",
+    "react-dom": "^17.0.2",
     "react-dropzone": "^8.0.3",
     "react-flip-move": "^3.0.2",
     "react-helmet-async": "^0.2.0",
@@ -249,7 +252,8 @@
     "lint:staged": "lint-staged",
     "webpack-defaults": "webpack-defaults",
     "deploy": "node scripts/deploy",
-    "heroku": "node scripts/heroku-deploy"
+    "heroku": "node scripts/heroku-deploy",
+    "test:regression": "jest -c ./regression-tests/jest.config.js --runInBand"
   },
   "lint-staged": {
     "*.js": [

regression-tests/authViewHandler.test.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+// Import the raw component by reaching into the file and using named export pattern.
+// The module exports default wrapped component; to test without Apollo, require the file and access the class.
+const AuthModule = require('../src/views/authViewHandler/index.js');
+const AuthViewHandler =
+  AuthModule.__esModule && AuthModule.default
+    ? AuthModule.default.WrappedComponent ||
+      AuthModule.AuthViewHandler ||
+      AuthModule.default
+    : AuthModule.AuthViewHandler || AuthModule;
+// Fallback: if wrapped default exposes `WrappedComponent`, prefer it, else assume exported class name
+const Unwrapped =
+  AuthModule.default && AuthModule.default.WrappedComponent
+    ? AuthModule.default.WrappedComponent
+    : AuthViewHandler;
+
+// Helper: render with mocked HOCs props injection
+const renderWithProps = ({
+  user = null,
+  loading = false,
+  pathname = '/',
+  editUser = jest.fn(),
+  children = authed => <div>authed:{String(authed)}</div>,
+} = {}) => {
+  const history = { replace: jest.fn() };
+  const location = { pathname };
+
+  const ui = (
+    <MemoryRouter initialEntries={[pathname]}>
+      <Unwrapped
+        history={history}
+        location={location}
+        editUser={editUser}
+        data={{ user, loading }}
+      >
+        {children}
+      </Unwrapped>
+    </MemoryRouter>
+  );
+
+  const utils = render(ui);
+  return { ...utils, history, editUser };
+};
+
+describe('AuthViewHandler regression', () => {
+  it('renders children(false) when no user and not loading', () => {
+    renderWithProps({ user: null, loading: false });
+    expect(screen.getByText('authed:false')).toBeInTheDocument();
+  });
+
+  it('returns null while loading when no user', () => {
+    const { container } = renderWithProps({ user: null, loading: true });
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders NewUserOnboarding when user exists without username', () => {
+    // Mock NewUserOnboarding to avoid HOCs (Apollo/Redux) requirements
+    jest.doMock('../src/views/newUserOnboarding', () => () => (
+      <div data-testid="new-user-onboarding">onboarding</div>
+    ));
+    const Module = require('../src/views/authViewHandler/index.js');
+    const Raw =
+      Module.default && Module.default.WrappedComponent
+        ? Module.default.WrappedComponent
+        : Module.AuthViewHandler || Module.default;
+
+    const history = { replace: jest.fn() };
+    const location = { pathname: '/' };
+    render(
+      <MemoryRouter>
+        <Raw
+          history={history}
+          location={location}
+          editUser={jest.fn()}
+          data={{ user: { id: 'u1', username: null }, loading: false }}
+        >
+          {authed => <div>authed:{String(authed)}</div>}
+        </Raw>
+      </MemoryRouter>
+    );
+    expect(screen.getByTestId('new-user-onboarding')).toBeInTheDocument();
+  });
+
+  it('calls children(true) when user has id and username', () => {
+    renderWithProps({ user: { id: 'u1', username: 'alice' } });
+    expect(screen.getByText('authed:true')).toBeInTheDocument();
+  });
+
+  it('on first user load: sets timezone if missing and redirects from /home', () => {
+    // initial render with no user
+    const { rerender, editUser, history } = renderWithProps({
+      user: null,
+      loading: false,
+      pathname: '/home',
+    });
+
+    // simulate user arriving without timezone
+    const userNoTz = { id: 'u1', username: 'alice', timezone: null };
+    const location = { pathname: '/home' };
+    const next = (
+      <MemoryRouter initialEntries={['/home']}>
+        <Unwrapped
+          history={history}
+          location={location}
+          editUser={editUser}
+          data={{ user: userNoTz, loading: false }}
+        >
+          {authed => <div>authed:{String(authed)}</div>}
+        </Unwrapped>
+      </MemoryRouter>
+    );
+    rerender(next);
+
+    // editUser should be called with a timezone value
+    expect(editUser).toHaveBeenCalled();
+    const arg = editUser.mock.calls[0][0];
+    expect(typeof arg.timezone).toBe('number');
+
+    // history.replace should be called to redirect away from /home
+    expect(history.replace).toHaveBeenCalledWith('/');
+  });
+});

regression-tests/button.test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button } from '../src/components/button';
+
+describe('Button component regression', () => {
+  it('renders children and disables when isLoading', async () => {
+    render(<Button isLoading>Click me</Button>);
+    const btn = screen.getByText('Click me');
+    expect(btn).toBeInTheDocument();
+    // When isLoading, underlying StyledButton receives disabled
+    expect(btn).toHaveAttribute('disabled');
+  });
+
+  it('wraps with anchor when href is provided and sets rel/target', async () => {
+    render(
+      <Button href="https://example.com" target="_blank">
+        External
+      </Button>
+    );
+    const link = screen.getByRole('link', { name: /external/i });
+    expect(link).toHaveAttribute('href', 'https://example.com');
+    expect(link).toHaveAttribute('target', '_blank');
+    // rel should be undefined if target is provided per component logic
+    expect(link).not.toHaveAttribute('rel');
+  });
+});

regression-tests/channelSettings.test.js

@@ -0,0 +1,138 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+import { Provider } from 'react-redux';
+import { ThemeProvider } from 'styled-components';
+import theme from '../shared/theme';
+
+// Mock Head to avoid Helmet runtime requirements in tests
+jest.mock('../src/components/head', () => {
+  const React = require('react');
+  return function MockHead() {
+    return <div data-testid="mock-head" />;
+  };
+});
+// Simple mock store to satisfy Provider without external deps
+const baseStore = () => {
+  const getState = () => ({});
+  const dispatch = () => {};
+  const subscribe = () => () => {};
+  return { getState, dispatch, subscribe };
+};
+// Import the unwrapped component to avoid Apollo HOC requirement
+// Import the raw component class by bypassing the default composed export.
+// We require the file and grab the class before compose(connect, withRouter, getChannelByMatch, viewNetworkHandler).
+// eslint-disable-next-line import/no-commonjs
+const ChannelSettingsModule = require('../src/views/channelSettings/index.js');
+const UnwrappedChannelSettings =
+  ChannelSettingsModule.ChannelSettings || ChannelSettingsModule.default;
+
+// Helper to render the connected + routed component
+const renderWithProviders = (
+  ui,
+  { route = '/community/channel/settings' } = {}
+) => {
+  const store = { ...baseStore(), dispatch: () => {} };
+  return render(
+    <Provider store={store}>
+      <ThemeProvider theme={theme}>
+        <MemoryRouter initialEntries={[route]}>{ui}</MemoryRouter>
+      </ThemeProvider>
+    </Provider>
+  );
+};
+
+// Build a minimal channel shape matching component expectations
+const baseChannel = {
+  id: 'channel-1',
+  name: 'General',
+  isArchived: false,
+  channelPermissions: { isModerator: false, isOwner: false },
+  community: {
+    slug: 'community',
+    name: 'Community',
+    communityPermissions: { isOwner: false, isModerator: false },
+  },
+};
+
+describe('ChannelSettings regression', () => {
+  it('renders LoadingView when isLoading', () => {
+    renderWithProviders(
+      <UnwrappedChannelSettings
+        data={{ channel: null }}
+        match={{ params: { communitySlug: 'community' } }}
+        location={{ pathname: '/community/channel/settings' }}
+        isLoading={true}
+        hasError={false}
+      />
+    );
+
+    expect(screen.getByText(/loading/i)).toBeInTheDocument();
+  });
+
+  it('renders ErrorView when not loading and no channel', () => {
+    renderWithProviders(
+      <UnwrappedChannelSettings
+        data={{ channel: null }}
+        match={{ params: { communitySlug: 'community' } }}
+        location={{ pathname: '/community/channel/settings' }}
+        isLoading={false}
+        hasError={true}
+      />
+    );
+
+    // ErrorView heading text from src/components/viewError
+    expect(screen.getByText(/something went wrong/i)).toBeInTheDocument();
+  });
+
+  it('blocks unauthorized users with permission error and upsell', () => {
+    const channel = {
+      ...baseChannel,
+      channelPermissions: { isModerator: false, isOwner: false },
+      community: {
+        ...baseChannel.community,
+        communityPermissions: { isOwner: false, isModerator: false },
+      },
+    };
+
+    renderWithProviders(
+      <UnwrappedChannelSettings
+        data={{ channel }}
+        match={{ params: { communitySlug: 'community' } }}
+        location={{ pathname: '/community/channel/settings' }}
+        isLoading={false}
+        hasError={false}
+      />
+    );
+
+    expect(
+      screen.getByText(/you don’t have permission to manage this channel\./i)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/return to community settings/i)
+    ).toBeInTheDocument();
+  });
+
+  it('renders Overview when user has permissions', () => {
+    const channel = {
+      ...baseChannel,
+      channelPermissions: { isModerator: true, isOwner: false },
+    };
+
+    renderWithProviders(
+      <UnwrappedChannelSettings
+        data={{ channel }}
+        match={{ params: { communitySlug: 'community' } }}
+        location={{ pathname: '/community/channel/settings' }}
+        isLoading={false}
+        hasError={false}
+      />
+    );
+
+    expect(screen.getByText(/general settings/i)).toBeInTheDocument();
+    // Avoid querying deeper Apollo-connected Overview internals; assert header and subheading presence
+    expect(
+      screen.getByText(/return to community settings/i)
+    ).toBeInTheDocument();
+  });
+});