Fix virtaulized and add rtl tests

package.json

@@ -49,6 +49,7 @@
         "@swc/core": "^1.15.11",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^12.1.3",
+        "@testing-library/user-event": "^14.6.1",
         "@testplane/storybook": "^1.7.4",
         "@testplane/testing-library": "^1.0.2",
         "@types/jest": "^30.0.0",

src/entities/Article/ui/ArticleList/ArticleList.tsx

@@ -15,6 +15,7 @@ interface ArticleListProps {
     isLoading?: boolean;
     view?: ArticleView;
     target?: HTMLAttributeAnchorTarget;
+    virtualized?: boolean;
 }
 
 const CARD_WIDTH = 250;
@@ -36,6 +37,7 @@ export const ArticleList = ({
     isLoading,
     view = ArticleView.LIST,
     target,
+    virtualized,
 }: ArticleListProps) => {
     const { t } = useTranslation('article');
     const [containerWidth, setContainerWidth] = useState(0);
@@ -132,18 +134,30 @@ export const ArticleList = ({
                             cls[view],
                         ])}
                     >
-                        <List
-                            key={itemsPerRow}
-                            autoHeight
-                            isScrolling={isScrolling}
-                            scrollTop={scrollTop}
-                            onScroll={onChildScroll}
-                            height={height ?? 700}
-                            rowCount={rowCount}
-                            rowHeight={isBig ? 700 : 330}
-                            rowRenderer={rowRendererArticle}
-                            width={width ? width - 80 : 700}
-                        />
+                        {virtualized ? (
+                            <List
+                                key={itemsPerRow}
+                                autoHeight
+                                isScrolling={isScrolling}
+                                scrollTop={scrollTop}
+                                onScroll={onChildScroll}
+                                height={height ?? 700}
+                                rowCount={rowCount}
+                                rowHeight={isBig ? 700 : 330}
+                                rowRenderer={rowRendererArticle}
+                                width={width ? width - 80 : 700}
+                            />
+                        ) : (
+                            articles.map((item) => (
+                                <ArticleListItem
+                                    key={item.id}
+                                    article={item}
+                                    view={view}
+                                    className={cls.card}
+                                    target={target}
+                                />
+                            ))
+                        )}
                         {isLoading && getSkeletons(view)}
                     </div>
                 );

src/entities/Profile/ui/ProfileCard/ProfileCard.tsx

@@ -103,19 +103,22 @@ export const ProfileCard = ({
                 placeholder={t('Your name')}
                 readOnly={readonly}
                 onChange={onChangeFirstname}
+                data-testid="ProfileCard.firstname"
             />
             <Input
                 value={data?.lastname || ''}
                 placeholder={t('Your lastname')}
                 readOnly={readonly}
                 onChange={onChangeLastname}
+                data-testid="ProfileCard.lastname"
             />
             <Input
                 value={data?.age}
                 placeholder={t('Your age')}
                 readOnly={readonly}
                 onChange={onChangeAge}
                 onKeyPress={onKeyPress}
+                data-testid="ProfileCard.age"
             />
             <Input
                 value={data?.city || ''}

src/features/ArticleRecommendationsList/api/articleRecommendationsApi.ts

@@ -1,8 +1,9 @@
+import { Article } from 'entities/Article';
 import { rtkApi } from 'shared/api/rtkApi';
 
 const recommendationsApi = rtkApi.injectEndpoints({
     endpoints: (build) => ({
-        getArticleRecommendationsList: build.query({
+        getArticleRecommendationsList: build.query<Article[], number>({
             query: (limit) => ({
                 url: 'articles',
                 params: {

src/features/ArticleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx

@@ -26,11 +26,11 @@ export const ArticleRecommendationsList = memo(
         } = getArticleRecommendationsList(getRandomNumber());
 
         if (isLoading) {
-            <Loader />;
+            return <Loader />;
         }
 
-        if (error) {
-            <Text text={t('Error')} />;
+        if (error || !articles) {
+            return <Text text={t('Error')} />;
         }
 
         return (
@@ -41,6 +41,7 @@ export const ArticleRecommendationsList = memo(
                     articles={articles}
                     isLoading={isLoading}
                     target="_blank"
+                    virtualized={false}
                 />
             </VStack>
         );

src/features/EditableProfileCard/ui/EditableProfileCard/EditableProfileCard.test.tsx

@@ -0,0 +1,130 @@
+import { componentRender } from 'shared/lib/tests/componentRouter/componentRouter';
+import { Profile } from 'entities/Profile';
+import { Currency } from 'entities/Currency';
+import { Country } from 'entities/Country';
+import { userEvent } from '@testing-library/user-event';
+import { screen } from '@testing-library/react';
+import { $api } from 'shared/api/api';
+import { profileReducer } from '../../model/slices/profileSlice';
+import { EditableProfileCard } from './EditableProfileCard';
+
+const profile: Profile = {
+    id: '1',
+    firstname: 'admin',
+    lastname: 'admin',
+    age: 22,
+    currency: Currency.EUR,
+    country: Country.Belarus,
+    city: 'Minsk',
+    username: 'adminchik',
+};
+
+const options = {
+    initialState: {
+        profile: {
+            readonly: true,
+            data: profile,
+            form: profile,
+        },
+        user: {
+            authData: {
+                id: '1',
+                username: 'admin',
+            },
+        },
+    },
+    asyncReducers: {
+        profile: profileReducer,
+    },
+};
+
+describe('features/EditableProfileCard', () => {
+    beforeEach(() => componentRender(<EditableProfileCard id="1" />, options));
+
+    test('Should be Edit mode form', async () => {
+        await userEvent.click(
+            screen.getByTestId('EditableProfileCardHeader.EditButton'),
+        );
+        expect(screen.getByTestId('EditableProfileCardHeader.CancelButton'));
+    });
+
+    test('Reset data in the form when click cancel button', async () => {
+        await userEvent.click(
+            screen.getByTestId('EditableProfileCardHeader.EditButton'),
+        );
+
+        // Clear the data in inputs
+        await userEvent.clear(screen.getByTestId('ProfileCard.firstname'));
+        await userEvent.clear(screen.getByTestId('ProfileCard.lastname'));
+        await userEvent.clear(screen.getByTestId('ProfileCard.age'));
+
+        // Type the another data in inputs
+        await userEvent.type(
+            screen.getByTestId('ProfileCard.firstname'),
+            'user',
+        );
+        await userEvent.type(
+            screen.getByTestId('ProfileCard.lastname'),
+            'user',
+        );
+        await userEvent.type(screen.getByTestId('ProfileCard.age'), '20');
+
+        // Check the another data in inputs
+        expect(screen.getByTestId('ProfileCard.firstname')).toHaveValue('user');
+        expect(screen.getByTestId('ProfileCard.lastname')).toHaveValue('user');
+        expect(screen.getByTestId('ProfileCard.age')).toHaveValue('20');
+
+        // Click the cancel button for reset another data in inputs
+        await userEvent.click(
+            screen.getByTestId('EditableProfileCardHeader.CancelButton'),
+        );
+
+        // And check the initialdatas in inputs
+        expect(screen.getByTestId('ProfileCard.firstname')).toHaveValue(
+            profile.firstname,
+        );
+        expect(screen.getByTestId('ProfileCard.lastname')).toHaveValue(
+            profile.lastname,
+        );
+        expect(screen.getByTestId('ProfileCard.age')).toHaveValue(
+            String(profile.age),
+        );
+    });
+
+    test('Should be display error', async () => {
+        await userEvent.click(
+            screen.getByTestId('EditableProfileCardHeader.EditButton'),
+        );
+
+        await userEvent.clear(screen.getByTestId('ProfileCard.firstname'));
+
+        expect(screen.getByTestId('ProfileCard.firstname')).toHaveValue('');
+
+        await userEvent.click(
+            screen.getByTestId('EditableProfileCardHeader.SaveButton'),
+        );
+
+        expect(
+            screen.getByTestId('EditableProfileCard.Error.Paragraph'),
+        ).toBeInTheDocument();
+    });
+
+    test('Put request method for success data', async () => {
+        const mockPutrequest = jest.spyOn($api, 'put');
+
+        await userEvent.click(
+            screen.getByTestId('EditableProfileCardHeader.EditButton'),
+        );
+
+        await userEvent.type(
+            screen.getByTestId('ProfileCard.firstname'),
+            'user',
+        );
+
+        await userEvent.click(
+            screen.getByTestId('EditableProfileCardHeader.SaveButton'),
+        );
+
+        expect(mockPutrequest).toHaveBeenCalled();
+    });
+});

src/features/EditableProfileCard/ui/EditableProfileCard/EditableProfileCard.tsx

@@ -140,6 +140,7 @@ export const EditableProfileCard = memo(
                                 key={error}
                                 theme={TextTheme.ERROR}
                                 text={validateErrorTranslates[error]}
+                                data-testid="EditableProfileCard.Error"
                             />
                         ))}
                     <ProfileCard