test(setup): add basics e2e tests

__tests__/e2e/sidebar.test.js

@@ -0,0 +1,110 @@
+// @flow
+
+import { getApp } from '../setup/utils';
+
+const app = getApp();
+
+beforeAll(async () => {
+  await app.start();
+  await app.client.waitUntilWindowLoaded();
+  await app.client.waitUntilTextExists('#sidebar', 'Dashboard', 120000);
+});
+afterAll(() => app.stop());
+
+describe('Sidebar', () => {
+  test('should see the active dashboard route', async () => {
+    await app.client.element('#sidebar a:nth-child(1)').click();
+
+    expect(await app.client.getUrl()).toEndWith('/');
+
+    expect(
+      await app.client.element('#sidebar a:nth-child(1)').getHTML(),
+    ).toEqual(expect.stringContaining('Dashboard'));
+
+    expect(
+      await app.client
+        .element('#sidebar a:nth-child(1) img')
+        .getAttribute('src'),
+    ).toEqual(expect.stringContaining('/assets/dashboard_icon_active.svg'));
+  });
+
+  test('should see the active send route', async () => {
+    await app.client.element('#sidebar a:nth-child(2)').click();
+
+    expect(await app.client.getUrl()).toEndWith('/send');
+
+    expect(
+      await app.client.element('#sidebar a:nth-child(2)').getHTML(),
+    ).toEqual(expect.stringContaining('Send'));
+
+    expect(
+      await app.client
+        .element('#sidebar a:nth-child(2) img')
+        .getAttribute('src'),
+    ).toEqual(expect.stringContaining('/assets/send_icon_active.svg'));
+  });
+
+  test('should see the active receive route', async () => {
+    await app.client.element('#sidebar a:nth-child(3)').click();
+
+    expect(await app.client.getUrl()).toEndWith('/receive');
+
+    expect(
+      await app.client.element('#sidebar a:nth-child(3)').getHTML(),
+    ).toEqual(expect.stringContaining('Receive'));
+
+    expect(
+      await app.client
+        .element('#sidebar a:nth-child(3) img')
+        .getAttribute('src'),
+    ).toEqual(expect.stringContaining('/assets/receive_icon_active.svg'));
+  });
+
+  test('should see the active transactions route', async () => {
+    await app.client.element('#sidebar a:nth-child(4)').click();
+
+    expect(await app.client.getUrl()).toEndWith('/transactions');
+
+    expect(
+      await app.client.element('#sidebar a:nth-child(4)').getHTML(),
+    ).toEqual(expect.stringContaining('Transactions'));
+
+    expect(
+      await app.client
+        .element('#sidebar a:nth-child(4) img')
+        .getAttribute('src'),
+    ).toEqual(expect.stringContaining('/assets/transactions_icon_active.svg'));
+  });
+
+  test('should see the active settings route', async () => {
+    await app.client.element('#sidebar a:nth-child(5)').click();
+
+    expect(await app.client.getUrl()).toEndWith('/settings');
+
+    expect(
+      await app.client.element('#sidebar a:nth-child(5)').getHTML(),
+    ).toEqual(expect.stringContaining('Settings'));
+
+    expect(
+      await app.client
+        .element('#sidebar a:nth-child(5) img')
+        .getAttribute('src'),
+    ).toEqual(expect.stringContaining('/assets/settings_icon_active.svg'));
+  });
+
+  test('should see the active console route', async () => {
+    await app.client.element('#sidebar a:nth-child(6)').click();
+
+    expect(await app.client.getUrl()).toEndWith('/console');
+
+    expect(
+      await app.client.element('#sidebar a:nth-child(6)').getHTML(),
+    ).toEqual(expect.stringContaining('Console'));
+
+    expect(
+      await app.client
+        .element('#sidebar a:nth-child(6) img')
+        .getAttribute('src'),
+    ).toEqual(expect.stringContaining('/assets/console_icon_active.svg'));
+  });
+});

__tests__/e2e/startup.test.js

@@ -2,17 +2,34 @@
 
 import { getApp } from '../setup/utils';
 
-describe('Zcash', () => {
-  const app = getApp();
+const app = getApp();
 
-  beforeEach(() => app.start());
-  afterEach(() => {
-    app.stop();
+beforeAll(async () => {
+  await app.start();
+  await app.client.waitUntilWindowLoaded();
+});
+afterAll(() => app.stop());
+
+describe('Startup', () => {
+  test('should open the window', async () => expect(await app.client.getWindowCount()).toEqual(1));
+
+  test('should have the right title', async () => {
+    expect(await app.client.getTitle()).toEqual('ZEC Wallet');
   });
 
-  test('should open the window', () => {
-    app.client
-      .getWindowCount()
-      .then((count: number) => expect(count).toEqual(1));
+  test('should show the text "ZEC Wallet Starting" in loading screen', async () => {
+    expect(await app.client.getText('#loading-screen p')).toEqual(
+      'ZEC Wallet Starting',
+    );
+  });
+
+  test('should show the zcash logo in loading screen', async () => expect(await app.client.getAttribute('#loading-screen img', 'src')).toEqual(
+    expect.stringContaining('/assets/zcash-simple-icon.svg'),
+  ));
+
+  test('should show the loading circle in loading screen', async () => {
+    expect(
+      await app.client.element('#loading-screen svg').isExisting(),
+    ).toEqual(true);
   });
 });

app/components/layout.js

@@ -21,5 +21,5 @@ export const LayoutComponent = (props: Props) => {
   // $FlowFixMe
   const { children } = props; // eslint-disable-line
 
-  return <Layout>{children}</Layout>;
+  return <Layout id='layout'>{children}</Layout>;
 };

app/components/loading-screen.js

@@ -36,7 +36,7 @@ const Logo = styled.img`
 `;
 
 export const LoadingScreen = ({ progress }: { progress: number }) => (
-  <Wrapper>
+  <Wrapper id='loading-screen'>
     <CircleWrapper>
       <Logo src={zcashLogo} alt='Zcash logo' />
       <CircleProgressComponent

app/components/sidebar.js

@@ -40,10 +40,10 @@ const StyledLink = styled(Link)`
   transition: all 0.03s ${props => props.theme.colors.transitionEase};
 
   &:hover {
-    color: ${/* eslint-disable-next-line max-len */
-  props => (props.isActive
-    ? props.theme.colors.sidebarItemActive
-    : '#ddd')}
+    color: ${
+  /* eslint-disable-next-line max-len */
+  props => (props.isActive ? props.theme.colors.sidebarItemActive : '#ddd')
+}
     background-color: ${props => props.theme.colors.sidebarHoveredItem};
   }
 `;
@@ -70,16 +70,12 @@ type Props = {
 };
 
 export const SidebarComponent = ({ options, location }: Props) => (
-  <Wrapper>
+  <Wrapper id='sidebar'>
     {(options || []).map((item) => {
       const isActive = location.pathname === item.route;
 
       return (
-        <StyledLink
-          isActive={isActive}
-          key={item.route}
-          to={item.route}
-        >
+        <StyledLink isActive={isActive} key={item.route} to={item.route}>
           <Icon
             isActive={isActive}
             src={item.icon(isActive)}