Skip to content

Commit

Permalink
chore: up the limit to 3 seconds
Browse files Browse the repository at this point in the history
  • Loading branch information
@j-mes
j-mes committed Jan 27, 2025
1 parent 3c49ab7 commit 1d8be13
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 42 deletions.
2 changes: 1 addition & 1 deletion components/o-layout/test/helpers/fixtures.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,4 +99,4 @@ const query = `
</div>
`;

export { docs, query, docsWithSubHeading};
export {docs, docsWithSubHeading, query};
130 changes: 89 additions & 41 deletions components/o-layout/test/layout.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
/* eslint-env mocha */

import { setViewport } from '@web/test-runner-commands';
import { assert, waitUntil } from '@open-wc/testing';
import {setViewport} from '@web/test-runner-commands';
import {assert, waitUntil} from '@open-wc/testing';
import sinon from 'sinon/pkg/sinon-esm.js';
import Layout from '../src/js/layout.js';
import { docs, docsWithSubHeading, query } from './helpers/fixtures.js';
import {docs, docsWithSubHeading, query} from './helpers/fixtures.js';

sinon.assert.expose(assert, {
includeFail: false,
prefix: ''
prefix: '',
});

describe('Layout', () => {
Expand All @@ -26,7 +26,6 @@ describe('Layout', () => {
});

describe('.init()', () => {

it('stores `documentationLayoutElement` in a `layoutEl` property', () => {
const layout = new Layout(documentationLayoutElement);
assert.strictEqual(layout.layoutEl, documentationLayoutElement);
Expand All @@ -39,73 +38,93 @@ describe('Layout', () => {
constructNav: true,
navHeadingSelector: 'h1, h2, h3',
linkHeadings: true,
linkedHeadingSelector: 'h1, h2, h3, h4, h5, h6'
linkedHeadingSelector: 'h1, h2, h3, h4, h5, h6',
});
});

it('constructs the documentation layout navigation by default', () => {
const layout = new Layout(documentationLayoutElement);
assert.strictEqual(layout.navHeadings.length, 2, `Expected to find two navigation headings but found ${layout.navHeadings.length}.`);
assert.strictEqual(
layout.navHeadings.length,
2,
`Expected to find two navigation headings but found ${layout.navHeadings.length}.`
);
});

it('constructs a nested navigation when a h3 (or lower) follows a h2', async () => {
await setViewport({ width: 1080, height: 100 });
await setViewport({width: 1080, height: 100});
document.body.innerHTML = docsWithSubHeading;
documentationLayoutElement = document.querySelector('.o-layout--docs');
new Layout(documentationLayoutElement, {
navHeadingSelector: 'h1, h2, h3, h4, h5, h6'
navHeadingSelector: 'h1, h2, h3, h4, h5, h6',
});
await waitUntil(
() => {
const link = documentationLayoutElement.querySelector('[href="#this-is-a-h1"]');
const link = documentationLayoutElement.querySelector(
'[href="#this-is-a-h1"]'
);
if (link) {
return link.getAttribute('aria-current') === 'location';
}
},
'the correct link never became listed as the current location', {
timeout: 2000
'the correct link never became listed as the current location',
{
timeout: 3000, // 3 seconds
}
);
assert.dom.equal(
documentationLayoutElement.querySelector('.o-layout__sidebar'),
`<div class="o-layout__sidebar"><nav class="o-layout__navigation"><ol class="o-layout__unstyled-element"><li class="o-layout__unstyled-element o-layout__navigation-title"><a class="o-layout__unstyled-element" href="#this-is-a-h1" aria-current="location">This is a heading level 1</a></li><li class="o-layout__unstyled-element "><a class="o-layout__unstyled-element" href="#this-is-a-h2" aria-current="false">This is a heading level 2</a><ol><li><a class="o-layout__unstyled-element" href="#sub-heading-1" aria-current="false">Sub heading 1</a></li><li><a class="o-layout__unstyled-element" href="#sub-heading-1b" aria-current="false">Sub heading 1b</a></li><li><a class="o-layout__unstyled-element" href="#sub-heading-2" aria-current="false">Sub heading 2</a></li></ol></li><li class="o-layout__unstyled-element "><a class="o-layout__unstyled-element" href="#this-is-a-second-h2" aria-current="false">This is a second heading level 2</a><ol><li><a class="o-layout__unstyled-element" href="#sub-heading-a" aria-current="false">Sub heading a</a></li></ol></li></ol></nav></div>`
);
});
`<div class="o-layout__sidebar"><nav class="o-layout__navigation"><ol class="o-layout__unstyled-element"><li class="o-layout__unstyled-element o-layout__navigation-title"><a class="o-layout__unstyled-element" href="#this-is-a-h1" aria-current="location">This is a heading level 1</a></li><li class="o-layout__unstyled-element "><a class="o-layout__unstyled-element" href="#this-is-a-h2" aria-current="false">This is a heading level 2</a><ol><li><a class="o-layout__unstyled-element" href="#sub-heading-1" aria-current="false">Sub heading 1</a></li><li><a class="o-layout__unstyled-element" href="#sub-heading-1b" aria-current="false">Sub heading 1b</a></li><li><a class="o-layout__
it('does not construct the navigation by default for the query layout', () => {
new Layout(queryLayoutElement);
assert.dom.equal(queryLayoutElement.querySelector('.o-layout__query-sidebar'), `<div class="o-layout-typography o-layout__query-sidebar"></div>`, 'Expected to find no navigation HTML within the query layout sidebar.');
assert.dom.equal(
queryLayoutElement.querySelector('.o-layout__query-sidebar'),
`<div class="o-layout-typography o-layout__query-sidebar"></div>`,
'Expected to find no navigation HTML within the query layout sidebar.'
);
});

it('constructs the navigation for the query layout when "constructNav" is explicit', (done) => {
it('constructs the navigation for the query layout when "constructNav" is explicit', done => {
new Layout(queryLayoutElement, {
constructNav: true
constructNav: true,
});
setTimeout(() => {
assert.ok(queryLayoutElement.querySelector('.o-layout__query-sidebar').innerHTML, 'Expected to find navigation HTML within the query layout sidebar.');
assert.ok(
queryLayoutElement.querySelector('.o-layout__query-sidebar')
.innerHTML,
'Expected to find navigation HTML within the query layout sidebar.'
);
done();
}, 100);
});

it('constructs the navigation headings with a custom selector set by the "navHeadingSelector" option', (done) => {
new Layout(documentationLayoutElement, { navHeadingSelector: 'h1' });
it('constructs the navigation headings with a custom selector set by the "navHeadingSelector" option', done => {
new Layout(documentationLayoutElement, {navHeadingSelector: 'h1'});
// allow for request animation frame
setTimeout(() => {
assert.ok(document.querySelector('.o-layout__navigation'), 'Expected to find a navigation element.');
assert.ok(
document.querySelector('.o-layout__navigation'),
'Expected to find a navigation element.'
);
done();
}, 100);
});

it('does not construct navigation when "constructNav" is set to false', (done) => {
new Layout(documentationLayoutElement, { constructNav: false });
it('does not construct navigation when "constructNav" is set to false', done => {
new Layout(documentationLayoutElement, {constructNav: false});
// allow for request animation frame
setTimeout(() => {
assert.notOk(document.querySelector('.o-layout__navigation'), null, 'Did not expect to find a navigation element.');
assert.notOk(
document.querySelector('.o-layout__navigation'),
null,
'Did not expect to find a navigation element.'
);
done();
}, 100);
});

it('updates `aria-current` on init for manually constructed navigation markup', (done) => {
it('updates `aria-current` on init for manually constructed navigation markup', done => {
// manually construct nav
const navMarkup = `
<nav class="o-layout__navigation">
Expand All @@ -130,7 +149,7 @@ describe('Layout', () => {
done(error);
}
// init layout, with `constructNav: false` as we created our own
new Layout(documentationLayoutElement, { constructNav: false });
new Layout(documentationLayoutElement, {constructNav: false});
// allow for request animation frame
setTimeout(() => {
// assert the current location has been updated on init
Expand All @@ -145,23 +164,50 @@ describe('Layout', () => {

it('constructs linkable headings by default', () => {
const layout = new Layout(documentationLayoutElement);
assert.strictEqual(layout.linkedHeadings.length, 2, 'Expected to find two linked heading.');
assert.strictEqual(
layout.linkedHeadings.length,
2,
'Expected to find two linked heading.'
);
});

it('does not construct linkable headings when "linkHeadings" is set to false', () => {
const layout = new Layout(documentationLayoutElement, { linkHeadings: false });
assert.strictEqual(layout.linkedHeadings.length, 0, 'Expected to find no linked headings.');
const layout = new Layout(documentationLayoutElement, {
linkHeadings: false,
});
assert.strictEqual(
layout.linkedHeadings.length,
0,
'Expected to find no linked headings.'
);
});

it('constructs linkable headings with a custom selector set by the "linkedHeadingSelector" option', () => {
const layout = new Layout(documentationLayoutElement, { linkedHeadingSelector: 'h1' });
assert.strictEqual(layout.linkedHeadings.length, 1, 'Expected to find one "h1" linked heading.');
const layout = new Layout(documentationLayoutElement, {
linkedHeadingSelector: 'h1',
});
assert.strictEqual(
layout.linkedHeadings.length,
1,
'Expected to find one "h1" linked heading.'
);
});

it('constructs the navigation independently of linked headings', () => {
const layout = new Layout(documentationLayoutElement, { navHeadingSelector: 'h1', linkedHeadingSelector: 'h2' });
assert.strictEqual(layout.linkedHeadings.length, 1, 'Expected to find only one "h2" linked heading.');
assert.strictEqual(layout.navHeadings.length, 1, 'Expected to find only one "h1" nav heading.');
const layout = new Layout(documentationLayoutElement, {
navHeadingSelector: 'h1',
linkedHeadingSelector: 'h2',
});
assert.strictEqual(
layout.linkedHeadings.length,
1,
'Expected to find only one "h2" linked heading.'
);
assert.strictEqual(
layout.navHeadings.length,
1,
'Expected to find only one "h1" nav heading.'
);
});

it('extracts options from the DOM', () => {
Expand All @@ -173,8 +219,10 @@ describe('Layout', () => {
});

describe('.constructNavFromDOM()', () => {
it('extracts headings from main content to construct sidebar navigation', (done) => {
const layout = new Layout(documentationLayoutElement, { constructNav: false });
it('extracts headings from main content to construct sidebar navigation', done => {
const layout = new Layout(documentationLayoutElement, {
constructNav: false,
});
const headingOneId = document.body.querySelector('h1').id;
const headingTwoId = document.body.querySelector('h2').id;
layout.constructNavFromDOM();
Expand All @@ -199,7 +247,7 @@ describe('Layout', () => {
mockLayoutEl.setAttribute('data-another-key', 'value');
mockLayoutEl.setAttribute('data-o-layout-foo', 'bar');
mockLayoutEl.setAttribute('data-o-layout-json', '{"foo": "bar"}');
mockLayoutEl.setAttribute('data-o-layout-json-single', '{\'foo\': \'bar\'}');
mockLayoutEl.setAttribute('data-o-layout-json-single', "{'foo': 'bar'}");
returnValue = Layout.getDataAttributes(mockLayoutEl);
});

Expand All @@ -225,17 +273,17 @@ describe('Layout', () => {
assert.strictEqual(returnValue.foo, 'bar');
});

it('parses the key as JSON if it\'s valid', () => {
it("parses the key as JSON if it's valid", () => {
assert.isObject(returnValue.json);
assert.deepEqual(returnValue.json, {
foo: 'bar'
foo: 'bar',
});
});

it('parses the key as JSON even if single quotes are used', () => {
assert.isObject(returnValue.jsonSingle);
assert.deepEqual(returnValue.jsonSingle, {
foo: 'bar'
foo: 'bar',
});
});
});
Expand Down

0 comments on commit 1d8be13

Please sign in to comment.