Skip to content

Commit

Permalink
Merge pull request #85 from plumelo/feature/NEOV-332
Browse files Browse the repository at this point in the history 
Multiple fixes
  • Loading branch information
Patrik Kullman authored May 27, 2019
2 parents a7d9986 + 521703a commit fccb798
Show file tree
Hide file tree
Showing 5 changed files with 184 additions and 14 deletions.
10 changes: 7 additions & 3 deletions cosmoz-data-nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -471,14 +471,16 @@
index = items.indexOf(this._previouslySelectedItem);

// if not found, search by id
if (index === -1) {
if (index < 0) {
const prevId = this._getItemId(this._previouslySelectedItem);
index = items.findIndex(item => this._getItemId(item) === prevId);
}

// if still not found, remain on the selected index
if (index === -1) {
index = this.selected;
if (index < 0) {
index = this.selected < items.length
? this.selected
: items.length - 1;
}
this._realignElements(index);
}
Expand Down Expand Up @@ -974,6 +976,8 @@
return idx;
}
} else if (isSelected) {
// make sure that the instance is visible (may be a re-aligned invisible instance)
element.__instance._showHideChildren(false);
// resize is a expensive operation
this._renderRan = this._notifyElementResize();
}
Expand Down
3 changes: 3 additions & 0 deletions test/.eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
"mocha": true
},
"plugins": ["mocha"],
"parserOptions": {
"ecmaVersion": 8
},
"globals": {
"a11ySuite": false,
"assert": false,
Expand Down
148 changes: 148 additions & 0 deletions test/bugs.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
<!doctype html>
<html>

<head>
<title>cosmoz-data-nav-basic</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>

<script src="./helpers/utils.js"></script>

<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../../iron-test-helpers/iron-test-helpers.html">
<link rel="import" href="../cosmoz-data-nav.html">
<link rel="import" href="./helpers/cosmoz-data-nav-test-view.html">

<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../iron-flex-layout/iron-flex-layout-classes.html">

<custom-style>
<style include="iron-flex iron-positioning">
cosmoz-data-nav {
display: block;
width: 455px;
height: 400px;
position: relative;
}
</style>
</custom-style>
</head>

<body>
<test-fixture id="basic">
<template>
<cosmoz-data-nav>
<template strip-whitespace>
<div class="slide">
<span>id: [[ item.id ]],</span>
<span>index: [[ index ]]</span>
<span>[[ item.data ]]</span>
<input type="button" value="Next" cosmoz-data-nav-select="+1">
<input type="button" value="Prev" cosmoz-data-nav-select="-1">
</div>
</template>
</cosmoz-data-nav>
</template>
</test-fixture>

<test-fixture id="hidden">
<template>
<cosmoz-data-nav style="display: none">
<template strip-whitespace>
<div class="slide">
<span>id: [[ item.id ]],</span>
<span>index: [[ index ]]</span>
<span>[[ item.data ]]</span>
<input type="button" value="Next" cosmoz-data-nav-select="+1">
<input type="button" value="Prev" cosmoz-data-nav-select="-1">
</div>
</template>
</cosmoz-data-nav>
</template>
</test-fixture>

<script>
/* eslint-disable max-lines-per-function, max-statements, max-nested-callbacks, strict */
const selectedSlide = nav => {
'use strict';
return nav.querySelector('div.selected .slide');
},
isVisible = el => Boolean(el.offsetHeight || el.offsetWidth),
slowFactor = 1 / 3,
wait = time => new Promise(resolve => setTimeout(resolve, time * slowFactor));


suite('bugs', () => {
test('https://github.com/Neovici/cosmoz-data-nav/issues/84', async () => {
const items = [
{id: 0},
{id: 1},
{id: 2},
{id: 3},
{id: 4}
];

// initialize cosmoz-data-nav as hidden,
// simulating the list-queue-core behavior
const nav = fixture('hidden');
nav._templatesObserver.flush();

// the bug manifests when data is set as incomplete,
// so we must set up the need-data handler
const asyncs = {};
nav.addEventListener('need-data', event => {
const id = event.detail.id;
if (!id) {
return;
}
if (asyncs[id]) {
Polymer.Base.cancelAsync(asyncs[id]);
asyncs[id] = null;
}
asyncs[id] = Polymer.Base.async(() => {
event.target.setItemById(id, items[id]);
}, 50 * slowFactor);
});

// the list page loads and sets all items as queued
nav.items = [0, 1, 2, 3, 4];
await wait(100);

// select an incomplete item
nav.items = [2];
// the need-data exchange will take place and make it "complete"
await wait(100);

// select the now-complete item and another incomplete item,
nav.items = [items[2], 3];
await wait(100);

// switch to the queue tab, making it visible and turning 'maintain selection' on
nav.maintainSelection = true;
nav.style.display = 'block';
await wait(100);

// the view should be rendered correctly
expect(isVisible(selectedSlide(nav))).to.be.true;
expect(selectedSlide(nav).textContent).to.equal('id: 2,index: 0');

// process the first item
// thus removing it from the queue
nav.items = [items[2], items[3]];
nav.items = [items[3]];
await wait(100);

// the view should be rendered correctly
expect(isVisible(selectedSlide(nav))).to.be.true;
expect(selectedSlide(nav).textContent).to.equal('id: 3,index: 0');
});
});

</script>
</body>

</html>
3 changes: 2 additions & 1 deletion test/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
WCT.loadSuites([
'basic.html',
'resizable.html',
'spec.html'
'spec.html',
'bugs.html'
]);
</script>
</body></html>
34 changes: 24 additions & 10 deletions test/spec.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,17 +242,31 @@
expect(selectedSlide(nav).textContent).to.equal('id: b,index: 3otherdata');
});

it('on `items` change, maintains `selected` to it\'s current value, ' +
'if the last selected item is no longer present, by reference or by id', () => {
nav.items = [{id: 'a'}, {id: 'b'}, {id: 'c'}];
nav.selected = 1;
flushRenderQueue(nav);
expect(selectedSlide(nav).textContent).to.equal('id: b,index: 1');
context('when the last selected item is no longer present, by reference or by id', () => {
it('maintains `selected` to it\'s current value', () => {
nav.items = [{id: 'a'}, {id: 'b'}, {id: 'c'}];
nav.selected = 1;
flushRenderQueue(nav);
expect(selectedSlide(nav).textContent).to.equal('id: b,index: 1');

nav.items = [{id: 'a'}, {id: 'd'}, {id: 'e'}];
expect(nav.selected).to.equal(1);
flushRenderQueue(nav);
expect(selectedSlide(nav).textContent).to.equal('id: d,index: 1');
});

it('updates `selected` if there are not enough items', () => {
nav.items = [{id: 'a'}, {id: 'e'}];
nav.selected = 1;
flushRenderQueue(nav);
expect(selectedSlide(nav).textContent).to.equal('id: e,index: 1');

nav.items = [{id: 'a'}];
expect(nav.selected).to.equal(0);
flushRenderQueue(nav);
expect(selectedSlide(nav).textContent).to.equal('id: a,index: 0');
});

nav.items = [{id: 'a'}, {id: 'd'}, {id: 'e'}];
expect(nav.selected).to.equal(1);
flushRenderQueue(nav);
expect(selectedSlide(nav).textContent).to.equal('id: d,index: 1');
});

it('resets selected to 0 when `items` is empty', () => {
Expand Down

0 comments on commit fccb798

Please sign in to comment.