Update tests

Signed-off-by: soupette <cyril.lpz@gmail.com>

examples/getstarted/admin/admin.config.js

@@ -6,6 +6,8 @@ module.exports = {
     return config;
   },
   app: config => {
+    config.locales = ['fr'];
+
     return config;
   },
 };

packages/admin-test-utils/lib/fixtures/store/index.js

@@ -4,7 +4,6 @@
 const { combineReducers, createStore } = require('redux');
 
 const reducers = {
-  language: jest.fn(() => ({ locale: 'en' })),
   menu: jest.fn(() => ({
     collectionTypesSectionLinks: [],
     generalSectionLinks: [

packages/core/admin/admin/src/components/LanguageProvider/reducer.js

@@ -7,7 +7,7 @@
 const localStorageKey = 'strapi-admin-language';
 
 const initialState = {
-  localesNativeNames: {},
+  localesNativeNames: { en: 'English' },
   locale: 'en',
 };
 

packages/core/admin/admin/src/components/LanguageProvider/tests/LocaleStorageMock.js

@@ -0,0 +1,23 @@
+class LocalStorageMock {
+  constructor() {
+    this.store = {};
+  }
+
+  clear() {
+    this.store = {};
+  }
+
+  getItem(key) {
+    return this.store[key] || null;
+  }
+
+  setItem(key, value) {
+    this.store[key] = String(value);
+  }
+
+  removeItem(key) {
+    delete this.store[key];
+  }
+}
+
+global.localStorage = new LocalStorageMock();

packages/core/admin/admin/src/components/LanguageProvider/tests/index.test.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useIntl } from 'react-intl';
+import useLocalesProvider from '../../LocalesProvider/useLocalesProvider';
+import LanguageProvider from '../index';
+import en from '../../../translations/en.json';
+import fr from '../../../translations/fr.json';
+
+const messages = { en, fr };
+const localesNativeNames = { en: 'English', fr: 'Français' };
+
+describe('LanguageProvider', () => {
+  it('should not crash', () => {
+    const { container } = render(
+      <LanguageProvider messages={messages} localesNativeNames={localesNativeNames}>
+        <div>Test</div>
+      </LanguageProvider>
+    );
+
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        Test
+      </div>
+    `);
+  });
+
+  it('should change the locale', () => {
+    const Test = () => {
+      const { locale } = useIntl();
+      const { changeLocale } = useLocalesProvider();
+
+      return (
+        <div>
+          <h1>{localesNativeNames[locale]}</h1>
+          <button type="button" onClick={() => changeLocale('fr')}>
+            CHANGE
+          </button>
+        </div>
+      );
+    };
+
+    render(
+      <LanguageProvider messages={messages} localesNativeNames={localesNativeNames}>
+        <Test />
+      </LanguageProvider>
+    );
+
+    expect(screen.getByText('English')).toBeInTheDocument();
+
+    userEvent.click(screen.getByText('CHANGE'));
+
+    expect(screen.getByText('Français')).toBeInTheDocument();
+  });
+});

packages/core/admin/admin/src/components/LanguageProvider/tests/init.test.js

@@ -0,0 +1,35 @@
+import init from '../init';
+import './LocaleStorageMock';
+
+const localesNativeNames = { en: 'English', fr: 'Français' };
+
+describe('LanguageProvider | init', () => {
+  afterEach(() => {
+    localStorage.removeItem('strapi-admin-language');
+  });
+
+  it('should return the language from the localStorage', () => {
+    localStorage.setItem('strapi-admin-language', 'fr');
+
+    expect(init(localesNativeNames)).toEqual({
+      locale: 'fr',
+      localesNativeNames,
+    });
+  });
+
+  it('should return "en" when the strapi-admin-language is not set in the locale storage', () => {
+    expect(init(localesNativeNames)).toEqual({
+      locale: 'en',
+      localesNativeNames,
+    });
+  });
+
+  it('should return "en" when the language from the local storage is not included in the localesNativeNames', () => {
+    localStorage.setItem('strapi-admin-language', 'foo');
+
+    expect(init(localesNativeNames)).toEqual({
+      locale: 'en',
+      localesNativeNames,
+    });
+  });
+});

packages/core/admin/admin/src/components/LanguageProvider/tests/reducer.test.js

@@ -0,0 +1,49 @@
+import reducer, { initialState } from '../reducer';
+import './LocaleStorageMock';
+
+describe('LanguageProvider | reducer', () => {
+  let state;
+
+  beforeEach(() => {
+    state = initialState;
+  });
+
+  afterEach(() => {
+    localStorage.removeItem('strapi-admin-language');
+  });
+
+  it('should return the initialState', () => {
+    const action = { type: undefined };
+    expect(reducer(state, action)).toEqual(initialState);
+  });
+
+  it('should change the locale and set the localStorage correctly when the locale is defined in the localesNativeNames', () => {
+    state = {
+      localesNativeNames: { en: 'English', fr: 'Français' },
+      locale: 'en',
+    };
+
+    const action = { type: 'CHANGE_LOCALE', locale: 'fr' };
+    const expected = {
+      localesNativeNames: { en: 'English', fr: 'Français' },
+      locale: 'fr',
+    };
+
+    expect(reducer(state, action)).toEqual(expected);
+    expect(localStorage.getItem('strapi-admin-language')).toEqual('fr');
+  });
+
+  it('should not change the locale when the language is not defined in the localesNativeNames', () => {
+    localStorage.setItem('strapi-admin-language', 'en');
+
+    state = {
+      localesNativeNames: { en: 'English', fr: 'Français' },
+      locale: 'en',
+    };
+
+    const action = { type: 'CHANGE_LOCALE', locale: 'foo' };
+
+    expect(reducer(state, action)).toEqual(state);
+    expect(localStorage.getItem('strapi-admin-language')).toEqual('en');
+  });
+});

packages/core/admin/admin/src/components/LocaleToggle/tests/index.test.js

@@ -1,61 +1,217 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import { DropdownItem } from 'reactstrap';
-import { changeLocale } from '../../LanguageProvider/actions';
-import { LocaleToggle, mapDispatchToProps } from '../index';
+import { render } from '@testing-library/react';
+import LanguageProvider from '../../LanguageProvider';
+import en from '../../../translations/en.json';
+import LocaleToggle from '../index';
+
+const messages = { en };
+const localesNativeNames = { en: 'English' };
 
 describe('<LocaleToggle />', () => {
-  let props;
-
-  beforeEach(() => {
-    props = {
-      changeLocale: jest.fn(),
-      currentLocale: {
-        locale: 'en',
-      },
-    };
-  });
-
   it('should not crash', () => {
-    shallow(<LocaleToggle {...props} />);
-  });
+    const App = (
+      <LanguageProvider messages={messages} localesNativeNames={localesNativeNames}>
+        <LocaleToggle />
+      </LanguageProvider>
+    );
 
-  describe('<LocaleToggle />, toggle instance', () => {
-    it('should update the state when called', () => {
-      const renderedComponent = shallow(<LocaleToggle {...props} />);
-      const { toggle } = renderedComponent.instance();
+    const { container } = render(App);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      .c0 {
+        -webkit-font-smoothing: antialiased;
+      }
 
-      toggle();
+      .c0 > div {
+        height: 6rem;
+        line-height: 5.8rem;
+        z-index: 999;
+      }
 
-      expect(renderedComponent.state('isOpen')).toBe(true);
-    });
+      .c0 > div > button {
+        width: 100%;
+        padding: 0 30px;
+        background: transparent;
+        border: none;
+        border-radius: 0;
+        color: #333740;
+        font-weight: 500;
+        text-align: right;
+        cursor: pointer;
+        -webkit-transition: background 0.2s ease-out;
+        transition: background 0.2s ease-out;
+      }
 
-    it('call the toggle handle on click', () => {
-      const renderedComponent = shallow(<LocaleToggle {...props} />);
-      renderedComponent.setState({ isOpen: true });
-      const dropDown = renderedComponent.find(DropdownItem).at(0);
-      dropDown.simulate('click');
+      .c0 > div > button:hover,
+      .c0 > div > button:focus,
+      .c0 > div > button:active {
+        color: #333740;
+        background-color: #fafafb !important;
+      }
 
-      expect(props.changeLocale).toHaveBeenCalled();
-    });
-  });
+      .c0 > div > button > i,
+      .c0 > div > button > svg {
+        margin-left: 10px;
+        -webkit-transition: -webkit-transform 0.3s ease-out;
+        -webkit-transition: transform 0.3s ease-out;
+        transition: transform 0.3s ease-out;
+      }
 
-  describe('<LocaleToggle />, mapDispatchToProps', () => {
-    describe('changeLocale', () => {
-      it('should be injected', () => {
-        const dispatch = jest.fn();
-        const result = mapDispatchToProps(dispatch);
+      .c0 > div > button > i[alt='true'],
+      .c0 > div > button > svg[alt='true'] {
+        -webkit-transform: rotateX(180deg);
+        -ms-transform: rotateX(180deg);
+        transform: rotateX(180deg);
+      }
 
-        expect(result.changeLocale).toBeDefined();
-      });
+      .c0 .localeDropdownContent {
+        -webkit-font-smoothing: antialiased;
+      }
 
-      it('should dispatch the changeLocale action when called', () => {
-        const dispatch = jest.fn();
-        const result = mapDispatchToProps(dispatch);
-        result.changeLocale();
+      .c0 .localeDropdownContent span {
+        color: #333740;
+        font-size: 13px;
+        font-family: Lato;
+        font-weight: 500;
+        -webkit-letter-spacing: 0.5;
+        -moz-letter-spacing: 0.5;
+        -ms-letter-spacing: 0.5;
+        letter-spacing: 0.5;
+        vertical-align: baseline;
+      }
 
-        expect(dispatch).toHaveBeenCalledWith(changeLocale());
-      });
-    });
+      .c0 .localeDropdownMenu {
+        min-width: 90px !important;
+        max-height: 162px !important;
+        overflow: auto !important;
+        margin: 0 !important;
+        padding: 0;
+        line-height: 1.8rem;
+        border: none !important;
+        border-top-left-radius: 0 !important;
+        border-top-right-radius: 0 !important;
+        box-shadow: 0 1px 4px 0px rgba(40,42,49,0.05);
+      }
+
+      .c0 .localeDropdownMenu:before {
+        content: '';
+        position: absolute;
+        top: -3px;
+        left: -1px;
+        width: calc(100% + 1px);
+        height: 3px;
+        box-shadow: 0 1px 2px 0 rgba(40,42,49,0.16);
+      }
+
+      .c0 .localeDropdownMenu > button {
+        height: 40px;
+        padding: 0px 15px;
+        line-height: 40px;
+        color: #f75b1d;
+        font-size: 13px;
+        font-weight: 500;
+        -webkit-letter-spacing: 0.5;
+        -moz-letter-spacing: 0.5;
+        -ms-letter-spacing: 0.5;
+        letter-spacing: 0.5;
+      }
+
+      .c0 .localeDropdownMenu > button:hover,
+      .c0 .localeDropdownMenu > button:focus,
+      .c0 .localeDropdownMenu > button:active {
+        background-color: #fafafb !important;
+        border-radius: 0px;
+        cursor: pointer;
+      }
+
+      .c0 .localeDropdownMenu > button:first-child {
+        line-height: 50px;
+        margin-bottom: 4px;
+      }
+
+      .c0 .localeDropdownMenu > button:first-child:hover,
+      .c0 .localeDropdownMenu > button:first-child:active {
+        color: #333740;
+      }
+
+      .c0 .localeDropdownMenu > button:not(:first-child) {
+        height: 36px;
+        line-height: 36px;
+      }
+
+      .c0 .localeDropdownMenu > button:not(:first-child) > i,
+      .c0 .localeDropdownMenu > button:not(:first-child) > svg {
+        margin-left: 10px;
+      }
+
+      .c0 .localeDropdownMenuNotLogged {
+        background: transparent !important;
+        box-shadow: none !important;
+        border: 1px solid #e3e9f3 !important;
+        border-top: 0px !important;
+      }
+
+      .c0 .localeDropdownMenuNotLogged button {
+        padding-left: 17px;
+      }
+
+      .c0 .localeDropdownMenuNotLogged button:hover {
+        background-color: #f7f8f8 !important;
+      }
+
+      .c0 .localeDropdownMenuNotLogged:before {
+        box-shadow: none !important;
+      }
+
+      .c0 .localeToggleItem img {
+        max-height: 13.37px;
+        margin-left: 9px;
+      }
+
+      .c0 .localeToggleItem:active {
+        color: black;
+      }
+
+      .c0 .localeToggleItem:hover {
+        background-color: #fafafb !important;
+      }
+
+      .c0 .localeToggleItemActive {
+        color: #333740 !important;
+      }
+
+      <div
+        class="c0"
+      >
+        <div
+          class="btn-group"
+        >
+          <button
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="localeDropdownContent btn btn-secondary"
+            type="button"
+          >
+            <span>
+              English
+            </span>
+          </button>
+          <div
+            aria-hidden="true"
+            class="localeDropdownMenu dropdown-menu"
+            role="menu"
+            tabindex="-1"
+          >
+            <button
+              class="localeToggleItem localeToggleItemActive dropdown-item"
+              role="menuitem"
+              tabindex="0"
+              type="button"
+            >
+              English
+            </button>
+          </div>
+        </div>
+      </div>
+    `);
   });
 });

packages/core/admin/admin/src/components/LocalesProvider/tests/index.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import LocalesProvider from '../index';
+
+describe('LocalesProvider', () => {
+  it('should not crash', () => {
+    const { container } = render(
+      <LocalesProvider
+        changeLocale={jest.fn()}
+        localesNativeNames={{ en: 'English' }}
+        messages={{ en: {} }}
+      >
+        <div>Test</div>
+      </LocalesProvider>
+    );
+
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        Test
+      </div>
+    `);
+  });
+});

packages/core/admin/admin/src/pages/Admin/tests/index.test.js

@@ -13,13 +13,14 @@ import RBACProvider from '../../../components/RBACProvider';
 import Admin from '../index';
 
 const messages = { en };
+const localesNativeNames = { en: 'English' };
 
 const store = fixtures.store.store;
 
 const makeApp = (history, plugins) => (
   <Provider store={store}>
     <StrapiAppProvider plugins={plugins}>
-      <LanguageProvider messages={messages}>
+      <LanguageProvider messages={messages} localesNativeNames={localesNativeNames}>
         <Notifications>
           <AppInfosContext.Provider
             value={{ latestStrapiReleaseTag: 'v4', shouldUpdateStrapi: false }}

packages/core/admin/admin/src/translations/languageNativeNames.js

@@ -18,6 +18,7 @@ const languageNativeNames = {
   pt: 'Português (Portugal)',
   ru: 'Русский',
   sk: 'Slovenčina',
+  sv: 'Swedish',
   th: 'ไทย',
   tr: 'Türkçe',
   uk: 'Українська',

packages/core/admin/admin/src/translations/tests/index.test.js

@@ -1,9 +1,15 @@
-import translationMessages, { languageNativeNames } from '../index';
+const fs = require('fs-extra');
+const path = require('path');
+const languageNativeNames = require('../languageNativeNames').default;
+
+const languages = fs
+  .readdirSync(path.join(__dirname, '..'))
+  .filter(file => file.includes('.json'))
+  .map(file => file.replace('.json', ''));
 
 describe('translations', () => {
   describe('languageNativeNames', () => {
     it('should has native name for every locale', () => {
-      const languages = Object.keys(translationMessages);
       languages.forEach(language => {
         expect(typeof languageNativeNames[language] === 'string').toBe(true);
         expect(!!languageNativeNames[language]).toBe(true);