feat: add unit test for Company component

Nuuriii · Nov 14, 2023 · 87a376a · 87a376a
1 parent d980736
commit 87a376a
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 2 deletions.
diff --git a/app/components/company/company.test.tsx b/app/components/company/company.test.tsx
@@ -0,0 +1,27 @@
+import { screen, render } from '@testing-library/react';
+import Company from './company';
+
+describe('check text and img alt', () => {
+  test('check text', () => {
+    render(<Company />);
+    const findTitle = screen.getByText('Trusted by 5,000+ Companies Worldwide');
+
+    expect(findTitle).toBeInTheDocument();
+  });
+  test('check img alt', () => {
+    render(<Company />);
+    const findGrayGoogle = screen.getByAltText('gray-google');
+    const findGrayNetflix = screen.getByAltText('gray-netflix');
+    const findGrayAirBnb = screen.getByAltText('gray-airbnb');
+    const findGrayAmazon = screen.getByAltText('gray-amazon');
+    const findGrayFacebook = screen.getByAltText('gray-facebook');
+    const findGrayGrab = screen.getByAltText('gray-grab');
+
+    expect(findGrayGoogle).toBeVisible();
+    expect(findGrayNetflix).toBeVisible();
+    expect(findGrayAirBnb).toBeVisible();
+    expect(findGrayAmazon).toBeVisible();
+    expect(findGrayFacebook).toBeVisible();
+    expect(findGrayGrab).toBeVisible();
+  });
+});
diff --git a/app/components/company/company.tsx b/app/components/company/company.tsx
@@ -18,8 +18,16 @@ export default function Company() {
         <div className='mt-[2rem] flex items-center flex-wrap justify-center'>
           {CompanyIcon.map((item, index) => (
             <div className={styles.imgContainer} key={index}>
-              <Image className={styles.imgRegular} src={item.regular} alt='' />
-              <Image className={styles.imgHover} src={item.hover} alt='' />
+              <Image
+                className={styles.imgRegular}
+                src={item.regular}
+                alt={item.altRegular}
+              />
+              <Image
+                className={styles.imgHover}
+                src={item.hover}
+                alt={item.altHover}
+              />
             </div>
           ))}
         </div>

diff --git a/app/components/company/companyData.ts b/app/components/company/companyData.ts
@@ -15,25 +15,37 @@ export const CompanyIcon = [
   {
     regular: GrayGoogle,
     hover: ColoredGoogle,
+    altRegular: 'gray-google',
+    altHover: 'colored-google',
   },
   {
     regular: GrayNetflix,
     hover: ColoredNetflix,
+    altRegular: 'gray-netflix',
+    altHover: 'colored-netflix',
   },
   {
     regular: GrayAirBnb,
     hover: ColoredAirBnb,
+    altRegular: 'gray-airbnb',
+    altHover: 'colored-airbnb',
   },
   {
     regular: GrayAmazon,
     hover: ColoredAmazon,
+    altRegular: 'gray-amazon',
+    altHover: 'colored-amazon',
   },
   {
     regular: GrayFacebook,
     hover: ColoredFacebook,
+    altRegular: 'gray-facebook',
+    altHover: 'colored-facebook',
   },
   {
     regular: GrayGrab,
     hover: ColoredGrab,
+    altRegular: 'gray-grab',
+    altHover: 'colored-grab',
   },
 ];