feat(network): remove unnecessary elements from AppLayout

TODO.md

@@ -5,3 +5,4 @@
 - POC for styled-components (https://www.styled-components.com) (https://emotion.sh)
 - better UI design (https://material.io/design/color/dark-theme.html)
 - add network designer (https://github.com/projectstorm/react-diagrams)
+- POC testing-library for testcafe (https://testing-library.com/docs/testcafe-testing-library/intro)

src/components/layouts/AppLayout.module.less

@@ -29,19 +29,6 @@
 .header {
   padding: 0;
   background-color: #fff;
-
-  .trigger {
-    color: rgba(0, 0, 0, 0.65);
-    font-size: 18px;
-    line-height: 64px;
-    padding: 0 24px;
-    cursor: pointer;
-    transition: color 0.3s;
-  }
-
-  .trigger:hover {
-    color: @primary-color;
-  }
 }
 
 .content {
@@ -61,8 +48,3 @@
     padding: 0 5px;
   }
 }
-
-// Ant overrides
-.ant-layout-header {
-  border-left: 1px solid #000c17;
-}

src/components/layouts/AppLayout.spec.tsx

@@ -28,22 +28,6 @@ describe('AppLayout component', () => {
     expect(getByTestId('hello')).toHaveTextContent('Hello World!');
   });
 
-  it('should contain a collapse trigger', () => {
-    const { getByTestId } = renderComponent();
-    expect(getByTestId('trigger')).toBeTruthy();
-  });
-
-  it('should be colappsed by default', () => {
-    const { getByTestId } = renderComponent();
-    expect(getByTestId('sider')).toHaveClass('ant-layout-sider-collapsed');
-  });
-
-  it('should expand menu when trigger clicked', () => {
-    const { getByTestId } = renderComponent();
-    fireEvent.click(getByTestId('trigger'));
-    expect(getByTestId('sider')).not.toHaveClass('ant-layout-sider-collapsed');
-  });
-
   it('should set language to English', () => {
     const { getByTestId } = renderComponent();
     const changeLanguage = changeLanguageMock();
@@ -62,12 +46,6 @@ describe('AppLayout component', () => {
     changeLanguage.mockClear();
   });
 
-  it('should navigate to counter page when Counter link clicked', () => {
-    const { getByTestId, history } = renderComponent();
-    fireEvent.click(getByTestId('nav-counter'));
-    expect(history.location.pathname).toEqual('/counter');
-  });
-
   it('should navigate to home page when logo clicked', () => {
     const { getByTestId, history } = renderComponent('/counter');
     fireEvent.click(getByTestId('logo'));

src/components/layouts/AppLayout.tsx

@@ -1,78 +1,36 @@
-import React, { useState } from 'react';
-import { Layout, Menu, Icon, Button } from 'antd';
+import React from 'react';
+import { Layout, Button } from 'antd';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { HOME, COUNTER, NETWORK } from 'components/Routes';
+import { HOME } from 'components/Routes';
 import logo from 'resources/logo.png';
 import NetworkList from '../network/NetworkList';
 import styles from './AppLayout.module.less';
 
 const { Header, Content, Footer, Sider } = Layout;
-const { SubMenu } = Menu;
 
 interface Props {
   children: React.ReactNode;
 }
 
 const AppLayout: React.FC<Props> = (props: Props) => {
-  const { t, i18n } = useTranslation();
-  const [collapsed, setCollapsed] = useState(true);
-  const toggle = () => setCollapsed(!collapsed);
+  const { i18n } = useTranslation();
   const setEnglish = () => i18n.changeLanguage('en-US');
   const setSpanish = () => i18n.changeLanguage('es');
 
   return (
     <Layout className={styles.layout}>
-      <Sider collapsible collapsed={collapsed} trigger={null} data-tid="sider">
+      <Sider collapsible={false} data-tid="sider">
         <div className={styles.logo}>
           <Link to={HOME} data-tid="logo">
             <img src={logo} alt="logo" />
-            {!collapsed && <span>Polar</span>}
+            <span>Polar</span>
           </Link>
         </div>
         <NetworkList />
-        <Menu theme="dark" mode="inline" selectable={false}>
-          <Menu.Item key="1">
-            <Link to={HOME} data-tid="nav-home">
-              <Icon type="pie-chart" />
-              <span>{t('cmps.app-layout.home', 'Home')}</span>
-            </Link>
-          </Menu.Item>
-          <Menu.Item key="2">
-            <Link to={COUNTER} data-tid="nav-counter">
-              <Icon type="desktop" />
-              <span>{t('cmps.app-layout.counter', 'Counter')}</span>
-            </Link>
-          </Menu.Item>
-          <SubMenu
-            key="sub1"
-            title={
-              <span>
-                <Icon type="user" />
-                <span>{t('cmps.app-layout.menu', 'Menu')}</span>
-              </span>
-            }
-          >
-            <Menu.Item key="3">{t('cmps.app-layout.item1', 'Item 1')}</Menu.Item>
-            <Menu.Item key="4">{t('cmps.app-layout.item2', 'Item 2')}</Menu.Item>
-            <Menu.Item key="5">{t('cmps.app-layout.item3', 'Item 3')}</Menu.Item>
-          </SubMenu>
-        </Menu>
       </Sider>
       <Layout>
-        <Header className={styles.header}>
-          <Icon
-            className={styles.trigger}
-            type={collapsed ? 'menu-unfold' : 'menu-fold'}
-            onClick={toggle}
-            data-tid="trigger"
-          />
-          <Link to={NETWORK}>
-            <Button type="primary" icon="plus" data-tid="new-network">
-              {t('cmps.app-layout.new-network', 'Network')}
-            </Button>
-          </Link>
-        </Header>
+        <Header className={styles.header}></Header>
         <Content className={styles.content}>
           <div className={styles.container}>{props.children}</div>
         </Content>

src/components/network/NetworkList.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { fireEvent } from '@testing-library/react';
+import { fireEvent, wait } from '@testing-library/react';
 import { renderWithProviders, getNetwork } from 'utils/tests';
 import { NETWORK } from 'components/Routes';
 import NetworkList from './NetworkList';
@@ -83,4 +83,16 @@ describe('NetworkList Component', () => {
     expect(queryByText('cmps.network-list.edit')).toBeTruthy();
     expect(queryByText('cmps.network-list.delete')).toBeTruthy();
   });
+
+  it('should toggle a selected network closed when clicked again', () => {
+    const { queryByText, getByText } = renderComponent();
+    expect(queryByText('cmps.network-list.start')).toBeNull();
+    fireEvent.click(getByText('my network 1'));
+    expect(queryByText('cmps.network-list.start')).toBeVisible();
+    fireEvent.click(getByText('my network 1'));
+    wait(() => {
+      // wait for the menu animation to complete
+      expect(queryByText('cmps.network-list.start')).not.toBeVisible();
+    });
+  });
 });