-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add demo and basic tests to health-message
- Loading branch information
1 parent
6fcdafd
commit 0b5b210
Showing
4 changed files
with
112 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title><health-message></title> | ||
</head> | ||
|
||
<body> | ||
<h1 class="text-center">Health-Message Component Demo</h1> | ||
<br /> | ||
<h2 class="text-center">alertClass: danger</h2> | ||
<div id="demo-html1" style="margin: 20px;"></div> | ||
<br /> | ||
<h2 class="text-center">alertClass: warning</h2> | ||
<div id="demo-html2" style="margin: 20px;"></div> | ||
|
||
<script src="../../node_modules/steal/steal.js" | ||
data-main="@empty"> | ||
</script> | ||
|
||
<script type="steal-module"> | ||
import HealthMessage from "~/src/health-message/" | ||
import "~/styles/" | ||
import "~/styles.less" | ||
|
||
const HealthMessageComponentDanger = new HealthMessage({viewModel: {message: 'Expected Variable Type (text), found Variable Type (number)', showMessage: true, alertClass: 'danger'}}) | ||
const HealthMessageComponentWarning = new HealthMessage({viewModel: {message: 'You have no varriable assigned to the current field', showMessage: true, alertClass: 'warning'}}) | ||
|
||
|
||
const demoHtml1 = document.getElementById('demo-html1') | ||
const demoHtml2 = document.getElementById('demo-html2') | ||
|
||
demoHtml1.appendChild(HealthMessageComponentDanger.element) | ||
demoHtml2.appendChild(HealthMessageComponentWarning.element) | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
<!doctype html> | ||
<html> | ||
|
||
<title>Author App Tests</title> | ||
|
||
<div id="mocha"></div> | ||
<div id="test-area"></div> | ||
|
||
<script type="text/javascript"> | ||
window.less = {async: true, fileSync: true}; | ||
</script> | ||
|
||
<script src="../../node_modules/steal/steal.js" | ||
mocha="bdd" | ||
main="~/src/health-message/health-message-test.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
import { HealthMessageVM } from './health-message' | ||
import stache from 'can-stache' | ||
import canViewModel from 'can-view-model' | ||
import { assert } from 'chai' | ||
import $ from 'jquery' | ||
|
||
import 'steal-mocha' | ||
|
||
describe('<health-message>', () => { | ||
describe('viewModel', () => { | ||
let vm | ||
const testProps = { | ||
showMessage: true, | ||
alertClass: 'danger', | ||
message: 'Danger Zone!' | ||
} | ||
|
||
beforeEach(() => { | ||
vm = new HealthMessageVM(testProps) | ||
}) | ||
|
||
it('passes simple smoke test', () => { | ||
const expectedMessage = 'Danger Zone!' | ||
const expectedAlertClass = 'danger' | ||
const expectedShowMessage = true | ||
|
||
assert.equal(vm.message, expectedMessage, 'message should show Danger Zone!') | ||
assert.equal(vm.alertClass, expectedAlertClass, 'alertClass should be danger') | ||
assert.equal(vm.showMessage, expectedShowMessage, 'showMessage should be true') | ||
}) | ||
}) | ||
|
||
describe('Component', () => { | ||
// let vm | ||
|
||
afterEach(() => { | ||
document.getElementById('test-area').innerHTML = '' | ||
}) | ||
|
||
it('shows a warning level message', () => { | ||
const render = (data) => { | ||
const tpl = stache(` | ||
<health-message | ||
showMessage:raw="true" | ||
message:raw="This is a warning message" | ||
alertClass:raw="warning" | ||
/>`) | ||
|
||
document.querySelector('#test-area').appendChild(tpl(data)) | ||
|
||
return canViewModel('health-message') | ||
} | ||
|
||
render() | ||
|
||
const messageEl = $('health-message') | ||
assert.isTrue(messageEl.is(':visible'), 'should be visible') | ||
}) | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters