tryber · Gudine · Apr 25, 2022 · Apr 25, 2022 · Apr 25, 2022 · Apr 25, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,12 +6,15 @@
     "node": "16"
   },
   "dependencies": {
+    "@redux-devtools/extension": "^3.2.2",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^8.0.1",
     "react-scripts": "4.0.3",
+    "redux": "^4.2.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/public/bootstrap/bootstrap.min.css b/public/bootstrap/bootstrap.min.css
diff --git a/public/bootstrap/bootstrap.min.js b/public/bootstrap/bootstrap.min.js
diff --git a/public/index.html b/public/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link href="./bootstrap/bootstrap.min.css" rel="stylesheet">
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />

diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,112 @@
-.App {
-  text-align: center;
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap') ;
+
+:root {
+
+  --bg: #489bf7;
+
+  --main: white;
+
+  --bg-1: #0b0f2f;
+
+  --bg-2: #1e223f;
+
+  --fg-1: #7a7b8d;
+
+  --blue-slider: #0429d6;
+
+  --blue-switch: #5e6bda;
+}
+
+#root {
+  align-items: center;
+  background-color: var(--bg);
+  color: var(--main);
+  display: flex;
+  font-family: Montserrat, sans-serif;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 30px;
+  width: 100%;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.main-container {
+  background-color: var(--bg-1);
+  border-radius: 16px;
+  box-shadow: 2px 10px 15px 3px rgba(0, 0, 0, 0.5);
+  padding: 20px 40px 40px;
+  width: 100%;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.main-container h1 {
+  margin-bottom: 30px;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
+.subtitle {
+  color: var(--fg-1);
+  font-weight: 500;
+  text-transform: uppercase;
+  margin: 16px 0 0;
+}
+
+.length {
+  color: var(--main);
+}
+
+.field-cont {
   align-items: center;
+  background-color: var(--bg-2);
+  border-radius: 12px;
+  display: flex;
+  font-size: 1.45em;
+  font-weight: 500;
+  height: 75px;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  margin: 4px 0 12px;
 }
 
-.App-link {
-  color: #61dafb;
+.switch-cont {
+  justify-content: space-between;
+  padding: 4px 40px;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
+.switch-cont.form-switch .form-check-input {
+  font-size: 1.35em;
+  margin: 0;
+}
+
+.switch-cont.form-switch .form-check-input:checked {
+  background-color: var(--blue-switch);
+  border-color: var(--blue-switch);
+}
+
+.boundaries {
+  padding: 20px;
+  font-weight: 500;
+}
+
+.slider {
+  width: 100%;
+}
+
+.button {
+  align-items: center;
+  background: linear-gradient(100deg, rgb(105, 126, 225), rgb(111, 79, 157));
+  border: none;
+  border-radius: 16px;
+  color: white;
+  display: flex;
+  font-size: 1.45em;
+  font-weight: 700;
+  height: 75px;
+  justify-content: center;
+  margin: 4px 0 12px;
+  text-transform: uppercase;
+  width: 100%;
+}
+
+@media ( min-width : 600px ) {
+
+  .main-container {
+    width: 600px;
   }
 }
diff --git a/src/App.js b/src/App.js
@@ -1,24 +1,32 @@
-import logo from './logo.svg';
+import { useDispatch } from 'react-redux';
 import './App.css';
+import CharRange from './components/CharRange';
+import Checkbox from './components/Checkbox';
+import Password from './components/Password';
+import { generatePassword } from './redux/actions';
 
 function App() {
+  const dispatch = useDispatch();
+
+  const handleSubmit = (ev) => {
+    ev.preventDefault();
+    dispatch(generatePassword());
+  };
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <form className="main-container" onSubmit={ handleSubmit }>
+      <h1>Password Generator</h1>
+      <Password />
+      <CharRange />
+      <p className="subtitle">Settings</p>
+      <Checkbox field="Uppercase" />
+      <Checkbox field="Lowercase" />
+      <Checkbox field="Numbers" />
+      <Checkbox field="Symbols" />
+      <button className="button" type="submit">
+        Generate Password
+      </button>
+    </form>
   );
 }
 

diff --git a/src/App.test.js b/src/App.test.js
@@ -1,8 +1,106 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
 import App from './App';
+import rootReducer from './redux/reducers';
 
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+const upperList = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+const lowerList = 'abcdefghijklmnopqrstuvwxyz';
+const numList = '123456789';
+const symbolList = '!"#$%&\'()*+,-./:;<=>?@[\\]^_`{|}~';
+
+const renderWithRedux = (component) => {
+  const store = createStore(rootReducer);
+
+  return {
+    ...render(
+      <Provider store={ store }>
+        {component}
+      </Provider>,
+    ),
+    store,
+  };
+};
+
+test('Página contém o título "Password Generator"', () => {
+  renderWithRedux(<App />);
+
+  const title = screen.getByRole('heading', {
+    name: /password generator/i, level: 1 });
+  expect(title).toBeDefined();
+});
+
+test('Página contém um input do tipo range funcional', () => {
+  renderWithRedux(<App />);
+
+  const lengthRange = screen.getByLabelText(/length/i);
+  const lengthText = screen.getByTestId('pass-length');
+  expect(lengthRange).toBeDefined();
+  expect(lengthText).toHaveTextContent('16');
+
+  // Não dá pra mudar um range com o userEvent, pelas minhas pesquisas
+  // Fonte: https://github.com/testing-library/user-event/issues/871#issuecomment-1059317998
+  fireEvent.change(lengthRange, { target: { value: 7 } });
+  expect(lengthText).toHaveTextContent('7');
+});
+
+test('Página contém quatro switches funcionais', () => {
+  renderWithRedux(<App />);
+
+  const upperCheck = screen.getByRole('switch', { name: /include uppercase/i });
+  const lowerCheck = screen.getByRole('switch', { name: /include lowercase/i });
+  const numCheck = screen.getByRole('switch', { name: /include numbers/i });
+  const symbolsCheck = screen.getByRole('switch', { name: /include symbols/i });
+
+  expect(upperCheck).toBeChecked();
+  expect(lowerCheck).toBeChecked();
+  expect(numCheck).toBeChecked();
+  expect(symbolsCheck).not.toBeChecked();
+
+  userEvent.click(upperCheck);
+  userEvent.click(lowerCheck);
+  userEvent.click(numCheck);
+  userEvent.click(symbolsCheck);
+
+  expect(upperCheck).not.toBeChecked();
+  expect(lowerCheck).not.toBeChecked();
+  expect(numCheck).not.toBeChecked();
+  expect(symbolsCheck).toBeChecked();
+});
+
+test('Página contém um botão que gera uma senha nova, dentro das restrições', () => {
+  renderWithRedux(<App />);
+
+  const passList = [];
+
+  const upperCheck = screen.getByRole('switch', { name: /include uppercase/i });
+  const lowerCheck = screen.getByRole('switch', { name: /include lowercase/i });
+  const numCheck = screen.getByRole('switch', { name: /include numbers/i });
+  const symbolsCheck = screen.getByRole('switch', { name: /include symbols/i });
+
+  const genPasswordBtn = screen.getByRole('button', { name: /generate password/i });
+  const password = screen.getByTestId('password');
+  expect(password).toHaveTextContent(/click generate/i);
+  passList.push(password.textContent);
+
+  userEvent.click(genPasswordBtn);
+  expect(passList).not.toContain(password.textContent);
+  [...password.textContent].forEach((char) => {
+    expect(symbolList).not.toContain(char);
+  });
+  passList.push(password.textContent);
+
+  userEvent.click(upperCheck);
+  userEvent.click(lowerCheck);
+  userEvent.click(numCheck);
+  userEvent.click(symbolsCheck);
+
+  userEvent.click(genPasswordBtn);
+  expect(passList).not.toContain(password.textContent);
+  [...password.textContent].forEach((char) => {
+    expect(upperList).not.toContain(char);
+    expect(lowerList).not.toContain(char);
+    expect(numList).not.toContain(char);
+  });
 });
diff --git a/src/components/CharRange.js b/src/components/CharRange.js
@@ -0,0 +1,29 @@
+import { useDispatch, useSelector } from "react-redux";
+import { changeLength } from "../redux/actions";
+
+export default () => {
+  const length = useSelector((state) => state.length);
+  const dispatch = useDispatch();
+  return (
+    <>
+      <p className="subtitle">
+        <label htmlFor="length-range">Length</label>
+        {': '}
+        <span data-testid="pass-length" className="length">{length}</span>
+      </p>
+      <div className="field-cont">
+        <span className="boundaries">4</span>
+        <input
+          id="length-range"
+          className="slider"
+          type="range"
+          min="4"
+          max="32"
+          value={ length }
+          onChange={ ({ target }) => dispatch(changeLength(target.value)) }
+        />
+        <span className="boundaries">32</span>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js
@@ -0,0 +1,24 @@
+import { useDispatch, useSelector } from "react-redux";
+import { changeCheckbox } from "../redux/actions";
+
+export default ({ field }) => {
+  const value = useSelector((state) => state[field.toLowerCase()]);
+  const dispatch = useDispatch();
+  return (
+    <div className="form-check form-switch field-cont switch-cont">
+      <label className="form-check-label" htmlFor={`checkbox-${field.toLowerCase()}`}>
+        {` Include ${field}`}
+      </label>
+      <input
+        id={`checkbox-${field.toLowerCase()}`}
+        className="form-check-input"
+        type="checkbox"
+        role="switch"
+        checked={value}
+        onChange={({ target }) => dispatch(
+          changeCheckbox(field.toLowerCase(), target.checked)
+        )}
+      />
+    </div>
+  );
+};
diff --git a/src/components/Password.js b/src/components/Password.js
@@ -0,0 +1,13 @@
+import { useSelector } from "react-redux";
+
+export default () => {
+  const password = useSelector((state) => state.password);
+  return (
+    <div
+      data-testid="password"
+      className="field-cont"
+    >
+      { password || 'CLICK GENERATE' }
+    </div>
+  );
+};