Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
P
paragon
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
OpenEdx
paragon
Commits
a5b7a4fb
Commit
a5b7a4fb
authored
Jun 21, 2017
by
Sarah Fischmann
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
wrote several tests for checkbox; made some small edits in component
parent
141d0a25
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
145 additions
and
5 deletions
+145
-5
.storybook/__storyshots__/CheckBox.shot
+59
-0
__tests__/checkbox-test.jsx
+78
-1
src/CheckBox.jsx
+8
-4
No files found.
.storybook/__storyshots__/CheckBox.shot
0 → 100644
View file @
a5b7a4fb
exports[`basic usage`] = `
<label>
<input
aria-checked={false}
aria-describedby="checkbox"
defaultChecked={false}
disabled={undefined}
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox" />
check me out!
</label>
`;
exports[`call a function`] = `
<label>
<input
aria-checked={false}
aria-describedby="checkbox"
defaultChecked={false}
disabled={undefined}
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox" />
check out the console
</label>
`;
exports[`default checked`] = `
<label>
<input
aria-checked={true}
aria-describedby="checkbox"
defaultChecked={true}
disabled={undefined}
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox" />
(un)check me out
</label>
`;
exports[`disabled`] = `
<label>
<input
aria-checked={false}
aria-describedby="checkbox"
defaultChecked={false}
disabled="true"
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox" />
you cannot check me out
</label>
`;
__tests__/checkbox-test.jsx
View file @
a5b7a4fb
import
React
from
'react'
;
import
{
shallow
}
from
'enzyme'
;
import
{
shallow
,
mount
}
from
'enzyme'
;
import
CheckBox
from
'../src/CheckBox'
;
describe
(
'<CheckBox />'
,
()
=>
{
it
(
'attributes are set correctly'
,
()
=>
{
const
wrapper
=
shallow
(
<
CheckBox
name=
"checkbox"
describedBy=
"this is a checkbox"
label=
"check me out!"
checked=
"false"
/>
)
expect
(
wrapper
.
find
(
'[name="checkbox"]'
).
exists
()).
toEqual
(
true
);
expect
(
wrapper
.
find
(
'[type="checkbox"]'
).
exists
()).
toEqual
(
true
);
expect
(
wrapper
.
find
(
'[defaultChecked=false]'
).
exists
()).
toEqual
(
true
);
expect
(
wrapper
.
find
(
'[aria-describedby="this is a checkbox"]'
).
exists
()).
toEqual
(
true
);
expect
(
wrapper
.
find
(
'[aria-checked=false]'
).
exists
()).
toEqual
(
true
);
expect
(
wrapper
.
find
(
'[tabIndex="0"]'
).
exists
()).
toEqual
(
true
);
});
it
(
'aria-label changes after click'
,
()
=>
{
const
wrapper
=
shallow
(
<
CheckBox
...
...
@@ -14,8 +32,67 @@ describe('<CheckBox />', () => {
);
expect
(
wrapper
.
find
(
'[aria-checked=false]'
).
exists
()).
toEqual
(
true
);
wrapper
.
find
(
'input'
).
simulate
(
'click'
);
expect
(
wrapper
.
find
(
'[aria-checked=false]'
).
exists
()).
toEqual
(
false
);
expect
(
wrapper
.
find
(
'[aria-checked=true]'
).
exists
()).
toEqual
(
true
);
wrapper
.
find
(
'input'
).
simulate
(
'click'
);
expect
(
wrapper
.
find
(
'[aria-checked=false]'
).
exists
()).
toEqual
(
true
);
expect
(
wrapper
.
find
(
'[aria-checked=true]'
).
exists
()).
toEqual
(
false
);
});
it
(
'check that callback function is triggered when clicked'
,
()
=>
{
const
wrapper
=
shallow
(
<
CheckBox
name=
"checkbox"
descibedBy=
"checkbox"
label=
"check me out!"
checked=
"false"
onChange=
{
()
=>
console
.
log
(
'the checkbox changed state'
)
}
/>,
);
const
spy
=
jest
.
spyOn
(
wrapper
.
instance
(),
'onChange'
);
expect
(
spy
).
toHaveBeenCalledTimes
(
0
);
wrapper
.
find
(
'input'
).
simulate
(
'click'
);
expect
(
spy
).
toHaveBeenCalledTimes
(
1
);
});
it
(
'checks if start state can be set to checked'
,
()
=>
{
const
wrapper
=
shallow
(
<
CheckBox
name=
"checkbox"
describedBy=
"checkbox"
label=
"I start checked"
checked=
"true"
/>,
);
expect
(
wrapper
.
find
(
'[defaultChecked=true]'
).
exists
()).
toEqual
(
true
);
expect
(
wrapper
.
find
(
'[aria-checked=true]'
).
exists
()).
toEqual
(
true
);
wrapper
.
find
(
'input'
).
simulate
(
'click'
);
expect
(
wrapper
.
find
(
'[defaultChecked=false]'
).
exists
()).
toEqual
(
true
);
expect
(
wrapper
.
find
(
'[aria-checked=false]'
).
exists
()).
toEqual
(
true
);
});
it
(
'checkbox can be disabled'
,
()
=>
{
const
wrapper
=
mount
(
<
CheckBox
name=
"checkbox"
describedBy=
"checkbox"
label=
"I am disabled"
checked=
"false"
disabled=
{
true
}
/>,
);
expect
(
wrapper
.
find
(
'[defaultChecked=false]'
).
exists
()).
toEqual
(
true
);
expect
(
wrapper
.
find
(
'[aria-checked=false]'
).
exists
()).
toEqual
(
true
);
wrapper
.
find
(
'input'
).
simulate
(
'click'
);
expect
(
wrapper
.
find
(
'[defaultChecked=false]'
).
exists
()).
toEqual
(
true
);
expect
(
wrapper
.
find
(
'[aria-checked=false]'
).
exists
()).
toEqual
(
true
);
});
});
src/CheckBox.jsx
View file @
a5b7a4fb
...
...
@@ -8,6 +8,10 @@ class CheckBox extends React.Component {
super
(
props
);
this
.
handleClick
=
this
.
handleClick
.
bind
(
this
);
if
(
this
.
props
.
onChange
)
{
this
.
onChange
=
this
.
props
.
onChange
.
bind
(
this
);
}
if
(
props
.
checked
===
'true'
)
{
this
.
state
=
{
checked
:
true
,
...
...
@@ -29,8 +33,8 @@ class CheckBox extends React.Component {
checked
:
true
,
});
}
if
(
this
.
prop
s
.
onChange
)
{
this
.
props
.
onChange
();
if
(
thi
s
.
onChange
)
{
this
.
onChange
();
}
}
...
...
@@ -39,12 +43,12 @@ class CheckBox extends React.Component {
const
props
=
{
...
this
.
props
};
return
(
<
label
htmlFor=
{
props
.
checkLabel
}
>
<
label
>
<
input
name=
{
props
.
name
}
type=
"checkbox"
defaultChecked=
{
this
.
state
.
checked
}
aria
-
describedby=
{
props
.
described
b
y
}
aria
-
describedby=
{
props
.
described
B
y
}
aria
-
checked=
{
this
.
state
.
checked
}
tabIndex=
"0"
onClick=
{
this
.
handleClick
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment