v/deskreen
1
0
Fork 0
mirror of https://github.com/pavlobu/deskreen.git synced 2025-05-27 21:00:08 -07:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Pavlo Buidenkov 2020-08-15 19:02:47 +03:00
parent 5f3eece342
commit 86a108c1ea
9 changed files with 146 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/app.global.css
View File

@ -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;

4
app/components/Home.css
View File

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

48
app/components/Home.tsx
View File

@ -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>
);
}

7
app/features/counter/Counter.tsx
View File

@ -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>
);
}

1
package.json
View File

@ -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",

6
test/e2e/HomePage.e2e.ts
View File

@ -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`

16
test/features/counter/Counter.spec.tsx
View File

@ -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();
});

94
test/features/counter/__snapshots__/Counter.spec.tsx.snap
View File

@ -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>

22
yarn.lock
View File

@ -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"