ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(dialog): add types for dialog

Browse source
This commit is contained in:
Joren Broekema 2020-09-28 11:52:13 +02:00 committed by Thomas Allmer
parent 52618dc539
commit b06c85bbb4
4 changed files with 30 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/metal-maps-collect.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/dialog': minor
---
Added types for dialog package.

11
packages/dialog/src/LionDialog.js
View file

@ -2,6 +2,13 @@ import { html, LitElement } from '@lion/core';
import { OverlayMixin, withModalDialogConfig } from '@lion/overlays';
export class LionDialog extends OverlayMixin(LitElement) {
constructor() {
super();
this.__toggle = () => {
this.opened = !this.opened;
};
}
// eslint-disable-next-line class-methods-use-this
_defineOverlayConfig() {
return {
@ -11,10 +18,6 @@ export class LionDialog extends OverlayMixin(LitElement) {
_setupOpenCloseListeners() {
super._setupOpenCloseListeners();
this.__toggle = () => {
this.opened = !this.opened;
};
if (this._overlayInvokerNode) {
this._overlayInvokerNode.addEventListener('click', this.__toggle);
}

22
packages/dialog/test/lion-dialog.test.js
View file

@ -1,7 +1,14 @@
import { runOverlayMixinSuite } from '@lion/overlays/test-suites/OverlayMixin.suite.js';
import { expect, fixture, html, unsafeStatic } from '@open-wc/testing';
import { expect, fixture as _fixture, html, unsafeStatic } from '@open-wc/testing';
import '../lion-dialog.js';
/**
* @typedef {import('../src/LionDialog').LionDialog} LionDialog
* @typedef {import('lit-html').TemplateResult} TemplateResult
*/
const fixture = /** @type {(arg: TemplateResult) => Promise<LionDialog>} */ (_fixture);
describe('lion-dialog', () => {
// For some reason, globalRootNode is not cleared properly on disconnectedCallback from previous overlay test fixtures...
// Not sure why this "bug" happens...
@ -31,7 +38,7 @@ describe('lion-dialog', () => {
<button slot="invoker">Popup button</button>
</lion-dialog>
`);
const invoker = el.querySelector('[slot="invoker"]');
const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
invoker.click();
expect(el.opened).to.be.true;
@ -51,12 +58,17 @@ describe('lion-dialog', () => {
</lion-dialog>
`);
// @ts-expect-error you're not allowed to call protected _overlayInvokerNode in public context, but for testing it's okay
el._overlayInvokerNode.click();
expect(el.opened).to.be.true;
const wrapperNode = Array.from(document.querySelector('.global-overlays').children)[1];
const nestedDialog = wrapperNode.querySelector('lion-dialog');
nestedDialog._overlayInvokerNode.click();
const overlaysContainer = /** @type {HTMLElement} */ (document.querySelector(
'.global-overlays',
));
const wrapperNode = Array.from(overlaysContainer.children)[1];
const nestedDialog = /** @type {LionDialog} */ (wrapperNode.querySelector('lion-dialog'));
// @ts-expect-error you're not allowed to call protected _overlayInvokerNode in public context, but for testing it's okay
nestedDialog?._overlayInvokerNode.click();
expect(nestedDialog.opened).to.be.true;
});
});

1
tsconfig.json
View file

@ -20,6 +20,7 @@
"packages/checkbox-group/**/*.js",
"packages/collapsible/**/*.js",
"packages/core/**/*.js",
"packages/dialog/**/*.js",
"packages/fieldset/**/*.js",
"packages/form/**/*.js",
"packages/form-core/**/*.js",