ronantakizawa/codereview-bench huggingface dataset:
Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/Donation/donation-text-components.tsx (TypeScript)

Code before:
      A: (
        <>
          <p>{t('donate.we-honored')}</p>
          <blockquote>
            <p>{t('donate.legacy-gift-message')}</p>
          </blockquote>
          <p>{t('donate.thank-wikimedia')}</p>
          <p>{t('donate.legacy-gift-questions')}</p>
        </>
      )
    },
    { Q: t('donate.how-stock'), A: <p>{t('donate.welcome-stock')}</p> },
    { Q: t('donate.how-update'), A: <p>{t('donate.forward-receipt')}</p> },
    {
      Q: t('donate.anything-else'),
      A: (
        <>
          <p>{t('donate.other-support')}</p>
        </>
      )
    }
  ];

  return (
    <>
      <h2 data-playwright-test-label='faq-head'>{t('donate.faq')}:</h2>
      <Spacer size='small' />
      {faqItems.map((item, iterator) => FaqItem(item.Q, item.A, iterator))}
    </>
  );
};

export const SupportBenefitsText = (): JSX.Element => {
  const { t } = useTranslation();
  return (
    <>
      <h2>{t('donate.support-benefits-title')}</h2>
      <ul>
        <li>{t('donate.support-benefits-1')}</li>
        <li>{t('donate.support-benefits-2')}</li>
        <li>{t('donate.support-benefits-3')}</li>
        <li>{t('donate.support-benefits-4')}</li>
        <li>{t('donate.support-benefits-5')}</li>
      </ul>
    </>
  );
};

export const CurrentInitiativesText = (): JSX.Element => {
  const { t } = useTranslation();
  return (

Review comment (suggestion):
```suggestion
      <h2 data-playwright-test-label='faq-head'>{t('donate.faq')}</h2>
```

Code after:
      A: (
        <>
          <p>{t('donate.we-honored')}</p>
          <blockquote>
            <p>{t('donate.legacy-gift-message')}</p>
          </blockquote>
          <p>{t('donate.thank-wikimedia')}</p>
          <p>{t('donate.legacy-gift-questions')}</p>
        </>
      )
    },
    { Q: t('donate.how-stock'), A: <p>{t('donate.welcome-stock')}</p> },
    { Q: t('donate.how-update'), A: <p>{t('donate.forward-receipt')}</p> },
    {
      Q: t('donate.anything-else'),
      A: (
        <>
          <p>{t('donate.other-support')}</p>
        </>
      )
    }
  ];

  return (
    <>
      <h2 data-playwright-test-label='faq-head'>{t('donate.faq')}</h2>
      <Spacer size='small' />
      {faqItems.map((item, iterator) => FaqItem(item.Q, item.A, iterator))}
    </>
  );
};

export const SupportBenefitsText = (): JSX.Element => {
  const { t } = useTranslation();
  return (
    <>
      <h2>{t('donate.support-benefits-title')}</h2>
      <ul>
        <li>{t('donate.support-benefits-1')}</li>
        <li>{t('donate.support-benefits-2')}</li>
        <li>{t('donate.support-benefits-3')}</li>
        <li>{t('donate.support-benefits-4')}</li>
        <li>{t('donate.support-benefits-5')}</li>
      </ul>
    </>
  );
};

export const CurrentInitiativesText = (): JSX.Element => {
  const { t } = useTranslation();
  return (
Repository: freeCodeCamp/freeCodeCamp
File: client/src/utils/is-a-cert.ts (TypeScript)

Code before:
import { SuperBlocks } from '../../../shared/config/superblocks';

export function isNewRespCert(superBlock: string): boolean {
  return superBlock === String(SuperBlocks.RespWebDesignNew);
}

export function isOldRespCert(superBlock: string): boolean {
  return superBlock === String(SuperBlocks.RespWebDesign);
}

export function isNewJsCert(superBlock: string): boolean {
  return superBlock === String(SuperBlocks.JsAlgoDataStructNew);
}

export function isRelationalDbCert(superBlock: string): boolean {
  return superBlock === String(SuperBlocks.RelationalDb);
}

export function isCollegeAlgebraPyCert(superBlock: string): boolean {
  return superBlock === String(SuperBlocks.CollegeAlgebraPy);
}

export function isNewPythonCert(superBlock: string): boolean {
  return superBlock === String(SuperBlocks.SciCompPy);
}


Review comment (suggestion):
```suggestion
export function isSciCompPyCert(superBlock: string): boolean {
  return superBlock === String(SuperBlocks.SciCompPy);
}
```

Code after:
import { SuperBlocks } from '../../../shared/config/superblocks';

export function isNewRespCert(superBlock: string): boolean {
  return superBlock === String(SuperBlocks.RespWebDesignNew);
}

export function isOldRespCert(superBlock: string): boolean {
  return superBlock === String(SuperBlocks.RespWebDesign);
}

export function isNewJsCert(superBlock: string): boolean {
  return superBlock === String(SuperBlocks.JsAlgoDataStructNew);
}

export function isRelationalDbCert(superBlock: string): boolean {
  return superBlock === String(SuperBlocks.RelationalDb);
}

export function isCollegeAlgebraPyCert(superBlock: string): boolean {
  return superBlock === String(SuperBlocks.CollegeAlgebraPy);
}

export function isSciCompPyCert(superBlock: string): boolean {
  return superBlock === String(SuperBlocks.SciCompPy);
}
Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Introduction/components/challenges.tsx (TypeScript)

Code before:
const mapDispatchToProps = (dispatch: Dispatch) =>
  bindActionCreators({ executeGA }, dispatch);

interface Challenges {
  challengesWithCompleted: ChallengeWithCompletedNode[];
  isProjectBlock: boolean;
  superBlock: SuperBlocks;
  blockTitle?: string | null;
}

const CheckMark = ({ isCompleted }: { isCompleted: boolean }) =>
  isCompleted ? <GreenPass /> : <GreenNotCompleted />;

function Challenges({
  challengesWithCompleted,
  isProjectBlock,
  superBlock,
  blockTitle
}: Challenges): JSX.Element {
  const { t } = useTranslation();

  const isGridMap = [
    isNewRespCert(superBlock),
    isNewJsCert(superBlock),
    isNewPythonCert(superBlock)
  ].some(truthy => truthy);

  const firstIncompleteChallenge = challengesWithCompleted.find(
    challenge => !challenge.isCompleted
  );

  const isChallengeStarted = !!challengesWithCompleted.find(
    challenge => challenge.isCompleted
  );

  return isGridMap ? (
    <>
      {firstIncompleteChallenge && (
        <div className='challenge-jump-link'>
          <Link
            className='btn btn-primary'
            to={firstIncompleteChallenge.fields.slug}
          >
            {!isChallengeStarted
              ? t('buttons.start-project')
              : t('buttons.resume-project')}{' '}
            {blockTitle && <span className='sr-only'>{blockTitle}</span>}
          </Link>
        </div>
      )}
      <nav

Review comment (suggestion):
```suggestion
    isSciCompPyCert(superBlock) && !isProjectBlock
  ].some(Boolean);
```

Code after:
const mapDispatchToProps = (dispatch: Dispatch) =>
  bindActionCreators({ executeGA }, dispatch);

interface Challenges {
  challengesWithCompleted: ChallengeWithCompletedNode[];
  isProjectBlock: boolean;
  superBlock: SuperBlocks;
  blockTitle?: string | null;
}

const CheckMark = ({ isCompleted }: { isCompleted: boolean }) =>
  isCompleted ? <GreenPass /> : <GreenNotCompleted />;

function Challenges({
  challengesWithCompleted,
  isProjectBlock,
  superBlock,
  blockTitle
}: Challenges): JSX.Element {
  const { t } = useTranslation();

  const isGridMap = [
    isNewRespCert(superBlock),
    isNewJsCert(superBlock),
    isSciCompPyCert(superBlock) && !isProjectBlock
  ].some(Boolean);

  const firstIncompleteChallenge = challengesWithCompleted.find(
    challenge => !challenge.isCompleted
  );

  const isChallengeStarted = !!challengesWithCompleted.find(
    challenge => challenge.isCompleted
  );

  return isGridMap ? (
    <>
      {firstIncompleteChallenge && (
        <div className='challenge-jump-link'>
          <Link
            className='btn btn-primary'
            to={firstIncompleteChallenge.fields.slug}
          >
            {!isChallengeStarted
              ? t('buttons.start-project')
              : t('buttons.resume-project')}{' '}
            {blockTitle && <span className='sr-only'>{blockTitle}</span>}
          </Link>
        </div>
      )}
      <nav
Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Introduction/components/block.tsx (TypeScript)

Code before:
  constructor(props: BlockProps) {
    super(props);

    this.handleBlockClick = this.handleBlockClick.bind(this);
  }

  handleBlockClick(): void {
    const { blockDashedName, toggleBlock } = this.props;
    void playTone('block-toggle');
    toggleBlock(blockDashedName);
  }

  render(): JSX.Element {
    const {
      blockDashedName,
      completedChallengeIds,
      challenges,
      isExpanded,
      superBlock,
      t
    } = this.props;

    const isNewResponsiveWebDesign = isNewRespCert(superBlock);
    const isNewJsAlgos = isNewJsCert(superBlock);
    const isOdinProject = blockDashedName == 'the-odin-project';
    const isNewPython = isNewPythonCert(superBlock);
    const isCollegeAlgebraPy = isCollegeAlgebraPyCert(superBlock);

    let completedCount = 0;
    const challengesWithCompleted = challenges.map(({ challenge }) => {
      const { id } = challenge;
      const isCompleted = completedChallengeIds.some(
        (completedChallengeId: string) => completedChallengeId === id
      );
      if (isCompleted) {
        completedCount++;
      }
      return { ...challenge, isCompleted };
    });

    const isProjectBlock = challenges.some(({ challenge }) => {
      const isTakeHomeProject = blockDashedName === 'take-home-projects';

      return (
        (isFinalProject(challenge.challengeType) ||
          isCodeAllyPractice(challenge.challengeType)) &&
        !isTakeHomeProject
      );
    });

    const isAudited = isAuditedSuperBlock(curriculumLocale, superBlock, {

Review comment (suggestion):
```suggestion
    const isSciCompPy = isSciCompPyCert(superBlock);
```

Code after:
  constructor(props: BlockProps) {
    super(props);

    this.handleBlockClick = this.handleBlockClick.bind(this);
  }

  handleBlockClick(): void {
    const { blockDashedName, toggleBlock } = this.props;
    void playTone('block-toggle');
    toggleBlock(blockDashedName);
  }

  render(): JSX.Element {
    const {
      blockDashedName,
      completedChallengeIds,
      challenges,
      isExpanded,
      superBlock,
      t
    } = this.props;

    const isOdinProject = blockDashedName == 'the-odin-project';
    let completedCount = 0;

    const challengesWithCompleted = challenges.map(({ challenge }) => {
      const { id } = challenge;
      const isCompleted = completedChallengeIds.some(
        (completedChallengeId: string) => completedChallengeId === id
      );
      if (isCompleted) {
        completedCount++;
      }
      return { ...challenge, isCompleted };
    });

    const isProjectBlock = challenges.some(({ challenge }) => {
      const isTakeHomeProject = blockDashedName === 'take-home-projects';

      return (
        (isFinalProject(challenge.challengeType) ||
          isCodeAllyPractice(challenge.challengeType)) &&
        !isTakeHomeProject
      );
    });

    const isAudited = isAuditedSuperBlock(curriculumLocale, superBlock, {
      showNewCurriculum,
      showUpcomingChanges
    });
Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Introduction/components/block.tsx (TypeScript)

Code before:
              <Link
                className='block-header'
                onClick={() => {
                  this.handleBlockClick();
                }}
                to={challengesWithCompleted[0].fields.slug}
              >
                <CheckMark isCompleted={isBlockCompleted} />
                {blockTitle}{' '}
                <span className='sr-only'>
                  {t('misc.certification-project')}
                </span>
              </Link>
            </h3>
          </div>
          <BlockIntros intros={blockIntroArr} />
        </div>
      </ScrollableAnchor>
    );

    const shouldBeGrid = [
      isNewResponsiveWebDesign,
      isNewJsAlgos,
      isCollegeAlgebraPy,
      isNewPython
    ].some(truthy => truthy);

    const blockrenderer = () => {
      if (isProjectBlock && !isOdinProject)
        return shouldBeGrid ? GridProjectBlock : ProjectBlock;
      return shouldBeGrid ? GridBlock : Block;
    };

    return (
      <>
        {blockrenderer()}
        {shouldBeGrid && !isProjectBlock ? null : <Spacer size='medium' />}
      </>
    );
  }
}

Block.displayName = 'Block';

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withTranslation()(Block));


Review comment (suggestion):
```suggestion
  const shouldBeGrid = [
    isNewRespCert(superBlock),
    isNewJsCert(superBlock),
    isCollegeAlgebraPy,
    isSciCompPyCert(superBlock) && !isProjectBlock
  ].some(Boolean);
```

Code after:
                }}
                to={challengesWithCompleted[0].fields.slug}
              >
                <CheckMark isCompleted={isBlockCompleted} />
                {blockTitle}{' '}
                <span className='sr-only'>
                  {t('misc.certification-project')}
                </span>
              </Link>
            </h3>
          </div>
          <BlockIntros intros={blockIntroArr} />
        </div>
      </ScrollableAnchor>
    );

    const shouldBeGrid = [
      isNewRespCert(superBlock),
      isNewJsCert(superBlock),
      isCollegeAlgebraPyCert(superBlock),
      isSciCompPyCert(superBlock) && !isProjectBlock
    ].some(Boolean);

    const blockrenderer = () => {
      if (isProjectBlock && !isOdinProject)
        return shouldBeGrid ? GridProjectBlock : ProjectBlock;
      return shouldBeGrid ? GridBlock : Block;
    };

    return (
      <>
        {blockrenderer()}
        {shouldBeGrid && !isProjectBlock ? null : <Spacer size='medium' />}
      </>
    );
  }
}

Block.displayName = 'Block';

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withTranslation()(Block));
Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/Donation/card-update-alert-handler.tsx (TypeScript)

Code before:
  const style = redirecting ? 'info' : success ? 'success' : 'danger';

  const heading = redirecting
    ? `${t('donate.redirecting')}`
    : success
      ? `${t('donate.success-card-update')}`
      : `${t('donate.error-card-update')}`;

  return (
    <Alert
      bsStyle={style}
      className='donation-completion'
      closeLabel={t('buttons.close')}
    >
      <h4>
        <b>{heading}</b>
      </h4>
      <div className='donation-completion-body'>
        {redirecting && (
          <Spinner
            className='user-state-spinner'
            color='#0a0a23'
            fadeIn='none'
            name='line-scale'
          />
        )}
        {error && <p>{error}</p>}
      </div>
      <div className='donation-completion-buttons'>
        {error && (
          <div>
            <Button bsStyle='primary' onClick={reset}>
              {t('buttons.try-again')}
            </Button>
          </div>
        )}
      </div>
    </Alert>
  );
}

CardUpdateAlertHandler.displayName = 'CardUpdateAlertHandler';

export default CardUpdateAlertHandler;


Review comment (suggestion):
As discussed in #52349, this should be a native button instead of `ui-components` Button.

The `try-again-button` class was added via https://github.com/freeCodeCamp/freeCodeCamp/pull/52355/files#diff-d888884daba375d618b1358bc27283b5e4a12600a590747d2fbfdcfd7a3d8139R655 for a similar button in the donate flow, so we can reuse it here.

Code after:
  const style = redirecting ? 'info' : success ? 'success' : 'danger';

  const message = redirecting
    ? `${t('donate.redirecting')}`
    : success
      ? `${t('donate.success-card-update')}`
      : `${t('donate.error-card-update')}`;

  return (
    <Alert variant={style} className='donation-completion'>
      <p>{message}</p>
      <div className='donation-completion-body'>
        {redirecting && (
          <Spinner
            className='user-state-spinner'
            color='#0a0a23'
            fadeIn='none'
            name='line-scale'
          />
        )}
        {error && <p>{error}</p>}
      </div>
      <div className='donation-completion-buttons'>
        {error && (
          <div>
            <button type='button' className='try-again-button' onClick={reset}>
              {t('buttons.try-again')}
            </button>
          </div>
        )}
      </div>
    </Alert>
  );
}

CardUpdateAlertHandler.displayName = 'CardUpdateAlertHandler';

export default CardUpdateAlertHandler;
Repository: freeCodeCamp/freeCodeCamp
File: tools/ui-components/src/form-group/form-group.test.tsx (TypeScript)

Code before:
import React from 'react';
import { render, screen } from '@testing-library/react';

import { FormControl } from '../form-control/.';
import { FormGroup } from '.';
const sameNumberOfChildren = 2;
describe('<FormGroup>', () => {
  it('renders children', () => {
    render(
      <FormGroup data-testid='test-id'>
        <span title='Child' />
        <span title='Child' />
      </FormGroup>
    );

    const element = screen.getByTestId('test-id');
    expect(element.childNodes.length).toBe(sameNumberOfChildren);

    const formGroupChildren = screen.getAllByTitle('Child');
    expect(formGroupChildren.length).toBe(sameNumberOfChildren);
    element.childNodes.forEach((child, index) => {
      expect(child).toBe(formGroupChildren[index]);
    });
  });

  it('provided controlId to label and control', () => {
    render(
      <FormGroup controlId='my-control' data-testid='test-id'>
        <FormControl aria-label='test' />
      </FormGroup>
    );
    const input = screen.getByLabelText('test');
    expect(input.id).toBe('my-control');
  });
});


Review comment (suggestion):
Should we add an assertion like: `expect(formGroup).not.toHaveAttribute('id', 'foo')`. It will prevent the same defect in the future

Code after:

    const element = screen.getByTestId('test-id');
    expect(element.childNodes.length).toBe(sameNumberOfChildren);

    const formGroupChildren = screen.getAllByTitle('Child');
    expect(formGroupChildren.length).toBe(sameNumberOfChildren);
    element.childNodes.forEach((child, index) => {
      expect(child).toBe(formGroupChildren[index]);
    });
  });

  it('should pass `controlId` to the label and input elements', () => {
    render(
      <FormGroup controlId='foo'>
        <ControlLabel>Foo</ControlLabel>
        <FormControl />
      </FormGroup>
    );

    const label = screen.getByText('Foo');
    const input = screen.getByLabelText('Foo');

    expect(label).toBeInTheDocument();
    expect(label).toHaveAttribute('for', 'foo');
    expect(input).toBeInTheDocument();
    expect(input).toHaveAttribute('id', 'foo');
  });
});
Repository: freeCodeCamp/freeCodeCamp
File: e2e/multifile-editor.spec.ts (TypeScript)

Code before:
  await page.goto(
    '/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-15'
  );
});

test.describe('MultifileEditor Component', () => {
  test('Multiple editors should be selected and able to insert text into', async ({
    page
  }) => {
    // Spawn second editor to test MultifileEditor component
    const stylesEditor = page.getByRole('button', {
      name: 'styles.css Editor'
    });
    await stylesEditor.click();

    // Ensure two editors exist
    const editors = page.getByLabel('Editor content');
    await expect(editors).toHaveCount(2);

    // Test text insertion works in both editors
    const test_string = 'TestString';
    let index = 0;
    for (const editor of await editors.all()) {
      await editor.click({ force: true });
      await page.keyboard.insertText(test_string + index.toString());
      const text = page.getByText(test_string + index.toString());
      await expect(text).toBeVisible();
      index++;
    }
  });
});


Review comment (suggestion):
@WOLFRIEND Thanks for the PR!

So what I understand is, we are moving the `.all()` call further down to buy some time for the second editor appearance. I'll do some check to see if we could avoid `.all()` instead. 

Similar issues: 
- https://github.com/microsoft/playwright/issues/21628
- https://github.com/microsoft/playwright/issues/22517

Code after:
  await page.goto(
    '/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-15'
  );
});

test.describe('MultifileEditor Component', () => {
  test('Multiple editors should be selected and able to insert text into', async ({
    page,
    isMobile
  }) => {
    // Spawn second editor to test MultifileEditor component
    const stylesEditor = page.getByRole('button', {
      name: 'styles.css Editor'
    });
    await stylesEditor.click();

    // Use the `.toHaveCount()` assertion to ensure that the second editor is on the screen
    // before moving onto other assertions.
    // Note that using the `.all()` locator here would result a flaky test.
    // Ref: https://github.com/freeCodeCamp/freeCodeCamp/pull/53031/files#r1500316812
    const editors = page.getByLabel('Editor content');
    await expect(editors).toHaveCount(2);

    const test_string = 'TestString';
    let index = 0;
    for (const editor of await editors.all()) {
      // For some reason the click event doesn't work on mobile
      if (isMobile) {
        await editor.focus();
      } else {
        await editor.click();
      }

      await page.keyboard.insertText(test_string + index.toString());
      const text = page.getByText(test_string + index.toString());
      await expect(text).toBeVisible();
      index++;
    }
  });
});