Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: vaadin-themable-mixin LitElement support #3093

Merged
merged 11 commits into from
Nov 23, 2021
32 changes: 32 additions & 0 deletions packages/vaadin-themable-mixin/test/lit-setup.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { LitElement, unsafeCSS } from 'lit';
import { ThemableMixin } from '../vaadin-themable-mixin.js';

/**
* This is used for overriding the function that defines custom elements in the test suites.
* By default, the suite creates PolymerElement based custom elements, but in the
* -lit.test.js tests, we specifically want to create LitElement based custom elements instead.
*/
window.defineCustomElementFunction = (name, parentName, content, styles) => {
const parentElement = parentName ? customElements.get(parentName) : LitElement;
class CustomElement extends ThemableMixin(parentElement) {
static get is() {
return name;
}

static get styles() {
return unsafeCSS(styles);
}

render() {
if (content) {
const template = document.createElement('template');
template.innerHTML = content;
return template.content;
} else {
return super.render();
}
}
}

customElements.define(name, CustomElement);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { expect } from '@esm-bundle/chai';
import './lit-setup.js';
import './register-styles.test.js';
import { LitElement } from 'lit';

it('should have defined LitElement based custom elements', () => {
expect(document.createElement('register-styles-component-type-test')).to.be.instanceOf(LitElement);
});
67 changes: 41 additions & 26 deletions packages/vaadin-themable-mixin/test/register-styles.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,24 @@ import { ThemableMixin } from '../vaadin-themable-mixin.js';

let attachedInstances = [];

function define(customElementName) {
customElements.define(
customElementName,
class extends ThemableMixin(PolymerElement) {
static get is() {
return customElementName;
}
let define =
window.defineCustomElementFunction ||
((name) => {
customElements.define(
name,
class extends ThemableMixin(PolymerElement) {
static get is() {
return name;
}

static get template() {
return html`foo`;
static get template() {
return html`foo`;
}
}
}
);
}
);
});

define('register-styles-component-type-test');

function defineAndInstantiate(customElementName) {
define(customElementName);
Expand Down Expand Up @@ -160,19 +164,27 @@ describe('registerStyles', () => {
it('should not include duplicate styles', () => {
registerStyles(undefined, css``, { moduleId: unique('id') });

const duplicateStyle = css`
:host {
color: rgb(255, 0, 0);
}
`;
const duplicateStyle = ':host { color: rgb(255, 0, 0); }';
// Need to use both moduleId and include to verify the fix in style-modules -adapter
registerStyles(unique('component'), duplicateStyle, { include: [unique('id')], moduleId: unique('id2') });
registerStyles(unique('component'), unsafeCSS(duplicateStyle), {
include: [unique('id')],
moduleId: unique('id2')
});

const instance = defineAndInstantiate(unique('component'));
// Get all the styles from the component as one big string (let's assume it may have multiple style tags)
const styles = [...instance.shadowRoot.querySelectorAll('style')].map((style) => style.textContent).join('');

// Get all the style rules from the component
// Gather from the <style> tags (PolymerElement) and from the adoptedStyleSheets (LitElement)
const rules = [
...(instance.shadowRoot.adoptedStyleSheets || []),
...[...instance.shadowRoot.querySelectorAll('style')].map((style) => style.sheet)
]
.map((sheet) => [...sheet.cssRules])
.flat();

// Check the number of occurences of the style rule
const occurrences = styles.split(duplicateStyle.toString()).length - 1;
const occurrences = rules.filter((rule) => rule.cssText === duplicateStyle).length;

// There should be only one occurence
expect(occurrences).to.equal(1);
});
Expand Down Expand Up @@ -200,12 +212,15 @@ describe('registerStyles', () => {
expect(console.warn.called).to.be.false;
});

it('should not warn about registering the style too late 2', () => {
define(unique());
registerStyles(unique(), styles);
if (customElements.get('register-styles-component-type-test').template) {
// Only relevant for PolymerElement based components
it('should not warn about registering the style too late 2 (Polymer only)', () => {
define(unique());
registerStyles(unique(), styles);

expect(console.warn.called).to.be.false;
});
expect(console.warn.called).to.be.false;
});
}
});
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { expect } from '@esm-bundle/chai';
import './lit-setup.js';
import './themable-mixin.test.js';
import { LitElement } from 'lit';

it('should have defined LitElement based custom elements', () => {
expect(document.createElement('themable-mixin-component-type-test')).to.be.instanceOf(LitElement);
});
Loading