I18n: User and Org Preferences allow change of Language (#51175)

* add locale selection settings under preferences; Alpha feature toggle;

* extract components' ids for internationalisation references

* migrate OrgDetailsPage tests from Enzyme to RTL

* test locale selection in shared preferences

* fix OrgDetailsPage needing a fetch polyfill; "Real fetch shouldn't be being hit." - Josh

* remove snapshot

* remove snapshot

public/app/features/org/OrgDetailsPage.test.tsx

@@ -1,9 +1,10 @@
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
 import { mockToolkitActionCreator } from 'test/core/redux/mocks';
 
 import { NavModel } from '@grafana/data';
 
+import { backendSrv } from '../../core/services/backend_srv';
 import { Organization } from '../../types';
 
 import { OrgDetailsPage, Props } from './OrgDetailsPage';
@@ -17,7 +18,26 @@ jest.mock('app/core/core', () => {
   };
 });
 
+jest.mock('@grafana/runtime', () => {
+  const originalModule = jest.requireActual('@grafana/runtime');
+  return {
+    ...originalModule,
+    config: {
+      ...originalModule.config,
+      featureToggles: {
+        internationalization: true,
+      },
+    },
+  };
+});
+
 const setup = (propOverrides?: object) => {
+  jest.clearAllMocks();
+  // needed because SharedPreferences is rendered in the test
+  jest.spyOn(backendSrv, 'put');
+  jest.spyOn(backendSrv, 'get').mockResolvedValue({ timezone: 'UTC', homeDashboardId: 0, theme: 'dark' });
+  jest.spyOn(backendSrv, 'search').mockResolvedValue([]);
+
   const props: Props = {
     organization: {} as Organization,
     navModel: {
@@ -32,32 +52,30 @@ const setup = (propOverrides?: object) => {
     setOrganizationName: mockToolkitActionCreator(setOrganizationName),
     updateOrganization: jest.fn(),
   };
-
   Object.assign(props, propOverrides);
 
-  return shallow(<OrgDetailsPage {...props} />);
+  render(<OrgDetailsPage {...props} />);
 };
 
 describe('Render', () => {
   it('should render component', () => {
-    const wrapper = setup();
-
-    expect(wrapper).toMatchSnapshot();
+    expect(() => setup()).not.toThrow();
   });
 
   it('should render organization and preferences', () => {
-    const wrapper = setup({
-      organization: {
-        name: 'Cool org',
-        id: 1,
-      },
-      preferences: {
-        homeDashboardId: 1,
-        theme: 'Default',
-        timezone: 'Default',
-      },
-    });
-
-    expect(wrapper).toMatchSnapshot();
+    expect(() =>
+      setup({
+        organization: {
+          name: 'Cool org',
+          id: 1,
+        },
+        preferences: {
+          homeDashboardId: 1,
+          theme: 'Default',
+          timezone: 'Default',
+          locale: '',
+        },
+      })
+    ).not.toThrow();
   });
 });

public/app/features/org/__snapshots__/OrgDetailsPage.test.tsx.snap

@@ -1,52 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<Page
-  navModel={
-    Object {
-      "main": Object {
-        "text": "Configuration",
-      },
-      "node": Object {
-        "text": "Org details",
-      },
-    }
-  }
->
-  <PageContents
-    isLoading={true}
-  />
-</Page>
-`;
-
-exports[`Render should render organization and preferences 1`] = `
-<Page
-  navModel={
-    Object {
-      "main": Object {
-        "text": "Configuration",
-      },
-      "node": Object {
-        "text": "Org details",
-      },
-    }
-  }
->
-  <PageContents
-    isLoading={false}
-  >
-    <VerticalGroup
-      spacing="lg"
-    >
-      <OrgProfile
-        onSubmit={[Function]}
-        orgName="Cool org"
-      />
-      <SharedPreferences
-        disabled={false}
-        resourceUri="org"
-      />
-    </VerticalGroup>
-  </PageContents>
-</Page>
-`;