Merge pull request #213 from n8io/test/add-e2e-test-for-password-rese…

…t-210

cypress/cypress.json

@@ -2,6 +2,5 @@
   "baseUrl": "https://local.host:3000",
   "pluginsFile": false,
   "nodeVersion": "system",
-  "supportFile": false,
   "video": false
 }

cypress/fixtures/users.js

@@ -0,0 +1,8 @@
+const users = {
+  valid: {
+    password: 'password',
+    username: 'user',
+  },
+};
+
+export { users };

cypress/integration/login.spec.js

@@ -0,0 +1,27 @@
+import { users } from '../fixtures/users';
+
+describe('routes', () => {
+  beforeEach(() => {
+    cy.visit('/login');
+  });
+
+  it('resolves to the login route', () => {
+    cy.location('pathname').should('eq', '/login');
+  });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('handles a valid login', () => {
+    const { password, username } = users.valid;
+
+    cy.login(username, password);
+    cy.location('pathname').should('eq', '/');
+  });
+
+  it('handles an invalid login', () => {
+    const password = 'INVALID';
+    const { username } = users.valid;
+
+    cy.login(username, password);
+    cy.get('div[data-testid="notification"]').should('be.visible');
+  });
+});

cypress/support/commands.js

@@ -23,3 +23,13 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+Cypress.Commands.add('logout', () => {
+  cy.visit('/logout');
+});
+
+Cypress.Commands.add('login', (username, password) => {
+  cy.visit('/login');
+  cy.get('input[name="username"]').type(username);
+  cy.get('input[name="password"]').type(password);
+  cy.get('form').submit();
+});

cypress/support/index.js

@@ -15,6 +15,7 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands';
+import './unhandledExceptions';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

cypress/support/unhandledExceptions.js

@@ -0,0 +1,8 @@
+/* eslint-disable no-console */
+Cypress.on('uncaught:exception', (err, runnable) => {
+  console.log(`err :${err}`);
+  console.log(`runnable :${runnable}`);
+
+  return false;
+});
+/* eslint-enable no-console */

packages/ui/__mocks__/reakit/Menu.js

@@ -1,8 +1,8 @@
 import React from 'react';
 
 const Menu = (props) => <x-Menu {...props} />;
-const MenuDisclosure = (props) => <x-MenuDisclosure {...props} />;
+const MenuButton = (props) => <x-MenuButton {...props} />;
 const MenuItem = (props) => <x-MenuItem {...props} />;
 const useMenuState = () => ({ hide: jest.fn().mockName('hide') });
 
-export { Menu, MenuDisclosure, MenuItem, useMenuState };
+export { Menu, MenuButton, MenuItem, useMenuState };

packages/ui/package.json

@@ -113,7 +113,6 @@
     "history": "^4.10.1",
     "logrocket-cli": "^0.12.0",
     "prettier": "^2.0.5",
-    "react-axe": "^3.2.0",
     "sentry-files": "^1.0.1",
     "serve": "^11.3.0",
     "shelljs": "^0.8.3",

packages/ui/src/index.js

@@ -1,23 +1,10 @@
-import { config } from 'config';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { App } from 'modules/app';
 import { initializeTranslations } from './i18n';
 
-const { isProduction } = config;
-
 initializeTranslations();
 
 const rootEl = document.getElementById('root');
 
-if (isProduction) {
-  ReactDOM.render(<App />, rootEl);
-} else {
-  import(
-    /* webpackChunkName: "devTools" */
-    'devTools'
-  ).then(async ({ load }) => {
-    await load();
-    ReactDOM.render(<App />, rootEl);
-  });
-}
+ReactDOM.render(<App />, rootEl);

packages/ui/src/modules/app/components/App/Layout/Footer/Toggles/LanguageToggle/__snapshots__/index.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`<LanguageToggle/> renders properly 1`] = `
 <div>
-  <x-menudisclosure
+  <x-menubutton
     classname="LanguageToggle__StyledDisclosure-sc-1xtjogu-0 jYuXFh"
     context="PRIMARY"
     data-testid="language"
@@ -21,7 +21,7 @@ exports[`<LanguageToggle/> renders properly 1`] = `
         d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
       />
     </svg>
-  </x-menudisclosure>
+  </x-menubutton>
   <x-menu
     classname="LanguageToggle__StyledMenu-sc-1xtjogu-1 fJMFWJ"
   >

packages/ui/src/modules/app/components/App/Layout/Footer/Toggles/LanguageToggle/index.js

@@ -2,15 +2,15 @@ import { LocalStorage } from '@boilerplate-monorepo/ui-common';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdLanguage } from 'react-icons/md';
-import { Menu, MenuDisclosure, MenuItem, useMenuState } from 'reakit/Menu';
+import { Menu, MenuButton, MenuItem, useMenuState } from 'reakit/Menu';
 import { Context, Size, styles } from 'shared/Button';
 import styled from 'styled-components/macro';
 import { CustomProperty } from 'types/customProperties';
 import { Language } from 'types/language';
 import { LanguageDisplay } from 'types/languageDisplay';
 import * as ThemeStyles from './theme';
 
-const StyledDisclosure = styled(MenuDisclosure)`
+const StyledDisclosure = styled(MenuButton)`
   ${styles}
 `;
 

packages/ui/src/modules/app/components/App/Layout/Header/UserMenu/Avatar/__snapshots__/index.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Avatar/> renders properly 1`] = `
-<x-menudisclosure
+<x-menubutton
   aria-label="user menu"
   classname="Avatar__StyledDisclosure-sc-11puhtb-1 icsQwQ"
   context="LINK"
@@ -20,5 +20,5 @@ exports[`<Avatar/> renders properly 1`] = `
       src="//www.gravatar.com/avatar/0c83f57c786a0b4a39efab23731c7ebc?d=identicon&r=G&s=30"
     />
   </div>
-</x-menudisclosure>
+</x-menubutton>
 `;

packages/ui/src/modules/app/components/App/Layout/Header/UserMenu/Avatar/index.js

@@ -2,7 +2,7 @@ import { url } from 'gravatar';
 import { bool, func, object } from 'prop-types';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import { Menu, MenuDisclosure, MenuItem, useMenuState } from 'reakit/Menu';
+import { Menu, MenuButton, MenuItem, useMenuState } from 'reakit/Menu';
 import { Context, Size, styles as buttonStyles } from 'shared/Button';
 import { Loader } from 'shared/Loader';
 import { Muted } from 'shared/Muted';
@@ -21,7 +21,7 @@ const Container = styled.div`
   grid-template-columns: 1fr auto;
 `;
 
-const StyledDisclosure = styled(MenuDisclosure)`
+const StyledDisclosure = styled(MenuButton)`
   ${buttonStyles}
 `;
 

packages/ui/src/shared/Notification/index.js

@@ -29,7 +29,7 @@ const Notification = ({ children, type }) => {
   const notify = prop(type.toLowerCase(), toast);
 
   const Content = () => (
-    <Container>
+    <Container data-testid="notification" type={type}>
       <IconBackground>
         <LogLevelIcon type={type} />
       </IconBackground>

yarn.lock

@@ -5916,11 +5916,6 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e"
   integrity sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==
 
-axe-core@^3.5.0:
-  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.5.3.tgz#5b7c0ee7c5197d546bd3a07c3ef701896f5773e9"
-  integrity sha512-HZpLE7xu05+8AbpqXITGdxp1Xwk8ysAXrg7MiKRY27py3DAyEJpoJQo1727pWF3F+O79V3r+cTWhOzfB49P89w==
-
 axobject-query@^2.0.2:
   version "2.1.1"
   resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.1.1.tgz#2a3b1271ec722d48a4cd4b3fcc20c853326a49a7"
@@ -18648,14 +18643,6 @@ react-app-polyfill@^1.0.1:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
-react-axe@^3.2.0:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/react-axe/-/react-axe-3.4.1.tgz#8874ca48b5af71452d97c2991d37cdcbba6c3a48"
-  integrity sha512-1UDeqesgb5gCj2XPE5WXqKv2xcwGGeWIock3uBVtZSVGbZGVzjmgYf4eRyNJ8BNnHpPQKUs4Ro5jW2+V037deg==
-  dependencies:
-    axe-core "^3.5.0"
-    requestidlecallback "^0.3.0"
-
 react-clientside-effect@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837"
@@ -19586,11 +19573,6 @@ request@^2.88.0:
     tunnel-agent "^0.6.0"
     uuid "^3.3.2"
 
-requestidlecallback@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/requestidlecallback/-/requestidlecallback-0.3.0.tgz#6fb74e0733f90df3faa4838f9f6a2a5f9b742ac5"
-  integrity sha1-b7dOBzP5DfP6pIOPn2oqX5t0KsU=
-
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"