Fix locale switcher and cover it with e2e

packages/app/components/languageSwitcher/LanguageList.tsx

@@ -36,7 +36,7 @@ export default class LanguageList extends React.Component<{
         willEnter={this.willEnter}
       >
         {items => (
-          <div className={styles.languagesList}>
+          <div className={styles.languagesList} data-testid="language-list">
             <div
               className={clsx(styles.emptyLanguagesListWrapper, {
                 [styles.emptyLanguagesListVisible]: isListEmpty,

packages/app/components/languageSwitcher/LanguageSwitcher.tsx

@@ -62,7 +62,11 @@ class LanguageSwitcher extends React.Component<
     const { filteredLangs } = this.state;
 
     return (
-      <div className={styles.languageSwitcher}>
+      <div
+        className={styles.languageSwitcher}
+        data-testid="language-switcher"
+        data-e2e-active-locale={selectedLocale}
+      >
         <div className={popupStyles.popup}>
           <div className={popupStyles.header}>
             <h2 className={popupStyles.headerTitle}>

packages/app/components/profile/Profile.tsx

@@ -26,7 +26,7 @@ class Profile extends React.Component<Props> {
     const { user, interfaceLocale } = this.props;
 
     return (
-      <div>
+      <div data-testid="profile-index">
         <Message {...messages.accountPreferencesTitle}>
           {(pageTitle: string) => (
             <h2 className={styles.indexTitle}>

packages/webpack-utils/intl-loader.js

@@ -7,7 +7,7 @@ function transform(src, modulePath, rootContext) {
     // TODO: can't find the way to strip out this path part programmatically
     // this is a directory from resolve.modules config
     // may be this may work: .replace(this._compiler.options.resolve.root, '')
-    .replace('src/', '')
+    .replace('packages/app/', '')
     .replace(/^\/|\/$/g, '')
     .replace(/\//g, '.');
 

tests-e2e/cypress/integration/profile/i18n.test.ts

@@ -0,0 +1,75 @@
+describe('Change locales', () => {
+  it('should change locale from footer', () => {
+    cy.visit('/');
+
+    cy.getByTestId('footer')
+      .contains('Site language')
+      .click();
+
+    cy.getByTestId('language-switcher').should('be.visible');
+    cy.getByTestId('language-switcher').should(
+      'have.attr',
+      'data-e2e-active-locale',
+      'en',
+    );
+
+    cy.getByTestId('language-list')
+      .contains('Belarusian')
+      .click();
+
+    cy.getByTestId('language-switcher').should('not.be.visible');
+
+    cy.getByTestId('footer')
+      .contains('Мова сайта')
+      .click();
+
+    cy.getByTestId('language-switcher').should('be.visible');
+    cy.getByTestId('language-switcher').should(
+      'have.attr',
+      'data-e2e-active-locale',
+      'be',
+    );
+
+    cy.getByTestId('language-list')
+      .contains('English')
+      .click();
+
+    cy.getByTestId('language-switcher').should('not.be.visible');
+    cy.getByTestId('footer').should('contain', 'Site language');
+  });
+
+  it('should change locale from profile', () => {
+    cy.login({ accounts: ['default'] }).then(({ accounts: [account] }) => {
+      cy.server();
+      cy.route({
+        method: 'POST',
+        url: `/api/v1/accounts/${account.id}/language`,
+        response: { success: true },
+      }).as('language');
+    });
+
+    cy.visit('/');
+
+    cy.getByTestId('profile-index')
+      .contains('English')
+      .click();
+
+    cy.getByTestId('language-switcher').should('be.visible');
+    cy.getByTestId('language-switcher').should(
+      'have.attr',
+      'data-e2e-active-locale',
+      'en',
+    );
+
+    cy.getByTestId('language-list')
+      .contains('Belarusian')
+      .click();
+
+    cy.wait('@language')
+      .its('requestBody')
+      .should('eq', 'lang=be');
+
+    cy.getByTestId('language-switcher').should('not.be.visible');
+    cy.getByTestId('profile-index').should('contain', 'Беларуская');
+  });
+});