122 lines
3.8 KiB
HTML
122 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
|
<script src="../node_modules/web-component-tester/browser.js"></script>
|
|
<script type="module" src="../src/components/entity/state-info.js"></script>
|
|
</head>
|
|
<body>
|
|
<test-fixture id="stateInfoSecondaryLine">
|
|
<template>
|
|
<state-info hass="[[hass]]" secondary-line
|
|
><my-elem>text</my-elem></state-info
|
|
>
|
|
</template>
|
|
</test-fixture>
|
|
<test-fixture id="stateInfo">
|
|
<template>
|
|
<state-info hass="[[hass]]"></state-info>
|
|
</template>
|
|
</test-fixture>
|
|
|
|
<script type="module">
|
|
import "../src/components/entity/state-info.js";
|
|
function lightOrShadow(elem, selector) {
|
|
return elem.shadowRoot
|
|
? elem.shadowRoot.querySelector(selector)
|
|
: elem.querySelector(selector);
|
|
}
|
|
|
|
suite("state-info", function () {
|
|
var si;
|
|
|
|
setup(function () {
|
|
si = fixture("stateInfo");
|
|
});
|
|
|
|
test("default values", function () {
|
|
assert.isUndefined(si.stateObj);
|
|
assert.isUndefined(si.inDialog);
|
|
});
|
|
|
|
test("has state-badge", function () {
|
|
assert.isOk(lightOrShadow(si, "state-badge"));
|
|
});
|
|
|
|
test("stateObj", function (done) {
|
|
si.stateObj = {
|
|
entity_id: "light.demo",
|
|
last_changed: "2017-01-01T00:00:00+00:00",
|
|
state: "off",
|
|
attributes: { friendly_name: "Name" },
|
|
};
|
|
flush(function () {
|
|
var stateBadge = lightOrShadow(si, "state-badge");
|
|
assert.isOk(stateBadge);
|
|
assert.deepEqual(stateBadge.stateObj, si.stateObj);
|
|
|
|
var name = lightOrShadow(si, ".name");
|
|
assert.isOk(name, ".name missing");
|
|
assert.equal(name.textContent, "Name");
|
|
assert.equal(getComputedStyle(name).lineHeight, "40px");
|
|
|
|
assert.isNotOk(lightOrShadow(si, "ha-relative-time"));
|
|
done();
|
|
});
|
|
});
|
|
|
|
test("relative time", function (done) {
|
|
si.stateObj = {
|
|
entity_id: "light.demo",
|
|
last_changed: "2017-01-01T00:00:00+00:00",
|
|
state: "off",
|
|
attributes: { friendly_name: "Name" },
|
|
};
|
|
si.inDialog = true;
|
|
flush(function () {
|
|
var relativeTime = lightOrShadow(si, "ha-relative-time");
|
|
var name = lightOrShadow(si, ".name");
|
|
|
|
assert.isOk(relativeTime);
|
|
assert.notEqual(relativeTime.textContent, "never");
|
|
assert.notEqual(relativeTime.textContent, "");
|
|
|
|
assert.isOk(name);
|
|
assert.equal(getComputedStyle(name).lineHeight, "20px");
|
|
|
|
si.stateObj = {
|
|
entity_id: "light.demo",
|
|
state: "off",
|
|
attributes: { friendly_name: "Name" },
|
|
};
|
|
flush(function () {
|
|
assert.equal(relativeTime.textContent, "never");
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
test("secondary line", function (done) {
|
|
si = fixture("stateInfoSecondaryLine");
|
|
si.stateObj = {
|
|
entity_id: "light.demo",
|
|
last_changed: "2017-01-01T00:00:00+00:00",
|
|
state: "off",
|
|
attributes: { friendly_name: "Name" },
|
|
};
|
|
si.inDialog = false;
|
|
flush(function () {
|
|
var name = lightOrShadow(si, ".name");
|
|
assert.isOk(name);
|
|
assert.equal(getComputedStyle(name).lineHeight, "20px");
|
|
var content = si.getElementsByTagName("my-elem")[0];
|
|
assert.isOk(content);
|
|
assert.equal(content.textContent, "text");
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|