tests for profile module, fix screenshots

.eslintrc.js

@@ -57,6 +57,7 @@ module.exports = {
   globals: {
     __IS_DEV__: true,
     __API__: true,
+    __PROJECT__: true,
   },
   overrides: [
     {

config/build/buildPlugins.ts

@@ -4,7 +4,9 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import { BuildOptions } from './types/config';
 
-export function buildPlugins({ paths, isDev, apiUrl }: BuildOptions): webpack.WebpackPluginInstance[] {
+export function buildPlugins({
+  paths, isDev, apiUrl, project,
+}: BuildOptions): webpack.WebpackPluginInstance[] {
   const plugins = [
     new HtmlWebpackPlugin({
       template: paths.html,
@@ -17,6 +19,7 @@ export function buildPlugins({ paths, isDev, apiUrl }: BuildOptions): webpack.We
     new webpack.DefinePlugin({
       __IS_DEV__: JSON.stringify(isDev),
       __API__: JSON.stringify(apiUrl),
+      __PROJECT__: JSON.stringify(project),
     }),
   ];
 

config/build/types/config.ts

@@ -19,4 +19,5 @@ export interface BuildOptions {
   isDev: boolean;
   port: number;
   apiUrl: string;
+  project: 'storybook' | 'frontend' | 'jest';
 }

config/jest/jest.config.ts

@@ -4,6 +4,7 @@ export default {
   globals: {
     __IS_DEV__: true,
     __API__: '',
+    __PROJECT__: 'jest',
   },
   clearMocks: true,
   testEnvironment: 'jsdom',

config/storybook/webpack.config.ts

@@ -32,6 +32,7 @@ export default ({ config }: {config: webpack.Configuration}) => {
   config!.plugins!.push(new DefinePlugin({
     __IS_DEV__: JSON.stringify(true),
     __API__: JSON.stringify(''),
+    __PROJECT__: JSON.stringify('storybook'),
   }));
 
   return config;

json-server/db.json

@@ -28,9 +28,9 @@
   "profile": {
     "first": "Вероника",
     "lastname": "Кузнецова",
-    "age": "25",
+    "age": 25,
     "currency": "EUR",
-    "country": "Belarus",
+    "country": "Russia",
     "city": "Barnaul",
     "username": "admin",
     "avatar": "https://i.pinimg.com/280x280_RS/ea/9b/b6/ea9bb6e8908b1cd3389733b0503cc8ad.jpg"

public/locales/en/profile.json

@@ -12,5 +12,10 @@
   "username": "Username",
   "avatar": "Avatar",
   "error_loading_profile": "Error when loading a profile",
-  "try_reloading_page": "Try reloading the page"
+  "try_reloading_page": "Try reloading the page",
+  "first_and_last_name_required": "First and last name required",
+  "incorrect_age": "Incorrect age",
+  "specify_country": "Specify country",
+  "no_data_specified": "No data specified",
+  "server_error": "Server error"
 }

public/locales/ru/profile.json

@@ -12,5 +12,10 @@
   "username": "Имя пользователя",
   "avatar": "Аватар",
   "error_loading_profile": "Ошибка при загрузке профиля",
-  "try_reloading_page": "Попробуйте перезагрузить страницу"
+  "try_reloading_page": "Попробуйте перезагрузить страницу",
+  "first_and_last_name_required": "Имя и фамилия обязательны",
+  "incorrect_age": "Некорректный возраст",
+  "specify_country": "Укажите страну",
+  "no_data_specified": "Данные не указаны",
+  "server_error": "Ошибка сервера"
 }

src/app/types/global.d.ts

@@ -18,6 +18,7 @@ declare module '*.svg' {
 
 declare const __IS_DEV__: boolean;
 declare const __API__: string;
+declare const __PROJECT__: 'storybook' | 'frontend' | 'jest';
 
 type DeepPartial<T> = T extends object ? {
   [P in keyof T]?: DeepPartial<T[P]>;

src/entities/Profile/index.ts

@@ -1,6 +1,7 @@
 export {
   Profile,
   ProfileSchema,
+  ValidateProfileError,
 } from './model/types/profile';
 
 export {
@@ -25,3 +26,4 @@ export { getProfileIsLoading } from './model/selectors/getProfileIsLoading/getPr
 export { getProfileError } from './model/selectors/getProfileError/getProfileError';
 export { getProfileReadonly } from './model/selectors/getProfileReadonly/getProfileReadonly';
 export { getProfileForm } from './model/selectors/getProfileForm/getProfileForm';
+export { getProfileValidateErrors } from './model/selectors/getProfileValidateErrors/getProfileValidateErrors';

src/entities/Profile/model/selectors/getProfileData/getProfileData.test.ts

@@ -0,0 +1,28 @@
+import { StateSchema } from 'app/providers/StoreProvider';
+import { Country } from 'entities/Country';
+import { Currency } from 'entities/Currency';
+import { getProfileData } from './getProfileData';
+
+describe('getProfileData.test', () => {
+  test('should return error', () => {
+    const data = {
+      first: 'Veronika',
+      lastname: 'Kuznetsova',
+      age: 25,
+      currency: Currency.USD,
+      country: Country.Russia,
+      city: 'Barnaul',
+      username: 'admin',
+    };
+    const state: DeepPartial<StateSchema> = {
+      profile: {
+        data,
+      },
+    };
+    expect(getProfileData(state as StateSchema)).toEqual(data);
+  });
+  test('should work with empty state', () => {
+    const state: DeepPartial<StateSchema> = {};
+    expect(getProfileData(state as StateSchema)).toEqual(undefined);
+  });
+});

src/entities/Profile/model/selectors/getProfileError/getProfileError.test.ts

@@ -0,0 +1,17 @@
+import { StateSchema } from 'app/providers/StoreProvider';
+import { getProfileError } from './getProfileError';
+
+describe('getProfileError.test', () => {
+  test('should return error', () => {
+    const state: DeepPartial<StateSchema> = {
+      profile: {
+        error: '123',
+      },
+    };
+    expect(getProfileError(state as StateSchema)).toEqual('123');
+  });
+  test('should work with empty state', () => {
+    const state: DeepPartial<StateSchema> = {};
+    expect(getProfileError(state as StateSchema)).toEqual(undefined);
+  });
+});

src/entities/Profile/model/selectors/getProfileForm/getProfileForm.test.ts

@@ -0,0 +1,28 @@
+import { StateSchema } from 'app/providers/StoreProvider';
+import { Country } from 'entities/Country';
+import { Currency } from 'entities/Currency';
+import { getProfileForm } from './getProfileForm';
+
+describe('getProfileForm.test', () => {
+  test('should return error', () => {
+    const data = {
+      first: 'Veronika',
+      lastname: 'Kuznetsova',
+      age: 25,
+      currency: Currency.USD,
+      country: Country.Russia,
+      city: 'Barnaul',
+      username: 'admin',
+    };
+    const state: DeepPartial<StateSchema> = {
+      profile: {
+        form: data,
+      },
+    };
+    expect(getProfileForm(state as StateSchema)).toEqual(data);
+  });
+  test('should work with empty state', () => {
+    const state: DeepPartial<StateSchema> = {};
+    expect(getProfileForm(state as StateSchema)).toEqual(undefined);
+  });
+});

src/entities/Profile/model/selectors/getProfileIsLoading/getProfileIsLoading.test.ts

@@ -0,0 +1,17 @@
+import { StateSchema } from 'app/providers/StoreProvider';
+import { getProfileIsLoading } from './getProfileIsLoading';
+
+describe('getProfileIsLoading.test', () => {
+  test('should work with filled state', () => {
+    const state: DeepPartial<StateSchema> = {
+      profile: {
+        isLoading: true,
+      },
+    };
+    expect(getProfileIsLoading(state as StateSchema)).toEqual(true);
+  });
+  test('should work with empty state', () => {
+    const state: DeepPartial<StateSchema> = {};
+    expect(getProfileIsLoading(state as StateSchema)).toEqual(undefined);
+  });
+});

src/entities/Profile/model/selectors/getProfileReadonly/getProfileReadonly.test.ts

@@ -0,0 +1,17 @@
+import { StateSchema } from 'app/providers/StoreProvider';
+import { getProfileReadonly } from './getProfileReadonly';
+
+describe('getProfileReadonly.test', () => {
+  test('should work with filled state', () => {
+    const state: DeepPartial<StateSchema> = {
+      profile: {
+        readonly: true,
+      },
+    };
+    expect(getProfileReadonly(state as StateSchema)).toEqual(true);
+  });
+  test('should work with empty state', () => {
+    const state: DeepPartial<StateSchema> = {};
+    expect(getProfileReadonly(state as StateSchema)).toEqual(undefined);
+  });
+});

src/entities/Profile/model/selectors/getProfileValidateErrors/getProfileValidateErrors.test.ts

@@ -0,0 +1,24 @@
+import { StateSchema } from 'app/providers/StoreProvider';
+import { ValidateProfileError } from 'entities/Profile';
+import { getProfileValidateErrors } from './getProfileValidateErrors';
+
+describe('getProfileValidateErrors.test', () => {
+  test('should work with filled state', () => {
+    const state: DeepPartial<StateSchema> = {
+      profile: {
+        validateErrors: [
+          ValidateProfileError.SERVER_ERROR,
+          ValidateProfileError.INCORRECT_AGE,
+        ],
+      },
+    };
+    expect(getProfileValidateErrors(state as StateSchema)).toEqual([
+      ValidateProfileError.SERVER_ERROR,
+      ValidateProfileError.INCORRECT_AGE,
+    ]);
+  });
+  test('should work with empty state', () => {
+    const state: DeepPartial<StateSchema> = {};
+    expect(getProfileValidateErrors(state as StateSchema)).toEqual(undefined);
+  });
+});

src/entities/Profile/model/selectors/getProfileValidateErrors/getProfileValidateErrors.ts

@@ -0,0 +1,3 @@
+import { StateSchema } from 'app/providers/StoreProvider';
+
+export const getProfileValidateErrors = (state: StateSchema) => state.profile?.validateErrors;

src/entities/Profile/model/services/fetchProfileData/fetchProfileData.test.ts

@@ -0,0 +1,35 @@
+import { TestAsyncThunk } from 'shared/lib/tests/TestAsyncThunk/TestAsyncThunk';
+import { Country } from 'entities/Country';
+import { Currency } from 'entities/Currency';
+import { fetchProfileData } from './fetchProfileData';
+
+const data = {
+  first: 'Veronika',
+  lastname: 'Kuznetsova',
+  age: 25,
+  currency: Currency.USD,
+  country: Country.Russia,
+  city: 'Barnaul',
+  username: 'admin',
+};
+
+describe('fetchProfileData.test', () => {
+  test('success', async () => {
+    const thunk = new TestAsyncThunk(fetchProfileData);
+    thunk.api.get.mockReturnValue(Promise.resolve({ data }));
+
+    const result = await thunk.callThunk();
+
+    expect(thunk.api.get).toHaveBeenCalled();
+    expect(result.meta.requestStatus).toBe('fulfilled');
+    expect(result.payload).toEqual(data);
+  });
+
+  test('error login', async () => {
+    const thunk = new TestAsyncThunk(fetchProfileData);
+    thunk.api.get.mockReturnValue(Promise.resolve({ status: 403 }));
+    const result = await thunk.callThunk();
+
+    expect(result.meta.requestStatus).toBe('rejected');
+  });
+});

src/entities/Profile/model/services/updateProfileData/updateProfileData.test.ts

@@ -0,0 +1,63 @@
+import { TestAsyncThunk } from 'shared/lib/tests/TestAsyncThunk/TestAsyncThunk';
+import { Country } from 'entities/Country';
+import { Currency } from 'entities/Currency';
+import { ValidateProfileError } from 'entities/Profile';
+import { updateProfileData } from './updateProfileData';
+
+const data = {
+  first: 'Veronika',
+  lastname: 'Kuznetsova',
+  age: 25,
+  currency: Currency.USD,
+  country: Country.Russia,
+  city: 'Barnaul',
+  username: 'admin',
+};
+
+describe('updateProfileData.test', () => {
+  test('success', async () => {
+    const thunk = new TestAsyncThunk(updateProfileData, {
+      profile: {
+        form: data,
+      },
+    });
+
+    thunk.api.put.mockReturnValue(Promise.resolve({ data }));
+
+    const result = await thunk.callThunk();
+
+    expect(thunk.api.put).toHaveBeenCalled();
+    expect(result.meta.requestStatus).toBe('fulfilled');
+    expect(result.payload).toEqual(data);
+  });
+
+  test('error', async () => {
+    const thunk = new TestAsyncThunk(updateProfileData, {
+      profile: {
+        form: data,
+      },
+    });
+    thunk.api.put.mockReturnValue(Promise.resolve({ status: 403 }));
+
+    const result = await thunk.callThunk();
+
+    expect(result.meta.requestStatus).toBe('rejected');
+    expect(result.payload).toEqual([
+      ValidateProfileError.SERVER_ERROR,
+    ]);
+  });
+
+  test('validate error', async () => {
+    const thunk = new TestAsyncThunk(updateProfileData, {
+      profile: {
+        form: { ...data, first: '' },
+      },
+    });
+    const result = await thunk.callThunk();
+
+    expect(result.meta.requestStatus).toBe('rejected');
+    expect(result.payload).toEqual([
+      ValidateProfileError.INCORRECT_USER_DATA,
+    ]);
+  });
+});

src/entities/Profile/model/services/updateProfileData/updateProfileData.ts

@@ -1,26 +1,35 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
 import { ThunkConfig } from 'app/providers/StoreProvider';
-import { Profile } from '../../types/profile';
+import { Profile, ValidateProfileError } from '../../types/profile';
 import { getProfileForm } from '../../selectors/getProfileForm/getProfileForm';
+import { validateProfileData } from '../validateProfileData/validateProfileData';
 
 export const updateProfileData = createAsyncThunk<
   Profile,
   void,
-  ThunkConfig<string>
+  ThunkConfig<ValidateProfileError[]>
 >(
   'profile/updateProfileData',
   async (_, thunkApi) => {
     const { extra, rejectWithValue, getState } = thunkApi;
 
     const formData = getProfileForm(getState());
+    const errors = validateProfileData(formData);
+    if (errors.length) {
+      return rejectWithValue(errors);
+    }
 
     try {
       const response = await extra.api.put<Profile>('/profile', formData);
 
+      if (!response.data) {
+        throw new Error();
+      }
+
       return response.data;
     } catch (e) {
       console.log(e);
-      return rejectWithValue('error');
+      return rejectWithValue([ValidateProfileError.SERVER_ERROR]);
     }
   },
 );