For the source files in this project this ESLint configuration creates these errors.
/Users/oleersoy/Temp/Remove/fs-javascript-starter/src/hello-world.component.js
7:42 error 'HTMLElement' is not defined no-undef
52:3 error 'customElements' is not defined no-undef
/Users/oleersoy/Temp/Remove/fs-javascript-starter/src/hello-world.component.spec.js
3:1 error 'suite' is not defined no-undef
4:3 error 'test' is not defined no-undef
✖ 4 problems (4 errors, 0 warnings)
How do we switch these off so that ESLint allows suite
, test
, HTMLElement
, and customElements
?
Here are the source files for reference:
eslint.config.js
import eslint from "@eslint/js";
export default [
// apply recommended rules to JS files
{
files: ["**/*.js", "**/*.cjs", "**/*.mjs"],
rules: eslint.configs.recommended.rules
},
{
ignores: ["rollup.config.js", "web-test-runner.config.js"]
}
]
src/hello-world.component.js
/**
* @category WebComponent
*
* Hello World Web Component
* that renders a greeting.
*/
export class HelloWorldComponent extends HTMLElement {
static get observedAttributes() {
return ['name'];
}
/**
* The name to greet
* @defaultValue World
*/
name = 'World';
something
/**
* Initializes the name property to `World`.
*/
constructor() {
super();
// this.name = 'World';
}
/**
* Sets the component inner
* html to the greeting.
*/
connectedCallback() {
this.textContent = `Hello ${this.name}!`;
}
//========================================
// attribute change callback
//========================================
attributeChangedCallback(
property,
oldValue,
newValue
) {
if (oldValue === newValue) return;
switch (property) {
case 'name':
this.name = newValue;
break;
default:
throw new Error(`Unhandled attribute: ${property}`);
}
}
}
customElements.define('hello-world', HelloWorldComponent);
src/hello-world.component.spec.js
import {expect, fixture, html} from '@open-wc/testing';
suite('hello-world.component tests', () => {
test('fixture instantiation', async () => {
const el = (await fixture(
html`<hello-world></hello-world> `
));
expect(el).not.to.equal(null);
// expect(true).to.equal(false);
});
});