Merge pull request #18 from Shepard-m/master

src/components/container/container.test.tsx

@@ -0,0 +1,18 @@
+import { PagesClass, PagesMainClass } from '../../const';
+import Container from './container';
+import { withHistory } from '../../utils/mock-component';
+import { render, screen, waitFor } from '@testing-library/react';
+import clsx from 'clsx';
+
+describe('Container', () => {
+  it('should return component Container and correct class', async () => {
+    const mainContainerTetsId = 'container';
+    const mainContainerPageClassTetsId = 'pageClass';
+    const testChildren = <span>test</span>;
+    const componentMainPage = withHistory(<Container mainClass={PagesMainClass.MAIN} pageClass={PagesClass.MAIN}>{testChildren}</Container>);
+    render(componentMainPage);
+
+    await waitFor(() => expect(screen.getByTestId(mainContainerTetsId)).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByTestId(mainContainerPageClassTetsId)).toHaveClass(clsx('page', PagesClass.MAIN)));
+  });
+});

src/components/container/container.tsx

@@ -13,9 +13,9 @@ type TContainerProps = {
 
 export default function Container({ children, pageClass, isFooter, mainClass, navigation = true }: TContainerProps) {
   return (
-    <div className={clsx('page', pageClass)}>
+    <div className={clsx('page', pageClass)} data-testid={'pageClass'}>
       <Header navigation={navigation} />
-      <main className={clsx('page__main', mainClass)}>
+      <main className={clsx('page__main', mainClass)} data-testid='container'>
         {children}
       </main>
       {isFooter && <Footer />}