chore: prepare WIP for React upgrade to 17.0.2

.github/workflows/regression-tests.yml

@@ -0,0 +1,23 @@
+name: Regression Tests
+
+on:
+  push:
+    branches: [ alpha ]
+  pull_request:
+    branches: [ alpha ]
+
+jobs:
+  regression:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 16
+          cache: 'yarn'
+      - name: Install deps
+        run: yarn install --frozen-lockfile || yarn install
+      - name: Run regression tests
+        run: node ./node_modules/jest/bin/jest.js --config regression-tests/jest.config.js --runInBand

package.json

@@ -4,6 +4,8 @@
   "license": "BSD-3-Clause",
   "devDependencies": {
     "@babel/preset-flow": "^7.0.0",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.5.0",
     "babel-cli": "^6.24.1",
     "babel-eslint": "^8.2.6",
     "babel-jest": "^22.4.4",
@@ -38,6 +40,7 @@
     "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",

regression-tests/button.regression.test.js

@@ -0,0 +1,35 @@
+/**
+ * Regression test for Button link wrapping behavior
+ */
+const React = require('react');
+const { render, screen, fireEvent } = require('@testing-library/react');
+const { Button } = require('../src/components/button');
+
+describe('Button regression', () => {
+  it('renders plain button when no href/to provided', () => {
+    render(React.createElement(Button, null, 'Click Me'));
+    const btn = screen.getByText('Click Me');
+    expect(btn).toBeInTheDocument();
+    // No anchor wrapper
+    expect(btn.closest('a')).toBeNull();
+  });
+
+  it('wraps with anchor when href provided and sets rel when target not specified', () => {
+    render(React.createElement(Button, { href: '/docs' }, 'Docs'));
+    const link = screen.getByText('Docs').closest('a');
+    expect(link).not.toBeNull();
+    expect(link.getAttribute('href')).toBe('/docs');
+    expect(link.getAttribute('target')).toBe('_blank');
+    expect(link.getAttribute('rel')).toBe('noopener noreferrer');
+  });
+
+  it('removes rel when target specified', () => {
+    render(
+      React.createElement(Button, { href: '/x', target: '_self' }, 'Self')
+    );
+    const link = screen.getByText('Self').closest('a');
+    expect(link).not.toBeNull();
+    expect(link.getAttribute('target')).toBe('_self');
+    expect(link.getAttribute('rel')).toBe(null);
+  });
+});

regression-tests/jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  roots: ['<rootDir>/regression-tests'],
+  setupTestFrameworkScriptFile: '<rootDir>/regression-tests/setupTests.js',
+  moduleFileExtensions: ['js', 'jsx', 'json'],
+  moduleNameMapper: {
+    '^src/(.*)$': '<rootDir>/src/$1',
+    '^shared/(.*)$': '<rootDir>/shared/$1',
+  },
+};

regression-tests/setupTests.js

@@ -0,0 +1,17 @@
+// Jest + RTL setup for regression tests
+const { server } = require('./testServer');
+require('@testing-library/jest-dom/extend-expect');
+const { configure } = require('@testing-library/react');
+
+// Reduce fake timers and other noise
+configure({ asyncUtilTimeout: 3000 });
+
+// Establish API mocking before all tests.
+beforeAll(() => server.listen());
+
+// Reset any request handlers that are declared as a part of our tests
+// (ie. for testing one-time error scenarios)
+afterEach(() => server.resetHandlers());
+
+// Clean up after the tests are finished.
+afterAll(() => server.close());

regression-tests/testServer.js

@@ -0,0 +1,14 @@
+const { setupServer } = require('msw/node');
+const { rest } = require('msw');
+
+// Define default handlers used across regression tests.
+const handlers = [
+  rest.get('/api/ping', (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json({ ok: true }));
+  }),
+];
+
+// Setup requests interception with the given handlers.
+const server = setupServer(...handlers);
+
+module.exports = { server, rest };