import { iconExists } from '@iconify/core/lib/storage/functions';
import {
fakeAPI,
nextPrefix,
setupDOM,
waitDOMReady,
resetState,
mockAPIData,
awaitUntil,
} from './helpers';
import { addBodyNode } from '../src/observer/root';
import { scanDOM } from '../src/scanner/index';
import { elementDataProperty } from '../src/scanner/config';
import { initObserver } from '../src/observer';
describe('Changing render modes', () => {
const provider = nextPrefix();
beforeAll(() => {
fakeAPI(provider);
});
afterEach(resetState);
it('Various background modes', async () => {
const prefix = nextPrefix();
const iconName = `@${provider}:${prefix}:home`;
// Add icon with API
expect(iconExists(iconName)).toBe(false);
mockAPIData({
type: 'icons',
provider,
prefix,
response: {
prefix,
icons: {
home: {
body: '',
},
},
},
});
// Setup DOM and wait for it to be ready
setupDOM(
``
);
await waitDOMReady();
// Observe body
addBodyNode();
initObserver(scanDOM);
// Check HTML and data
expect(document.body.innerHTML).toBe(
``
);
// Wait for re-render
const placeholder = document.body.childNodes[0] as HTMLSpanElement;
const style = placeholder.style;
await awaitUntil(() => !!style.getPropertyValue('--svg'));
// Check HTML
expect(document.body.innerHTML).toBe(
``
);
let data = placeholder[elementDataProperty];
expect(data.addedStyles.indexOf('background-image') !== -1).toBe(true);
expect(data.addedStyles.indexOf('mask-image') !== -1).toBe(false);
expect(style.getPropertyValue('mask-image')).toBe('');
// Render as mask
placeholder.setAttribute('data-mode', 'mask');
await awaitUntil(() => !!style.getPropertyValue('mask-image'));
expect(document.body.innerHTML).toBe(
``
);
data = placeholder[elementDataProperty];
expect(data.addedStyles.indexOf('background-image') !== -1).toBe(false);
expect(data.addedStyles.indexOf('mask-image') !== -1).toBe(true);
expect(style.getPropertyValue('background-image')).toBe('');
// Re-render as background
placeholder.setAttribute('data-mode', 'bg');
await awaitUntil(() => !style.getPropertyValue('mask-image'));
expect(document.body.innerHTML).toBe(
``
);
data = placeholder[elementDataProperty];
expect(data.addedStyles.indexOf('background-image') !== -1).toBe(true);
expect(data.addedStyles.indexOf('mask-image') !== -1).toBe(false);
expect(style.getPropertyValue('mask-image')).toBe('');
// Re-render as SVG
placeholder.setAttribute('data-mode', 'inline');
await awaitUntil(() => document.body.childNodes[0] !== placeholder);
expect(document.body.innerHTML).toBe(
``
);
const svgData = document.body.childNodes[0][elementDataProperty];
expect(svgData.mode).toBe('inline');
// Change to style (should not work!)
placeholder.setAttribute('data-mode', 'bg');
await awaitUntil(() => svgData.mode !== 'bg');
expect(document.body.innerHTML).toBe(
``
);
});
});