test(a11y): add a11y testing (based on axe-core)

src/components/Article/Article.test.tsx

@@ -31,26 +31,26 @@ describe('Article', () => {
       <Article post={mockPost} commentUrl={mockUrl} socialUrl={mockUrl} />
     );
 
-    const results = await axe(container, {
+    const a11y = await axe(container, {
       rules: {
         'nested-interactive': { enabled: false },
       },
     });
 
-    expect(results).toHaveNoViolations();
+    expect(a11y).toHaveNoViolations();
   });
 
   test('should render accessibility guidelines (AXE) with partial data', async () => {
     const { container } = render(
       <Article post={mockBasePost} commentUrl={mockUrl} socialUrl={mockUrl} />
     );
 
-    const results = await axe(container, {
+    const a11y = await axe(container, {
       rules: {
         'nested-interactive': { enabled: false },
       },
     });
 
-    expect(results).toHaveNoViolations();
+    expect(a11y).toHaveNoViolations();
   });
 });

src/components/Article/ArticleComments.test.tsx

@@ -17,8 +17,8 @@ describe('ArticleComments', () => {
   test('Should render accessibility guidelines (AXE)', async () => {
     const { container } = render(<ArticleComments url={mockUrl} />);
 
-    const results = await axe(container);
+    const a11y = await axe(container);
 
-    expect(results).toHaveNoViolations();
+    expect(a11y).toHaveNoViolations();
   });
 });

src/components/Article/ArticleToc.test.tsx

@@ -1,5 +1,6 @@
 import MockData from '@MockData';
 import { fireEvent, render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 import { create } from 'react-test-renderer';
 import ArticleToc from './ArticleToc';
@@ -13,6 +14,14 @@ describe('ArticleToc', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  test('Should render accessibility guidelines (AXE)', async () => {
+    const { container } = render(<ArticleToc toc={mockToc} />);
+
+    const a11y = await axe(container);
+
+    expect(a11y).toHaveNoViolations();
+  });
+
   test('should expand ToC when clicked', () => {
     render(<ArticleToc toc={mockToc} />);
 

src/components/BooksGrid/BooksGrid.test.tsx

@@ -1,4 +1,6 @@
 import MockData from '@MockData';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 import { create } from 'react-test-renderer';
 import BooksGrid from './BooksGrid';
@@ -11,4 +13,12 @@ describe('BooksGrid', () => {
 
     expect(tree).toMatchSnapshot();
   });
+
+  test('Should render accessibility guidelines (AXE)', async () => {
+    const { container } = render(<BooksGrid bookList={mockBooks} />);
+
+    const a11y = await axe(container);
+
+    expect(a11y).toHaveNoViolations();
+  });
 });

src/components/Container/Container.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 import { create } from 'react-test-renderer';
 import Container from './Container';
@@ -14,6 +15,18 @@ describe('Container', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  test('should render accessibility guidelines (AXE)', async () => {
+    const { container } = render(
+      <Container role="main">
+        <h1>Container</h1>
+      </Container>
+    );
+
+    const a11y = await axe(container);
+
+    expect(a11y).toHaveNoViolations();
+  });
+
   test('should render children correctly', () => {
     render(
       <Container role="main">

src/components/ErrorBoundary/ErrorBoundary.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 import { create } from 'react-test-renderer';
 import ErrorBoundary from './ErrorBoundary';
@@ -47,6 +48,30 @@ describe('ErrorBoundary', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  test('should render children accessibility guidelines (AXE)', async () => {
+    const { container } = render(
+      <ErrorBoundary>
+        <ComponentWithError />
+      </ErrorBoundary>
+    );
+
+    const a11y = await axe(container);
+
+    expect(a11y).toHaveNoViolations();
+  });
+
+  test('should render alert message accessibility guidelines (AXE)', async () => {
+    const { container } = render(
+      <ErrorBoundary>
+        <ComponentWithError shouldThrow />
+      </ErrorBoundary>
+    );
+
+    const a11y = await axe(container);
+
+    expect(a11y).toHaveNoViolations();
+  });
+
   test('should render alert message when error happened', () => {
     const { rerender } = render(<ComponentWithError />, {
       wrapper: ErrorBoundary,

src/components/FlexContainer/FlexContainer.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 import { create } from 'react-test-renderer';
 import FlexContainer from './FlexContainer';
@@ -25,4 +26,16 @@ describe('FlexContainer', () => {
       screen.getByText('FlexContainer')
     );
   });
+
+  test('should render accessibility guidelines (AXE)', async () => {
+    const { container } = render(
+      <FlexContainer role="main">
+        <h1>FlexContainer</h1>
+      </FlexContainer>
+    );
+
+    const a11y = await axe(container);
+
+    expect(a11y).toHaveNoViolations();
+  });
 });

src/components/Footer/Footer.test.tsx

@@ -1,4 +1,6 @@
 import MockData from '@MockData';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 import { create } from 'react-test-renderer';
 import Footer from './Footer';
@@ -19,4 +21,18 @@ describe('Footer', () => {
 
     expect(tree).toMatchSnapshot();
   });
+
+  test('should render accessibility guidelines (AXE)', async () => {
+    const { container } = render(
+      <Footer
+        buildTime={mockTime}
+        author={mockAuthor}
+        socialList={mockSocialList}
+      />
+    );
+
+    const a11y = await axe(container);
+
+    expect(a11y).toHaveNoViolations();
+  });
 });

src/components/GithubCard/GithubCard.test.tsx

@@ -1,4 +1,6 @@
 import MockData from '@MockData';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 import { create } from 'react-test-renderer';
 import GithubCard from './GithubCard';
@@ -29,9 +31,41 @@ describe('GithubCard', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  test('should render correctly when missing github data (snapshot)', () => {
+  test('should render correctly when missing GitHub data (snapshot)', () => {
     const tree = create(<GithubCard email={mockEmail} />).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
+
+  test('should render accessibility guidelines (AXE)', async () => {
+    const { container } = render(
+      <GithubCard email={mockEmail} profile={mockProfile} repos={mockRepos} />
+    );
+
+    const a11y = await axe(container);
+
+    expect(a11y).toHaveNoViolations();
+  });
+
+  test('should render accessibility guidelines when missing bio and location data (AXE)', async () => {
+    const { container } = render(
+      <GithubCard
+        email={mockEmail}
+        profile={mockBaseProfile}
+        repos={mockRepos}
+      />
+    );
+
+    const a11y = await axe(container);
+
+    expect(a11y).toHaveNoViolations();
+  });
+
+  test('should render accessibility guidelines when missing GitHub data (AXE)', async () => {
+    const { container } = render(<GithubCard email={mockEmail} />);
+
+    const a11y = await axe(container);
+
+    expect(a11y).toHaveNoViolations();
+  });
 });

src/components/GithubCard/GithubCard.tsx

@@ -21,7 +21,7 @@ const GithubCard = ({ email, profile, repos }: Props): JSX.Element => {
       >
         <Card hoverable title={<GithubCardHeader profile={profile} />}>
           <Card.Meta
-            avatar={<Avatar src={profile.avatar} />}
+            avatar={<Avatar src={profile.avatar} alt={profile.username} />}
             title={<GithubCardContent profile={profile} />}
             description={`Joined in ${profile.createDate}`}
           />

src/components/GithubCard/__snapshots__/GithubCard.test.tsx.snap

@@ -63,6 +63,7 @@ exports[`GithubCard should render correctly (snapshot) 1`] = `
             style={Object {}}
           >
             <img
+              alt="sabertazimi"
               onError={[Function]}
               src="https://avatars.githubusercontent.com/u/12670482?v=4"
             />
@@ -588,6 +589,30 @@ exports[`GithubCard should render correctly (snapshot) 1`] = `
 </div>
 `;
 
+exports[`GithubCard should render correctly when missing GitHub data (snapshot) 1`] = `
+<div
+  className="mx-auto my-0 text-center"
+>
+  <h1
+    className="ant-typography"
+    onClick={null}
+    style={
+      Object {
+        "WebkitLineClamp": undefined,
+      }
+    }
+  >
+    Please mail to 
+    <a
+      href="mailto:[email protected]"
+    >
+      me
+    </a>
+    .
+  </h1>
+</div>
+`;
+
 exports[`GithubCard should render correctly when missing bio and location data (snapshot) 1`] = `
 <div
   className="ant-ribbon-wrapper"
@@ -651,6 +676,7 @@ exports[`GithubCard should render correctly when missing bio and location data (
             style={Object {}}
           >
             <img
+              alt="sabertazimi"
               onError={[Function]}
               src="https://avatars.githubusercontent.com/u/12670482?v=4"
             />
@@ -1175,27 +1201,3 @@ exports[`GithubCard should render correctly when missing bio and location data (
   </div>
 </div>
 `;
-
-exports[`GithubCard should render correctly when missing github data (snapshot) 1`] = `
-<div
-  className="mx-auto my-0 text-center"
->
-  <h1
-    className="ant-typography"
-    onClick={null}
-    style={
-      Object {
-        "WebkitLineClamp": undefined,
-      }
-    }
-  >
-    Please mail to 
-    <a
-      href="mailto:[email protected]"
-    >
-      me
-    </a>
-    .
-  </h1>
-</div>
-`;

src/components/Icons/Icons.test.tsx

@@ -1,25 +1,28 @@
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 import { create } from 'react-test-renderer';
 import Close from './Close';
 import Comment from './Comment';
 import Hamburger from './Hamburger';
 
 describe('Icons', () => {
-  test('should render [Close] icon correctly (snapshot)', () => {
-    const tree = create(<Close />).toJSON();
+  const Icons = [Close, Comment, Hamburger];
 
-    expect(tree).toMatchSnapshot();
-  });
-
-  test('should render [Comment] icon correctly (snapshot)', () => {
-    const tree = create(<Comment />).toJSON();
+  test.each(Icons)('should render %# icon correctly (snapshot)', Icon => {
+    const tree = create(<Icon />).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
 
-  test('should render [Hamburger] icon correctly (snapshot)', () => {
-    const tree = create(<Hamburger />).toJSON();
+  test.each(Icons)(
+    'should render %# icon accessibility guidelines (AXE)',
+    async Icon => {
+      const { container } = render(<Icon />);
 
-    expect(tree).toMatchSnapshot();
-  });
+      const a11y = await axe(container);
+
+      expect(a11y).toHaveNoViolations();
+    }
+  );
 });

src/components/Icons/__snapshots__/Icons.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Icons should render [Close] icon correctly (snapshot) 1`] = `
+exports[`Icons should render 0 icon correctly (snapshot) 1`] = `
 <span
   aria-label="Close"
   className="anticon"
@@ -21,7 +21,7 @@ exports[`Icons should render [Close] icon correctly (snapshot) 1`] = `
 </span>
 `;
 
-exports[`Icons should render [Comment] icon correctly (snapshot) 1`] = `
+exports[`Icons should render 1 icon correctly (snapshot) 1`] = `
 <span
   aria-label="Comment"
   className="anticon"
@@ -50,7 +50,7 @@ exports[`Icons should render [Comment] icon correctly (snapshot) 1`] = `
 </span>
 `;
 
-exports[`Icons should render [Hamburger] icon correctly (snapshot) 1`] = `
+exports[`Icons should render 2 icon correctly (snapshot) 1`] = `
 <span
   aria-label="Hamburger"
   className="anticon"