567-refactor: Widget support (#684)

* refactor: 567 - change styles to modules

* refactor: 567 - change class names and replace tag selectors

* refactor: 567 - add semantic tags

* refactor: 567 - add descriptive alt attribute

* refactor: 567 - move test file to the ui folder

* refactor: 567 - update tests

* refactor: 567 - change styles

* refactor: 567 - change data-testid

src/widgets/support/ui/support.scss → src/widgets/support/ui/support.module.scss

@@ -1,35 +1,28 @@
-.support {
-  &.container {
-    background-color: $color-gray-100;
-  }
+.support-container {
+  background-color: $color-gray-100;
 
-  &.content {
+  .support-content {
     display: flex;
-    flex-direction: row;
     gap: 50px;
-    align-items: flex-start;
+    align-items: center;
     justify-content: space-between;
 
-    & .info {
+    .support-info {
       width: 640px;
       font-weight: 500;
       color: $color-black;
       text-align: left;
 
-      a {
+      .support-link {
         margin-top: 24px;
-
-        @include media-tablet {
-          margin-bottom: 24px;
-        }
       }
 
       @include media-laptop {
         width: 100%;
       }
     }
 
-    & .picture {
+    .sloth-mascot {
       width: 348px;
       height: 288px;
 
@@ -40,7 +33,6 @@
       @include media-laptop {
         width: 300px;
         height: auto;
-        margin-top: 16px;
         object-fit: contain;
       }
 
@@ -51,8 +43,7 @@
 
     @include media-tablet-large {
       flex-direction: column;
-      gap: 0;
-      align-items: center;
+      gap: 40px;
     }
   }
 }

src/widgets/support/ui/support.test.tsx

@@ -0,0 +1,44 @@
+import { screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Support } from './support';
+import { renderWithRouter } from '@/shared/__tests__/utils';
+import supportImg from '@/shared/assets/support.webp';
+
+describe('Support Component', () => {
+  const mockedData = {
+    titleText: 'Support Us',
+    firstParagraphText:
+      /Your donations help us cover hosting, domains, licenses, and advertising for courses and events./i,
+    secondParagraphText: 'Thank you for your support!',
+    href: 'https://opencollective.com/rsschool',
+    image: supportImg,
+    alt: 'A sloth mascot with a piggy bank in his hands',
+  };
+
+  const { titleText, firstParagraphText, secondParagraphText, href, image, alt } = mockedData;
+
+  it('renders the component content correctly', () => {
+    renderWithRouter(<Support />);
+    const supportSection = screen.getByTestId('support-section');
+    const title = screen.getByTestId('widget-title');
+    const paragraphs = screen.getAllByTestId('paragraph');
+    const link = screen.getByTestId('link-support');
+    const slothImage = screen.getByTestId('sloth-mascot');
+
+    expect(supportSection).toBeVisible();
+    expect(title).toBeVisible();
+    paragraphs.forEach((paragraph) => {
+      expect(paragraph).toBeVisible();
+    });
+    expect(link).toBeVisible();
+    expect(slothImage).toBeVisible();
+
+    expect(title).toHaveTextContent(titleText);
+    expect(paragraphs[0]).toHaveTextContent(firstParagraphText);
+    expect(paragraphs[1]).toHaveTextContent(secondParagraphText);
+
+    expect(link).toHaveAttribute('href', href);
+    expect(slothImage).toHaveAttribute('src', image.src);
+    expect(slothImage).toHaveAttribute('alt', alt);
+  });
+});

src/widgets/support/ui/support.tsx

@@ -1,16 +1,19 @@
+import classNames from 'classnames/bind';
 import Image from 'next/image';
 import { LINKS } from '@/core/const';
 import image from '@/shared/assets/support.webp';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { WidgetTitle } from '@/shared/ui/widget-title';
 
-import './support.scss';
+import styles from './support.module.scss';
+
+const cx = classNames.bind(styles);
 
 export const Support = () => (
-  <div className="support container">
-    <div className="support content">
-      <div className="info">
+  <section className={cx('support-container', 'container')} data-testid="support-section">
+    <div className={cx('support-content', 'content')}>
+      <article className={cx('support-info')}>
         <WidgetTitle size="large" mods="lines">
           Support Us
         </WidgetTitle>
@@ -19,11 +22,22 @@ export const Support = () => (
           events. Every donation, big or small, helps!
         </Paragraph>
         <Paragraph fontSize="large">Thank you for your support!</Paragraph>
-        <LinkCustom href={LINKS.DONATE} variant="primary" external>
+        <LinkCustom
+          className={cx('support-link')}
+          href={LINKS.DONATE}
+          variant="primary"
+          external
+          data-testid="link-support"
+        >
           Donate now
         </LinkCustom>
-      </div>
-      <Image className="right picture" src={image} alt="support-us" />
+      </article>
+      <Image
+        className={cx('sloth-mascot')}
+        src={image}
+        alt="A sloth mascot with a piggy bank in his hands"
+        data-testid="sloth-mascot"
+      />
     </div>
-  </div>
+  </section>
 );