Skip to content

Commit

Permalink
fix: update demo, add (now working?) spec test
Browse files Browse the repository at this point in the history
  • Loading branch information
@cristinecula
Patrik Kullman authored and cristinecula committed Apr 15, 2020
1 parent 2f92a9f commit 59c269e
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 81 deletions.
1 change: 1 addition & 0 deletions demo/helpers/cosmoz-demo-view.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import '@polymer/paper-icon-button/paper-icon-button';
import '@polymer/iron-flex-layout/iron-flex-layout';
import '@polymer/iron-flex-layout/iron-flex-layout-classes';
import '@polymer/iron-icons/iron-icons.js';

import { PolymerElement } from '@polymer/polymer/polymer-element';
import { html } from '@polymer/polymer/lib/utils/html-tag';
Expand Down
126 changes: 57 additions & 69 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,86 +4,74 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

<title>cosmoz-data-nav demo</title>

<script src="/components/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>

<script type="module" src="/components/@polymer/polymer/lib/elements/custom-style.js"></script>

<script type="module" src="/components/@polymer/iron-demo-helpers/demo-pages-shared-styles.js"></script>
<script type="module" src="/components/@polymer/iron-demo-helpers/demo-snippet.js"></script>

<script type="module" src="/components/@polymer/paper-icon-button/paper-icon-button.js"></script>
<script type="module" src="/components/@polymer/paper-spinner/paper-spinner-lite.js"></script>
<script type="module" src="/components/@polymer/paper-input/paper-textarea.js"></script>
<script type="module" src="/components/@polymer/iron-icons/iron-icons.js"></script>

<script type="module" src="./helpers/cosmoz-demo-view.js"></script>
<script type="module" src="../cosmoz-data-nav.js"></script>

<script type="module">
const container = document.createElement('template');

container.innerHTML = `<custom-style>
<style include="demo-pages-shared-styles iron-flex iron-positioning">
#container {
max-width: 800px;
}
cosmoz-data-nav {
display: block;
height: 400px;
position: relative;
}
[data-idx="0"]{
background-color: blue;
}
[data-idx="1"]{
background-color: red;
}
[data-idx="2"]{
background-color: orange;
}
</style>
</custom-style>`;

document.body.appendChild(container.content);
</script>
</head>

<body unresolved>
<div id="container" class="vertical-section-container centered">
<h3>Basic <code>cosmoz-data-nav</code>.</h3>
<demo-snippet>
<dom-bind id="basic">
<template>
<dom-bind id="basic">
<cosmoz-data-nav items="[[ items ]]" index-as="index" as="item"
on-need-data="onNeedData" selected="{{ selected }}" selected-item="{{ selItem }}" hash-param="tt">
<template>
<cosmoz-data-nav items="[[ items ]]" index-as="index" as="item" on-need-data="onNeedData" selected="{{ selected }}" selected-item="{{selItem}}" hash-param="tt">
<template>
<cosmoz-demo-view class="fit layout vertical" item="{{ item }}" index="[[index]]" data-idx$="{{ computeColorIndex(index) }}" prev-disabled="[[ prevDisabled ]]" next-disabled="[[ nextDisabled ]]"></cosmoz-demo-view>
</template>
</cosmoz-data-nav>
<paper-textarea value="{{ computeJSON(selected, items.*) }}">
</paper-textarea>
<div>Selected: [[toJSON(selItem)]]</div>
<cosmoz-demo-view class="fit layout vertical"
item="{{ item }}" index="[[ index ]]" data-idx$="[[ computeColorIndex(index) ]]"
prev-disabled="[[ prevDisabled ]]" next-disabled="[[ nextDisabled ]]">
</cosmoz-demo-view>
</template>
</dom-bind>
</cosmoz-data-nav>
<paper-textarea value="[[ computeJSON(selected, items.*) ]]">
</paper-textarea>
<div>Selected: [[ toJSON(selItem) ]]</div>
</template>
</demo-snippet>
</dom-bind>
</div>

<script type="module">
import '@polymer/polymer/lib/elements/custom-style.js';
import '@polymer/polymer/lib/elements/dom-bind.js';
import '@polymer/paper-input/paper-textarea.js';
import './helpers/cosmoz-demo-view.js';
import '../cosmoz-data-nav.js';

const container = document.createElement('template');
container.innerHTML = `
<custom-style>
<style include="iron-flex">
#container {
max-width: 800px;
}
cosmoz-data-nav {
display: block;
height: 400px;
position: relative;
}
[data-idx="0"]{
background-color: blue;
}
[data-idx="1"]{
background-color: red;
}
[data-idx="2"]{
background-color: orange;
}
</style>
</custom-style>
`;
document.body.appendChild(container.content);

import { Base } from '@polymer/polymer/polymer-legacy';

window.addEventListener('WebComponentsReady', () => {
let basic = document.getElementById('basic');
const items = Array(20).fill('').map((e, i) => i.toString()),
asyncs = {};
let basic = document.getElementById('basic');
const items = Array(20).fill('').map((e, i) => i.toString()),
asyncs = {};

basic = !basic.set ? basic.firstElementChild : basic;
basic = !basic.set ? basic.firstElementChild : basic;

basic.computeColorIndex = index => index % 3;
basic.onNeedData = function (event, detail) {
Object.assign(basic, {
computeColorIndex: index => index % 3,
onNeedData: (event, detail) => {
const id = detail.id;
if (asyncs[id]) {
Base.cancelAsync(asyncs[id]);
Expand All @@ -95,14 +83,14 @@ <h3>Basic <code>cosmoz-data-nav</code>.</h3>
event.target.setItemById(detail.id, { id: detail.id });
}, 500);
return { id: detail.id };
};
basic.computeJSON = function (index) {
},
computeJSON(index) {
return JSON.stringify(this.items[index]);
};
basic.toJSON = item => JSON.stringify(item);
basic.set('items', items);
},
toJSON: item => JSON.stringify(item)
});

basic.set('items', items);
</script>
</body>

</html>
24 changes: 12 additions & 12 deletions test/spec.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,19 +48,19 @@ suite('template', () => {
expect(nav.querySelector('div.selected').textContent).to.equal('id: 1,index: 0');
});

test('renders the wrong item if the templates observer runs after `items` is set [KNOWN BUG]', null, () => {
expect(async () => {
const [, nav] = await Promise.all([
fixture(customStyle),
fixture(basicFixture)
]);
nav.items = [{ id: 1 }, { id: 2 }, { id: 3 }];
await waitUntil(() => nav._templatesObserver);
nav._templatesObserver.flush();
flushRenderQueue(nav);
test('renders the wrong item if the templates observer runs after `items` is set [KNOWN BUG]', async () => {
//expect(async () => {
const [, nav] = await Promise.all([
fixture(customStyle),
fixture(basicFixture)
]);
nav.items = [{ id: 1 }, { id: 2 }, { id: 3 }];
await waitUntil(() => nav._templatesObserver);
nav._templatesObserver.flush();
flushRenderQueue(nav);

expect(nav.querySelector('div.selected').textContent).to.equal('id: 1,index: 0');
}).throws('expected \'id: 3,index: 2\' to equal \'id: 1,index: 0\'');
expect(nav.querySelector('div.selected').textContent).to.equal('id: 1,index: 0');
//}).throws('expected \'id: 3,index: 2\' to equal \'id: 1,index: 0\'');
});

test('re-renders when the template changes');
Expand Down

0 comments on commit 59c269e

Please sign in to comment.