diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index bc26d7b0d0a389ca33e876fad6e11ca40c2e33bc..0336cd21e56836602480f87ac466cf291cacf8dd 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -6,6 +6,7 @@ stages: build: stage: build script: - - npm install --global yarn + - npm install --force --global yarn - yarn install + - yarn test - yarn build diff --git a/README.md b/README.md index 3c2d0873cf97c840373af105c1564a304fa1d882..4b80faa0933efdba80f508d308683d91443ad033 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,13 @@ yarn run ``` ## Useful resources +[Typescript documentation react](https://www.typescriptlang.org/docs/handbook/react.html) + +[MDN](https://developer.mozilla.org/en-US/) + +[Documentazione material ui: framework css utilizzato](https://material-ui.com/) -[react calendar app](https://codesandbox.io/s/kkyvoj97pv?from-embed=&file=/src/index.js) [codesandbox, utile per vedere altri progetti creati con framework](https://codesandbox.io/) -[awesome css list](https://github.com/awesome-css-group/awesome-css) + +[react calendar app](https://codesandbox.io/s/kkyvoj97pv?from-embed=&file=/src/index.js) + diff --git a/src/App.test.tsx b/src/App.test.tsx index 2a68616d9846ed7d3bfb9f28ca1eb4d51b2c2f84..39ef6e5e60aa05ecb8faae0011be11704ce7125f 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,9 +1,10 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; -import App from './App'; +import { App } from './App'; -test('renders learn react link', () => { - render(<App />); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); +describe('<App />', () => { + it('renders without crashing', () => { + const wrapper = render(<App />); + expect(wrapper.queryByTestId('App')).toBeTruthy(); + }); }); diff --git a/src/App.tsx b/src/App.tsx index 6e5c72dfb7d5e20371e0e4eeede0792db17e5179..45b47ad2beeac12895559975940cac5a59dd3081 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import { Form } from './components/LoginForm/index'; +import { LoginForm } from './components/LoginForm/LoginForm'; export const App: React.FC = () => ( - <div className="App"> + <div className="App" data-testid="App"> <header className="App-header"> - <Form /> + <LoginForm /> </header> </div> ); diff --git a/src/components/LoginForm/LoginForm.test.tsx b/src/components/LoginForm/LoginForm.test.tsx new file mode 100644 index 0000000000000000000000000000000000000000..1ec93065cba790d102a87c5cdb10ba61aa0a0090 --- /dev/null +++ b/src/components/LoginForm/LoginForm.test.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { render, fireEvent } from '@testing-library/react'; +import { LoginForm } from './LoginForm'; + +describe('<LoginForm />', () => { + it('it should render form', () => { + const wrapper = render(<LoginForm />); + expect(wrapper.queryByTestId('LoginForm')).toBeTruthy(); + }); +}); diff --git a/src/components/LoginForm/index.tsx b/src/components/LoginForm/LoginForm.tsx similarity index 82% rename from src/components/LoginForm/index.tsx rename to src/components/LoginForm/LoginForm.tsx index 310bf4ba4d44fea12e1f644061182845bf526fba..eac45d98bf92b27cc4407fefbf58b38bbc3c1403 100644 --- a/src/components/LoginForm/index.tsx +++ b/src/components/LoginForm/LoginForm.tsx @@ -21,7 +21,7 @@ const useStyles = makeStyles((theme: Theme) => }), ); -export const Form: React.FC = () => { +export const LoginForm: React.FC = () => { interface formData { email: string; password: string; @@ -35,15 +35,6 @@ export const Form: React.FC = () => { }; const [formValues, setFormValues] = useState<formData>(defaultValues); - const requestOptions = { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - email: formValues.email, - password: formValues.password, - }), - }; - const handleSubmit = (event: React.FormEvent): void => { event.preventDefault(); const errors: Array<string> = []; @@ -52,17 +43,17 @@ export const Form: React.FC = () => { console.log('Email address not valid'); } else { console.log(formValues); - fetch( - 'https://jsonplaceholder.typicode.com/posts', - requestOptions, - ).then((response) => response.json()); } }; const classes = useStyles(); return ( - <form className={classes.form} onSubmit={handleSubmit}> + <form + className={classes.form} + onSubmit={handleSubmit} + data-testid="LoginForm" + > <TextField variant="outlined" margin="normal" @@ -96,6 +87,7 @@ export const Form: React.FC = () => { fullWidth variant="contained" color="primary" + data-testid="Submit" className={classes.submit} > Sign In