generator-jhipster 7.9.0 → 7.9.3

package/generators/client/templates/react/package.json

@@ -1,9 +1,9 @@
 {
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.1.2",
-    "@fortawesome/free-solid-svg-icons": "6.1.2",
+    "@fortawesome/fontawesome-svg-core": "6.2.0",
+    "@fortawesome/free-solid-svg-icons": "6.2.0",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@reduxjs/toolkit": "1.8.3",
+    "@reduxjs/toolkit": "1.8.5",
     "axios": "0.27.2",
     "bootstrap": "5.2.0",
     "bootswatch": "5.2.0",
@@ -12,14 +12,14 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "7.30.0",
-    "react-jhipster": "0.21.0",
+    "react-jhipster": "0.22.0",
     "react-loadable": "5.5.0",
     "react-redux": "8.0.2",
     "react-redux-loading-bar": "5.0.4",
     "react-router-dom": "6.3.0",
-    "react-toastify": "9.0.7",
-    "react-transition-group": "4.4.4",
-    "reactstrap": "9.1.2",
+    "react-toastify": "9.0.8",
+    "react-transition-group": "4.4.5",
+    "reactstrap": "9.1.4",
     "redux": "4.2.0",
     "redux-thunk": "2.4.1",
     "sonar-scanner": "3.1.0",
@@ -28,27 +28,27 @@
   },
   "devDependencies": {
     "@testing-library/react": "13.3.0",
-    "@types/jest": "28.1.6",
-    "@types/lodash": "4.14.182",
-    "@types/node": "16.11.47",
-    "@types/react": "18.0.15",
+    "@types/jest": "28.1.8",
+    "@types/lodash": "4.14.184",
+    "@types/node": "16.11.56",
+    "@types/react": "18.0.18",
     "@types/react-dom": "18.0.6",
     "@types/react-redux": "7.1.24",
     "@types/redux": "3.6.31",
-    "@types/webpack-env": "1.17.0",
-    "@typescript-eslint/eslint-plugin": "5.31.0",
-    "@typescript-eslint/parser": "5.31.0",
+    "@types/webpack-env": "1.18.0",
+    "@typescript-eslint/eslint-plugin": "5.36.1",
+    "@typescript-eslint/parser": "5.36.1",
     "autoprefixer": "10.4.8",
     "browser-sync": "2.27.10",
     "browser-sync-webpack-plugin": "2.3.0",
     "copy-webpack-plugin": "11.0.0",
-    "core-js": "3.24.1",
+    "core-js": "3.25.0",
     "cross-env": "7.0.3",
     "css-loader": "6.7.1",
     "css-minimizer-webpack-plugin": "4.0.0",
-    "eslint": "8.20.0",
+    "eslint": "8.23.0",
     "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-react": "7.30.1",
+    "eslint-plugin-react": "7.31.1",
     "eslint-webpack-plugin": "3.2.0",
     "folder-hash": "4.0.2",
     "fork-ts-checker-webpack-plugin": "7.2.13",
@@ -56,8 +56,8 @@
     "identity-obj-proxy": "3.0.0",
     "jest": "28.1.3",
     "jest-environment-jsdom": "28.1.3",
-    "jest-junit": "14.0.0",
-    "jest-sonar-reporter": "2.0.0",
+    "jest-junit": "14.0.1",
+    "jest-sonar": "0.2.12",
     "json-loader": "0.5.7",
     "merge-jsons-webpack-plugin": "2.0.1",
     "mini-css-extract-plugin": "2.6.1",
@@ -66,21 +66,21 @@
     "react-infinite-scroll-component": "6.1.0",
     "redux-mock-store": "1.5.4",
     "rimraf": "3.0.2",
-    "sass": "1.54.0",
+    "sass": "1.54.8",
     "sass-loader": "13.0.2",
     "simple-progress-webpack-plugin": "2.0.0",
     "sinon": "14.0.0",
     "source-map-loader": "4.0.0",
     "sourcemap-istanbul-instrumenter-loader": "0.2.0",
     "style-loader": "3.3.1",
-    "terser-webpack-plugin": "5.3.3",
+    "terser-webpack-plugin": "5.3.6",
     "thread-loader": "3.0.4",
-    "ts-jest": "28.0.7",
+    "ts-jest": "28.0.8",
     "ts-loader": "9.3.1",
-    "typescript": "4.7.4",
+    "typescript": "4.8.2",
     "webpack": "5.74.0",
     "webpack-cli": "4.10.0",
-    "webpack-dev-server": "4.9.3",
+    "webpack-dev-server": "4.10.1",
     "webpack-merge": "5.8.0",
     "webpack-notifier": "1.15.0",
     "workbox-webpack-plugin": "6.5.4"

package/generators/client/templates/react/package.json.ejs

@@ -112,7 +112,7 @@
     "jest": "<%= dependabotPackageJson.devDependencies['jest'] %>",
     "jest-environment-jsdom": "<%= dependabotPackageJson.devDependencies['jest-environment-jsdom'] %>",
     "jest-junit": "<%= dependabotPackageJson.devDependencies['jest-junit'] %>",
-    "jest-sonar-reporter": "<%= dependabotPackageJson.devDependencies['jest-sonar-reporter'] %>",
+    "jest-sonar": "<%= dependabotPackageJson.devDependencies['jest-sonar'] %>",
     "json-loader": "<%= dependabotPackageJson.devDependencies['json-loader'] %>",
 <%_ if (enableTranslation) { _%>
     "folder-hash": "<%= dependabotPackageJson.devDependencies['folder-hash'] %>",
@@ -173,8 +173,8 @@
     "default_environment": "prod"
   },
   "scripts": {
-    "prettier:check": "prettier --check \"{,src/**/,webpack/}*.{<%= getPrettierExtensions() %>}\"",
-    "prettier:format": "prettier --write \"{,src/**/,webpack/}*.{<%= getPrettierExtensions() %>}\"",
+    "prettier:check": "prettier --check \"{,src/**/,webpack/,.blueprint/**/}*.{<%= getPrettierExtensions() %>}\"",
+    "prettier:format": "prettier --write \"{,src/**/,webpack/,.blueprint/**/}*.{<%= getPrettierExtensions() %>}\"",
     "lint": "eslint . --ext .js,.ts,.jsx,.tsx",
     "lint:fix": "<%= clientPackageManager %> run lint -- --fix",
     "cleanup": "rimraf <%= DIST_DIR %>",
@@ -221,9 +221,5 @@
     "webapp:prod": "<%= clientPackageManager %> run clean-www && <%= clientPackageManager %> run webapp:build:prod --",
     "webapp:test": "<%= clientPackageManager %> run test --",
     "webpack-dev-server": "webpack serve"
-  },
-  "jestSonar": {
-    "reportPath": "<%= BUILD_DIR %>test-results/jest",
-    "reportFile": "TESTS-results-sonar.xml"
   }
 }

package/generators/client/templates/react/src/main/webapp/app/config/store.ts.ejs

@@ -38,9 +38,6 @@ import loggerMiddleware from './logger-middleware';
 <%_ if (communicationSpringWebsocket) { _%>
 import websocketMiddleware from './websocket-middleware';
 <%_ } _%>
-<%_ if (enableTranslation) { _%>
-import translationMiddleware from './translation-middleware';
-<%_ } _%>
 
 const store = configureStore({
   reducer: sharedReducers,
@@ -56,9 +53,6 @@ const store = configureStore({
       loadingBarMiddleware(),
 <%_ if (communicationSpringWebsocket) { _%>
       websocketMiddleware,
-<%_ } _%>
-<%_ if (enableTranslation) { _%>
-      translationMiddleware,
 <%_ } _%>
       loggerMiddleware
     ),

package/generators/client/templates/react/src/main/webapp/app/index.tsx.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
@@ -42,18 +42,17 @@ setupAxiosInterceptors(() => actions.clearAuthentication('login.error.unauthoriz
 loadIcons();
 
 const rootEl = document.getElementById('root');
+const root = createRoot(rootEl);
 
 const render = Component =>
-  // eslint-disable-next-line react/no-render-return-value
-  ReactDOM.render(
+  root.render(
     <ErrorBoundary>
       <Provider store={store}>
         <div>
           <Component />
         </div>
       </Provider>
-    </ErrorBoundary>,
-    rootEl
+    </ErrorBoundary>
   );
 
 render(AppComponent);

package/generators/client/templates/react/src/main/webapp/app/modules/administration/administration.reducer.spec.ts.ejs

@@ -23,7 +23,7 @@ import thunk from 'redux-thunk';
 import sinon from 'sinon';
 
 import administration, {
-<%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
+<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
   getGatewayRoutes,
 <%_ } _%>
 <%_ if (withAdminUi) { _%>
@@ -56,7 +56,7 @@ describe('Administration reducer tests', () => {
       errorMessage: null,
       totalItems: 0
     });
-<%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
+<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
     expect(isEmpty(state.gateway.routes));
 <%_ } _%>
 <%_ if (withAdminUi) { _%>
@@ -84,7 +84,7 @@ describe('Administration reducer tests', () => {
     it('should set state to loading', () => {
       testMultipleTypes(
         [
-<%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
+<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
           getGatewayRoutes.pending.type,
 <%_ } _%>
 <%_ if (withAdminUi) { _%>
@@ -111,7 +111,7 @@ describe('Administration reducer tests', () => {
     it('should set state to failed and put an error message in errorMessage', () => {
       testMultipleTypes(
         [
-<%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
+<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
           getGatewayRoutes.rejected.type,
 <%_ } _%>
 <%_ if (withAdminUi) { _%>
@@ -138,7 +138,7 @@ describe('Administration reducer tests', () => {
   });
 
   describe('Success', () => {
-<%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
+<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
     it('should update state according to a successful fetch gateway routes request', () => {
       const payload = { data: [] };
       const toTest = administration(undefined, { type: getGatewayRoutes.fulfilled.type, payload });
@@ -264,7 +264,7 @@ describe('Administration reducer tests', () => {
     let store;
 
     const resolvedObject = { value: 'whatever' };
-<%_ if (applicationTypeGateway && serviceDiscoveryType || withAdminUi) { _%>
+<%_ if (applicationTypeGateway && serviceDiscoveryAny || withAdminUi) { _%>
     beforeEach(() => {
       const mockStore = configureStore([thunk]);
       store = mockStore({});
@@ -272,7 +272,7 @@ describe('Administration reducer tests', () => {
       axios.post = sinon.stub().returns(Promise.resolve(resolvedObject));
     });
 <%_ } _%>
-<%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
+<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
     it('dispatches FETCH_GATEWAY_ROUTE_PENDING and FETCH_GATEWAY_ROUTE_FULFILLED actions', async () => {
       const expectedActions = [
         {

package/generators/client/templates/react/src/main/webapp/app/modules/administration/administration.reducer.ts.ejs

@@ -25,7 +25,7 @@ import { AppThunk } from 'app/config/store';
 const initialState = {
   loading: false,
   errorMessage: null,
-<%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
+<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
   gateway: {
     routes: []
   },
@@ -53,7 +53,7 @@ const initialState = {
 export type AdministrationState =  Readonly<typeof initialState>;
 
 // Actions
-<%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
+<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
 export const getGatewayRoutes = createAsyncThunk('administration/fetch_gateway_route', async () => axios.get<any>('api/gateway/routes'), {
   serializeError: serializeAxiosError,
 });
@@ -113,9 +113,9 @@ export const AdministrationSlice = createSlice({
     <%_ } _%>
   },
   extraReducers(builder) {
-<%_ if (withAdminUi || (applicationTypeGateway && serviceDiscoveryType)) { _%>
+<%_ if (withAdminUi || (applicationTypeGateway && serviceDiscoveryAny)) { _%>
     builder
-      <%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
+      <%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
       .addCase(getGatewayRoutes.fulfilled, (state, action) => {
         state.loading = false;
         state.gateway = {
@@ -159,7 +159,7 @@ export const AdministrationSlice = createSlice({
       <%_ } _%>
       .addMatcher(
         isPending(
-          <%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
+          <%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
           getGatewayRoutes,
           <%_ } _%>
           <%_ if (withAdminUi) { _%>
@@ -178,7 +178,7 @@ export const AdministrationSlice = createSlice({
       )
       .addMatcher(
         isRejected(
-          <%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
+          <%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
           getGatewayRoutes,
           <%_ } _%>
           <%_ if (withAdminUi) { _%>

package/generators/client/templates/react/src/main/webapp/app/modules/administration/index.tsx.ejs

@@ -30,7 +30,7 @@ import Metrics from './metrics/metrics';
 import Configuration from './configuration/configuration';
 <%_ } _%>
 import Docs from './docs/docs';
-<%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
+<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
 import Gateway from './gateway/gateway';
 <%_ } _%>
 <%_ if (communicationSpringWebsocket) { _%>
@@ -46,7 +46,7 @@ const AdministrationRoutes = () => (
 <%_ if (communicationSpringWebsocket) { _%>
       <Route path="tracker" element={<Tracker />} />
 <%_ } _%>
-<%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
+<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
       <Route path="gateway" element={<Gateway />} />
 <%_ } _%>
 <%_ if (withAdminUi) { _%>

package/generators/client/templates/react/src/main/webapp/app/shared/layout/menus/admin.tsx.ejs

@@ -27,7 +27,7 @@ import { Translate, translate } from 'react-jhipster';
 
 const adminMenuItems = () => (
   <>
-<%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
+<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
     <MenuItem icon="road" to="/admin/gateway"><Translate contentKey="global.menu.admin.gateway">Gateway</Translate></MenuItem>
 <%_ } _%>
 <%_ if (!skipUserManagement) { _%>

package/generators/client/templates/react/src/main/webapp/app/shared/reducers/authentication.spec.ts.ejs

@@ -40,7 +40,9 @@ import authentication, {
   clearAuth,
   initialState,
 } from 'app/shared/reducers/authentication';
-<% if (enableTranslation) { %>import { updateLocale } from 'app/shared/reducers/locale';<% } %>
+<%_ if (enableTranslation) { _%>
+import { updateLocale, setLocale } from 'app/shared/reducers/locale';
+<%_ } _%>
 
 describe('Authentication reducer tests', () => {
   function isAccountEmpty(state): boolean {
@@ -204,7 +206,11 @@ describe('Authentication reducer tests', () => {
     const resolvedObject = { value: 'whatever' };
     beforeEach(() => {
       const mockStore = configureStore([thunk]);
-      store = mockStore({ authentication: { account: { <%_ if (enableTranslation) { _%> langKey: '<%= nativeLanguage %>' <% } %> } } });
+<%_ if (enableTranslation) { _%>
+      store = mockStore({ authentication: { account: { langKey: '<%= nativeLanguage %>' } }, locale: { loadedLocales: ['<%= nativeLanguage %>'] } });
+<%_ } else { _%>
+      store = mockStore({ authentication: { account: { } } });
+<%_ } _%>
       axios.get = sinon.stub().returns(Promise.resolve(resolvedObject));
     });
 
@@ -218,15 +224,18 @@ describe('Authentication reducer tests', () => {
           type: getAccount.fulfilled.type,
           payload: resolvedObject
         },
-        updateLocale('<%= nativeLanguage %>'),
+        {
+          type: setLocale.pending.type,
+        },
+        updateLocale('en'),
+        {
+          type: setLocale.fulfilled.type,
+          payload: 'en',
+        },
         <%_ } _%>
       ];
       await store.dispatch(getSession());
-      expect(store.getActions()[0]).toMatchObject(expectedActions[0]);
-      <%_ if (enableTranslation) { _%>
-      expect(store.getActions()[1]).toMatchObject(expectedActions[1]);
-      expect(store.getActions()[2]).toMatchObject(expectedActions[2]);
-      <%_ } _%>
+      expect(store.getActions()).toMatchObject(expectedActions);
     });
 
     it('dispatches LOGOUT actions', async () => {

package/generators/client/templates/react/src/main/webapp/app/shared/reducers/authentication.ts.ejs

@@ -56,7 +56,7 @@ export const getSession = (): AppThunk => <% if (enableTranslation) { %>async<%
   const { account } = getState().authentication;
   if (account && account.langKey) {
     const langKey = Storage.session.get('locale', account.langKey);
-    dispatch(setLocale(langKey));
+    await dispatch(setLocale(langKey));
   }
 <%_ } else { _%>
   dispatch(getAccount());

package/generators/client/templates/react/src/main/webapp/app/shared/reducers/locale.spec.ts.ejs

@@ -4,7 +4,9 @@ import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { TranslatorContext } from 'react-jhipster';
 
-import locale, { setLocale, updateLocale } from 'app/shared/reducers/locale';
+import locale, { setLocale, updateLocale, loaded, addTranslationSourcePrefix } from 'app/shared/reducers/locale';
+
+const defaultLocale = '<%= nativeLanguage %>';
 
 describe('Locale reducer tests', () => {
   it('should return the initial state', () => {
@@ -15,19 +17,19 @@ describe('Locale reducer tests', () => {
   });
 
   it('should correctly set the first time locale', () => {
-    const localeState = locale(undefined, updateLocale('en'));
+    const localeState = locale(undefined, updateLocale(defaultLocale));
     expect(localeState).toMatchObject({
-      currentLocale: 'en'
+      currentLocale: defaultLocale
     });
-    expect(TranslatorContext.context.locale).toEqual('en');
+    expect(TranslatorContext.context.locale).toEqual(defaultLocale);
   });
 
   it('should correctly detect update in current locale state', () => {
-    TranslatorContext.setLocale('en');
-    expect(TranslatorContext.context.locale).toEqual('en');
+    TranslatorContext.setLocale(defaultLocale);
+    expect(TranslatorContext.context.locale).toEqual(defaultLocale);
     const localeState = locale(
       {
-        currentLocale: 'en',
+        currentLocale: defaultLocale,
         sourcePrefixes: [],
         lastChange: new Date().getTime(),
         loadedKeys: [],
@@ -40,22 +42,177 @@ describe('Locale reducer tests', () => {
     expect(TranslatorContext.context.locale).toEqual('es');
   });
 
-  describe('Locale actions', () => {
-    let store;
-    beforeEach(() => {
-      store = configureStore([thunk])({});
-      axios.get = sinon.stub().returns(Promise.resolve({ key: 'value' }));
+  describe('setLocale reducer', () => {
+    describe('with default language loaded', () => {
+      let store;
+      beforeEach(() => {
+        store = configureStore([thunk])({ locale: { loadedLocales: [defaultLocale], loadedKeys: [] } });
+        axios.get = sinon.stub().returns(Promise.resolve({ key: 'value' }));
+      });
+
+      it('dispatches updateLocale action for default locale', async () => {
+        TranslatorContext.setDefaultLocale(defaultLocale);
+        expect(Object.keys(TranslatorContext.context.translations)).not.toContainEqual(defaultLocale);
+
+        const expectedActions = [
+          {
+            type: setLocale.pending.type,
+          },
+          updateLocale(defaultLocale),
+          {
+            type: setLocale.fulfilled.type,
+            payload: defaultLocale,
+          },
+        ];
+
+        await store.dispatch(setLocale(defaultLocale));
+        expect(store.getActions()).toMatchObject(expectedActions);
+      });
+    });
+
+    describe('with no language loaded', () => {
+      let store;
+      beforeEach(() => {
+        store = configureStore([thunk])({ locale: { sourcePrefixes: [], loadedLocales: [], loadedKeys: [] } });
+        axios.get = sinon.stub().returns(Promise.resolve({ key: 'value' }));
+      });
+
+      it('dispatches loaded and updateLocale action for default locale', async () => {
+        TranslatorContext.setDefaultLocale(defaultLocale);
+        expect(Object.keys(TranslatorContext.context.translations)).not.toContainEqual(defaultLocale);
+
+        const expectedActions = [
+          {
+            type: setLocale.pending.type,
+          },
+          loaded({ keys: [defaultLocale], locale: defaultLocale }),
+          updateLocale(defaultLocale),
+          {
+            type: setLocale.fulfilled.type,
+            payload: defaultLocale,
+          },
+        ];
+
+        await store.dispatch(setLocale(defaultLocale));
+        expect(store.getActions()).toMatchObject(expectedActions);
+      });
+    });
+  });
+
+  describe('addTranslationSourcePrefix reducer', () => {
+    const sourcePrefix = 'foo/';
+
+    describe('with no prefixes and keys loaded', () => {
+      let store;
+      beforeEach(() => {
+        store = configureStore([thunk])({
+          locale: { currentLocale: defaultLocale, sourcePrefixes: [], loadedLocales: [], loadedKeys: [] },
+        });
+        axios.get = sinon.stub().returns(Promise.resolve({ key: 'value' }));
+      });
+
+      it('dispatches loaded action with keys and sourcePrefix', async () => {
+        const expectedActions = [
+          {
+            type: addTranslationSourcePrefix.pending.type,
+          },
+          loaded({ keys: [`${sourcePrefix}${defaultLocale}`], sourcePrefix }),
+          {
+            type: addTranslationSourcePrefix.fulfilled.type,
+            payload: `${sourcePrefix}${defaultLocale}`,
+          },
+        ];
+
+        await store.dispatch(addTranslationSourcePrefix(sourcePrefix));
+        expect(store.getActions()).toMatchObject(expectedActions);
+      });
     });
 
-    it('dispatches SET_LOCALE action for default locale', async () => {
-      TranslatorContext.setDefaultLocale('en');
-      const defaultLocale = TranslatorContext.context.defaultLocale;
-      expect(Object.keys(TranslatorContext.context.translations)).not.toContainEqual(defaultLocale);
+    describe('with prefix already added', () => {
+      let store;
+      beforeEach(() => {
+        store = configureStore([thunk])({
+          locale: { currentLocale: defaultLocale, sourcePrefixes: [sourcePrefix], loadedLocales: [], loadedKeys: [] },
+        });
+        axios.get = sinon.stub().returns(Promise.resolve({ key: 'value' }));
+      });
+
+      it("doesn't dispatches loaded action", async () => {
+        const expectedActions = [
+          {
+            type: addTranslationSourcePrefix.pending.type,
+          },
+          {
+            type: addTranslationSourcePrefix.fulfilled.type,
+            payload: `${sourcePrefix}${defaultLocale}`,
+          },
+        ];
+
+        await store.dispatch(addTranslationSourcePrefix(sourcePrefix));
+        expect(store.getActions()).toMatchObject(expectedActions);
+      });
+    });
+
+    describe('with key already loaded', () => {
+      let store;
+      beforeEach(() => {
+        store = configureStore([thunk])({
+          locale: { currentLocale: defaultLocale, sourcePrefixes: [], loadedLocales: [], loadedKeys: [`${sourcePrefix}${defaultLocale}`] },
+        });
+        axios.get = sinon.stub().returns(Promise.resolve({ key: 'value' }));
+      });
+
+      it("doesn't dispatches loaded action", async () => {
+        const expectedActions = [
+          {
+            type: addTranslationSourcePrefix.pending.type,
+          },
+          {
+            type: addTranslationSourcePrefix.fulfilled.type,
+            payload: `${sourcePrefix}${defaultLocale}`,
+          },
+        ];
+
+        await store.dispatch(addTranslationSourcePrefix(sourcePrefix));
+        expect(store.getActions()).toMatchObject(expectedActions);
+      });
+    });
+  });
+
+  describe('loaded reducer', () => {
+    describe('with empty state', () => {
+      let initialState;
+      beforeEach(() => {
+        initialState = { currentLocale: defaultLocale, sourcePrefixes: [], loadedLocales: [], loadedKeys: [] };
+      });
+
+      it("and empty parameter, don't adds anything", () => {
+        const expectedState = { currentLocale: defaultLocale, sourcePrefixes: [], loadedLocales: [], loadedKeys: [] };
+
+        const localeState = locale(initialState, loaded({}));
+        expect(localeState).toMatchObject(expectedState);
+      });
+
+      it('and keys parameter, adds to loadedKeys', () => {
+        const expectedState = { currentLocale: defaultLocale, sourcePrefixes: [], loadedLocales: [], loadedKeys: ['foo'] };
+
+        const localeState = locale(initialState, loaded({ keys: ['foo'] }));
+        expect(localeState).toMatchObject(expectedState);
+      });
+
+      it('and sourcePrefix parameter, adds to sourcePrefixes', () => {
+        const expectedState = { currentLocale: defaultLocale, sourcePrefixes: ['foo'], loadedLocales: [], loadedKeys: [] };
+
+        const localeState = locale(initialState, loaded({ sourcePrefix: 'foo' }));
+        expect(localeState).toMatchObject(expectedState);
+      });
 
-      const expectedActions = [updateLocale(defaultLocale)];
+      it('and locale parameter, adds to loadedLocales', () => {
+        const expectedState = { currentLocale: defaultLocale, sourcePrefixes: [], loadedLocales: ['foo'], loadedKeys: [] };
 
-      await store.dispatch(setLocale(defaultLocale));
-      expect(store.getActions()).toEqual(expectedActions);
+        const localeState = locale(initialState, loaded({ locale: 'foo' }));
+        expect(localeState).toMatchObject(expectedState);
+      });
     });
   });
 });