Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
e3e58f1d
Commit
e3e58f1d
authored
May 22, 2020
by
Paul Slaughter
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Migrate toggle_buttons spec to Jest
- Use waitForPromises instead of getSetTimeoutPromise
parent
51272874
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
23 additions
and
35 deletions
+23
-35
spec/frontend/toggle_buttons_spec.js
spec/frontend/toggle_buttons_spec.js
+23
-35
No files found.
spec/
javascripts
/toggle_buttons_spec.js
→
spec/
frontend
/toggle_buttons_spec.js
View file @
e3e58f1d
import
$
from
'
jquery
'
;
import
setupToggleButtons
from
'
~/toggle_buttons
'
;
import
getSetTimeoutPromise
from
'
./helpers/set_timeout_promise_helper
'
;
import
waitForPromises
from
'
./helpers/wait_for_promises
'
;
function
generateMarkup
(
isChecked
=
true
)
{
return
`
...
...
@@ -31,19 +31,16 @@ describe('ToggleButtons', () => {
expect
(
wrapper
.
querySelector
(
'
.js-project-feature-toggle-input
'
).
value
).
toEqual
(
'
true
'
);
});
it
(
'
should toggle to unchecked when clicked
'
,
done
=>
{
it
(
'
should toggle to unchecked when clicked
'
,
()
=>
{
const
wrapper
=
setupFixture
(
true
);
const
toggleButton
=
wrapper
.
querySelector
(
'
.js-project-feature-toggle
'
);
toggleButton
.
click
();
getSetTimeoutPromise
()
.
then
(()
=>
{
expect
(
toggleButton
.
classList
.
contains
(
'
is-checked
'
)).
toEqual
(
false
);
expect
(
wrapper
.
querySelector
(
'
.js-project-feature-toggle-input
'
).
value
).
toEqual
(
'
false
'
);
})
.
then
(
done
)
.
catch
(
done
.
fail
);
return
waitForPromises
().
then
(()
=>
{
expect
(
toggleButton
.
classList
.
contains
(
'
is-checked
'
)).
toEqual
(
false
);
expect
(
wrapper
.
querySelector
(
'
.js-project-feature-toggle-input
'
).
value
).
toEqual
(
'
false
'
);
});
});
});
...
...
@@ -58,24 +55,21 @@ describe('ToggleButtons', () => {
expect
(
wrapper
.
querySelector
(
'
.js-project-feature-toggle-input
'
).
value
).
toEqual
(
'
false
'
);
});
it
(
'
should toggle to checked when clicked
'
,
done
=>
{
it
(
'
should toggle to checked when clicked
'
,
()
=>
{
const
wrapper
=
setupFixture
(
false
);
const
toggleButton
=
wrapper
.
querySelector
(
'
.js-project-feature-toggle
'
);
toggleButton
.
click
();
getSetTimeoutPromise
()
.
then
(()
=>
{
expect
(
toggleButton
.
classList
.
contains
(
'
is-checked
'
)).
toEqual
(
true
);
expect
(
wrapper
.
querySelector
(
'
.js-project-feature-toggle-input
'
).
value
).
toEqual
(
'
true
'
);
})
.
then
(
done
)
.
catch
(
done
.
fail
);
return
waitForPromises
().
then
(()
=>
{
expect
(
toggleButton
.
classList
.
contains
(
'
is-checked
'
)).
toEqual
(
true
);
expect
(
wrapper
.
querySelector
(
'
.js-project-feature-toggle-input
'
).
value
).
toEqual
(
'
true
'
);
});
});
});
it
(
'
should emit `trigger-change` event
'
,
done
=>
{
const
changeSpy
=
j
asmine
.
createSpy
(
'
changeEventHandler
'
);
it
(
'
should emit `trigger-change` event
'
,
()
=>
{
const
changeSpy
=
j
est
.
fn
(
);
const
wrapper
=
setupFixture
(
false
);
const
toggleButton
=
wrapper
.
querySelector
(
'
.js-project-feature-toggle
'
);
const
input
=
wrapper
.
querySelector
(
'
.js-project-feature-toggle-input
'
);
...
...
@@ -84,16 +78,13 @@ describe('ToggleButtons', () => {
toggleButton
.
click
();
getSetTimeoutPromise
()
.
then
(()
=>
{
expect
(
changeSpy
).
toHaveBeenCalled
();
})
.
then
(
done
)
.
catch
(
done
.
fail
);
return
waitForPromises
().
then
(()
=>
{
expect
(
changeSpy
).
toHaveBeenCalled
();
});
});
describe
(
'
clickCallback
'
,
()
=>
{
it
(
'
should show loading indicator while waiting
'
,
done
=>
{
it
(
'
should show loading indicator while waiting
'
,
()
=>
{
const
isChecked
=
true
;
const
clickCallback
=
(
newValue
,
toggleButton
)
=>
{
const
input
=
toggleButton
.
querySelector
(
'
.js-project-feature-toggle-input
'
);
...
...
@@ -107,15 +98,12 @@ describe('ToggleButtons', () => {
expect
(
input
.
value
).
toEqual
(
'
true
'
);
// After the callback finishes, check that the loading state is gone
getSetTimeoutPromise
()
.
then
(()
=>
{
expect
(
toggleButton
.
classList
.
contains
(
'
is-checked
'
)).
toEqual
(
false
);
expect
(
toggleButton
.
classList
.
contains
(
'
is-loading
'
)).
toEqual
(
false
);
expect
(
toggleButton
.
disabled
).
toEqual
(
false
);
expect
(
input
.
value
).
toEqual
(
'
false
'
);
})
.
then
(
done
)
.
catch
(
done
.
fail
);
return
waitForPromises
().
then
(()
=>
{
expect
(
toggleButton
.
classList
.
contains
(
'
is-checked
'
)).
toEqual
(
false
);
expect
(
toggleButton
.
classList
.
contains
(
'
is-loading
'
)).
toEqual
(
false
);
expect
(
toggleButton
.
disabled
).
toEqual
(
false
);
expect
(
input
.
value
).
toEqual
(
'
false
'
);
});
};
const
wrapper
=
setupFixture
(
isChecked
,
clickCallback
);
...
...
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