[CUTL-90] ☔️ (Base) Major testing overhaul - convert and improve Cypress specs for all pages; Updates for enforcing code coverage (50%); Skip coverage for pages

Note: We still need to configure coverage for pages - this should bring
our numbers up quite a bit

Author: emilyemorehouse

.gitignore

@@ -6,6 +6,7 @@ coverage
 build
 stats.json
 npm-debug.log
+.nyc_output/*
 
 # Mac meta file
 .DS_Store

app/components/AutoSaveFormField/AutoSaveFormField.js

@@ -40,13 +40,21 @@ const AutoSaveFormField = ({ onSave, name, value, ...rest }) => {
     if (success)
       return (
         <Box animation={{ type: 'fadeIn', delay: 0, duration: 200 }} width="60px">
-          <StatusGood color="status-ok" style={{ marginLeft: 10, marginBottom: 22 }} />
+          <StatusGood
+            data-testid={`success-${name}`}
+            color="status-ok"
+            style={{ marginLeft: 10, marginBottom: 22 }}
+          />
         </Box>
       )
     if (error)
       return (
         <Box animation={{ type: 'fadeIn', delay: 0, duration: 200 }} width="60px">
-          <StatusCritical color="status-error" style={{ marginLeft: 10, marginBottom: 58 }} />
+          <StatusCritical
+            data-testid={`error-${name}`}
+            color="status-error"
+            style={{ marginLeft: 10, marginBottom: 58 }}
+          />
         </Box>
       )
     return <Box width="60px" />

app/components/Box/stories/Box.Round.stories.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
-import { Grid } from 'grommet' /** @todo: replace with custom wrappers */
 
 // Components
 import { Box } from '..'
+import { Grid } from '../../Grid'
 import { StoryContainer } from '../../StoryContainer'
 
 // Misc

app/components/Button/stories/Button.Plain.stories.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
-import { Text } from 'grommet' /** @todo: replace with custom wrappers */
 import { Add } from 'grommet-icons'
 
 // Components
 import { Box } from '../../Box'
 import { Button } from '..'
 import { StoryContainer } from '../../StoryContainer'
+import { Text } from '../../Text'
 
 // Misc
 import README from '../README.md'

app/components/Button/stories/Button.Sidebar.stories.js

@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
 import { storiesOf } from '@storybook/react'
-import { grommet, Text } from 'grommet' /** @todo: replace with custom wrappers */
 
 // Components
 import { Box } from '../../Box'
 import { Button } from '..'
 import { StoryContainer } from '../../StoryContainer'
+import { Text } from '../../Text'
 
 // Utils
 import { genericProps } from '../../../utils/propTypes'
@@ -33,7 +33,7 @@ SidebarButton.propTypes = {
 const SidebarButtons = () => {
   const [active, setActive] = useState()
   return (
-    <StoryContainer full theme={grommet}>
+    <StoryContainer full>
       <Box fill direction="row">
         <Box background="neutral-1">
           {['Dashboard', 'Devices', 'Settings'].map(label => (

app/components/PasswordInput/PasswordInput.js

@@ -10,7 +10,7 @@ import { TextInput } from '../TextInput'
  *
  * PasswordInput
  *
- * Displays a textinput with masked value for password
+ * Displays a text input with masked value for password
  *
  * - When FormView Icon is clicked, it reveals the password
  * - When HIde Icon is clicked, it masks the password
@@ -34,12 +34,18 @@ const PasswordInput = ({ value, onChange = () => {}, type, ...rest }) => {
       />
 
       <Button
+        data-testid="show-password-toggle"
         primary={false}
         icon={
           reveal ? (
-            <FormView size="medium" style={{ width: 30 }} color="light-5" />
+            <FormView
+              data-testid="shown-icon"
+              size="medium"
+              style={{ width: 30 }}
+              color="light-5"
+            />
           ) : (
-            <Hide size="medium" style={{ width: 30 }} color="light-5" />
+            <Hide data-testid="hidden-icon" size="medium" style={{ width: 30 }} color="light-5" />
           )
         }
         onClick={() => setReveal(!reveal)}

app/components/PasswordInput/PasswordInput.test.js

@@ -1,11 +1,28 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { fireEvent, render } from '@testing-library/react'
 
 import PasswordInput from './PasswordInput'
 
 const renderComponent = (props = {}) => render(<PasswordInput {...props} />)
 
-test('it renders and matches snapshot', () => {
-  const { container } = renderComponent()
-  expect(container).toMatchSnapshot()
+describe('PasswordInput', () => {
+  it('renders and matches snapshot', () => {
+    const { container } = renderComponent()
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('toggles between shown and hidden', () => {
+    const { getByTestId } = renderComponent()
+
+    getByTestId('hidden-icon')
+
+    fireEvent.click(getByTestId('show-password-toggle'))
+
+    getByTestId('shown-icon')
+
+    fireEvent.click(getByTestId('show-password-toggle'))
+
+    getByTestId('hidden-icon')
+  })
 })

app/components/PasswordInput/__snapshots__/PasswordInput.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`it renders and matches snapshot 1`] = `
+exports[`PasswordInput renders and matches snapshot 1`] = `
 <div>
   <div
     class="StyledBox-sc-13pk1d4-0 bUEJOH"
@@ -17,11 +17,13 @@ exports[`it renders and matches snapshot 1`] = `
     </div>
     <button
       class="StyledButton-sc-323bzc-0 tdSht Button__StyledGrommetButton-sc-5cxguj-0 liIZVq"
+      data-testid="show-password-toggle"
       type="button"
     >
       <svg
         aria-label="Hide"
         class="StyledIcon-ofa7kd-0 jIkYfD"
+        data-testid="hidden-icon"
         style="width: 30px;"
         viewBox="0 0 24 24"
       >

app/components/PublicRoute/__snapshots__/PublicRoute.test.js.snap

@@ -127,11 +127,13 @@ exports[`<PublicRoute /> renders Login if user is not authenticated 1`] = `
                 </div>
                 <button
                   class="StyledButton-sc-323bzc-0 tdSht Button__StyledGrommetButton-sc-5cxguj-0 liIZVq"
+                  data-testid="show-password-toggle"
                   type="button"
                 >
                   <svg
                     aria-label="Hide"
                     class="StyledIcon-ofa7kd-0 dWXdkj"
+                    data-testid="hidden-icon"
                     style="width: 30px;"
                     viewBox="0 0 24 24"
                   >