|
12 | 12 | /* eslint-disable no-unused-expressions, import/no-extraneous-dependencies */ |
13 | 13 |
|
14 | 14 | import { expect } from '@open-wc/testing'; |
| 15 | +import { render } from 'lit'; |
15 | 16 | import chromeMock from '../../../mocks/chrome.js'; |
16 | 17 | import { Plugin } from '../../../../src/extension/app/components/plugin/plugin.js'; |
17 | 18 | import { AppStore } from '../../../../src/extension/app/store/app.js'; |
@@ -48,6 +49,18 @@ const TEST_BADGE_CONFIG = { |
48 | 49 | }, |
49 | 50 | }; |
50 | 51 |
|
| 52 | +const TEST_POPOVER_CONFIG = { |
| 53 | + id: 'test', |
| 54 | + title: 'Test Popover', |
| 55 | + isPopover: true, |
| 56 | + popoverRect: 'width: 100px; height: 100px;', |
| 57 | + url: 'https://labs.aem.live/tools/snapshot-admin/palette.html?foo=bar', |
| 58 | + button: { |
| 59 | + text: 'Test Child', |
| 60 | + action: () => {}, |
| 61 | + }, |
| 62 | +}; |
| 63 | + |
51 | 64 | describe('Plugin', () => { |
52 | 65 | const appStore = new AppStore(); |
53 | 66 |
|
@@ -124,6 +137,66 @@ describe('Plugin', () => { |
124 | 137 | parent.append(child); |
125 | 138 | }); |
126 | 139 |
|
| 140 | + it('renders a popover plugin', async () => { |
| 141 | + appStore.theme = 'dark'; |
| 142 | + const plugin = new Plugin({ ...TEST_POPOVER_CONFIG }, appStore); |
| 143 | + |
| 144 | + const container = document.createElement('div'); |
| 145 | + render(plugin.render(), container); |
| 146 | + |
| 147 | + // Wait for next time to let lit process the update |
| 148 | + await Promise.resolve(); |
| 149 | + |
| 150 | + const overlayTrigger = container.querySelector('overlay-trigger'); |
| 151 | + expect(overlayTrigger).to.exist; |
| 152 | + expect(overlayTrigger.getAttribute('offset')).to.equal('-3'); |
| 153 | + |
| 154 | + const popover = container.querySelector('sp-popover'); |
| 155 | + expect(popover).to.exist; |
| 156 | + expect(popover.getAttribute('placement')).to.equal('top'); |
| 157 | + |
| 158 | + const popoverStyle = popover.getAttribute('style'); |
| 159 | + expect(popoverStyle).to.include('width: 100px; height: 100px;'); |
| 160 | + |
| 161 | + const iframe = container.querySelector('iframe'); |
| 162 | + expect(iframe).to.exist; |
| 163 | + expect(iframe.getAttribute('title')).to.equal(TEST_POPOVER_CONFIG.title); |
| 164 | + expect(iframe.getAttribute('src')).to.include(TEST_POPOVER_CONFIG.url); |
| 165 | + expect(iframe.getAttribute('src')).to.include('?foo=bar&theme=dark'); |
| 166 | + }); |
| 167 | + |
| 168 | + it('renders a popover plugin with filtered popoverRect', async () => { |
| 169 | + const config = { ...TEST_POPOVER_CONFIG }; |
| 170 | + config.popoverRect = 'width: 100px; height: 100px; background-color: red;'; |
| 171 | + const plugin = new Plugin({ ...config }, appStore); |
| 172 | + |
| 173 | + const container = document.createElement('div'); |
| 174 | + render(plugin.render(), container); |
| 175 | + |
| 176 | + // Wait for next time to let lit process the update |
| 177 | + await Promise.resolve(); |
| 178 | + |
| 179 | + const popover = container.querySelector('sp-popover'); |
| 180 | + const popoverStyle = popover.getAttribute('style'); |
| 181 | + expect(popoverStyle).to.include('width: 100px; height: 100px;'); |
| 182 | + }); |
| 183 | + |
| 184 | + it('renders a popover without a popoverRect', async () => { |
| 185 | + const config = { ...TEST_POPOVER_CONFIG }; |
| 186 | + config.popoverRect = undefined; |
| 187 | + const plugin = new Plugin({ ...config }, appStore); |
| 188 | + |
| 189 | + const container = document.createElement('div'); |
| 190 | + render(plugin.render(), container); |
| 191 | + |
| 192 | + // Wait for next time to let lit process the update |
| 193 | + await Promise.resolve(); |
| 194 | + |
| 195 | + const popover = container.querySelector('sp-popover'); |
| 196 | + const popoverStyle = popover.getAttribute('style'); |
| 197 | + expect(popoverStyle).to.be.null; |
| 198 | + }); |
| 199 | + |
127 | 200 | it('does not render if not pinned', async () => { |
128 | 201 | const plugin = new Plugin({ |
129 | 202 | id: 'test', |
|
0 commit comments