Skip to content

Commit

Permalink
action scroller test converage
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sartxi
Sartxi committed Aug 3, 2023
1 parent 1041ea0 commit 52eaa3f
Show file tree
Hide file tree
Showing 2 changed files with 153 additions and 0 deletions.
33 changes: 33 additions & 0 deletions test/blocks/action-scroller/action-scroller.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,25 @@
import { readFile } from '@web/test-runner-commands';
import { expect } from '@esm-bundle/chai';
import { loadStyle } from '../../../libs/utils/utils.js';
import { delay } from '../../helpers/waitfor.js';

document.body.innerHTML = await readFile({ path: './mocks/body.html' });
const { default: init } = await import('../../../libs/blocks/action-scroller/action-scroller.js');
const variants = ['navigation'];

const loadStyles = (path) => new Promise((resolve) => {
loadStyle(`../../../../libs/${path}`, resolve);
});

describe('action scrollers', () => {
before(async () => {
await Promise.all([
loadStyles('../../../libs/styles/styles.css'),
loadStyles('../../../libs/blocks/action-scroller/action-scroller.css'),
loadStyles('../../../libs/blocks/section-metadata/section-metadata.css')
]);
});

const actionScroller = document.querySelectorAll('.action-scroller');
actionScroller.forEach((scroller) => {
init(scroller);
Expand All @@ -28,6 +42,25 @@ describe('action scrollers', () => {
const next = scroller.querySelector('.next');
expect(next).to.exist;
});

it('can scroll next', async () => {
const scrollArea = scroller.querySelector('.section.scrolling');
const nextBtn = scroller.querySelector('.next-button');
nextBtn.click();
await delay(200);
const scrolled = scrollArea.scrollLeft > 0;
expect(scrolled).to.be.true;
});

it('can scroll previous', async () => {
const scrollArea = scroller.querySelector('.section.scrolling');
const prevBtn = scroller.querySelector('.previous-button');
const initScrollPos = scrollArea.scrollLeft;
prevBtn.click();
await delay(200);
const scrolledBack = initScrollPos > scrollArea.scrollLeft;
expect(scrolledBack).to.be.true;
});
}
});
});
Expand Down
120 changes: 120 additions & 0 deletions test/blocks/action-scroller/mocks/body.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,66 @@
<div><a href="https://www.adobe.com/">https://www.adobe.com/</a></div>
</div>
</div>
<div class="action-item">
<div>
<picture>
<img loading="lazy" alt="" src="" width="178" height="180">
</picture>
</div>
<div>
<div><a href="https://www.adobe.com/">https://www.adobe.com/</a></div>
</div>
</div>
<div class="action-item">
<div>
<picture>
<img loading="lazy" alt="" src="" width="178" height="180">
</picture>
</div>
<div>
<div><a href="https://www.adobe.com/">https://www.adobe.com/</a></div>
</div>
</div>
<div class="action-item">
<div>
<picture>
<img loading="lazy" alt="" src="" width="178" height="180">
</picture>
</div>
<div>
<div><a href="https://www.adobe.com/">https://www.adobe.com/</a></div>
</div>
</div>
<div class="action-item">
<div>
<picture>
<img loading="lazy" alt="" src="" width="178" height="180">
</picture>
</div>
<div>
<div><a href="https://www.adobe.com/">https://www.adobe.com/</a></div>
</div>
</div>
<div class="action-item">
<div>
<picture>
<img loading="lazy" alt="" src="" width="178" height="180">
</picture>
</div>
<div>
<div><a href="https://www.adobe.com/">https://www.adobe.com/</a></div>
</div>
</div>
<div class="action-item">
<div>
<picture>
<img loading="lazy" alt="" src="" width="178" height="180">
</picture>
</div>
<div>
<div><a href="https://www.adobe.com/">https://www.adobe.com/</a></div>
</div>
</div>
</div>
<div>
<div class="action-scroller navigation grid-align-end">
Expand Down Expand Up @@ -73,5 +133,65 @@
<div><a href="https://www.adobe.com/">https://www.adobe.com/</a></div>
</div>
</div>
<div class="action-item">
<div>
<picture>
<img loading="lazy" alt="" src="" width="178" height="180">
</picture>
</div>
<div>
<div><a href="https://www.adobe.com/">https://www.adobe.com/</a></div>
</div>
</div>
<div class="action-item">
<div>
<picture>
<img loading="lazy" alt="" src="" width="178" height="180">
</picture>
</div>
<div>
<div><a href="https://www.adobe.com/">https://www.adobe.com/</a></div>
</div>
</div>
<div class="action-item">
<div>
<picture>
<img loading="lazy" alt="" src="" width="178" height="180">
</picture>
</div>
<div>
<div><a href="https://www.adobe.com/">https://www.adobe.com/</a></div>
</div>
</div>
<div class="action-item">
<div>
<picture>
<img loading="lazy" alt="" src="" width="178" height="180">
</picture>
</div>
<div>
<div><a href="https://www.adobe.com/">https://www.adobe.com/</a></div>
</div>
</div>
<div class="action-item">
<div>
<picture>
<img loading="lazy" alt="" src="" width="178" height="180">
</picture>
</div>
<div>
<div><a href="https://www.adobe.com/">https://www.adobe.com/</a></div>
</div>
</div>
<div class="action-item">
<div>
<picture>
<img loading="lazy" alt="" src="" width="178" height="180">
</picture>
</div>
<div>
<div><a href="https://www.adobe.com/">https://www.adobe.com/</a></div>
</div>
</div>
</div>
</div>

0 comments on commit 52eaa3f

Please sign in to comment.