chore: start rtl transition (#4635)

.eslintrc.js

@@ -0,0 +1,83 @@
+const finalRules = {
+  /* airbnb config overrides */
+  'react/jsx-filename-extension': [0],
+  'import/no-extraneous-dependencies': [0],
+  'import/no-named-as-default': [0], // allow component to be the same as the default export
+  'class-methods-use-this': [0],
+  'no-throw-literal': [0],
+  'comma-dangle': [
+    'error',
+    {
+      arrays: 'always-multiline',
+      objects: 'always-multiline',
+      imports: 'always-multiline',
+      exports: 'always-multiline',
+      functions: 'never',
+    },
+  ],
+  'arrow-parens': [2, 'as-needed', { requireForBlockBody: true }],
+
+  // Allow prop spreading for React components, but not for html elements
+  'react/jsx-props-no-spreading': [
+    2,
+    {
+      custom: 'ignore',
+      explicitSpread: 'ignore',
+    },
+  ],
+  'react/jsx-no-bind': [
+    2,
+    {
+      allowArrowFunctions: true,
+      allowFunctions: true,
+    },
+  ],
+  'react/no-unstable-nested-components': [
+    2,
+    {
+      allowAsProps: true,
+    },
+  ],
+  'react/require-default-props': [0],
+  'default-param-last': [0],
+  'function-call-argument-newline': [0],
+  'function-paren-newline': [0],
+  'no-promise-executor-return': [0],
+  'react/function-component-definition': [0],
+  'sonarjs/no-duplicate-string': [0],
+  'sonarjs/no-identical-functions': [0],
+};
+
+const overrides = [
+  {
+    files: ['frontend/**/*'],
+    env: {
+      browser: true,
+      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 = {
+  overrides,
+  plugins: ['import'],
+  extends: ['airbnb', 'plugin:sonarjs/recommended', 'plugin:no-unsanitized/DOM'],
+  rules: finalRules,
+  parserOptions: {
+    ecmaVersion: 2021,
+  },
+  settings: {
+    'import/resolver': {
+      webpack: {},
+    },
+  },
+};

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,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;