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 {
+import { Grid, Row, Col } from 'react-flexbox-grid';
-  Button,
+import { Button } from '@blueprintjs/core';
-} 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">
+    <Grid fluid>
-      <h2 className="bp3-heading">Home</h2>
+      <Row middle="xs" center="xs" style={{ height: '100vh' }}>
-      <br />
+        <Col xs={12} md={6}>
-      <Link to={routes.COUNTER}>
+          <div className={styles.container} data-tid="container">
-        {' '}
+            <h2 className="bp3-heading">Home</h2>
-        <Button text="To Counter" />
+            <br />
-      </Link>
+            <Link id="to-counter" to={routes.COUNTER}>
-      <br />
+              {' '}
-      <h3 className="bp3-heading">{`${t('Signaling server is running on port')}: ${signalingServerPort}`}</h3>
+              <Button text="to Counter" />
-      <br />
+            </Link>
-      <h3 className="bp3-heading">{`Locales test ${t('Language')}`}</h3>
+            <br />
-      <br />
+            <h3 className="bp3-heading">
-      <Button type="button" onClick={onButtonClick}>
+              {`${t(
-        CLICK ME!
+              'Signaling server is running on port'
-      </Button>
+            )}: ${signalingServerPort}`}
-    </div>
+            </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
+      <button
-        className="fa fa-arrow-left fa-3x"
+        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
+  <h1
-    className="counter counter"
+    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
+      <span
-        className="fa fa-plus"
+        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
+      <span
-        className="fa fa-minus"
+        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>

yarn.lock

@@ -6646,6 +6646,13 @@ flatted@^2.0.0:
   resolved "https://packages.deskreen.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
   integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
+flexboxgrid2@^7.2.0:
+  version "7.2.1"
+  resolved "https://registry.npmjs.org/flexboxgrid2/-/flexboxgrid2-7.2.1.tgz#3ffb9661ca5a9e96468eae648f8caf279bd0b2a4"
+  integrity sha512-O2bO5ZcBXnFy7cYmyt/CKb6CuwzNuUPxWJt8WOiaot8SetE9zyUahXGTSpKDm3+CTYQ5YeEMPeunMdjcxKJz4w==
+  dependencies:
+    normalize.css "^7.0.0"
+
 flush-write-stream@^1.0.0:
   version "1.1.1"
   resolved "https://packages.deskreen.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
@@ -9915,6 +9922,11 @@ normalize-url@^4.1.0:
   resolved "https://packages.deskreen.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
   integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==
 
+normalize.css@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/normalize.css/-/normalize.css-7.0.0.tgz#abfb1dd82470674e0322b53ceb1aaf412938e4bf"
+  integrity sha1-q/sd2CRwZ04DIrU86xqvQSk45L8=
+
 normalize.css@^8.0.1:
   version "8.0.1"
   resolved "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
@@ -11109,7 +11121,7 @@ prop-types-exact@^1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
-prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://packages.deskreen.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -11327,6 +11339,14 @@ react-dom@^16.12.0:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
+react-flexbox-grid@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/react-flexbox-grid/-/react-flexbox-grid-2.1.2.tgz#5eadf04e8559f7140cd6867a55a5351ded8d3920"
+  integrity sha512-lj1oVnIJ7TY3W6tPjFUxlUYd1DLFxEg8RiX3HAYVvreE3O9HU9n2390CFoPQ+qk1E+5MXa2t/mLMafFLAa8+7Q==
+  dependencies:
+    flexboxgrid2 "^7.2.0"
+    prop-types "^15.5.8"
+
 react-hot-loader@^4.12.21:
   version "4.12.21"
   resolved "https://packages.deskreen.com/react-hot-loader/-/react-hot-loader-4.12.21.tgz#332e830801fb33024b5a147d6b13417f491eb975"