From d14c6af1f959d99ba28211a975162540b142d52c Mon Sep 17 00:00:00 2001 From: Nate Clark Date: Sat, 16 May 2020 13:26:15 -0400 Subject: [PATCH 1/3] =?UTF-8?q?test:=20=F0=9F=A7=AA=20Add=20e2e=20test=20f?= =?UTF-8?q?or=20login=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #210 --- cypress/cypress.json | 1 - cypress/fixtures/users.js | 8 ++++++ cypress/integration/login.spec.js | 27 ++++++++++++++++++++ cypress/support/commands.js | 10 ++++++++ cypress/support/index.js | 1 + cypress/support/unhandledExceptions.js | 8 ++++++ packages/ui/src/shared/Notification/index.js | 2 +- 7 files changed, 55 insertions(+), 2 deletions(-) create mode 100644 cypress/fixtures/users.js create mode 100644 cypress/integration/login.spec.js create mode 100644 cypress/support/unhandledExceptions.js diff --git a/cypress/cypress.json b/cypress/cypress.json index 47c92d98..33a923bc 100644 --- a/cypress/cypress.json +++ b/cypress/cypress.json @@ -2,6 +2,5 @@ "baseUrl": "https://local.host:3000", "pluginsFile": false, "nodeVersion": "system", - "supportFile": false, "video": false } diff --git a/cypress/fixtures/users.js b/cypress/fixtures/users.js new file mode 100644 index 00000000..925a4e2b --- /dev/null +++ b/cypress/fixtures/users.js @@ -0,0 +1,8 @@ +const users = { + valid: { + password: 'password', + username: 'user', + }, +}; + +export { users }; diff --git a/cypress/integration/login.spec.js b/cypress/integration/login.spec.js new file mode 100644 index 00000000..7fa4f3ec --- /dev/null +++ b/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'); + }); +}); diff --git a/cypress/support/commands.js b/cypress/support/commands.js index ca4d256f..aabb66ce 100644 --- a/cypress/support/commands.js +++ b/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(); +}); diff --git a/cypress/support/index.js b/cypress/support/index.js index 37a498fb..9d299b21 100644 --- a/cypress/support/index.js +++ b/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') diff --git a/cypress/support/unhandledExceptions.js b/cypress/support/unhandledExceptions.js new file mode 100644 index 00000000..e5d339f3 --- /dev/null +++ b/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 */ diff --git a/packages/ui/src/shared/Notification/index.js b/packages/ui/src/shared/Notification/index.js index 798005b1..da7cd24b 100644 --- a/packages/ui/src/shared/Notification/index.js +++ b/packages/ui/src/shared/Notification/index.js @@ -29,7 +29,7 @@ const Notification = ({ children, type }) => { const notify = prop(type.toLowerCase(), toast); const Content = () => ( - + From 5a072bc5535481791137d53344d68ea36e5e6a69 Mon Sep 17 00:00:00 2001 From: Nate Clark Date: Sat, 16 May 2020 13:35:24 -0400 Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20=E2=99=BB=EF=B8=8F=20Update=20`?= =?UTF-8?q?MenuDisclosure`=20to=20`MenuButton`=20for=20Reakit?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/__mocks__/reakit/Menu.js | 4 ++-- .../Toggles/LanguageToggle/__snapshots__/index.spec.js.snap | 4 ++-- .../App/Layout/Footer/Toggles/LanguageToggle/index.js | 4 ++-- .../Header/UserMenu/Avatar/__snapshots__/index.spec.js.snap | 4 ++-- .../app/components/App/Layout/Header/UserMenu/Avatar/index.js | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/ui/__mocks__/reakit/Menu.js b/packages/ui/__mocks__/reakit/Menu.js index b6bbd956..dc07c54d 100644 --- a/packages/ui/__mocks__/reakit/Menu.js +++ b/packages/ui/__mocks__/reakit/Menu.js @@ -1,8 +1,8 @@ import React from 'react'; const Menu = (props) => ; -const MenuDisclosure = (props) => ; +const MenuButton = (props) => ; const MenuItem = (props) => ; const useMenuState = () => ({ hide: jest.fn().mockName('hide') }); -export { Menu, MenuDisclosure, MenuItem, useMenuState }; +export { Menu, MenuButton, MenuItem, useMenuState }; diff --git a/packages/ui/src/modules/app/components/App/Layout/Footer/Toggles/LanguageToggle/__snapshots__/index.spec.js.snap b/packages/ui/src/modules/app/components/App/Layout/Footer/Toggles/LanguageToggle/__snapshots__/index.spec.js.snap index d846dff3..9068e469 100644 --- a/packages/ui/src/modules/app/components/App/Layout/Footer/Toggles/LanguageToggle/__snapshots__/index.spec.js.snap +++ b/packages/ui/src/modules/app/components/App/Layout/Footer/Toggles/LanguageToggle/__snapshots__/index.spec.js.snap @@ -2,7 +2,7 @@ exports[` renders properly 1`] = `
- 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" /> - + diff --git a/packages/ui/src/modules/app/components/App/Layout/Footer/Toggles/LanguageToggle/index.js b/packages/ui/src/modules/app/components/App/Layout/Footer/Toggles/LanguageToggle/index.js index 6a1c930a..46578e12 100644 --- a/packages/ui/src/modules/app/components/App/Layout/Footer/Toggles/LanguageToggle/index.js +++ b/packages/ui/src/modules/app/components/App/Layout/Footer/Toggles/LanguageToggle/index.js @@ -2,7 +2,7 @@ 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'; @@ -10,7 +10,7 @@ import { Language } from 'types/language'; import { LanguageDisplay } from 'types/languageDisplay'; import * as ThemeStyles from './theme'; -const StyledDisclosure = styled(MenuDisclosure)` +const StyledDisclosure = styled(MenuButton)` ${styles} `; diff --git a/packages/ui/src/modules/app/components/App/Layout/Header/UserMenu/Avatar/__snapshots__/index.spec.js.snap b/packages/ui/src/modules/app/components/App/Layout/Header/UserMenu/Avatar/__snapshots__/index.spec.js.snap index 184d7d4b..020d2bfd 100644 --- a/packages/ui/src/modules/app/components/App/Layout/Header/UserMenu/Avatar/__snapshots__/index.spec.js.snap +++ b/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[` renders properly 1`] = ` - renders properly 1`] = ` src="//www.gravatar.com/avatar/0c83f57c786a0b4a39efab23731c7ebc?d=identicon&r=G&s=30" />
- + `; diff --git a/packages/ui/src/modules/app/components/App/Layout/Header/UserMenu/Avatar/index.js b/packages/ui/src/modules/app/components/App/Layout/Header/UserMenu/Avatar/index.js index ef9d91c2..da8a813a 100644 --- a/packages/ui/src/modules/app/components/App/Layout/Header/UserMenu/Avatar/index.js +++ b/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} `; From 83e4d7cac07760096ba1d16c05c0a5ed8665c545 Mon Sep 17 00:00:00 2001 From: Nate Clark Date: Sat, 16 May 2020 13:44:56 -0400 Subject: [PATCH 3/3] =?UTF-8?q?chore(a11y):=20=F0=9F=94=A5=20Remove=20`rea?= =?UTF-8?q?ct-axe`=20tool=20in=20dev=20mode?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It was causing a lot of incorrect errors to pollute the console --- packages/ui/package.json | 1 - packages/ui/src/index.js | 15 +-------------- yarn.lock | 18 ------------------ 3 files changed, 1 insertion(+), 33 deletions(-) diff --git a/packages/ui/package.json b/packages/ui/package.json index 48e50792..b9909c3f 100644 --- a/packages/ui/package.json +++ b/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", diff --git a/packages/ui/src/index.js b/packages/ui/src/index.js index 3e703494..d6724345 100644 --- a/packages/ui/src/index.js +++ b/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(, rootEl); -} else { - import( - /* webpackChunkName: "devTools" */ - 'devTools' - ).then(async ({ load }) => { - await load(); - ReactDOM.render(, rootEl); - }); -} +ReactDOM.render(, rootEl); diff --git a/yarn.lock b/yarn.lock index e8902d3e..ebfae1c1 100644 --- a/yarn.lock +++ b/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"