kemko/nomad
1
0
Fork 0
mirror of https://github.com/kemko/nomad.git synced 2026-01-08 11:25:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

Test coverage for gutter menu interactions

Browse Source
This commit is contained in:
Michael Lange
2018-07-26 15:36:07 -07:00
parent a69f5f15ac
commit 178642efe0
3 changed files with 77 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/templates/components/global-header.hbs
View File

@@ -1,6 +1,6 @@
<nav class="navbar is-primary">
<div class="navbar-brand">
<span class="gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
<span data-test-header-gutter-toggle class="gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
{{partial "partials/hamburger-menu"}}
</span>
<span class="navbar-item is-logo">

6
ui/app/templates/components/gutter-menu.hbs
View File

@@ -1,7 +1,7 @@
<div class="page-column is-left {{if isOpen "is-open"}}">
<div data-test-gutter-menu class="page-column is-left {{if isOpen "is-open"}}">
<div class="gutter {{if isOpen "is-open"}}">
<header class="collapsed-menu {{if isOpen "is-open"}}">
<span class="gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
<span data-test-gutter-gutter-toggle class="gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
{{partial "partials/hamburger-menu"}}
</span>
<span class="logo-container">
@@ -50,4 +50,4 @@
<div data-test-page-content class="page-column is-right">
{{yield}}
</div>
<div class="gutter-backdrop {{if isOpen "is-open"}}" onclick={{action onHamburgerClick}}></div>
<div data-test-gutter-backdrop class="gutter-backdrop {{if isOpen "is-open"}}" onclick={{action onHamburgerClick}}></div>

73
ui/tests/integration/page-layout-test.js Normal file
View File

@@ -0,0 +1,73 @@
import { test, moduleForComponent } from 'ember-qunit';
import { find, click } from 'ember-native-dom-helpers';
import wait from 'ember-test-helpers/wait';
import hbs from 'htmlbars-inline-precompile';
import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
moduleForComponent('page-layout', 'Integration | Component | page layout', {
integration: true,
beforeEach() {
this.server = startMirage();
},
afterEach() {
this.server.shutdown();
},
});
test('the global-header hamburger menu opens the gutter menu', function(assert) {
this.render(hbs`{{page-layout}}`);
assert.notOk(
find('[data-test-gutter-menu]').classList.contains('is-open'),
'Gutter menu is not open'
);
click('[data-test-header-gutter-toggle]');
return wait().then(() => {
assert.ok(find('[data-test-gutter-menu]').classList.contains('is-open'), 'Gutter menu is open');
});
});
test('the gutter-menu hamburger menu closes the gutter menu', function(assert) {
this.render(hbs`{{page-layout}}`);
click('[data-test-header-gutter-toggle]');
return wait()
.then(() => {
assert.ok(
find('[data-test-gutter-menu]').classList.contains('is-open'),
'Gutter menu is open'
);
click('[data-test-gutter-gutter-toggle]');
return wait();
})
.then(() => {
assert.notOk(
find('[data-test-gutter-menu]').classList.contains('is-open'),
'Gutter menu is not open'
);
});
});
test('the gutter-menu backdrop closes the gutter menu', function(assert) {
this.render(hbs`{{page-layout}}`);
click('[data-test-header-gutter-toggle]');
return wait()
.then(() => {
assert.ok(
find('[data-test-gutter-menu]').classList.contains('is-open'),
'Gutter menu is open'
);
click('[data-test-gutter-backdrop]');
return wait();
})
.then(() => {
assert.notOk(
find('[data-test-gutter-menu]').classList.contains('is-open'),
'Gutter menu is not open'
);
});
});