chore: start rtl transition (#4635)

ci/tasks/test-api.sh

@@ -4,5 +4,5 @@ set -euo pipefail
 cd app
 
 echo "we're rewriting our frontend tests!"
-./scripts/wait-for-it.sh db:5432 -- yarn test:prepare && yarn test:server:cover ; status=$?
+./scripts/wait-for-it.sh db:5432 -- yarn test; status=$?
 exit $status

eslint.config.mjs

@@ -65,6 +65,7 @@ export default [
       globals: {
         ...globals.browser,
         ...globals.mocha,
+        ...globals.jest,
         global: false,
         process: false,
       },

frontend/pages/sites/$siteId/builds/CreateBuildLink.jsx

@@ -2,8 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { IconRebuild } from '@shared/icons';
 
-function CreateBuildLink(props) {
-  const { children, className, handleClick, handlerParams } = props;
+function CreateBuildLink({
+  children,
+  handleClick,
+  className = 'usa-button',
+  handlerParams = {},
+}) {
   function localHandleClick(event) {
     event.preventDefault();
     const args = Object.keys(handlerParams).map((key) => handlerParams[key]);
@@ -26,9 +30,4 @@ CreateBuildLink.propTypes = {
   className: PropTypes.string,
 };
 
-CreateBuildLink.defaultProps = {
-  handlerParams: {},
-  className: 'usa-button',
-};
-
 export default CreateBuildLink;

frontend/pages/sites/$siteId/builds/CreateBuildLink.test.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { spy } from 'sinon';
+import CreateBuildLink from './CreateBuildLink';
+
+describe('<CreateBuildLink />', () => {
+  const props = {
+    handlerParams: { dish: 'tacos', cuisine: 'mexican' },
+    handleClick: spy(),
+    children: 'hey there',
+  };
+
+  test('it renders', () => {
+    render(<CreateBuildLink {...props} />);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  test('it calls the .handleClick function, passing handler params', () => {
+    render(<CreateBuildLink {...props} />);
+    const handler = props.handleClick;
+    const params = props.handlerParams;
+
+    fireEvent.click(screen.getByRole('button'));
+    expect(handler.calledOnce).toBeTruthy();
+    expect(
+      handler.calledWith(...Object.keys(params).map((key) => params[key])),
+    ).toBeTruthy();
+  });
+});

frontend/pages/sites/$siteId/published/BranchViewLink.jsx

@@ -44,4 +44,5 @@ BranchViewLink.propTypes = {
   branchName: PropTypes.string.isRequired,
   site: SITE.isRequired,
 };
+
 export default BranchViewLink;

frontend/pages/sites/$siteId/published/BranchViewLink.test.jsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { BranchViewLink } from './BranchViewLink';
+
+const proxyDomain = process.env.PROXY_DOMAIN;
+
+describe('<BranchViewLink/>', () => {
+  const awsBucketName = 'test-bucket';
+  const siteDomain = 'prod-url.com';
+  const demoDomain = 'demo-url.com';
+  const proxyOrigin = `https://${awsBucketName}.${proxyDomain}`;
+  const unprovisionedS3Key = '/this/is/unprovisoned/branch';
+
+  const defaultBranch = 'default-branch';
+  const demoBranch = 'demo-branch';
+  const VIEW_BUILD = 'View site preview';
+
+  const testSite = {
+    defaultBranch,
+    demoBranch,
+    domain: `https://${siteDomain}`,
+    demoDomain: `https://${demoDomain}`,
+    owner: 'test-owner',
+    repository: 'test-repo',
+    awsBucketName,
+    s3ServiceName: 'federalist-production-s3',
+    domains: [
+      {
+        names: siteDomain,
+        siteBranchConfigId: 123,
+        state: 'provisioned',
+      },
+      {
+        names: demoDomain,
+        siteBranchConfigId: 256,
+        state: 'provisioned',
+      },
+      {
+        names: 'unprovisioned.gov',
+        siteBranchConfigId: 411,
+        state: 'pending',
+      },
+    ],
+    siteBranchConfigs: [
+      {
+        branch: defaultBranch,
+        id: 123,
+      },
+      {
+        branch: demoBranch,
+        id: 256,
+      },
+      {
+        s3Key: unprovisionedS3Key,
+        branch: 'unprovisioned-branch',
+        id: 411,
+      },
+    ],
+  };
+
+  let props;
+
+  beforeEach(() => {
+    props = {
+      branchName: 'branch-name',
+      site: testSite,
+    };
+  });
+
+  it("renders a link to the default branch's site", () => {
+    props.branchName = 'default-branch';
+    render(<BranchViewLink {...props} />);
+    const anchor = screen.getByRole('link');
+    expect(anchor).toHaveAttribute('href', `https://${siteDomain}`);
+    expect(anchor).toHaveTextContent(VIEW_BUILD);
+  });
+
+  it("renders a link to the demo branch's site", () => {
+    props.branchName = 'demo-branch';
+    render(<BranchViewLink {...props} />);
+    const anchor = screen.getByRole('link');
+    expect(anchor).toHaveAttribute('href', `https://${demoDomain}`);
+    expect(anchor).toHaveTextContent(VIEW_BUILD);
+  });
+
+  it('renders the preview link to site branch when the domain is not provisioned', () => {
+    props.branchName = 'unprovisioned-branch';
+    render(<BranchViewLink {...props} />);
+    const anchor = screen.getByRole('link');
+    expect(anchor).toHaveAttribute('href', `${proxyOrigin}${unprovisionedS3Key}`);
+    expect(anchor).toHaveTextContent(VIEW_BUILD);
+  });
+
+  it('renders a preview link to the other branches', () => {
+    const branchName = 'some-other-branch';
+    const updatedProps = { ...props, branchName };
+    render(<BranchViewLink {...updatedProps} />);
+    const anchor = screen.getByRole('link');
+    expect(anchor).toHaveAttribute(
+      'href',
+      `${proxyOrigin}/preview/${testSite.owner}/${testSite.repository}/${branchName}`,
+    );
+    expect(anchor).toHaveTextContent(VIEW_BUILD);
+  });
+});

frontend/shared/ExpandableArea.jsx

@@ -5,9 +5,13 @@ import shortid from 'shortid';
 // Based on the USWDS Accordion, but only ever has a single
 // item that can be expanded or collapsed
 
-function ExpandableArea(props) {
+function ExpandableArea({
+  title,
+  bordered = false,
+  children = null,
+  isExpanded = false,
+}) {
   const id = `expandable-area-${shortid.generate()}`;
-  const { bordered, children, isExpanded, title } = props;
   return (
     <div
       className={`usa-accordion ${bordered ? 'usa-accordion--bordered' : ''} width-full`}
@@ -36,10 +40,4 @@ ExpandableArea.propTypes = {
   isExpanded: PropTypes.bool,
 };
 
-ExpandableArea.defaultProps = {
-  bordered: false,
-  children: null,
-  isExpanded: false,
-};
-
 export default ExpandableArea;

frontend/shared/ExpandableArea.test.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import ExpandableArea from './ExpandableArea';
+
+describe('<ExpandableArea/>', () => {
+  it('renders', () => {
+    const title = 'Test Title';
+    render(
+      <ExpandableArea title={title}>
+        <p>hello</p>
+      </ExpandableArea>,
+    );
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveTextContent(title);
+  });
+});

frontend/shared/GitHubLink.jsx

@@ -9,16 +9,15 @@ const GitHubLink = ({
   owner,
   repository,
   text,
-  branch,
-  sha,
-  icon,
+  branch = null,
+  sha = null,
+  icon = 'repo',
   isButton = false,
-  ...props
 }) => {
   const baseHref = `${BASE}/${owner}/${repository}`;
 
-  let { title } = props;
   let href = baseHref;
+  let title = 'View repository on GitHub';
 
   if (branch) {
     href = `${baseHref}/tree/${encodeURIComponent(branch)}`;
@@ -64,16 +63,7 @@ GitHubLink.propTypes = {
   branch: PropTypes.string,
   isButton: PropTypes.bool,
   sha: PropTypes.string,
-  title: PropTypes.string,
   icon: PropTypes.string,
 };
 
-GitHubLink.defaultProps = {
-  branch: null,
-  isButton: false,
-  sha: null,
-  icon: 'repo',
-  title: 'View repository on GitHub',
-};
-
 export default GitHubLink;

frontend/shared/GitHubLink.test.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import GitHubLink from './GitHubLink';
+
+describe('<GitHubLink/>', () => {
+  it('renders', () => {
+    const props = { owner: 'owner', repository: 'a-repo', text: 'link text' };
+    render(<GitHubLink {...props} />);
+
+    const anchor = screen.getByRole('link');
+    expect(anchor).toHaveClass('repo-link');
+
+    expect(anchor).toHaveAttribute('href', 'https://github.com/owner/a-repo');
+    expect(anchor).toHaveAttribute('title', 'View repository on GitHub');
+    expect(anchor).toHaveTextContent('link text');
+
+    // TODO: actually render svg with https://react-svgr.com/docs/node-api/ in tests
+    // const icon = screen.getByTitle('icon-github');
+    // expect(icon).toBeInTheDocument();
+  });
+
+  it('can link to a branch', () => {
+    const props = {
+      text: 'link text',
+      owner: 'pumpkin-pie',
+      repository: 'candle',
+      branch: 'the-branch',
+    };
+
+    render(<GitHubLink {...props} />);
+
+    const anchor = screen.getByRole('link');
+    expect(anchor).toHaveClass('repo-link');
+    expect(anchor).toHaveAttribute(
+      'href',
+      'https://github.com/pumpkin-pie/candle/tree/the-branch',
+    );
+    expect(anchor).toHaveAttribute('title', 'View branch on GitHub');
+  });
+
+  it('encodes the branch name', () => {
+    const props = {
+      text: 'boop',
+      owner: 'spam',
+      repository: 'potato',
+      branch: '#-hash-#',
+    };
+    render(<GitHubLink {...props} />);
+
+    const anchor = screen.getByRole('link');
+    expect(anchor).toHaveClass('repo-link');
+    expect(anchor).toHaveAttribute(
+      'href',
+      'https://github.com/spam/potato/tree/%23-hash-%23',
+    );
+  });
+
+  it('links to a specific commit', () => {
+    const props = {
+      text: 'boop',
+      owner: 'zookeeni',
+      repository: 'veggies',
+      sha: '123A',
+    };
+
+    render(<GitHubLink {...props} />);
+
+    const anchor = screen.getByRole('link');
+    expect(anchor).toHaveClass('repo-link');
+
+    const commitUrl = `https://github.com/${props.owner}/${props.repository}/commit/${props.sha}`;
+
+    expect(anchor).toHaveAttribute('href', commitUrl);
+  });
+});

frontend/shared/LoadingIndicator.test.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import LoadingIndicator from './LoadingIndicator';
+
+describe('<LoadingIndicator/>', () => {
+  it('renders', () => {
+    render(<LoadingIndicator />);
+    screen.getByText('Loading...');
+  });
+});

frontend/shared/SelectSiteEngine.jsx

@@ -28,7 +28,7 @@ function makeOptions(opts) {
   ));
 }
 
-const SelectSiteEngine = ({ value, onChange, name, id, className }) => (
+const SelectSiteEngine = ({ value, onChange, name, id, className = '' }) => (
   <select
     className={`usa-select ${className}`}
     {...{ name, id }}
@@ -47,9 +47,4 @@ SelectSiteEngine.propTypes = {
   className: PropTypes.string,
 };
 
-SelectSiteEngine.defaultProps = {
-  className: '',
-  onChange: () => {},
-};
-
 export default SelectSiteEngine;