|
| 1 | +// Import testing helpers. For more information check out: |
| 2 | +// https://open-wc.org/docs/testing/helpers/ |
| 3 | +import { expect } from '@open-wc/testing/index-no-side-effects.js'; |
| 4 | + |
| 5 | +import { setViewport } from '@web/test-runner-commands'; |
| 6 | + |
| 7 | +// Import our custom fixture wrapper. This allows us to run tests |
| 8 | +// in React and Vue as well as a normal fixture. |
| 9 | +import { createFixture } from '../../../test/utils/create-fixture.js'; |
| 10 | + |
| 11 | +// Import the element we're testing. |
| 12 | +import '../dist/pfe-modal'; |
| 13 | + |
| 14 | +// One element, defined here, is used |
| 15 | +// in multiple tests. It's torn down and recreated each time. |
| 16 | +const testElement = |
| 17 | + `<pfe-modal> |
| 18 | + </pfe-modal> |
| 19 | + `; |
| 20 | + |
| 21 | +const smallModal = ` |
| 22 | + <pfe-modal width="small"> |
| 23 | + <pfe-button slot="pfe-modal--trigger"> |
| 24 | + <button>Open a small modal</button> |
| 25 | + </pfe-button> |
| 26 | + <h2 slot="pfe-modal--header">Small modal</h2> |
| 27 | + <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
| 28 | + </pfe-modal> |
| 29 | +`; |
| 30 | + |
| 31 | +const mediumModal = ` |
| 32 | + <pfe-modal width="medium"> |
| 33 | + <pfe-button slot="pfe-modal--trigger"> |
| 34 | + <button>Open a medium modal</button> |
| 35 | + </pfe-button> |
| 36 | + <h2 slot="pfe-modal--header">Medium modal</h2> |
| 37 | + <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
| 38 | + </pfe-modal> |
| 39 | +`; |
| 40 | + |
| 41 | +const largeModal = ` |
| 42 | + <pfe-modal width="large"> |
| 43 | + <pfe-button slot="pfe-modal--trigger"> |
| 44 | + <button>Open a large modal</button> |
| 45 | + </pfe-button> |
| 46 | + <h2 slot="pfe-modal--header">Large modal</h2> |
| 47 | + <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
| 48 | + </pfe-modal> |
| 49 | +`; |
| 50 | + |
| 51 | +describe("<pfe-modal>", () => { |
| 52 | + |
| 53 | + it("it should upgrade", async () => { |
| 54 | + const el = await createFixture(testElement); |
| 55 | + |
| 56 | + expect(el).to.be.an.instanceOf( |
| 57 | + customElements.get("pfe-modal"), |
| 58 | + 'pfe-modal should be an instance of PfeModal' |
| 59 | + ); |
| 60 | + }); |
| 61 | + |
| 62 | + // Example test. |
| 63 | + it("should apply attributes correctly", async () => { |
| 64 | + // Use the same markup that's declared at the top of the file. |
| 65 | + const el = await createFixture(` |
| 66 | + <pfe-modal> |
| 67 | + <pfe-button slot="pfe-modal--trigger"> |
| 68 | + <button>Open a modal</button> |
| 69 | + </pfe-button> |
| 70 | + <h2 slot="pfe-modal--header">Modal with a header</h2> |
| 71 | + <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
| 72 | + </pfe-modal> |
| 73 | + `); |
| 74 | + const modalWindow = el.shadowRoot.querySelector('.pfe-modal__window'); |
| 75 | + const button = el.shadowRoot.querySelector('.pfe-modal__close'); |
| 76 | + |
| 77 | + await new Promise(r => setTimeout(r, 25)); |
| 78 | + expect(el.hasAttribute('has_trigger'), 'has_trigger').to.be.true; |
| 79 | + expect(el.hasAttribute('has_header'), 'has_header').to.be.true; |
| 80 | + expect(el.hasAttribute('has_body'), 'has_body').to.be.true; |
| 81 | + expect(modalWindow.getAttribute('tabindex'), 'modal__window tabindex').to.equal('0'); |
| 82 | + expect(modalWindow.hasAttribute('hidden'), 'hidden').to.be.true; |
| 83 | + expect(button.getAttribute('aria-label'), 'button aria-label').to.equal('Close dialog'); |
| 84 | + }); |
| 85 | + |
| 86 | + it('should open the modal window when the trigger is clicked', async () => { |
| 87 | + const el = await createFixture(` |
| 88 | + <pfe-modal> |
| 89 | + <pfe-button slot="pfe-modal--trigger"> |
| 90 | + <button>Open a modal</button> |
| 91 | + </pfe-button> |
| 92 | + <h2 slot="pfe-modal--header">Modal with a header</h2> |
| 93 | + <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
| 94 | + </pfe-modal> |
| 95 | + `); |
| 96 | + const modalWindow = el.shadowRoot.querySelector('.pfe-modal__window'); |
| 97 | + const button = el.shadowRoot.querySelector('.pfe-modal__close'); |
| 98 | + const trigger = el.querySelector('[slot=pfe-modal--trigger'); |
| 99 | + |
| 100 | + trigger.click(); |
| 101 | + |
| 102 | + expect(modalWindow.hasAttribute('hidden')).to.not.be.true; |
| 103 | + |
| 104 | + // reset |
| 105 | + button.click(); |
| 106 | + expect(modalWindow.hasAttribute('hidden')).to.be.true; |
| 107 | + }); |
| 108 | + |
| 109 | + it('it should remove the hidden attribute from the host on upgrade', async () => { |
| 110 | + const el = await createFixture(testElement); |
| 111 | + |
| 112 | + await new Promise(r => setTimeout(r, 25)); |
| 113 | + // test for the hidden attribute on the host |
| 114 | + expect(el.hasAttribute('hidden')).to.not.be.true; |
| 115 | + }); |
| 116 | + |
| 117 | + describe('on extra large screen', function() { |
| 118 | + beforeEach(async function() { |
| 119 | + await setViewport({ width: 1600, height: 1200 }); |
| 120 | + }) |
| 121 | + |
| 122 | + describe('with width=small attribute', () => { |
| 123 | + it('has small modal width', async () => { |
| 124 | + const el = await createFixture(smallModal); |
| 125 | + const modalWindow = el.shadowRoot.querySelector('.pfe-modal__window'); |
| 126 | + expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) |
| 127 | + .to.equal('560px'); |
| 128 | + }); |
| 129 | + }); |
| 130 | + |
| 131 | + describe('with width=medium attribute', () => { |
| 132 | + it('has medium modal width', async () => { |
| 133 | + const el = await createFixture(mediumModal); |
| 134 | + const modalWindow = el.shadowRoot.querySelector('.pfe-modal__window'); |
| 135 | + expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) |
| 136 | + .to.equal('840px'); |
| 137 | + }); |
| 138 | + }); |
| 139 | + |
| 140 | + describe('with width=large attribute', () => { |
| 141 | + it('has large modal width', async () => { |
| 142 | + const el = await createFixture(largeModal); |
| 143 | + const modalWindow = el.shadowRoot.querySelector('.pfe-modal__window'); |
| 144 | + expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) |
| 145 | + .to.equal('1120px'); |
| 146 | + }); |
| 147 | + }); |
| 148 | + }); |
| 149 | + |
| 150 | + describe('on large screen', function() { |
| 151 | + beforeEach(async function() { |
| 152 | + await setViewport({ width: 1000, height: 800 }); |
| 153 | + }) |
| 154 | + |
| 155 | + describe('with width=small attribute', () => { |
| 156 | + it('has small modal width', async () => { |
| 157 | + const el = await createFixture(smallModal); |
| 158 | + const modalWindow = el.shadowRoot.querySelector('.pfe-modal__window'); |
| 159 | + expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) |
| 160 | + .to.equal('560px'); |
| 161 | + }); |
| 162 | + }); |
| 163 | + |
| 164 | + describe('with width=medium attribute', () => { |
| 165 | + it('has medium modal width', async () => { |
| 166 | + const el = await createFixture(mediumModal); |
| 167 | + const modalWindow = el.shadowRoot.querySelector('.pfe-modal__window'); |
| 168 | + expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) |
| 169 | + .to.equal('840px'); |
| 170 | + }); |
| 171 | + }); |
| 172 | + |
| 173 | + describe('with width=large attribute', () => { |
| 174 | + it('has large modal width', async () => { |
| 175 | + const el = await createFixture(largeModal); |
| 176 | + const modalWindow = el.shadowRoot.querySelector('.pfe-modal__window'); |
| 177 | + expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) |
| 178 | + .to.equal('940px'); |
| 179 | + }); |
| 180 | + }); |
| 181 | + }); |
| 182 | + |
| 183 | + describe('on medium screen', function() { |
| 184 | + beforeEach(async function() { |
| 185 | + await setViewport({ width: 768, height: 600 }); |
| 186 | + }) |
| 187 | + |
| 188 | + describe('with width=small attribute', () => { |
| 189 | + it('has small modal width', async () => { |
| 190 | + const el = await createFixture(smallModal); |
| 191 | + const modalWindow = el.shadowRoot.querySelector('.pfe-modal__window'); |
| 192 | + expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) |
| 193 | + .to.equal('560px'); |
| 194 | + }); |
| 195 | + }); |
| 196 | + |
| 197 | + describe('with width=medium attribute', () => { |
| 198 | + it('has medium modal width', async () => { |
| 199 | + const el = await createFixture(mediumModal); |
| 200 | + const modalWindow = el.shadowRoot.querySelector('.pfe-modal__window'); |
| 201 | + expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) |
| 202 | + .to.equal('721.92px'); |
| 203 | + }); |
| 204 | + }); |
| 205 | + |
| 206 | + describe('with width=large attribute', () => { |
| 207 | + it('has large modal width', async () => { |
| 208 | + const el = await createFixture(largeModal); |
| 209 | + const modalWindow = el.shadowRoot.querySelector('.pfe-modal__window'); |
| 210 | + expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) |
| 211 | + .to.equal('721.92px'); |
| 212 | + }); |
| 213 | + }); |
| 214 | + }); |
| 215 | + |
| 216 | + describe('on small screen', function() { |
| 217 | + beforeEach(async function() { |
| 218 | + await setViewport({ width: 480, height: 540 }); |
| 219 | + }) |
| 220 | + |
| 221 | + describe('with width=small attribute', () => { |
| 222 | + it('has small modal width', async () => { |
| 223 | + const el = await createFixture(smallModal); |
| 224 | + const modalWindow = el.shadowRoot.querySelector('.pfe-modal__window'); |
| 225 | + expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) |
| 226 | + .to.equal('451.2px'); |
| 227 | + }); |
| 228 | + }); |
| 229 | + |
| 230 | + describe('with width=medium attribute', () => { |
| 231 | + it('has medium modal width', async () => { |
| 232 | + const el = await createFixture(mediumModal); |
| 233 | + const modalWindow = el.shadowRoot.querySelector('.pfe-modal__window'); |
| 234 | + expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) |
| 235 | + .to.equal('451.2px'); |
| 236 | + }); |
| 237 | + }); |
| 238 | + |
| 239 | + describe('with width=large attribute', () => { |
| 240 | + it('has large modal width', async () => { |
| 241 | + const el = await createFixture(largeModal); |
| 242 | + const modalWindow = el.shadowRoot.querySelector('.pfe-modal__window'); |
| 243 | + expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) |
| 244 | + .to.equal('451.2px'); |
| 245 | + }); |
| 246 | + }); |
| 247 | + }); |
| 248 | +}); |
0 commit comments