Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Introduction/components/block.test.tsx (TypeScript)

Code before:
  curriculumLocale: 'english',
  showUpcomingChanges: false,
  showNewCurriculum: false,
  homeLocation: '',
  apiLocation: '',
  forumLocation: '',
  newsLocation: '',
  radioLocation: '',
  clientLocale: 'english',
  showLocaleDropdownMenu: false,
  deploymentEnv: '',
  environment: '',
  algoliaAppId: '',
  algoliaAPIKey: '',
  stripePublicKey: null,
  paypalClientId: null,
  patreonClientId: null,
  sentryClientDSN: null,
  growthbookUri: null
};

describe('<Block />', () => {
  afterEach(() => {
    jest.clearAllMocks();
  });
  const langaugesArr = Object.values(Languages);
  const superBlocksArr = Object.values(SuperBlocks);
  it('The "Help us translate" badge does not appear on any English blocks', () => {
    jest.spyOn(getEnvData, 'getEnvData').mockReturnValue({ ...mockedEnvData });
    render(
      <Provider store={createStore()}>
        <Block {...defaultProps} superBlock={SuperBlocks.RespWebDesign} />
      </Provider>
    );
    expect(
      screen.queryByText(/misc.translation-pending/)
    ).not.toBeInTheDocument();
  });

  langaugesArr.forEach(language => {
    superBlocksArr.forEach(superBlock => {
      if (
        getAuditedSuperBlocks({
          language,
          showNewCurriculum: mockedEnvData.showNewCurriculum.toString(),
          showUpcomingChanges: mockedEnvData.showUpcomingChanges.toString()
        }).includes(superBlock)
      ) {
        it(`Help us translate badge does not appear on i18n blocks for language: ${language} and superBlock: ${superBlock} when the superblock is audited`, () => {
          jest
            .spyOn(getEnvData, 'getEnvData')

Review comment (suggestion):
All languages are more or less equivalent, except that they differ in the value of `isAudited`. Rather than testing every single superblock of every language, it's sufficient to test a single language, superblock pair.

Then you can mock isAudited and test what happens when it returns true and when it returns false.

Code after:

describe('<Block />', () => {
  afterEach(() => {
    jest.clearAllMocks();
  });

  it('The "Help us translate" badge does not appear on any English blocks', () => {
    render(
      <Provider store={createStore()}>
        <Block {...defaultProps} />
      </Provider>
    );
    expect(
      screen.queryByText(/misc.translation-pending/)
    ).not.toBeInTheDocument();
  });

  it(`The "Help us translate" badge does not appear on any i18n blocks when the superblock is audited`, () => {
    (isAuditedSuperBlock as jest.Mock).mockReturnValue(true);
    render(
      <Provider store={createStore()}>
        <Block {...defaultProps} />
      </Provider>
    );
    expect(
      screen.queryByText(/misc.translation-pending/)
    ).not.toBeInTheDocument();
  });

  it(`The "Help us translate" badge does appear on i18n blocks when the superblock is not audited`, () => {
    (isAuditedSuperBlock as jest.Mock).mockReturnValue(false);
    render(
      <Provider store={createStore()}>
        <Block {...defaultProps} />
      </Provider>
    );
    expect(screen.getByText(/misc.translation-pending/)).toBeInTheDocument();
  });
});