|
| 1 | +import { ClientFunction } from 'testcafe'; |
| 2 | +import url from '../../helpers/getPageUrl'; |
| 3 | + |
| 4 | +fixture.disablePageReloads`Shadow DOM - Adopted DX css styles` |
| 5 | + .page(url(__dirname, '../container.html')); |
| 6 | + |
| 7 | +const dxWidgetHostStyles = '.dx-widget-shadow { font-size: 20px; }'; |
| 8 | +const dxWidgetShadowStyles = '.dx-widget-shadow { font-size: 40px; }'; |
| 9 | + |
| 10 | +const setupShadowDomTest = (copyStylesToShadowDom) => ClientFunction((copyStyles) => { |
| 11 | + if (!copyStyles) { |
| 12 | + (window as any).DevExpress.config({ copyStylesToShadowDom: copyStyles }); |
| 13 | + } |
| 14 | + |
| 15 | + const container = document.createElement('div'); |
| 16 | + container.id = 'shadow-host'; |
| 17 | + document.body.appendChild(container); |
| 18 | + |
| 19 | + const hostStyleElement = document.createElement('style'); |
| 20 | + hostStyleElement.innerHTML = dxWidgetHostStyles; |
| 21 | + document.head.appendChild(hostStyleElement); |
| 22 | + |
| 23 | + const shadowRoot = container.attachShadow({ mode: 'open' }); |
| 24 | + |
| 25 | + const shadowStyleElement = shadowRoot.ownerDocument.createElement('style'); |
| 26 | + shadowStyleElement.innerHTML = dxWidgetShadowStyles; |
| 27 | + shadowRoot.appendChild(shadowStyleElement); |
| 28 | + |
| 29 | + const shadowContainerElement = document.createElement('div'); |
| 30 | + shadowContainerElement.id = 'shadow-container'; |
| 31 | + shadowRoot.appendChild(shadowContainerElement); |
| 32 | + |
| 33 | + (window as any).testShadowRoot = shadowRoot; |
| 34 | + |
| 35 | + // eslint-disable-next-line new-cap, no-new |
| 36 | + new (window as any).DevExpress.ui.dxButton(shadowContainerElement, { |
| 37 | + text: 'Test button', |
| 38 | + }); |
| 39 | +}, { |
| 40 | + dependencies: { |
| 41 | + dxWidgetHostStyles, |
| 42 | + dxWidgetShadowStyles, |
| 43 | + }, |
| 44 | +})(copyStylesToShadowDom); |
| 45 | + |
| 46 | +const getAdoptedStyleSheets = ClientFunction(() => { |
| 47 | + const shadowRoot = (window as any).testShadowRoot; |
| 48 | + const { adoptedStyleSheets } = shadowRoot; |
| 49 | + |
| 50 | + const results: { [key: string]: string[] | null } = { |
| 51 | + firstSheetRules: null, |
| 52 | + secondSheetRules: null, |
| 53 | + }; |
| 54 | + |
| 55 | + if (adoptedStyleSheets.length > 1) { |
| 56 | + results.firstSheetRules = Array |
| 57 | + .from(adoptedStyleSheets[0].cssRules).map((rule) => (rule as CSSRule).cssText); |
| 58 | + |
| 59 | + results.secondSheetRules = Array |
| 60 | + .from(adoptedStyleSheets[1].cssRules).map((rule) => (rule as CSSRule).cssText); |
| 61 | + } |
| 62 | + |
| 63 | + return results; |
| 64 | +}); |
| 65 | + |
| 66 | +test('Copies DX css styles from the host to the shadow root when rendering a DX widget', async (t) => { |
| 67 | + await setupShadowDomTest(true); |
| 68 | + |
| 69 | + const { firstSheetRules, secondSheetRules } = await getAdoptedStyleSheets(); |
| 70 | + |
| 71 | + const hasHostStyle = firstSheetRules?.some((rule) => rule === dxWidgetHostStyles); |
| 72 | + await t.expect(hasHostStyle).ok('First adopted stylesheet contains host styles'); |
| 73 | + |
| 74 | + const hasShadowStyle = secondSheetRules?.some((rule) => rule === dxWidgetShadowStyles); |
| 75 | + await t.expect(hasShadowStyle).ok('Second adopted stylesheet contains shadow styles'); |
| 76 | +}); |
| 77 | + |
| 78 | +test('Does not copy DX css styles when copyStylesToShadowDom is disabled', async (t) => { |
| 79 | + await setupShadowDomTest(false); |
| 80 | + |
| 81 | + const { firstSheetRules, secondSheetRules } = await getAdoptedStyleSheets(); |
| 82 | + await t.expect(firstSheetRules === null && secondSheetRules === null) |
| 83 | + .ok('No adopted stylesheets should be created when copyStylesToShadowDom is disabled'); |
| 84 | +}); |
0 commit comments