test(app): complete layouts coverage (#1052)

packages/app/pages/admin/answers/edit.js

@@ -658,7 +658,7 @@ export class AdminAnwsersEditPage extends React.Component {
 
   render() {
     return (
-      <AdminMainLayout isScrollable={false}>
+      <AdminMainLayout noScroll>
         <Container>
           <Content flexDirection="column">
             {this.renderTop()}

packages/app/src/layouts/AdminMain/__tests__/index.test.js

@@ -0,0 +1,105 @@
+import React from "react";
+import { create } from "react-test-renderer";
+
+jest.mock("../../AdminMenu");
+jest.mock("../../Main");
+
+import AdminMain from "..";
+import AdminMenu from "../../AdminMenu";
+import Main from "../../Main";
+
+describe("layouts/<AdminMain />", () => {
+  const PROPS = {};
+
+  beforeAll(() => {
+    Main.mockImplementation(({ children }) => <div>{children}</div>);
+  });
+
+  describe(`with {children}=undefined`, () => {
+    beforeAll(() => {
+      PROPS.children = undefined;
+    });
+
+    it(`should render as expected`, () => {
+      create(<AdminMain {...PROPS} />);
+
+      expect(AdminMenu).toHaveBeenCalledTimes(1);
+      expect(Main).toHaveBeenCalledTimes(1);
+    });
+
+    afterAll(() => {
+      delete PROPS.children;
+    });
+  });
+
+  describe(`with {isLoading}`, () => {
+    beforeAll(() => {
+      PROPS.isLoading = true;
+    });
+
+    it(`should render as expected`, () => {
+      create(<AdminMain {...PROPS} />);
+
+      expect(AdminMenu).toHaveBeenCalledTimes(1);
+      expect(Main).toHaveBeenCalledTimes(1);
+    });
+
+    afterAll(() => {
+      delete PROPS.isLoading;
+    });
+  });
+
+  describe(`with {children}=<p>An Element</p>`, () => {
+    beforeAll(() => {
+      PROPS.children = <p data-testid="element">An Element</p>;
+    });
+
+    it(`should render as expected`, () => {
+      const $adminMain = create(<AdminMain {...PROPS} />);
+
+      expect(AdminMenu).toHaveBeenCalledTimes(1);
+      expect(Main).toHaveBeenCalledTimes(1);
+      expect($adminMain).toHaveTestRenderedProperty("noScroll", false, "content");
+      expect($adminMain).toHaveTestRenderedStyleRule("overflow-y", "scroll", {}, "content");
+      expect($adminMain).toHaveTestRenderedTextContent(`An Element`, "element");
+    });
+
+    describe(`with {noScroll}`, () => {
+      beforeAll(() => {
+        PROPS.noScroll = true;
+      });
+
+      it(`should render as expected`, () => {
+        const $adminMain = create(<AdminMain {...PROPS} />);
+
+        expect($adminMain).toHaveTestRenderedProperty("noScroll", true, "content");
+        expect($adminMain).toHaveTestRenderedStyleRule("overflow-y", "hidden", {}, "content");
+        expect($adminMain).toHaveTestRenderedTextContent(`An Element`, "element");
+      });
+
+      afterAll(() => {
+        delete PROPS.noScroll;
+      });
+    });
+
+    describe(`with {hasBareContent}`, () => {
+      beforeAll(() => {
+        PROPS.hasBareContent = true;
+      });
+
+      it(`should render as expected`, () => {
+        const $adminMain = create(<AdminMain {...PROPS} />);
+
+        expect($adminMain).toHaveTestRenderedTextContent(`An Element`, "element");
+      });
+
+      afterAll(() => {
+        delete PROPS.hasBareContent;
+      });
+    });
+
+    afterAll(() => {
+      delete PROPS.children;
+    });
+  });
+});

packages/app/src/layouts/AdminMain/index.js

@@ -7,13 +7,8 @@ import AdminMenu from "../AdminMenu";
 import Main from "../Main";
 import { Content } from "./styles";
 
-const AdminMainLayout = ({
-  children,
-  hasBareContent = false,
-  isLoading = false,
-  isScrollable = true,
-}) => {
-  if (isLoading) {
+const AdminMain = ({ children, hasBareContent = false, isLoading = false, noScroll = false }) => {
+  if (isLoading || children === undefined) {
     return (
       <Main isHorizontal>
         <AdminMenu />
@@ -27,16 +22,22 @@ const AdminMainLayout = ({
   return (
     <Main isHorizontal>
       <AdminMenu />
-      {hasBareContent ? children : <Content isScrollable={isScrollable}>{children}</Content>}
+      {hasBareContent ? (
+        children
+      ) : (
+        <Content data-testid="content" noScroll={noScroll}>
+          {children}
+        </Content>
+      )}
     </Main>
   );
 };
 
-AdminMainLayout.propTypes = {
-  children: PropTypes.element.isRequired,
+AdminMain.propTypes = {
+  children: PropTypes.element,
   hasBareContent: PropTypes.bool,
   isLoading: PropTypes.bool,
-  isScrollable: PropTypes.bool,
+  noScroll: PropTypes.bool,
 };
 
-export default AdminMainLayout;
+export default AdminMain;

packages/app/src/layouts/AdminMain/styles.js

@@ -2,5 +2,5 @@ import styled from "@emotion/styled";
 
 export const Content = styled.div`
   flex-grow: 1;
-  overflow-y: ${p => (p.isScrollable ? "scroll" : "hidden")};
+  overflow-y: ${p => (p.noScroll ? "hidden" : "scroll")};
 `;

packages/app/src/layouts/AdminMenu/__tests__/index.test.js

@@ -5,11 +5,11 @@ jest.mock("next/router");
 
 import Router from "next/router";
 
-import runTestRenderedProperty from "../../../../tests/utils/runTestRenderedProperty";
 jest.mock("../../../cache");
 jest.mock("../../../helpers/isNode");
 
 import AdminMenu from "..";
+import runTestRenderedProperty from "../../../../tests/utils/runTestRenderedProperty";
 import cache from "../../../cache";
 import isNode from "../../../helpers/isNode";
 

packages/app/src/layouts/Header/__tests__/index.test.js

@@ -0,0 +1,74 @@
+import React from "react";
+import { create } from "react-test-renderer";
+
+jest.mock("next/router");
+
+import Router from "next/router";
+
+jest.mock("../../Menu");
+jest.mock("../../../cache");
+
+import Header from "..";
+import runTestRenderedProperty from "../../../../tests/utils/runTestRenderedProperty";
+import cache from "../../../cache";
+import Menu from "../../Menu";
+
+describe("layouts/<Header />", () => {
+  describe("when the user is not authenticated", () => {
+    beforeAll(() => {
+      cache.get.mockReturnValue({ isAuthenticated: false });
+    });
+
+    it(`should render as expected`, () => {
+      create(<Header />);
+
+      expect(Menu).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("when the user is authenticated", () => {
+    beforeAll(() => {
+      cache.get.mockReturnValue({ isAuthenticated: true });
+    });
+
+    it(`should render as expected`, () => {
+      create(<Header />);
+
+      expect(Menu).toHaveBeenCalledTimes(1);
+    });
+
+    describe("when the user is a contributor", () => {
+      beforeAll(() => {
+        cache.get.mockReturnValue({ isAdmin: false, isAuthenticated: true });
+      });
+
+      it(`should behave as expected`, () => {
+        const $header = create(<Header />);
+
+        runTestRenderedProperty($header, "onClick", "brand");
+        runTestRenderedProperty($header, "onKeyUp", "brand");
+
+        expect(Router.push).toHaveBeenCalledTimes(2);
+        expect(Router.push).toHaveBeenNthCalledWith(1, "/");
+        expect(Router.push).toHaveBeenNthCalledWith(2, "/");
+      });
+    });
+
+    describe("when the user is an administrator", () => {
+      beforeAll(() => {
+        cache.get.mockReturnValue({ isAdmin: true, isAuthenticated: true });
+      });
+
+      it(`should behave as expected`, () => {
+        const $header = create(<Header />);
+
+        runTestRenderedProperty($header, "onClick", "brand");
+        runTestRenderedProperty($header, "onKeyUp", "brand");
+
+        expect(Router.push).toHaveBeenCalledTimes(2);
+        expect(Router.push).toHaveBeenNthCalledWith(1, "/admin");
+        expect(Router.push).toHaveBeenNthCalledWith(2, "/admin");
+      });
+    });
+  });
+});

packages/app/src/layouts/Header/index.js

@@ -22,6 +22,7 @@ export default class Header extends React.PureComponent {
         <Brand
           alignItems="center"
           aria-label="Bouton de retour au tableau de bord"
+          data-testid="brand"
           onClick={() => this.goToHome()}
           onKeyUp={() => this.goToHome()}
           role="button"

packages/app/src/layouts/Main/__tests__/index.test.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { create } from "react-test-renderer";
+
+jest.mock("../../Header");
+jest.mock("../../../components/Modal", () => jest.fn(() => null));
+
+import Main from "..";
+import ModaWithWrapper from "../../../components/Modal";
+import Header from "../../Header";
+
+describe("layouts/<Main />", () => {
+  const PROPS = {};
+
+  it(`should render as expected`, () => {
+    create(<Main {...PROPS} />);
+
+    expect(Header).toHaveBeenCalledTimes(1);
+    expect(ModaWithWrapper).toHaveBeenCalledTimes(1);
+  });
+
+  describe(`with {isLoading}`, () => {
+    beforeAll(() => {
+      PROPS.isLoading = true;
+    });
+
+    it(`should render as expected`, () => {
+      create(<Main {...PROPS} />);
+
+      expect(Header).toHaveBeenCalledTimes(1);
+      expect(ModaWithWrapper).toHaveBeenCalledTimes(1);
+    });
+
+    afterAll(() => {
+      delete PROPS.isLoading;
+    });
+  });
+
+  describe(`with {isHorizontal}`, () => {
+    beforeAll(() => {
+      PROPS.isHorizontal = true;
+    });
+
+    it(`should render as expected`, () => {
+      create(<Main {...PROPS} />);
+
+      expect(Header).toHaveBeenCalledTimes(1);
+      expect(ModaWithWrapper).toHaveBeenCalledTimes(1);
+    });
+
+    afterAll(() => {
+      delete PROPS.isHorizontal;
+    });
+  });
+});