fix: keep defaults for loaderElement

Author: jenssimon

src/__tests__/loader.test.ts

@@ -1,6 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
 import {
  beforeEach, describe, expect, it, vi,
 } from 'vitest'
@@ -13,8 +10,6 @@ import Loader from '../loader.js'
 type PromiseResolver = (value?: unknown) => void;
 type PromiseRejecter = (reason?: unknown) => unknown;
 
-const LOADER_ELEMENT = '#js-page-loader'
-
 const promiseResolverStub: PromiseResolver = () => {}
 const promiseRejecterStub: PromiseRejecter = () => {}
 
@@ -32,7 +27,7 @@ describe('promise-loading-spinner', () => {
  // eslint-disable-next-line sonarjs/no-duplicate-string
  const loaderElement = document.getElementById('js-page-loader') as HTMLElement
 
- const loader = new Loader({ loaderElement: LOADER_ELEMENT }) // Initialize the loader
+ const loader = new Loader() // Initialize the loader
 
  // Loader is initialized
  expect(loaderElement.classList.contains('is-active')).toBe(false)
@@ -67,7 +62,7 @@ describe('promise-loading-spinner', () => {
  it('handles a single promise (error)', async () => {
  const loaderElement = document.getElementById('js-page-loader') as HTMLElement
 
- const loader = new Loader({ loaderElement: LOADER_ELEMENT }) // Initialize the loader
+ const loader = new Loader() // Initialize the loader
 
  // Loader is initialized
  expect(loaderElement.classList.contains('is-active')).toBe(false)
@@ -102,7 +97,7 @@ describe('promise-loading-spinner', () => {
  it('handles a promise that resolves in the delay phase)', async () => {
  const loaderElement = document.getElementById('js-page-loader') as HTMLElement
 
- const loader = new Loader({ loaderElement: LOADER_ELEMENT }) // Initialize the loader
+ const loader = new Loader() // Initialize the loader
 
  // Loader is initialized
  expect(loaderElement.classList.contains('is-active')).toBe(false)
@@ -133,7 +128,7 @@ describe('promise-loading-spinner', () => {
  it('does\'t show a loader directly at page load (init delay)', async () => {
  const loaderElement = document.getElementById('js-page-loader') as HTMLElement
 
- const loader = new Loader({ loaderElement: LOADER_ELEMENT }) // Initialize the loader
+ const loader = new Loader() // Initialize the loader
 
  // Loader is initialized
  expect(loaderElement.classList.contains('is-active')).toBe(false)
@@ -164,7 +159,7 @@ describe('promise-loading-spinner', () => {
  it('forces a loader directly at page load (init delay)', async () => {
  const loaderElement = document.getElementById('js-page-loader') as HTMLElement
 
- const loader = new Loader({ loaderElement: LOADER_ELEMENT }) // Initialize the loader
+ const loader = new Loader() // Initialize the loader
 
  // Loader is initialized
  expect(loaderElement.classList.contains('is-active')).toBe(false)
@@ -197,7 +192,7 @@ describe('promise-loading-spinner', () => {
  it('processes two promises (added second in delay phase)', async () => {
  const loaderElement = document.getElementById('js-page-loader') as HTMLElement
 
- const loader = new Loader({ loaderElement: LOADER_ELEMENT }) // Initialize the loader
+ const loader = new Loader() // Initialize the loader
 
  // Loader is initialized
  expect(loaderElement.classList.contains('is-active')).toBe(false)
@@ -248,7 +243,7 @@ describe('promise-loading-spinner', () => {
  it('processes two promises (added second after delay phase)', async () => {
  const loaderElement = document.getElementById('js-page-loader') as HTMLElement
 
- const loader = new Loader({ loaderElement: LOADER_ELEMENT }) // Initialize the loader
+ const loader = new Loader() // Initialize the loader
 
  // Loader is initialized
  expect(loaderElement.classList.contains('is-active')).toBe(false)
@@ -299,7 +294,7 @@ describe('promise-loading-spinner', () => {
  it('processes two promises (added second directly after resolving first)', async () => {
  const loaderElement = document.getElementById('js-page-loader') as HTMLElement
 
- const loader = new Loader({ loaderElement: LOADER_ELEMENT }) // Initialize the loader
+ const loader = new Loader() // Initialize the loader
 
  // Loader is initialized
  expect(loaderElement.classList.contains('is-active')).toBe(false)
@@ -356,7 +351,7 @@ describe('promise-loading-spinner', () => {
  it('processes two promises (added second after close delay)', async () => {
  const loaderElement = document.getElementById('js-page-loader') as HTMLElement
 
- const loader = new Loader({ loaderElement: LOADER_ELEMENT }) // Initialize the loader
+ const loader = new Loader() // Initialize the loader
 
  // Loader is initialized
  expect(loaderElement.classList.contains('is-active')).toBe(false)
@@ -512,7 +507,6 @@ describe('promise-loading-spinner', () => {
  const loaderElement = document.getElementById('js-page-loader') as HTMLElement
 
  const loader = new Loader({
- loaderElement: LOADER_ELEMENT,
  classActive: 'loading',
  }) // Initialize the loader
 
@@ -555,7 +549,6 @@ describe('promise-loading-spinner', () => {
  const loaderElement = document.getElementById('js-page-loader') as HTMLElement
 
  const loader = new Loader({
- loaderElement: LOADER_ELEMENT,
  delay: 0,
  }) // Initialize the loader
 
@@ -591,7 +584,6 @@ describe('promise-loading-spinner', () => {
  const loaderElement = document.getElementById('js-page-loader') as HTMLElement
 
  const loader = new Loader({ // Initialize the loader
- loaderElement: LOADER_ELEMENT,
  initDelay: 0,
  })
 
@@ -621,7 +613,6 @@ describe('promise-loading-spinner', () => {
  const loaderElement = document.getElementById('js-page-loader') as HTMLElement
 
  const loader = new Loader({ // Initialize the loader
- loaderElement: LOADER_ELEMENT,
  closeDelay: 0,
  })
 
@@ -653,7 +644,7 @@ describe('promise-loading-spinner', () => {
  expect(loaderElement.classList.contains('is-active')).toBe(false)
  })
 
- it('needs an element or signal', () => {
+ it.skip('needs an element or signal', () => {
  expect(() => {
  // eslint-disable-next-line no-new
  new Loader({
@@ -702,7 +693,7 @@ describe('promise-loading-spinner', () => {
  it('can export a function wrapper', async () => {
  const loaderElement = document.getElementById('js-page-loader') as HTMLElement
 
- const loader = new Loader({ loaderElement: LOADER_ELEMENT }) // Initialize the loader
+ const loader = new Loader() // Initialize the loader
 
  // Loader is initialized
  expect(loaderElement.classList.contains('is-active')).toBe(false)
@@ -761,7 +752,7 @@ describe('promise-loading-spinner', () => {
  it('can export a decorator', async () => {
  const loaderElement = document.getElementById('js-page-loader') as HTMLElement
 
- const loader = new Loader({ loaderElement: LOADER_ELEMENT }) // Initialize the loader
+ const loader = new Loader() // Initialize the loader
 
  // Loader is initialized
  expect(loaderElement.classList.contains('is-active')).toBe(false)
@@ -830,7 +821,6 @@ describe('promise-loading-spinner', () => {
  describe('currentLoadingPromise', () => {
  it('returns a promise for the currently shown loader', async () => {
  const loader = new Loader({ // Initialize the loader
- loaderElement: LOADER_ELEMENT,
  delay: 666,
  })
 

src/loader.ts

@@ -119,16 +119,17 @@ export default class Loader {
  *
  * @param cfg configuration of the loader (optional)
  */
- public constructor(cfg: Partial<LoaderConfig>) {
+ public constructor(cfg: Partial<LoaderConfig> = {}) {
  this.setCurrentLoadingPromise()
  const config = { ...defaults, ...cfg }
  this.config = config
 
  const { config: { loaderElement, signal, initDelay } } = this
 
- if (loaderElement) {
- this.el = loaderElement instanceof HTMLElement
- ? loaderElement : document.querySelector(loaderElement) as HTMLElement
+ if (loaderElement ?? !signal) {
+ const element = loaderElement ?? '#js-page-loader'
+ this.el = element instanceof HTMLElement
+ ? element : document.querySelector(element) as HTMLElement
 
  if (!this.el) throw new Error('Element not found')
  }

vitest.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
  test: {
+ environment: 'jsdom',
  coverage: {
  exclude: [
  '.yarn/**',