Kick things off with hundreds of premium and free presets you can access with your Lightroom subscription.
diff --git a/test/blocks/table/table.test.js b/test/blocks/table/table.test.js
index 6b0d400cda..6810a28ca0 100644
--- a/test/blocks/table/table.test.js
+++ b/test/blocks/table/table.test.js
@@ -127,5 +127,25 @@ describe('table and tablemetadata', () => {
expect(selectElement.getAttribute('aria-label')).to.equal(ariaLabel);
});
});
+
+ it('should show and hide tooltip on hover, focus, and Escape key', async () => {
+ const tooltip = document.querySelector('.milo-tooltip');
+ expect(tooltip).to.exist;
+
+ tooltip.dispatchEvent(new Event('mouseenter'));
+ expect(tooltip.classList.contains('hide-tooltip')).to.be.false;
+
+ tooltip.dispatchEvent(new Event('mouseleave'));
+ expect(tooltip.classList.contains('hide-tooltip')).to.be.true;
+
+ tooltip.dispatchEvent(new Event('focus'));
+ expect(tooltip.classList.contains('hide-tooltip')).to.be.false;
+
+ tooltip.dispatchEvent(new Event('blur'));
+ expect(tooltip.classList.contains('hide-tooltip')).to.be.true;
+
+ await sendKeys({ press: 'Escape' });
+ expect(tooltip.classList.contains('hide-tooltip')).to.be.true;
+ });
});
});
diff --git a/test/features/icons/icons.test.js b/test/features/icons/icons.test.js
index 2c847a4eae..669551a807 100644
--- a/test/features/icons/icons.test.js
+++ b/test/features/icons/icons.test.js
@@ -14,7 +14,7 @@ document.body.innerHTML = await readFile({ path: './mocks/body.html' });
let icons;
-describe('Icon Suppprt', () => {
+describe('Icon Support', () => {
let paramsGetStub;
before(() => {
@@ -27,15 +27,14 @@ describe('Icon Suppprt', () => {
});
before(async () => {
+ document.body.innerHTML = await readFile({ path: './mocks/body.html' });
icons = document.querySelectorAll('span.icon');
await loadIcons(icons, config);
- await loadIcons(icons, config); // Test duplicate icon not created if run twice
});
it('Handles tooltip- prefix correctly', async () => {
const tooltipIcon = createTag('span', { class: 'icon icon-tooltip-info' });
await loadIcons([tooltipIcon], config);
-
const svgIcon = tooltipIcon.querySelector(':scope svg');
expect(svgIcon).to.exist;
@@ -45,27 +44,123 @@ describe('Icon Suppprt', () => {
it('Fetches successfully with cache control enabled', async () => {
const otherIcons = [createTag('span', { class: 'icon icon-play' })];
+ document.body.appendChild(otherIcons[0]);
+
await loadIcons(otherIcons, config);
+ expect(otherIcons[0].querySelector('svg')).to.exist;
});
- it('Replaces span.icon', async () => {
+ it('Renders an SVG after loading the icons', () => {
const selector = icons[0].querySelector(':scope svg');
expect(selector).to.exist;
});
it('No duplicate icon', async () => {
+ await loadIcons(icons, config);
const svgs = icons[0].querySelectorAll(':scope svg');
expect(svgs.length).to.equal(1);
});
- it('Creates default tooltip', async () => {
+ it('Creates default tooltip (right-aligned)', () => {
const tooltip = document.querySelector('.milo-tooltip.right');
expect(tooltip).to.exist;
expect(tooltip.dataset.tooltip).to.equal('This is my tooltip text.');
});
- it('Creates top tooltip', async () => {
+ it('Creates top tooltip', () => {
const tooltip = document.querySelector('.milo-tooltip.top');
expect(tooltip).to.exist;
});
});
+
+describe('Tooltip', () => {
+ let iconTooltip;
+ let wrapper;
+ let normalIcon;
+
+ beforeEach(() => {
+ iconTooltip = createTag('span', { class: 'icon icon-tooltip' });
+ wrapper = createTag('em', {}, 'top|This is a tooltip text.');
+ wrapper.appendChild(iconTooltip);
+ document.body.appendChild(wrapper);
+
+ normalIcon = createTag('span', { class: 'icon icon-play' });
+ document.body.appendChild(normalIcon);
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ });
+
+ it('Should only decorate icons with "icon-tooltip" class', async () => {
+ await loadIcons([iconTooltip, normalIcon], config);
+
+ expect(iconTooltip.dataset.tooltip).to.equal('This is a tooltip text.');
+ expect(iconTooltip.classList.contains('milo-tooltip')).to.be.true;
+ expect(normalIcon.dataset.tooltip).to.be.undefined;
+ expect(normalIcon.classList.contains('milo-tooltip')).to.be.false;
+ });
+
+ it('Tooltip should not be visible by default', async () => {
+ await loadIcons([iconTooltip], config);
+
+ const tooltipContent = document.querySelector('.milo-tooltip[data-tooltip]');
+ expect(tooltipContent).to.exist;
+ expect(tooltipContent.style.display).to.equal('');
+ expect(tooltipContent.style.visibility).to.equal('');
+ });
+
+ it('Tooltip should become visible on focus', async () => {
+ document.body.appendChild(wrapper);
+ await loadIcons([iconTooltip], config);
+ const tooltip = document.querySelector('.milo-tooltip');
+ expect(tooltip).to.exist;
+ expect(tooltip.dataset.tooltip).to.equal('This is a tooltip text.');
+ expect(tooltip.getAttribute('role')).to.equal('button');
+ expect(tooltip.className).to.contain('top');
+ });
+
+ it('Creates a tooltip without default alignment (left)', () => {
+ const customTooltip = createTag('span', { class: 'icon icon-tooltip milo-tooltip left', 'data-tooltip': 'Left-aligned tooltip' });
+ document.body.appendChild(customTooltip);
+
+ loadIcons([customTooltip], config);
+
+ const tooltip = document.querySelector('.milo-tooltip.left');
+ expect(tooltip).to.exist;
+ expect(tooltip.dataset.tooltip).to.equal('Left-aligned tooltip');
+ });
+
+ it('Should replace wrapper with icon', async () => {
+ await loadIcons([iconTooltip], config);
+
+ expect(document.body.contains(wrapper)).to.be.false;
+ expect(document.body.contains(iconTooltip)).to.be.true;
+ });
+
+ it('Should assign correct default icon class and name', async () => {
+ await loadIcons([iconTooltip], config);
+ expect(iconTooltip.classList.contains('icon-info')).to.be.true;
+ expect(iconTooltip.dataset.name).to.be.undefined;
+ });
+
+ it('Should not assign default icon class if already defined', async () => {
+ const customIcon = createTag('span', { class: 'icon icon-warning' });
+ document.body.appendChild(customIcon);
+
+ await loadIcons([customIcon], config);
+
+ expect(customIcon.classList.contains('icon-warning')).to.be.true;
+ expect(customIcon.classList.contains('icon-info')).to.be.false;
+ });
+
+ it('Should not add tooltip if data-tooltip is missing', async () => {
+ const noTooltipIcon = createTag('span', { class: 'icon icon-tooltip' });
+ document.body.appendChild(noTooltipIcon);
+
+ await loadIcons([noTooltipIcon], config);
+
+ expect(noTooltipIcon.classList.contains('milo-tooltip')).to.be.false;
+ expect(noTooltipIcon.dataset.tooltip).to.be.undefined;
+ });
+});
diff --git a/test/navigation/navigation.test.js b/test/navigation/navigation.test.js
index 1ea752635f..6ac70edb17 100644
--- a/test/navigation/navigation.test.js
+++ b/test/navigation/navigation.test.js
@@ -18,7 +18,7 @@ describe('Navigation component', async () => {
return null;
});
- setConfig({ miloLibs, contentRoot: '/federal/dev' });
+ setConfig({ miloLibs });
});
afterEach(() => {
@@ -26,29 +26,44 @@ describe('Navigation component', async () => {
});
it('Renders the footer block', async () => {
- await loadBlock({ authoringPath: '/federal/dev', footer: { privacyId: '12343' }, env: 'qa' }, 'http://localhost:2000');
+ await loadBlock({ authoringPath: '/federal/dev', footer: { privacyId: '12343', onReady: 'dede' }, env: 'qa' }, 'http://localhost:2000');
const el = document.getElementsByTagName('footer');
expect(el).to.exist;
});
- it('Renders the footer block should not load when config is not passed', async () => {
+ it('Renders the header block', async () => {
+ const onReady = stub();
+ await loadBlock({ authoringPath: '/federal/dev', header: { imsClientId: 'fedsmilo', onReady, layout: 'fullWidth', noBorder: 'true' }, env: 'prod', theme: 'dark' }, 'http://localhost:2000');
+ const el = document.getElementsByTagName('header');
+ expect(el).to.exist;
+ expect(onReady.called).to.be.true;
+ });
+
+ it('Renders the localnav if isLocalNav key is passed', async () => {
+ const onReady = stub();
+ await loadBlock({ authoringPath: '/federal/dev', header: { imsClientId: 'fedsmilo', onReady, isLocalNav: true, jarvis: { id: '1.1' } }, env: 'prod', theme: 'dark' }, 'http://localhost:2000');
+ const el = document.querySelector('.feds-localnav');
+ expect(el).to.exist;
+ });
+
+ it('Should not render the footer block when config is not passed', async () => {
try {
- const onError = stub();
- await loadBlock({ authoringPath: '/federal/dev-new', env: 'qa', footer: { privacyId: '12343' }, header: { onError } }, 'http://localhost:2000');
+ await loadBlock({ env: 'qa', authoringPath: '/federal/dev', footer: {} }, 'http://localhost:2000');
const el = document.getElementsByTagName('footer');
expect(el).to.not.exist;
- expect(onError.called).to.be.true;
} catch (e) {
// handle error
}
});
- it('Renders the header block', async () => {
- const onReady = stub();
- await loadBlock({ authoringPath: '/federal/dev', header: { imsClientId: 'fedsmilo', onReady }, env: 'prod', theme: 'dark' }, 'http://localhost:2000');
- const el = document.getElementsByTagName('header');
- expect(el).to.exist;
- expect(onReady.called).to.be.true;
+ it('Should not render the header block when config is not passed', async () => {
+ try {
+ await loadBlock({ env: 'qa', footer: { privacyId: '12343' } }, 'http://localhost:2000');
+ const el = document.getElementsByTagName('header');
+ expect(el).to.not.exist;
+ } catch (e) {
+ // handle error
+ }
});
it('Does not render either header or footer if not found in configs', async () => {
@@ -60,15 +75,6 @@ describe('Navigation component', async () => {
expect(footer).to.be.empty;
});
- it('Does not render either header or footer if configs is not passed', async () => {
- document.body.innerHTML = await readFile({ path: './mocks/body.html' }, 'http://localhost:2000');
- await loadBlock();
- const header = document.getElementsByTagName('header');
- const footer = document.getElementsByTagName('footer');
- expect(header).to.be.empty;
- expect(footer).to.be.empty;
- });
-
it('Renders the footer block with authoringpath passed in footer', async () => {
await loadBlock({ footer: { privacyId: '12343', authoringPath: '/federal/dev' }, env: 'qa' }, 'http://localhost:2000');
const el = document.getElementsByTagName('footer');
