Using headers attribute on table cells trigger warning when running tests on vue-test-utils context

[rMonell]

Describe the bug

When running tests on a table based vue component using the headers attribute on a cell, I get a rather strange warning (shown below as a screenshot).

I've already open an issue on vue repository (vuejs/core#12502) but I've been advised to open an issue on this repo, so I hope my problem can be cleared up.

Indeed, I haven't been able to clearly identify if the issue was directly related to happy-dom, or to a runtime-dom mechanic used in a test with happy-dom environment.

To Reproduce

Reproduction link

https://codesandbox.io/p/devbox/8kthxl

Steps to reproduce

From the reproduction link

On a terminal, run :

pnpm run test

From a new project

1. Install vue, vue-test-utils and vitest with happy-dom as environment.
2. Create a component with a table and a headers attribute on any of the table cells.
3. Set up a test for this component, then run the tests.

Expected behavior

headers attribute on td element should be displayed and interpreted as an HTML attribute.

Screenshots

Device:

  System:
    OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i7-13700H
    Memory: 2.29 GB / 7.60 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
    pnpm: 9.12.2 - ~/.local/share/pnpm/pnpm
  npmPackages:
    vue: ^3.5.12 => 3.5.12 

[OlaviSau]

It does appear as if only the getter exists for the table cell implementation, thus this would indeed prevent the setting of the appropriate value. Since the headers is purely informational, I am a bit confused as to the current implementation - it kind of seems like it should be allowed to set to any value which is then converted to string as in browsers - cell.headers = {} is entirely legal. (it result in cell.headers // => [object Object]. I am not entirely sure of the context though / why the code is currently the way it is, but it definitely seems like a bug on happy-dom.

Currently:
https://github.com/capricorn86/happy-dom/blob/master/packages/happy-dom/src/nodes/html-table-cell-element/HTMLTableCellElement.ts#L76

Proposed fix:

---
	/**
	 * A DOMTokenList describing a list of id of <th> elements that represent headers associated with the cell. It reflects the headers attribute.
	 *
	 * @returns Headers.
	 */
	public get headers(): DOMTokenList {
		if (!this[PropertySymbol.headers]) {
			this[PropertySymbol.headers] = new DOMTokenList(
				PropertySymbol.illegalConstructor,
				this,
				'headers'
			);
		}
		return <DOMTokenList>this[PropertySymbol.headers];
	}
+++
	/**
	 * Returns headers.
	 *
	 * @returns headers.
	 */
	public get headers(): string {
		return String(this.getAttribute('headers'));
	}

	/**
	 * Sets headers.
	 *
	 * @param value headers.
	 */
	public set headers(value: string) {
		this.setAttribute('headers', String(value));
                 // TODO: implement metadata update if needed.
	}

[capricorn86]

Thank you for reporting @rMonell and thank you for the analysis @OlaviSau! 🙂

I believe the reason for why it was implemented the way it was is due to incorrect documentation at MDN:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement#htmltablecellelement.headers

When implementation a lot of elements at once it is easy to miss something 😅

It should be fixed now in v16.2.3.