| 1 |
import { |
| 2 |
addCustomMediaViewsCss, |
| 3 |
removeCustomMediaViewsCss, |
| 4 |
} from '@shared/lib/media-views'; |
| 5 |
|
| 6 |
// media-views is a cross-bundle shared helper: the Agent (ImageUploader, |
| 7 |
// UpdateImageConfirm) and QuickEdit (InlineEditor, SiteIdentityModal) both |
| 8 |
// mount it on opening a wp.media picker and unmount it on cleanup. These pin |
| 9 |
// the two guards both consumers lean on — a safe no-op when wp.media's |
| 10 |
// stylesheet is absent, and a short-circuit when the override is already |
| 11 |
// mounted. The CSS-rewrite injection itself walks the browser CSSOM |
| 12 |
// (rule.style spread) which jsdom can't run, so that half is covered |
| 13 |
// behaviorally by the image-flows Playwright spec, not here. |
| 14 |
const STYLE_ID = 'media-views-important'; |
| 15 |
const SHEET_ID = 'media-views-css'; |
| 16 |
|
| 17 |
// Stand in for wp.media's own enqueued stylesheet. |
| 18 |
const mountMediaViewsSheet = () => { |
| 19 |
const sheet = document.createElement('style'); |
| 20 |
sheet.id = SHEET_ID; |
| 21 |
sheet.textContent = '.media-frame { color: red; }'; |
| 22 |
document.head.appendChild(sheet); |
| 23 |
}; |
| 24 |
|
| 25 |
describe('media-views shared helper', () => { |
| 26 |
afterEach(() => { |
| 27 |
document.getElementById(STYLE_ID)?.remove(); |
| 28 |
document.getElementById(SHEET_ID)?.remove(); |
| 29 |
}); |
| 30 |
|
| 31 |
describe('addCustomMediaViewsCss', () => { |
| 32 |
it('is a safe no-op when wp.media stylesheet is absent', () => { |
| 33 |
expect(document.getElementById(SHEET_ID)).toBeNull(); |
| 34 |
|
| 35 |
expect(() => addCustomMediaViewsCss()).not.toThrow(); |
| 36 |
|
| 37 |
expect(document.getElementById(STYLE_ID)).toBeNull(); |
| 38 |
}); |
| 39 |
|
| 40 |
it('short-circuits when the override is already mounted', () => { |
| 41 |
// Both a real sheet and a prior override are present; the |
| 42 |
// id-guard must return before touching the sheet — otherwise the |
| 43 |
// CSSOM walk runs (and would re-inject a duplicate id). |
| 44 |
mountMediaViewsSheet(); |
| 45 |
const existing = document.createElement('style'); |
| 46 |
existing.id = STYLE_ID; |
| 47 |
document.head.appendChild(existing); |
| 48 |
|
| 49 |
addCustomMediaViewsCss(); |
| 50 |
|
| 51 |
expect(document.querySelectorAll(`#${STYLE_ID}`)).toHaveLength(1); |
| 52 |
expect(document.getElementById(STYLE_ID)).toBe(existing); |
| 53 |
}); |
| 54 |
}); |
| 55 |
|
| 56 |
describe('removeCustomMediaViewsCss', () => { |
| 57 |
it('removes an injected style element', () => { |
| 58 |
const style = document.createElement('style'); |
| 59 |
style.id = STYLE_ID; |
| 60 |
document.head.appendChild(style); |
| 61 |
|
| 62 |
removeCustomMediaViewsCss(); |
| 63 |
|
| 64 |
expect(document.getElementById(STYLE_ID)).toBeNull(); |
| 65 |
}); |
| 66 |
|
| 67 |
it('is a safe no-op when nothing was injected', () => { |
| 68 |
expect(() => removeCustomMediaViewsCss()).not.toThrow(); |
| 69 |
expect(document.getElementById(STYLE_ID)).toBeNull(); |
| 70 |
}); |
| 71 |
}); |
| 72 |
}); |
| 73 |
|
