diff --git a/app/app.global.css b/app/app.global.css index f9b4d1e2..57e855c7 100644 --- a/app/app.global.css +++ b/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; diff --git a/app/components/Home.css b/app/components/Home.css index 978a02aa..7b6806c9 100644 --- a/app/components/Home.css +++ b/app/components/Home.css @@ -1,9 +1,9 @@ -.container { +/* .container { position: absolute; top: 30%; left: 10px; text-align: center; -} +} */ .container h2 { font-size: 5rem; diff --git a/app/components/Home.tsx b/app/components/Home.tsx index 947afc03..da672e05 100644 --- a/app/components/Home.tsx +++ b/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 ( -
-

Home

-
- - {' '} - -
+ + + +
+

Home

+
+ + {' '} + +
+ + + ); } diff --git a/app/features/counter/Counter.tsx b/app/features/counter/Counter.tsx index c46294a7..f6027f59 100644 --- a/app/features/counter/Counter.tsx +++ b/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 ( -
+

-

- + ); } diff --git a/package.json b/package.json index 78f9edb4..4909ad85 100644 --- a/package.json +++ b/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", diff --git a/test/e2e/HomePage.e2e.ts b/test/e2e/HomePage.e2e.ts index 457f11da..fd95fa3a 100644 --- a/test/e2e/HomePage.e2e.ts +++ b/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` diff --git a/test/features/counter/Counter.spec.tsx b/test/features/counter/Counter.spec.tsx index 498ecae1..3cd56722 100644 --- a/test/features/counter/Counter.spec.tsx +++ b/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(); }); diff --git a/test/features/counter/__snapshots__/Counter.spec.tsx.snap b/test/features/counter/__snapshots__/Counter.spec.tsx.snap index e6d3b922..9a35003a 100644 --- a/test/features/counter/__snapshots__/Counter.spec.tsx.snap +++ b/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`] = ` -
+
+
- +
-
1 -
+
diff --git a/yarn.lock b/yarn.lock index d82ea594..4245cdfe 100644 --- a/yarn.lock +++ b/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"