feat: add articles, article details page e2e cypress tests

TomatoVan · Apr 1, 2024 · ce8c139 · ce8c139
1 parent 8873745
commit ce8c139
Show file tree

Hide file tree

Showing 13 changed files with 176 additions and 14 deletions.
diff --git a/cypress/e2e/articles/article-details.cy.ts b/cypress/e2e/articles/article-details.cy.ts
@@ -1,5 +1,32 @@
-describe('empty spec', () => {
-    it('passes', () => {
-        cy.visit('https://example.cypress.io');
+let currentArticleId = '';
+describe('to article details page', () => {
+    beforeEach(() => {
+        cy.login();
+        cy.createArticle().then((article) => {
+            currentArticleId = article.id;
+            cy.visit(`articles/${article.id}`);
+        });
+    });
+    // Add new article - test everything - delete article
+    afterEach(() => {
+        cy.removeArticle(currentArticleId);
+    });
+    it('article details page loaded', () => {
+        cy.getByTestId('ArticlesDetails.Info').should('exist');
+    });
+    it('article details recommendations list loaded', () => {
+        cy.getByTestId('ArticleRecommendationsList').should('exist');
+    });
+    it('article details comments list', () => {
+        cy.getByTestId('ArticlesDetails.Info');
+        cy.getByTestId('AddCommentForm').scrollIntoView();
+        cy.addComment('text');
+        cy.getByTestId('CommentCard.Content').should('have.length', 1);
+    });
+    it('article details rating', () => {
+        cy.getByTestId('ArticlesDetails.Info');
+        cy.getByTestId('RatingCard').scrollIntoView();
+        cy.setRate(3, 'feedback test');
+        cy.get('[data-selected=true]').should('have.length', 3);
     });
 });
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -1,7 +1,13 @@
 import * as commonCommands from './commands/common';
 import * as profileCommands from './commands/profile';
+import * as articleCommands from './commands/article';
+import * as commentsCommands from './commands/comments';
+import * as ratingCommands from './commands/rating';
 
 Cypress.Commands.addAll(commonCommands);
 Cypress.Commands.addAll(profileCommands);
+Cypress.Commands.addAll(articleCommands);
+Cypress.Commands.addAll(commentsCommands);
+Cypress.Commands.addAll(ratingCommands);
 
 export {};
diff --git a/cypress/support/commands/article.ts b/cypress/support/commands/article.ts
@@ -0,0 +1,37 @@
+import { Article } from '../../../src/entities/Article';
+
+const defaultArticle = {
+    title: 'TESTING ARTICLE',
+    subtitle: 'Subtitle text',
+    img: 'https://avatars.mds.yandex.net/get-zen_doc/2746556/pub_5f50dd'
+        + '7e1a1ddf4776aa5569_5f50decd2506f211d1de6284/scale_1200',
+    views: 1022,
+    createdAt: '26.02.2022',
+    userId: '1',
+    type: [
+        'SCIENCE',
+    ],
+    blocks: [],
+};
+
+export const createArticle = (article?: Article) => cy.request({
+    method: 'POST',
+    url: 'http://localhost:8000/articles',
+    headers: { Authorization: 'asasf' },
+    body: article ?? defaultArticle,
+}).then((resp) => resp.body);
+
+export const removeArticle = (articleId: string) => cy.request({
+    method: 'DELETE',
+    url: `http://localhost:8000/articles/${articleId}`,
+    headers: { Authorization: 'asasf' },
+});
+
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            createArticle(article?: Article): Chainable<Article>;
+            removeArticle(articleId: string): Chainable<void>;
+        }
+    }
+}
diff --git a/cypress/support/commands/comments.ts b/cypress/support/commands/comments.ts
@@ -0,0 +1,12 @@
+export const addComment = (text: string) => {
+    cy.getByTestId('AddCommentForm.Input').type(text);
+    cy.getByTestId('AddCommentForm.Button').click();
+};
+
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            addComment(text: string): Chainable<void>;
+        }
+    }
+}
diff --git a/cypress/support/commands/rating.ts b/cypress/support/commands/rating.ts
@@ -0,0 +1,13 @@
+export const setRate = (starsCount = 5, feedback = 'feedback') => {
+    cy.getByTestId(`StarRating.${starsCount}`).click();
+    cy.getByTestId('RatingCard.Input').type(feedback);
+    cy.getByTestId('RatingCard.Send').click();
+};
+
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            setRate(starsCount: number, feedback: string): Chainable<void>;
+        }
+    }
+}
diff --git a/json-server/db.json b/json-server/db.json
@@ -563,6 +563,32 @@
       ],
       "blocks": [],
       "id": "6f91vPH"
+    },
+    {
+      "title": "TESTING ARTICLE",
+      "subtitle": "Subtitle text",
+      "img": "https://avatars.mds.yandex.net/get-zen_doc/2746556/pub_5f50dd7e1a1ddf4776aa5569_5f50decd2506f211d1de6284/scale_1200",
+      "views": 1022,
+      "createdAt": "26.02.2022",
+      "userId": "1",
+      "type": [
+        "SCIENCE"
+      ],
+      "blocks": [],
+      "id": "y1D5B71"
+    },
+    {
+      "title": "TESTING ARTICLE",
+      "subtitle": "Subtitle text",
+      "img": "https://avatars.mds.yandex.net/get-zen_doc/2746556/pub_5f50dd7e1a1ddf4776aa5569_5f50decd2506f211d1de6284/scale_1200",
+      "views": 1022,
+      "createdAt": "26.02.2022",
+      "userId": "1",
+      "type": [
+        "SCIENCE"
+      ],
+      "blocks": [],
+      "id": "3u59urr"
     }
   ],
   "comments": [

diff --git a/src/entities/Article/ui/ArticleDetails/ArticleDetails.tsx b/src/entities/Article/ui/ArticleDetails/ArticleDetails.tsx
@@ -108,7 +108,7 @@ export const ArticleDetails = memo(({ className, id }: ArticleDetailsProps) => {
                         className={cls.avatar}
                     />
                 </HStack>
-                <VStack gap="4" max>
+                <VStack gap="4" max data-testid="ArticlesDetails.Info">
                     <Text
                         className={cls.title}
                         size={TextSize.L}

diff --git a/src/entities/Comment/ui/CommentCard/CommentCard.tsx b/src/entities/Comment/ui/CommentCard/CommentCard.tsx
@@ -21,14 +21,19 @@ export const CommentCard = memo(({ className, comment, isLoading }: CommentCardP
 
     if (isLoading) {
         return (
-            <div className={classNames(cls.CommentCard, {}, [className, cls.loading])}>
+            <VStack
+                data-testid="CommentCard.Loading"
+                gap="8"
+                max
+                className={classNames(cls.CommentCard, {}, [className, cls.loading])}
+            >
                 <div className={cls.header}>
                     <Skeleton width={30} height={30} border="50%" />
                     <Skeleton width={100} height={16} className={cls.username} />
                 </div>
                 <Skeleton height={50} width="100%" className={cls.text} />
 
-            </div>
+            </VStack>
         );
     }
 
@@ -37,7 +42,12 @@ export const CommentCard = memo(({ className, comment, isLoading }: CommentCardP
     }
 
     return (
-        <VStack max gap="8" className={classNames(cls.CommentCard, {}, [className])}>
+        <VStack
+            data-testid="CommentCard.Content"
+            max
+            gap="8"
+            className={classNames(cls.CommentCard, {}, [className])}
+        >
             <AppLink to={getRouteProfile(comment.user.id)} className={cls.header}>
                 {comment.user.avatar && <Avatar src={comment.user.avatar} alt={comment.user.username} size={30} />}
                 <Text className={cls.username} title={comment.user.username} />

diff --git a/src/entities/Rating/ui/RatingCard.tsx b/src/entities/Rating/ui/RatingCard.tsx
@@ -61,6 +61,7 @@ export const RatingCard = memo((props: RatingCardProps) => {
                 title={feedbackTitle}
             />
             <Input
+                data-testid="RatingCard.Input"
                 value={feedback}
                 onChange={setFeedback}
                 placeholder={t('Ваш отзыв')}
@@ -69,7 +70,11 @@ export const RatingCard = memo((props: RatingCardProps) => {
     );
 
     return (
-        <Card max className={classNames('', {}, [className])}>
+        <Card
+            data-testid="RatingCard"
+            max
+            className={classNames('', {}, [className])}
+        >
             <VStack align="center" gap="8" max>
                 <Text title={starsCount ? t('Thanks for review!') : title} />
                 <StarRating selectedStars={starsCount} size={40} onSelect={onSelectStars} />
@@ -79,10 +84,17 @@ export const RatingCard = memo((props: RatingCardProps) => {
                     <VStack max gap="32">
                         {modalContent}
                         <HStack max gap="16" justify="between">
-                            <Button onClick={cancelHandle} theme={ButtonTheme.OUTLINE_RED}>
+                            <Button
+                                data-testid="RatingCard.Close"
+                                onClick={cancelHandle}
+                                theme={ButtonTheme.OUTLINE_RED}
+                            >
                                 {t('Закрыть')}
                             </Button>
-                            <Button onClick={acceptHandle}>
+                            <Button
+                                data-testid="RatingCard.Send"
+                                onClick={acceptHandle}
+                            >
                                 {t('Отправить')}
                             </Button>
                         </HStack>

diff --git a/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.tsx b/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.tsx
@@ -51,14 +51,21 @@ const AddCommentForm = memo((props: AddCommentFormProps) => {
 
     return (
         <DynamicModuleLoader reducers={reducers}>
-            <HStack justify="between" max className={classNames(cls.AddCommentForm, {}, [className])}>
+            <HStack
+                data-testid="AddCommentForm"
+                justify="between"
+                max
+                className={classNames(cls.AddCommentForm, {}, [className])}
+            >
                 <Input
+                    data-testid="AddCommentForm.Input"
                     value={text}
                     placeholder={t('Enter comment text')}
                     className={cls.input}
                     onChange={onCommentTextChange}
                 />
                 <Button
+                    data-testid="AddCommentForm.Button"
                     theme={ButtonTheme.OUTLINE}
                     onClick={onSendHandler}
                 >

diff --git a/...s/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx b/...s/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx
@@ -20,7 +20,12 @@ export const ArticleRecommendationsList = memo((props: ArticleRecommendationsLis
     }
 
     return (
-        <VStack gap="16" max className={classNames('', {}, [className])}>
+        <VStack
+            data-testid="ArticleRecommendationsList"
+            gap="16"
+            max
+            className={classNames('', {}, [className])}
+        >
             <Text
                 size={TextSize.L}
                 title={t('Recommend')}

diff --git a/src/shared/ui/Stack/Flex/Flex.tsx b/src/shared/ui/Stack/Flex/Flex.tsx
@@ -53,6 +53,7 @@ export const Flex = (props: FlexProps) => {
         direction = 'row',
         gap,
         max,
+        ...otherProps
     } = props;
 
     const classes = [
@@ -68,7 +69,7 @@ export const Flex = (props: FlexProps) => {
     };
 
     return (
-        <div className={classNames(cls.Flex, mods, classes)}>
+        <div className={classNames(cls.Flex, mods, classes)} {...otherProps}>
             {children}
         </div>
     );

diff --git a/src/shared/ui/StarRating/StarRating.tsx b/src/shared/ui/StarRating/StarRating.tsx
@@ -48,14 +48,20 @@ export const StarRating = memo((props: StarRatingProps) => {
         <div className={classNames(cls.StarRating, {}, [className])}>
             {stars.map((starNumber) => (
                 <Icon
-                    className={classNames(cls.StarIcon, { [cls.selected]: isSelected }, [currentStarsCount >= starNumber ? cls.hovered : cls.normal])}
+                    className={classNames(
+                        cls.StarIcon,
+                        { [cls.selected]: isSelected },
+                        [currentStarsCount >= starNumber ? cls.hovered : cls.normal],
+                    )}
                     Svg={StarIcon}
                     key={starNumber}
                     width={size}
                     height={size}
                     onMouseLeave={onLeave}
                     onMouseEnter={() => onHover(starNumber)}
                     onClick={() => onClick(starNumber)}
+                    data-testid={`StarRating.${starNumber}`}
+                    data-selected={currentStarsCount >= starNumber}
 
                 />
             ))}