add jest tests for CommonKit components

src/components/CommonKit/Button/StyledAuthButton.spec.tsx

-import { mount, shallow } from 'enzyme'
+import { mount } from 'enzyme'
 import React from 'react'
 import StyledAuthButton from './StyledAuthButton'
 
 describe('StyledAuthButton component test', () => {
   it('should render correctly the default primary Button', () => {
-    const wrapper = shallow(
-      <StyledAuthButton>Test</StyledAuthButton>
-    ).getElement()
-    expect(wrapper).toBeFalsy()
+    const wrapper = mount(<StyledAuthButton>Test</StyledAuthButton>)
+    expect(wrapper.getElements()).toMatchSnapshot()
   })
 
   it('should render correctly the secondary Button', () => {
-    const wrapper = shallow(
+    const wrapper = mount(
       <StyledAuthButton color="secondary">Test</StyledAuthButton>
-    ).getElement()
-    expect(wrapper).toBeFalsy()
+    )
+    expect(wrapper.getElement()).toMatchSnapshot()
   })
 })

src/components/CommonKit/Button/StyledButton.spec.tsx

+import { mount } from 'enzyme'
+import React from 'react'
+import StyledButton from './StyledButton'
+
+describe('StyledAuthButton component test', () => {
+  it('should render correctly the default primary Button', () => {
+    const wrapper = mount(<StyledButton>Test</StyledButton>)
+    expect(wrapper.find('Button').props().color).toEqual('primary')
+  })
+
+  it('should render correctly the secondary Button', () => {
+    const wrapper = mount(<StyledButton color="secondary">Test</StyledButton>)
+    expect(wrapper.find('Button').props().color).toEqual('secondary')
+  })
+})

src/components/CommonKit/Button/StyledButton.tsx

@@ -65,12 +65,7 @@ const SecondaryButton = withStyles({
 
 function MyButton(props: ButtonProps) {
   return props.color === 'secondary' ? (
-    <SecondaryButton
-      fullWidth
-      color="secondary"
-      variant="outlined"
-      {...props}
-    />
+    <SecondaryButton fullWidth variant="outlined" {...props} />
   ) : (
     <PrimaryButton fullWidth color="primary" variant="contained" {...props} />
   )

src/components/CommonKit/Button/StyledButtonValid.spec.tsx

+import { mount } from 'enzyme'
+import React from 'react'
+import StyledButtonValid from './StyledButtonValid'
+
+describe('StyledButtonValid component test (TO DO)', () => {
+  it('should render correctly the default primary Button', () => {
+    const wrapper = mount(<StyledButtonValid>Test</StyledButtonValid>)
+    expect(wrapper.find('Button').props().color).toEqual('primary')
+  })
+
+  it('should render correctly the secondary Button', () => {
+    const wrapper = mount(
+      <StyledButtonValid color="secondary">Test</StyledButtonValid>
+    )
+    expect(wrapper.find('Button').props().color).toEqual('secondary')
+  })
+})

src/components/CommonKit/Button/StyledButtonValid.tsx

@@ -72,12 +72,7 @@ const SecondaryButton = withStyles({
 
 function MyButton(props: ButtonProps) {
   return props.color === 'secondary' ? (
-    <SecondaryButton
-      fullWidth
-      color="secondary"
-      variant="outlined"
-      {...props}
-    />
+    <SecondaryButton fullWidth variant="outlined" {...props} />
   ) : (
     <PrimaryButton fullWidth color="primary" variant="contained" {...props} />
   )

src/components/CommonKit/Button/StyledClearGreyButton.spec.tsx

+import { mount } from 'enzyme'
+import React from 'react'
+import StyledClearGreyButton from './StyledClearGreyButton'
+
+describe('SyledClearGreyButton component test (TO DO)', () => {
+  it('should render correctly the default primary Button', () => {
+    const wrapper = mount(<StyledClearGreyButton>Test</StyledClearGreyButton>)
+    expect(wrapper.find('Button').props().color).toEqual('primary')
+  })
+
+  it('should render correctly the secondary Button', () => {
+    const wrapper = mount(
+      <StyledClearGreyButton color="secondary">Test</StyledClearGreyButton>
+    )
+    expect(wrapper.find('Button').props().color).toEqual('secondary')
+  })
+})

src/components/CommonKit/Button/StyledStopButton.spec.tsx

+import { mount } from 'enzyme'
+import React from 'react'
+import StyledStopButton from './StyledStopButton'
+
+describe('StyledStopButton component test', () => {
+  it('should render correctly the default primary Button', () => {
+    const wrapper = mount(<StyledStopButton>Test</StyledStopButton>)
+    expect(wrapper.find('Button').props().color).toEqual('primary')
+  })
+
+  it('should render correctly the secondary Button', () => {
+    const wrapper = mount(
+      <StyledStopButton color="secondary">Test</StyledStopButton>
+    )
+    expect(wrapper.find('Button').props().color).toEqual('secondary')
+  })
+})

src/components/CommonKit/Button/StyledWhiteButton.spec.tsx

+import { mount } from 'enzyme'
+import React from 'react'
+import StyledWhiteButton from './StyledWhiteButton'
+
+describe('StyledWhiteButton component test', () => {
+  it('should render correctly the default primary Button', () => {
+    const wrapper = mount(<StyledWhiteButton>Test</StyledWhiteButton>)
+    expect(wrapper.find('Button').props().color).toEqual('primary')
+  })
+
+  it('should render correctly the secondary Button', () => {
+    const wrapper = mount(
+      <StyledWhiteButton color="secondary">Test</StyledWhiteButton>
+    )
+    expect(wrapper.find('Button').props().color).toEqual('secondary')
+  })
+})

src/components/CommonKit/Card/StyledBorderCard.spec.tsx

+import React from 'react'
+import { mount } from 'enzyme'
+import StyledBorderCard from './StyledBorderCard'
+
+describe('StyledBorderCard component test', () => {
+  it('should render correctly StyleBorderCard', () => {
+    const wrapper = mount(<StyledBorderCard />)
+    expect(wrapper.getElement()).toMatchSnapshot()
+  })
+})

src/components/CommonKit/Card/StyledCard.spec.tsx

+import React from 'react'
+import { mount } from 'enzyme'
+import StyledCard from './StyledCard'
+import { FluidType } from 'enum/fluid.enum'
+
+describe('StyledCard component test', () => {
+  it('should render correctly Electricty StyledCard', () => {
+    const wrapper = mount(<StyledCard fluidType={FluidType.ELECTRICITY} />)
+    expect(wrapper.getElement()).toMatchSnapshot()
+  })
+
+  it('should render correctly Water StyledCard', () => {
+    const wrapper = mount(<StyledCard fluidType={FluidType.WATER} />)
+    expect(wrapper.getElement()).toMatchSnapshot()
+  })
+
+  it('should render correctly Gas StyledCard', () => {
+    const wrapper = mount(<StyledCard fluidType={FluidType.GAS} />)
+    expect(wrapper.getElement()).toMatchSnapshot()
+  })
+})

src/components/CommonKit/Card/StyledChallengeCard.spec.tsx

+import React from 'react'
+import { mount } from 'enzyme'
+import StyledChallengeCard from './StyledChallengeCard'
+
+describe('StyledChallengeCard component test', () => {
+  it('should render correctly displayBorder', () => {
+    const wrapper = mount(<StyledChallengeCard />)
+    expect(wrapper.getElement()).toMatchSnapshot()
+  })
+})

src/components/CommonKit/Card/StyledEcogestureCard.spec.tsx

+import React from 'react'
+import { mount } from 'enzyme'
+import StyledEcogestureCard from './StyledEcogestureCard'
+
+describe('StyledEcogestureCard component test', () => {
+  it('should render correclty new ecogesture StyledEcogestureCard', () => {
+    const wrapper = mount(<StyledEcogestureCard newEcogesture={true} />)
+    expect(wrapper.getElement()).toMatchSnapshot()
+  })
+
+  it('should render correctly unlocked StyledEcogestureCard', () => {
+    const wrapper = mount(<StyledEcogestureCard unlocked={true} />)
+    expect(wrapper.getElement()).toMatchSnapshot()
+  })
+
+  it('should render correctly border StyledEcogestureCard', () => {
+    const wrapper = mount(<StyledEcogestureCard border={true} />)
+    expect(wrapper.getElement()).toMatchSnapshot()
+  })
+})

src/components/CommonKit/Card/StyledIconCard.spec.tsx

+import React from 'react'
+import { mount } from 'enzyme'
+import StyledIconCard from './StyledIconCard'
+import { FluidType } from 'enum/fluid.enum'
+
+describe('StyledIconCard component test', () => {
+  it('it should render correctly StyledIconCard', () => {
+    const wrapper = mount(<StyledIconCard fluidType={FluidType.ELECTRICITY} />)
+    expect(wrapper.getElement()).toMatchSnapshot()
+  })
+})

src/components/CommonKit/Card/__snapshots__/StyledBorderCard.spec.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledBorderCard component test should render correctly StyleBorderCard 1`] = `<StyledBorderCard />`;

src/components/CommonKit/Card/__snapshots__/StyledCard.spec.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledCard component test should render correctly Electricty StyledCard 1`] = `
+<StyledCard
+  fluidType={0}
+/>
+`;
+
+exports[`StyledCard component test should render correctly Gas StyledCard 1`] = `
+<StyledCard
+  fluidType={2}
+/>
+`;
+
+exports[`StyledCard component test should render correctly Water StyledCard 1`] = `
+<StyledCard
+  fluidType={1}
+/>
+`;

src/components/CommonKit/Card/__snapshots__/StyledChallengeCard.spec.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledChallengeCard component test should render correctly displayBorder 1`] = `<StyledEcogestureCard />`;

src/components/CommonKit/Card/__snapshots__/StyledEcogestureCard.spec.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledEcogestureCard component test should render correclty new ecogesture StyledEcogestureCard 1`] = `
+<StyledEcogestureCard
+  newEcogesture={true}
+/>
+`;
+
+exports[`StyledEcogestureCard component test should render correctly border StyledEcogestureCard 1`] = `
+<StyledEcogestureCard
+  border={true}
+/>
+`;
+
+exports[`StyledEcogestureCard component test should render correctly unlocked StyledEcogestureCard 1`] = `
+<StyledEcogestureCard
+  unlocked={true}
+/>
+`;

src/components/CommonKit/Card/__snapshots__/StyledIconCard.spec.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledIconCard component test it should render correctly StyledIconCard 1`] = `
+<StyledIconCard
+  fluidType={0}
+/>
+`;

src/components/CommonKit/ExpansionPanel/StyledSampleExpansionPanel.spec.tsx

 import React from 'react'
-import { shallow, mount } from 'enzyme'
+import { mount } from 'enzyme'
 import GenericExpansionPanel from './StyledSampleExpansionPanel'
 
 describe('StyleSampleExpansionPanel component test', () => {
   const mockOnChange = jest.fn()
 
   const mockProps = {
-    summary: <React.Fragment>Summary</React.Fragment>,
-    details: <React.Fragment>details</React.Fragment>,
+    summary: <>Summary</>,
+    details: <>details</>,
     onChange: mockOnChange,
   }
 
   it('should render expanded panel correclty', () => {
-    const wrapper = shallow(
+    const wrapper = mount(
       <GenericExpansionPanel
         summary={mockProps.summary}
         details={mockProps.details}
         expanded={true}
         onChange={mockProps.onChange}
       />
-    ).getElement()
-
-    expect(wrapper).toMatchSnapshot()
+    )
+    expect(wrapper.getElement()).toMatchSnapshot()
   })
 
   it('should render a not expanded panel correclty', () => {
-    const wrapper = shallow(
+    const wrapper = mount(
       <GenericExpansionPanel
         summary={mockProps.summary}
         details={mockProps.details}
         expanded={false}
         onChange={mockProps.onChange}
       />
-    ).getElement()
+    )
 
-    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.getElement()).toMatchSnapshot()
   })
 })