From d68782b7825e327ba6ac6afa88ebcd44a9253733 Mon Sep 17 00:00:00 2001
From: Nonumpa <acerxp511@msn.com>
Date: Wed, 25 May 2022 02:00:30 +0800
Subject: [PATCH] Update tests and snapshots

---
 .../ListPageDisplays/ListPageCards.stories.js |   2 +-
 .../ListPageCards.stories.storyshot           | 216 +++++++++---------
 .../ActionButton.stories.storyshot            |   8 +-
 3 files changed, 119 insertions(+), 107 deletions(-)

diff --git a/components/ListPageDisplays/ListPageCards.stories.js b/components/ListPageDisplays/ListPageCards.stories.js
index f1bb472e..e8d825e8 100644
--- a/components/ListPageDisplays/ListPageCards.stories.js
+++ b/components/ListPageDisplays/ListPageCards.stories.js
@@ -59,7 +59,7 @@ export const ArticleCards = () => (
     <ArticleCard
       article={{
         id: 'id3',
-        attachmentUrl: 'https://mockurl.jpeg',
+        attachmentUrl: 'https://placekitten.com/512/1000',
         replyCount: 6,
         replyRequestCount: 4,
         createdAt: '2020-01-01T00:00:00Z',
diff --git a/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot b/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot
index e26b2ece..3d21652e 100644
--- a/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot
+++ b/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot
@@ -60,47 +60,51 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                 </div>
               </Infos>
               <div
-                className="makeStyles-flex"
+                className="makeStyles-textImageWrapper"
               >
                 <div
-                  className="makeStyles-infoBox"
-                >
-                  <div>
-                    <h2>
-                      3
-                    </h2>
-                    <span>
-                      replies
-                    </span>
-                  </div>
-                  <div>
-                    <h2>
-                      4
-                    </h2>
-                    <span>
-                      reports
-                    </span>
-                  </div>
-                </div>
-                <ExpandableText
-                  className="makeStyles-content"
-                  lineClamp={3}
+                  className="makeStyles-flex"
                 >
                   <div
+                    className="makeStyles-infoBox"
+                  >
+                    <div>
+                      <h2>
+                        3
+                      </h2>
+                      <span>
+                        replies
+                      </span>
+                    </div>
+                    <div>
+                      <h2>
+                        4
+                      </h2>
+                      <span>
+                        reports
+                      </span>
+                    </div>
+                  </div>
+                  <ExpandableText
                     className="makeStyles-content"
+                    lineClamp={3}
                   >
                     <div
-                      className="makeStyles-root"
-                      style={
-                        Object {
-                          "maxHeight": 42,
-                        }
-                      }
+                      className="makeStyles-content"
                     >
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                      <div
+                        className="makeStyles-root"
+                        style={
+                          Object {
+                            "maxHeight": 42,
+                          }
+                        }
+                      >
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                      </div>
                     </div>
-                  </div>
-                </ExpandableText>
+                  </ExpandableText>
+                </div>
               </div>
             </article>
           </ListPageCard>
@@ -173,60 +177,45 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                 </div>
               </Infos>
               <div
-                className="makeStyles-flex"
+                className="makeStyles-textImageWrapper"
               >
                 <div
-                  className="makeStyles-infoBox"
-                >
-                  <div>
-                    <h2>
-                      0
-                    </h2>
-                    <span>
-                      replies
-                    </span>
-                  </div>
-                  <div>
-                    <h2>
-                      999
-                    </h2>
-                    <span>
-                      reports
-                    </span>
-                  </div>
-                </div>
-                <ExpandableText
-                  className="makeStyles-content"
-                  lineClamp={3}
+                  className="makeStyles-flex"
                 >
                   <div
+                    className="makeStyles-infoBox"
+                  >
+                    <div>
+                      <h2>
+                        0
+                      </h2>
+                      <span>
+                        replies
+                      </span>
+                    </div>
+                    <div>
+                      <h2>
+                        999
+                      </h2>
+                      <span>
+                        reports
+                      </span>
+                    </div>
+                  </div>
+                  <ExpandableText
                     className="makeStyles-content"
+                    lineClamp={3}
                   >
                     <div
-                      className="makeStyles-root"
-                      style={
-                        Object {
-                          "maxHeight": 42,
-                        }
-                      }
+                      className="makeStyles-content"
                     >
-                      <mark
-                        className="makeStyles-highlight"
-                        key="highlight-0"
-                      >
-                        Lorem ipsum
-                      </mark>
-                       dolor sit amet, consectetur adipiscing elit. 
-                      <mark
-                        className="makeStyles-highlight"
-                        key="highlight-1"
-                      >
-                        Mauris eu ex augue
-                      </mark>
-                      . Etiam posuere sagittis iaculis. Vestibulum sollicitudin nec felis a mollis. Phasellus ut est velit. Proin fermentum arcu ornare quam vulputate, vel eleifend velit ultrices. Fusce tincidunt vel urna at luctus.
-                      <section
-                        className="makeStyles-hyperlinks"
-                        key="hyperlink-section-0"
+                      <div
+                        className="makeStyles-root"
+                        style={
+                          Object {
+                            "maxHeight": 42,
+                          }
+                        }
                       >
                         <mark
                           className="makeStyles-highlight"
@@ -234,18 +223,37 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                         >
                           Lorem ipsum
                         </mark>
-                         dolor sit amet 
+                         dolor sit amet, consectetur adipiscing elit. 
                         <mark
                           className="makeStyles-highlight"
                           key="highlight-1"
                         >
                           Mauris eu ex augue
                         </mark>
-                        . Etiam posuere sagittis iaculis.
-                      </section>
+                        . Etiam posuere sagittis iaculis. Vestibulum sollicitudin nec felis a mollis. Phasellus ut est velit. Proin fermentum arcu ornare quam vulputate, vel eleifend velit ultrices. Fusce tincidunt vel urna at luctus.
+                        <section
+                          className="makeStyles-hyperlinks"
+                          key="hyperlink-section-0"
+                        >
+                          <mark
+                            className="makeStyles-highlight"
+                            key="highlight-0"
+                          >
+                            Lorem ipsum
+                          </mark>
+                           dolor sit amet 
+                          <mark
+                            className="makeStyles-highlight"
+                            key="highlight-1"
+                          >
+                            Mauris eu ex augue
+                          </mark>
+                          . Etiam posuere sagittis iaculis.
+                        </section>
+                      </div>
                     </div>
-                  </div>
-                </ExpandableText>
+                  </ExpandableText>
+                </div>
               </div>
             </article>
           </ListPageCard>
@@ -255,7 +263,7 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
     <ArticleCard
       article={
         Object {
-          "attachmentUrl": "https://mockurl.jpeg",
+          "attachmentUrl": "https://placekitten.com/512/1000",
           "createdAt": "2020-01-01T00:00:00Z",
           "id": "id3",
           "replyCount": 6,
@@ -307,32 +315,36 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                 </div>
               </Infos>
               <div
-                className="makeStyles-flex"
+                className="makeStyles-textImageWrapper"
               >
                 <div
-                  className="makeStyles-infoBox"
+                  className="makeStyles-flex"
                 >
-                  <div>
-                    <h2>
-                      6
-                    </h2>
-                    <span>
-                      replies
-                    </span>
-                  </div>
-                  <div>
-                    <h2>
-                      4
-                    </h2>
-                    <span>
-                      reports
-                    </span>
+                  <div
+                    className="makeStyles-infoBox"
+                  >
+                    <div>
+                      <h2>
+                        6
+                      </h2>
+                      <span>
+                        replies
+                      </span>
+                    </div>
+                    <div>
+                      <h2>
+                        4
+                      </h2>
+                      <span>
+                        reports
+                      </span>
+                    </div>
                   </div>
                 </div>
                 <img
                   alt="image"
                   className="makeStyles-attachmentImage"
-                  src="https://mockurl.jpeg"
+                  src="https://placekitten.com/512/1000"
                 />
               </div>
             </article>
diff --git a/components/ReportPage/__snapshots__/ActionButton.stories.storyshot b/components/ReportPage/__snapshots__/ActionButton.stories.storyshot
index 0ba4a251..66064c88 100644
--- a/components/ReportPage/__snapshots__/ActionButton.stories.storyshot
+++ b/components/ReportPage/__snapshots__/ActionButton.stories.storyshot
@@ -9,7 +9,7 @@ exports[`Storyshots ReportPage/ActionButton Default 1`] = `
   }
 >
   <button
-    className="MuiButtonBase-root-299 MuiButton-root-272 MuiButton-outlined-277 makeStyles-button"
+    className="MuiButtonBase-root-300 MuiButton-root-273 MuiButton-outlined-278 makeStyles-button"
     disabled={false}
     onBlur={[Function]}
     onDragLeave={[Function]}
@@ -31,13 +31,13 @@ exports[`Storyshots ReportPage/ActionButton Default 1`] = `
     type="button"
   >
     <span
-      className="MuiButton-label-273"
+      className="MuiButton-label-274"
     >
       Action button text
       <Arrow>
         <svg
           aria-hidden={true}
-          className="MuiSvgIcon-root-300"
+          className="MuiSvgIcon-root-301"
           focusable="false"
           viewBox="0 0 14 27"
         >
@@ -51,7 +51,7 @@ exports[`Storyshots ReportPage/ActionButton Default 1`] = `
       </Arrow>
     </span>
     <span
-      className="MuiTouchRipple-root-309"
+      className="MuiTouchRipple-root-310"
     >
       <TransitionGroup
         childFactory={[Function]}