Merge branch 'master' into feature/toast

Author: Zsolt Meszaros

README.md

@@ -5,7 +5,7 @@
 ## User Stories
 
 - [x] As a user I can see a randomly generated password on page load
-- [ ] As a user I can change the length of the generated password
+- [x] As a user I can change the length of the generated password
 - [x] As a user I can include/exclude uppercase letters, lowercase letters, numbers, and symbols
 - [x] As a user I can see a new password whenever I make a change in my settings
 - [x] As a user I can click on a button to copy the password to clipboard without selecting it first

cypress/e2e/Options.spec.js

@@ -1,3 +1,27 @@
+/**
+ * Helper function to change value of a slider. It sets the value of the DOM
+ * node and fires a change event on it.
+ *
+ * We need this because `onChange` is not triggered with React using a simple
+ * `.invoke('val', value).trigger('change');`
+ *
+ * https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-onchange-event-in-react-js/46012210#46012210
+ */
+function setValueAndFireChange(input, value) {
+  const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+    window.HTMLInputElement.prototype,
+    'value',
+  ).set;
+
+  nativeInputValueSetter.call(input, value);
+  input.dispatchEvent(
+    new Event('change', {
+      value,
+      bubbles: true,
+    }),
+  );
+}
+
 describe('Password customisation', () => {
   beforeEach(() => {
     cy.visit('/');
@@ -132,19 +156,22 @@ describe('Password customisation', () => {
       .should('have.length', 0);
   });
 
-  it('changes password length if length option is changed', () => {
-    cy.get('label:last-child()').click();
-    cy.focused()
-      .type('{rightarrow}')
-      .type('{backspace}');
+  it('changes password length if slider is changed', () => {
+    const newLength = 5;
 
-    cy.get('[name="generatedPassword"]')
+    cy.get('input[type="range"]').then(([rangeInput]) => {
+      setValueAndFireChange(rangeInput, newLength);
+    });
+
+    cy.get('[name ="generatedPassword"]')
       .invoke('val')
-      .should('have.length', 4);
+      .should('have.length', newLength);
   });
 
   it('saves settings to localStorage on change', () => {
     const key = 'settings';
+    const newLength = 5;
+
     expect(localStorage.getItem('settings')).to.eq(null);
 
     cy.get('label')
@@ -155,12 +182,12 @@ describe('Password customisation', () => {
       .next()
       .click();
 
-    cy.get('label:last-child()').click();
-    cy.focused()
-      .type('{rightarrow}')
-      .type('{backspace}');
+    cy.get('input[type="range"]').then(([rangeInput]) => {
+      setValueAndFireChange(rangeInput, newLength);
+    });
 
     cy.log(localStorage.getItem(key));
+
     cy.window().then(win => {
       const actual = win.localStorage.getItem(key);
       expect(actual).to.eq(
@@ -169,7 +196,7 @@ describe('Password customisation', () => {
           hasNumbers: true,
           hasSymbols: false,
           hasUppercase: false,
-          length: 4,
+          length: newLength,
         }),
       );
     });
@@ -178,7 +205,7 @@ describe('Password customisation', () => {
 
     cy.get('[name="generatedPassword"]')
       .invoke('val')
-      .should('have.length', 4);
+      .should('have.length', newLength);
 
     cy.get('input[type="checkbox"]')
       .eq(0)
@@ -196,6 +223,6 @@ describe('Password customisation', () => {
       .eq(3)
       .should('not.be.checked');
 
-    cy.get('label:last-child() input').should('have.value', '4');
+    cy.get('input[type="range"]').should('have.value', newLength.toString());
   });
 });

package-lock.json

@@ -10,7 +10,7 @@
     "styled-components": "^4.4.0"
   },
   "devDependencies": {
-    "cypress": "^3.4.1",
+    "cypress": "^3.6.1",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "enzyme-to-json": "^3.4.2",

package.json

@@ -3,6 +3,7 @@ import styled from 'styled-components/macro';
 
 import PasswordInput from './PasswordInput';
 import PasswordStrength from './PasswordStrength';
+import Range from './Range';
 import SwitchToggle from './SwitchToggle';
 import { Wrapper } from './GlobalStyles';
 
@@ -47,15 +48,19 @@ function App() {
   const [hasLowercase, setHasLowercase] = useState(settings.hasLowercase);
   const [hasUppercase, setHasUppercase] = useState(settings.hasUppercase);
   const [length, setLength] = useState(settings.length);
-  const [password, setPassword] = useState(() =>
-    generatePassword({
-      hasLowercase,
-      hasNumbers,
-      hasSymbols,
-      hasUppercase,
-      length,
-    }),
-  );
+  const [password, setPassword] = useState(() => {
+    try {
+      return generatePassword({
+        hasLowercase,
+        hasNumbers,
+        hasSymbols,
+        hasUppercase,
+        length,
+      });
+    } catch (e) {
+      return ' ';
+    }
+  });
   const [strengthScore, setStrengthScore] = useState(
     calculatePasswordStrength(password),
   );
@@ -132,16 +137,14 @@ function App() {
             isChecked={hasSymbols}
             onToggle={setHasSymbols}
           />
-          <label>
-            <input
-              type="number"
-              min="4"
-              max="99"
-              value={length}
-              onChange={e => setLength(+e.target.value)}
-            />
-            Length
-          </label>
+          <Range
+            aria-label="Password length"
+            id="length"
+            min={4}
+            max={99}
+            onChange={setLength}
+            value={length}
+          />
         </Options>
       </Wrapper>
     </Main>

src/components/App.js

@@ -18,7 +18,7 @@ export const Wrapper = styled.div`
 `;
 
 export default createGlobalStyle`
- *, *::after, *::before  {
+ *, *::after, *::before {
     box-sizing: inherit;
   }
 
@@ -41,7 +41,7 @@ export default createGlobalStyle`
     font-weight: 600;
   }
 
-  button, input {
+  button, input, output {
     border: 1px solid ${({ theme }) => theme.border};
     border-radius: ${({ theme }) => theme.borderRadius};
     font-family: inherit;

src/components/GlobalStyles.js

@@ -14,9 +14,10 @@ const InputWrapper = styled.div`
 
   &::after {
     background-image: ${({ theme }) =>
-      `linear-gradient(to right, transparent, ${theme.input})`};
+      `linear-gradient(to right, rgba(255, 255, 255, 0), ${theme.input})`};
     content: '';
     height: 4rem;
+    pointer-events: none;
     position: absolute;
     right: 1rem;
     top: 1px;