chore: start rtl transition (#4635)

.eslintrc.js

@@ -56,6 +56,17 @@ const overrides = [
       node: true,
     },
   },
+  {
+    files: [
+      '**/*.test.js', '**/*.test.jsx',
+    ],
+    env: {
+      'jest/globals': true,
+    },
+    plugins: ['jest'],
+    extends: ['airbnb', 'plugin:sonarjs/recommended'],
+    rules: { ...finalRules, 'react/jsx-props-no-spreading': 0 },
+  },
 ];
 
 module.exports = {

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

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

@@ -2,10 +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]);
@@ -33,9 +35,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,28 @@
+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/shared/BranchViewLink.jsx

@@ -34,7 +34,7 @@ const getViewLink = (branch, site) => {
   return `https://${domain.names.split(',')[0]}`;
 };
 
-export const BranchViewLink = ({ branchName, site, showIcon }) => {
+export const BranchViewLink = ({ branchName, site, showIcon = false }) => {
   const domain = getViewLink(branchName, site);
 
   return (
@@ -56,8 +56,4 @@ BranchViewLink.propTypes = {
   showIcon: PropTypes.bool,
 };
 
-BranchViewLink.defaultProps = {
-  showIcon: false,
-};
-
 export default connect()(BranchViewLink);

frontend/shared/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,11 +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`}>
       <div className="usa-accordion__heading">
@@ -40,10 +42,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

@@ -6,12 +6,12 @@ import { IconGitHub, IconBranch } from './icons';
 const BASE = 'https://github.com';
 
 const GitHubLink = ({
-  owner, repository, text, branch, sha, icon, isButton = false, ...props
+  owner, repository, text, branch = null, sha = null, icon = 'repo', isButton = false,
 }) => {
   const baseHref = `${BASE}/${owner}/${repository}`;
 
-  let { title } = props;
   let href = baseHref;
+  let title = 'View repository on GitHub';
 
   if (branch) {
     href = `${baseHref}/tree/${encodeURIComponent(branch)}`;
@@ -60,16 +60,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,62 @@
+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

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