mirror of
https://github.com/roleypoly/roleypoly-v1.git
synced 2025-06-17 02:29:10 +00:00
add more tests!
This commit is contained in:
parent
77bf715b7b
commit
f7e2898633
11 changed files with 241 additions and 38 deletions
|
|
@ -1,25 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<Role /> renders correctly 1`] = `
|
||||
<div
|
||||
className="rolestyled-r4hjov-0 kfzQxT"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={null}
|
||||
onTouchStart={null}
|
||||
style={
|
||||
Object {
|
||||
"--role-color-active": "hsl(0, 0%, 100%)",
|
||||
"--role-color-base": "hsl(0, 0%, 100%)",
|
||||
"--role-color-outline": "hsla(0, 0%, 100%, 0.7)",
|
||||
"--role-color-outline-alt": "hsla(0, 0%, 100%, 0.4)",
|
||||
}
|
||||
}
|
||||
title={null}
|
||||
>
|
||||
Test Role
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<Role /> when disabled, does not trigger onToggle on click 1`] = `"<div disabled=\\"\\" style=\\"--role-color-outline:hsla(0, 0%, 100%, 0.7);--role-color-outline-alt:hsla(0, 0%, 100%, 0.4);--role-color-active:hsl(0, 0%, 100%);--role-color-base:hsl(0, 0%, 100%)\\" title=\\"This role has unsafe permissions.\\" class=\\"rolestyled-r4hjov-0 kfzQxT\\">Test Role</div>"`;
|
||||
|
||||
exports[`<Role /> when disabled, handles touch hover events 1`] = `"<div disabled=\\"\\" style=\\"--role-color-outline:hsla(0, 0%, 100%, 0.7);--role-color-outline-alt:hsla(0, 0%, 100%, 0.4);--role-color-active:hsl(0, 0%, 100%);--role-color-base:hsl(0, 0%, 100%)\\" title=\\"This role has unsafe permissions.\\" class=\\"rolestyled-r4hjov-0 kfzQxT\\">unsafe role<div class=\\"tooltip-aykj5z-0 euOEXl\\">This role has unsafe permissions.</div></div>"`;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<RoleDemo /> renders 1`] = `"<div style=\\"--role-color-outline:hsla(0, 0%, 100%, 0.7);--role-color-outline-alt:hsla(0, 0%, 100%, 0.4);--role-color-active:hsl(0, 0%, 100%);--role-color-base:hsl(0, 0%, 100%)\\" class=\\"rolestyled-r4hjov-0 kfzQxT\\">test demo role</div>"`;
|
||||
|
|
@ -1,13 +1,14 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import * as React from 'react'
|
||||
import renderer from 'react-test-renderer'
|
||||
// import renderer from 'react-test-renderer'
|
||||
import { shallow } from 'enzyme'
|
||||
import Role from './index'
|
||||
import Role from '../index'
|
||||
import 'jest-styled-components'
|
||||
|
||||
describe('<Role />', () => {
|
||||
it('renders correctly', () => {
|
||||
const role = renderer.create(<Role role={{ name: 'Test Role', color: '#ffffff' }} />)
|
||||
const role = shallow(<Role role={{ name: 'Test Role', color: '#ffffff' }} />)
|
||||
expect(role).toMatchSnapshot()
|
||||
})
|
||||
|
||||
|
|
@ -50,7 +51,7 @@ describe('<Role />', () => {
|
|||
|
||||
role.simulate('touchstart')
|
||||
expect(role.state().hovering).toEqual(true)
|
||||
expect(role.html()).toMatchSnapshot() // expecting tooltip
|
||||
expect(role).toMatchSnapshot() // expecting tooltip
|
||||
expect(role.exists('tooltip')).toEqual(true)
|
||||
|
||||
role.simulate('touchend')
|
||||
|
|
@ -67,7 +68,7 @@ describe('<Role />', () => {
|
|||
disabled
|
||||
/>
|
||||
)
|
||||
expect(role.html()).toMatchSnapshot()
|
||||
expect(role).toMatchSnapshot()
|
||||
role.simulate('click')
|
||||
|
||||
expect(role.html()).toBe(role.html())
|
||||
64
ui/components/role/__test__/__snapshots__/Role.test.js.snap
Normal file
64
ui/components/role/__test__/__snapshots__/Role.test.js.snap
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<Role /> renders correctly 1`] = `
|
||||
<rolestyled
|
||||
onClick={[Function]}
|
||||
onTouchEnd={null}
|
||||
onTouchStart={null}
|
||||
style={
|
||||
Object {
|
||||
"--role-color-active": "hsl(0, 0%, 100%)",
|
||||
"--role-color-base": "hsl(0, 0%, 100%)",
|
||||
"--role-color-outline": "hsla(0, 0%, 100%, 0.7)",
|
||||
"--role-color-outline-alt": "hsla(0, 0%, 100%, 0.4)",
|
||||
}
|
||||
}
|
||||
title={null}
|
||||
>
|
||||
Test Role
|
||||
</rolestyled>
|
||||
`;
|
||||
|
||||
exports[`<Role /> when disabled, does not trigger onToggle on click 1`] = `
|
||||
<rolestyled
|
||||
active={false}
|
||||
disabled={true}
|
||||
onClick={null}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"--role-color-active": "hsl(0, 0%, 100%)",
|
||||
"--role-color-base": "hsl(0, 0%, 100%)",
|
||||
"--role-color-outline": "hsla(0, 0%, 100%, 0.7)",
|
||||
"--role-color-outline-alt": "hsla(0, 0%, 100%, 0.4)",
|
||||
}
|
||||
}
|
||||
title="This role has unsafe permissions."
|
||||
>
|
||||
Test Role
|
||||
</rolestyled>
|
||||
`;
|
||||
|
||||
exports[`<Role /> when disabled, handles touch hover events 1`] = `
|
||||
<rolestyled
|
||||
disabled={true}
|
||||
onClick={null}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"--role-color-active": "hsl(0, 0%, 100%)",
|
||||
"--role-color-base": "hsl(0, 0%, 100%)",
|
||||
"--role-color-outline": "hsla(0, 0%, 100%, 0.7)",
|
||||
"--role-color-outline-alt": "hsla(0, 0%, 100%, 0.4)",
|
||||
}
|
||||
}
|
||||
title="This role has unsafe permissions."
|
||||
>
|
||||
unsafe role
|
||||
<tooltip>
|
||||
This role has unsafe permissions.
|
||||
</tooltip>
|
||||
</rolestyled>
|
||||
`;
|
||||
14
ui/components/role/__test__/__snapshots__/demo.test.js.snap
Normal file
14
ui/components/role/__test__/__snapshots__/demo.test.js.snap
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<RoleDemo /> renders 1`] = `
|
||||
<Role
|
||||
active={false}
|
||||
onToggle={[Function]}
|
||||
role={
|
||||
Object {
|
||||
"color": "#ffffff",
|
||||
"name": "test demo role",
|
||||
}
|
||||
}
|
||||
/>
|
||||
`;
|
||||
|
|
@ -1,12 +1,13 @@
|
|||
/* eslint-env jest */
|
||||
import * as React from 'react'
|
||||
import { shallow } from 'enzyme'
|
||||
import RoleDemo from './demo'
|
||||
import RoleDemo from '../demo'
|
||||
import 'jest-styled-components'
|
||||
|
||||
describe('<RoleDemo />', () => {
|
||||
it('renders', () => {
|
||||
const demo = shallow(<RoleDemo role={{ name: 'test demo role', color: '#ffffff' }} />)
|
||||
expect(demo.html()).toMatchSnapshot()
|
||||
expect(demo).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('changes state when clicked', () => {
|
||||
|
|
@ -4,6 +4,8 @@ import { colors } from '../global-colors'
|
|||
import Color from 'color'
|
||||
import RoleStyled from './role.styled'
|
||||
import Tooltip from '../tooltip'
|
||||
import logger from '../../../logger'
|
||||
const log = logger(__filename)
|
||||
|
||||
const fromColors = (colors) => Object.entries(colors).reduce(
|
||||
(acc, [v, val]) => ({ ...acc, [`--role-color-${v}`]: val })
|
||||
|
|
@ -43,15 +45,15 @@ export default class Role extends React.Component<RoleProps, RoleState> {
|
|||
}
|
||||
|
||||
onMouseOver = () => {
|
||||
console.log('caught hovering')
|
||||
log.debug('caught hovering')
|
||||
if (this.props.disabled && this.state.hovering === false) {
|
||||
console.log('set hovering')
|
||||
log.debug('set hovering')
|
||||
this.setState({ hovering: true })
|
||||
}
|
||||
}
|
||||
|
||||
onMouseOut = () => {
|
||||
console.log('out hovering')
|
||||
log.debug('out hovering')
|
||||
this.setState({ hovering: false })
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue