Merge branch 'dev' into docz

.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

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)
+

src/App.test.tsx

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

src/App.tsx

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

src/components/LoginForm/LoginForm.test.tsx

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

src/components/LoginForm/index.tsx → 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