Bug 1998364: Use the central i18n mocks for all tests and add support for variables

frontend/__mocks__/i18next.ts

@@ -0,0 +1,27 @@
+/* eslint-env node */
+import { TFunction } from 'i18next';
+
+const i18next = require.requireActual('i18next');
+
+const interpolationPattern = /{{([A-Za-z0-9]+)}}/;
+
+export const t = ((key: string, interpolation: Record<string, string>) => {
+  let result = key.includes('~') ? key.substring(key.indexOf('~') + 1) : key;
+  while (interpolation && result.match(interpolationPattern)) {
+    result = result.replace(interpolationPattern, (_, variable) => interpolation[variable] || '');
+  }
+  return result;
+}) as TFunction;
+
+module.exports = {
+  ...i18next,
+  t,
+  default: {
+    ...i18next.default,
+    use() {
+      return this;
+    },
+    init: () => Promise.resolve(),
+    t,
+  },
+};

frontend/__mocks__/react-i18next.ts

@@ -0,0 +1,11 @@
+/* eslint-env node */
+const i18next = require('i18next');
+const react = require.requireActual('react');
+const reactI18next = require.requireActual('react-i18next');
+
+module.exports = {
+  ...reactI18next,
+  useTranslation: () => ({ t: i18next.t }),
+  withTranslation: () => (component) => (props) =>
+    react.createElement(component, { ...props, t: i18next.t }),
+};

frontend/__tests__/components/cluster-settings.spec.tsx

@@ -33,14 +33,6 @@ import {
 import { GlobalConfigPage } from '../../public/components/cluster-settings/global-config';
 import { Firehose, HorizontalNav, ResourceLink, Timestamp } from '../../public/components/utils';
 
-jest.mock('react-i18next', () => {
-  const reactI18next = require.requireActual('react-i18next');
-  return {
-    ...reactI18next,
-    useTranslation: () => ({ t: (key) => key }),
-  };
-});
-
 jest.mock('@console/internal/components/utils/k8s-watch-hook', () => ({
   useK8sWatchResource: jest.fn(),
 }));
@@ -54,8 +46,6 @@ jest.mock('react-redux', () => {
   };
 });
 
-const i18nNS = 'public';
-
 describe('Cluster Settings page', () => {
   let wrapper: ShallowWrapper<any>;
   const match = { url: '/settings/cluster', params: {}, isExact: true, path: '/settings/cluster' };
@@ -69,7 +59,7 @@ describe('Cluster Settings page', () => {
     expect(wrapper.exists()).toBe(true);
   });
   it('should render correct Cluster Settings page title', () => {
-    expect(wrapper.contains(`${i18nNS}~Cluster Settings`)).toBeTruthy();
+    expect(wrapper.contains('Cluster Settings')).toBeTruthy();
   });
   it('should render the Firehose Component with the props', () => {
     expect(wrapper.find(Firehose).exists()).toBe(true);
@@ -111,19 +101,19 @@ describe('Cluster Settings page', () => {
         .find(HorizontalNav)
         .at(0)
         .props().pages[0].name,
-    ).toBe(`${i18nNS}~Details`);
+    ).toBe('Details');
     expect(
       wrapper
         .find(HorizontalNav)
         .at(0)
         .props().pages[1].name,
-    ).toBe(`${i18nNS}~ClusterOperators`);
+    ).toBe('ClusterOperators');
     expect(
       wrapper
         .find(HorizontalNav)
         .at(0)
         .props().pages[2].name,
-    ).toBe(`${i18nNS}~Configuration`);
+    ).toBe('Configuration');
     expect(
       wrapper
         .find(HorizontalNav)
@@ -239,7 +229,7 @@ describe('Current Version Header', () => {
   });
 
   it('should render the Current Version heading', () => {
-    expect(wrapper.text()).toBe(`${i18nNS}~Current version`);
+    expect(wrapper.text()).toBe('Current version');
   });
 });
 
@@ -267,7 +257,7 @@ describe('Update Status', () => {
   });
 
   it('should render the Update Status value', () => {
-    expect(wrapper.render().text()).toBe(` ${i18nNS}~Available updates`);
+    expect(wrapper.render().text()).toBe(' Available updates');
   });
 });
 
@@ -302,7 +292,7 @@ describe('Update Link', () => {
         .find('[data-test-id="cv-update-button"]')
         .render()
         .text(),
-    ).toBe('public~Update');
+    ).toBe('Update');
   });
 });
 
@@ -324,7 +314,7 @@ describe('Updates Graph', () => {
         .find(ChannelName)
         .at(0)
         .text(),
-    ).toBe(`${i18nNS}~{{currentChannel}} channel`);
+    ).toBe('stable-4.5 channel');
   });
   it('should render the value of current version', () => {
     expect(
@@ -348,7 +338,7 @@ describe('Updates Graph', () => {
         .find(ChannelName)
         .at(1)
         .text(),
-    ).toBe('public~{{newerChannel}} channel');
+    ).toBe('stable-4.6 channel');
   });
 });
 
@@ -386,7 +376,7 @@ describe('Current Version Header while updating', () => {
   });
 
   it('should render the Current Version heading', () => {
-    expect(wrapper.text()).toBe(`${i18nNS}~Last completed version`);
+    expect(wrapper.text()).toBe('Last completed version');
   });
 });
 
@@ -400,7 +390,7 @@ describe('Update Status while updating', () => {
   });
 
   it('should render the Updating Message Text value', () => {
-    expect(wrapper.text()).toBe(`${i18nNS}~Update to {{version}} in progress`);
+    expect(wrapper.text()).toBe('Update to 4.5.4 in progress');
   });
 });
 

frontend/__tests__/components/cluster-settings/basicauth-idp-form.spec.tsx

@@ -11,50 +11,37 @@ import {
   DroppableFileInput as BasicDroppableInput,
 } from '../../../public/components/cluster-settings/basicauth-idp-form';
 
-jest.mock('react-i18next', () => {
-  const reactI18next = require.requireActual('react-i18next');
-  return {
-    ...reactI18next,
-    withTranslation: () => (Component) => {
-      Component.defaultProps = { ...Component.defaultProps, t: (s) => s };
-      return Component;
-    },
-  };
-});
-
-const i18nNS = 'public';
-
-export const controlButtonTest = (wrapper: ShallowWrapper, i18nNamespace) => {
+export const controlButtonTest = (wrapper: ShallowWrapper) => {
   expect(wrapper.find(ButtonBar).exists()).toBe(true);
   expect(
     wrapper
       .find(Button)
       .at(0)
       .childAt(0)
       .text(),
-  ).toEqual(`${i18nNamespace}~Add`);
+  ).toEqual('Add');
   expect(
     wrapper
       .find(Button)
       .at(1)
       .childAt(0)
       .text(),
-  ).toEqual(`${i18nNamespace}~Cancel`);
+  ).toEqual('Cancel');
 };
 
 describe('Add Identity Provider: BasicAuthentication', () => {
   let wrapper: ShallowWrapper<{}, AddBasicAuthPageState>;
 
   beforeEach(() => {
-    wrapper = shallow(<AddBasicAuthPage />);
+    wrapper = shallow(<AddBasicAuthPage />).dive();
   });
 
   it('should render AddBasicAuthPage component', () => {
     expect(wrapper.exists()).toBe(true);
   });
 
   it('should render correct Basic Authentication IDP page title', () => {
-    expect(wrapper.contains(`${i18nNS}~Add Identity Provider: Basic Authentication`)).toBeTruthy();
+    expect(wrapper.contains('Add Identity Provider: Basic Authentication')).toBeTruthy();
   });
 
   it('should render the form elements of AddBasicAuthPage component', () => {
@@ -65,7 +52,7 @@ describe('Add Identity Provider: BasicAuthentication', () => {
   });
 
   it('should render control buttons in a button bar', () => {
-    controlButtonTest(wrapper, 'public');
+    controlButtonTest(wrapper);
   });
 
   it('should prefill basic-auth in name field by default', () => {

frontend/__tests__/components/cluster-settings/github-idp-form.spec.tsx

@@ -10,32 +10,19 @@ import {
 } from '../../../public/components/cluster-settings/github-idp-form';
 import { controlButtonTest } from './basicauth-idp-form.spec';
 
-jest.mock('react-i18next', () => {
-  const reactI18next = require.requireActual('react-i18next');
-  return {
-    ...reactI18next,
-    withTranslation: () => (Component) => {
-      Component.defaultProps = { ...Component.defaultProps, t: (s) => s };
-      return Component;
-    },
-  };
-});
-
-const i18nNS = 'public';
-
 describe('Add Identity Provider: GitHub', () => {
   let wrapper: ShallowWrapper<{}, AddGitHubPageState>;
 
   beforeEach(() => {
-    wrapper = shallow(<AddGitHubPage />);
+    wrapper = shallow(<AddGitHubPage />).dive();
   });
 
   it('should render AddGitHubPage component', () => {
     expect(wrapper.exists()).toBe(true);
   });
 
   it('should render correct GitHub IDP page title', () => {
-    expect(wrapper.contains(`${i18nNS}~Add Identity Provider: GitHub`)).toBeTruthy();
+    expect(wrapper.contains('Add Identity Provider: GitHub')).toBeTruthy();
   });
 
   it('should render the form elements of AddGitHubPage component', () => {
@@ -48,7 +35,7 @@ describe('Add Identity Provider: GitHub', () => {
   });
 
   it('should render control buttons in a button bar', () => {
-    controlButtonTest(wrapper, 'public');
+    controlButtonTest(wrapper);
   });
 
   it('should prefill github in name field by default', () => {

frontend/__tests__/components/cluster-settings/gitlab-idp-form.spec.tsx

@@ -9,32 +9,19 @@ import {
 } from '../../../public/components/cluster-settings/gitlab-idp-form';
 import { controlButtonTest } from './basicauth-idp-form.spec';
 
-jest.mock('react-i18next', () => {
-  const reactI18next = require.requireActual('react-i18next');
-  return {
-    ...reactI18next,
-    withTranslation: () => (Component) => {
-      Component.defaultProps = { ...Component.defaultProps, t: (s) => s };
-      return Component;
-    },
-  };
-});
-
-const i18nNS = 'public';
-
 describe('Add Identity Provider: GitLab', () => {
   let wrapper: ShallowWrapper<{}, AddGitLabPageState>;
 
   beforeEach(() => {
-    wrapper = shallow(<AddGitLabPage />);
+    wrapper = shallow(<AddGitLabPage />).dive();
   });
 
   it('should render AddGitLabPage component', () => {
     expect(wrapper.exists()).toBe(true);
   });
 
   it('should render correct GitLab IDP page title', () => {
-    expect(wrapper.contains(`${i18nNS}~Add Identity Provider: GitLab`)).toBeTruthy();
+    expect(wrapper.contains('Add Identity Provider: GitLab')).toBeTruthy();
   });
 
   it('should render the form elements of AddGitLabPage component', () => {
@@ -46,7 +33,7 @@ describe('Add Identity Provider: GitLab', () => {
   });
 
   it('should render control buttons in a button bar', () => {
-    controlButtonTest(wrapper, 'public');
+    controlButtonTest(wrapper);
   });
 
   it('should prefill gitlab in name field by default', () => {

frontend/__tests__/components/cluster-settings/google-idp-form.spec.tsx

@@ -8,32 +8,19 @@ import {
 } from '../../../public/components/cluster-settings/google-idp-form';
 import { controlButtonTest } from './basicauth-idp-form.spec';
 
-jest.mock('react-i18next', () => {
-  const reactI18next = require.requireActual('react-i18next');
-  return {
-    ...reactI18next,
-    withTranslation: () => (Component) => {
-      Component.defaultProps = { ...Component.defaultProps, t: (s) => s };
-      return Component;
-    },
-  };
-});
-
-const i18nNS = 'public';
-
 describe('Add Identity Provider: Google', () => {
   let wrapper: ShallowWrapper<{}, AddGooglePageState>;
 
   beforeEach(() => {
-    wrapper = shallow(<AddGooglePage />);
+    wrapper = shallow(<AddGooglePage />).dive();
   });
 
   it('should render AddGooglePage component', () => {
     expect(wrapper.exists()).toBe(true);
   });
 
   it('should render correct Google IDP page title', () => {
-    expect(wrapper.contains(`${i18nNS}~Add Identity Provider: Google`)).toBeTruthy();
+    expect(wrapper.contains('Add Identity Provider: Google')).toBeTruthy();
   });
 
   it('should render the form elements of AddGooglePage component', () => {
@@ -44,7 +31,7 @@ describe('Add Identity Provider: Google', () => {
   });
 
   it('should render control buttons in a button bar', () => {
-    controlButtonTest(wrapper, 'public');
+    controlButtonTest(wrapper);
   });
 
   it('should prefill google in name field by default', () => {