react-flexbox-grid-added-tests-are-failing

app/app.global.css

@@ -5,35 +5,28 @@
 @import '~@fortawesome/fontawesome-free/css/all.css';
 @import '~normalize.css/normalize.css';
 @import '~@blueprintjs/core/lib/css/blueprint.css';
+@import '~react-flexbox-grid/dist/react-flexbox-grid.css';
 
 body {
   position: relative;
   color: white;
   height: 100vh;
   background-color: whitesmoke;
-
-  /* background-image: linear-gradient(
-    45deg,
-    rgba(0, 216, 255, 0.5) 10%,
-    rgba(0, 1, 127, 0.7)
-  ); */
   font-family: Arial, Helvetica, Helvetica Neue, serif;
   overflow-y: hidden;
 }
 
 body.bp3-dark {
   background-color: #293742;
-
-  /* background-color: #232c39; */
 }
 
-.bp3-button {
+/* .bp3-button {
   outline: none !important;
 }
 
 .bp3-control {
   outline: none !important;
-}
+} */
 
 h2 {
   margin: 0;

app/components/Home.css

@@ -1,9 +1,9 @@
-.container {
+/* .container {
   position: absolute;
   top: 30%;
   left: 10px;
   text-align: center;
-}
+} */
 
 .container h2 {
   font-size: 5rem;

app/components/Home.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable prettier/prettier */
+/* eslint-disable react/jsx-one-expression-per-line */
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { ipcRenderer } from 'electron';
-import {
-  Button,
-} from '@blueprintjs/core';
+import { Grid, Row, Col } from 'react-flexbox-grid';
+import { Button } from '@blueprintjs/core';
 import routes from '../constants/routes.json';
 import styles from './Home.css';
 
@@ -29,21 +29,31 @@ export default function Home(): JSX.Element {
   };
 
   return (
-    <div className={styles.container} data-tid="container">
-      <h2 className="bp3-heading">Home</h2>
-      <br />
-      <Link to={routes.COUNTER}>
-        {' '}
-        <Button text="To Counter" />
-      </Link>
-      <br />
-      <h3 className="bp3-heading">{`${t('Signaling server is running on port')}: ${signalingServerPort}`}</h3>
-      <br />
-      <h3 className="bp3-heading">{`Locales test ${t('Language')}`}</h3>
-      <br />
-      <Button type="button" onClick={onButtonClick}>
-        CLICK ME!
-      </Button>
-    </div>
+    <Grid fluid>
+      <Row middle="xs" center="xs" style={{ height: '100vh' }}>
+        <Col xs={12} md={6}>
+          <div className={styles.container} data-tid="container">
+            <h2 className="bp3-heading">Home</h2>
+            <br />
+            <Link id="to-counter" to={routes.COUNTER}>
+              {' '}
+              <Button text="to Counter" />
+            </Link>
+            <br />
+            <h3 className="bp3-heading">
+              {`${t(
+              'Signaling server is running on port'
+            )}: ${signalingServerPort}`}
+            </h3>
+            <br />
+            <h3 className="bp3-heading">{`Locales test ${t('Language')}`}</h3>
+            <br />
+            <Button type="button" onClick={onButtonClick}>
+              CLICK ME!
+            </Button>
+          </div>
+        </Col>
+      </Row>
+    </Grid>
   );
 }

app/features/counter/Counter.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Button } from '@blueprintjs/core';
+import { Grid } from 'react-flexbox-grid';
 import styles from './Counter.css';
 import routes from '../../constants/routes.json';
 import {
@@ -16,11 +17,11 @@ export default function Counter() {
   const dispatch = useDispatch();
   const value = useSelector(selectCount);
   return (
-    <div>
+    <Grid fluid>
       <div className={styles.backButton} data-tid="backButton">
         <br />
         <Link to={routes.HOME}>
-          <Button icon="arrow-left" />
+          <Button icon="arrow-left" style={{ height: '50px', width: '50px' }} />
         </Link>
       </div>
       <h1
@@ -71,6 +72,6 @@ export default function Counter() {
           async
         </Button>
       </div>
-    </div>
+    </Grid>
   );
 }

package.json

@@ -296,6 +296,7 @@
     "i18next-sync-fs-backend": "^1.1.1",
     "react": "^16.13.1",
     "react-dom": "^16.12.0",
+    "react-flexbox-grid": "^2.1.2",
     "react-hot-loader": "^4.12.21",
     "react-i18next": "^11.7.0",
     "react-redux": "^7.2.0",

test/e2e/HomePage.e2e.ts

@@ -6,7 +6,7 @@ const getPageTitle = ClientFunction(() => document.title);
 const counterSelector = Selector('[data-tid="counter"]');
 const buttonsSelector = Selector('[data-tclass="btn"]');
 const clickToCounterLink = (t) =>
-  t.click(Selector('a').withExactText('to Counter'));
+  t.click(Selector('button').withExactText('to Counter'));
 const incrementButton = buttonsSelector.nth(0);
 const decrementButton = buttonsSelector.nth(1);
 const oddButton = buttonsSelector.nth(2);
@@ -33,11 +33,11 @@ test(
 );
 
 test('should navigate to Counter with click on the "to Counter" link', async (t) => {
-  await t.click('[data-tid=container] > a').expect(getCounterText()).eql('0');
+  await t.click('#to-counter').expect(getCounterText()).eql('0');
 });
 
 test('should navigate to /counter', async (t) => {
-  await t.click('a').expect(getPageUrl()).contains('/counter');
+  await t.click('#to-counter').expect(getPageUrl()).contains('/counter');
 });
 
 fixture`Counter Tests`

test/features/counter/Counter.spec.tsx

@@ -43,11 +43,11 @@ describe('Counter component', () => {
     expect(p.text()).toMatch(/^1$/);
   });
 
-  it('should first button should call increment', () => {
+  it('should 2 button should call increment', () => {
     const { buttons } = setup();
     const incrementSpy = jest.spyOn(counterSlice, 'increment');
 
-    buttons.at(0).simulate('click');
+    buttons.at(1).simulate('click');
     expect(incrementSpy).toBeCalled();
     incrementSpy.mockRestore();
   });
@@ -67,26 +67,26 @@ describe('Counter component', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('should second button should call decrement', () => {
+  it('should 3 button should call decrement', () => {
     const { buttons } = setup();
     const decrementSyp = jest.spyOn(counterSlice, 'decrement');
-    buttons.at(1).simulate('click');
+    buttons.at(2).simulate('click');
     expect(decrementSyp).toBeCalled();
     decrementSyp.mockRestore();
   });
 
-  it('should third button should call incrementIfOdd', () => {
+  it('should 3 button should call incrementIfOdd', () => {
     const { buttons } = setup();
     const incrementIfOdd = jest.spyOn(counterSlice, 'incrementIfOdd');
-    buttons.at(2).simulate('click');
+    buttons.at(3).simulate('click');
     expect(incrementIfOdd).toBeCalled();
     incrementIfOdd.mockRestore();
   });
 
-  it('should fourth button should call incrementAsync', () => {
+  it('should 4 button should call incrementAsync', () => {
     const { buttons } = setup();
     const incrementAsync = jest.spyOn(counterSlice, 'incrementAsync');
-    buttons.at(3).simulate('click');
+    buttons.at(4).simulate('click');
     expect(incrementAsync).toBeCalled();
     incrementAsync.mockRestore();
   });

test/features/counter/__snapshots__/Counter.spec.tsx.snap

@@ -1,64 +1,120 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Counter component should match exact snapshot 1`] = `
-<div>
+<div
+  className="container-fluid"
+>
   <div
     className="backButton"
     data-tid="backButton"
   >
+    <br />
     <a
       href="/"
       onClick={[Function]}
     >
-      <i
-        className="fa fa-arrow-left fa-3x"
-      />
+      <button
+        className="bp3-button"
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        style={
+          Object {
+            "height": "50px",
+            "width": "50px",
+          }
+        }
+        type="button"
+      >
+        <span
+          className="bp3-icon bp3-icon-arrow-left"
+          icon="arrow-left"
+        >
+          <svg
+            data-icon="arrow-left"
+            height={16}
+            viewBox="0 0 16 16"
+            width={16}
+          >
+            <desc>
+              arrow-left
+            </desc>
+            <path
+              d="M13.99 6.99H4.41L7.7 3.7a1.003 1.003 0 00-1.42-1.42l-5 5a1.014 1.014 0 000 1.42l5 5a1.003 1.003 0 001.42-1.42L4.41 8.99H14c.55 0 1-.45 1-1s-.46-1-1.01-1z"
+              fillRule="evenodd"
+            />
+          </svg>
+        </span>
+      </button>
     </a>
   </div>
-  <div
-    className="counter counter"
+  <h1
+    className="bp3-heading counter counter"
     data-tid="counter"
   >
     1
-  </div>
+  </h1>
   <div
     className="btnGroup"
   >
     <button
-      className="btn"
+      className="bp3-button btn"
       data-tclass="btn"
       onClick={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
       type="button"
     >
-      <i
-        className="fa fa-plus"
-      />
+      <span
+        className="bp3-button-text"
+      >
+        <i
+          className="fa fa-plus"
+        />
+      </span>
     </button>
     <button
-      className="btn"
+      className="bp3-button btn"
       data-tclass="btn"
       onClick={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
       type="button"
     >
-      <i
-        className="fa fa-minus"
-      />
+      <span
+        className="bp3-button-text"
+      >
+        <i
+          className="fa fa-minus"
+        />
+      </span>
     </button>
     <button
-      className="btn"
+      className="bp3-button btn"
       data-tclass="btn"
       onClick={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
       type="button"
     >
-      odd
+      <span
+        className="bp3-button-text"
+      >
+        odd
+      </span>
     </button>
     <button
-      className="btn"
+      className="bp3-button btn"
       data-tclass="btn"
       onClick={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
       type="button"
     >
-      async
+      <span
+        className="bp3-button-text"
+      >
+        async
+      </span>
     </button>
   </div>
 </div>