fix: [#1812] Incorrect cache match caused Element classList to return the wrong items (#1830)

Author: capricorn86

packages/happy-dom/src/dom/DOMTokenList.ts

@@ -181,7 +181,7 @@ export default class DOMTokenList {
 	 * @param newToken NewToken.
 	 */
 	public replace(token: string, newToken: string): boolean {
-		const list = this[PropertySymbol.getTokenList]();
+		const list = this[PropertySymbol.getTokenList]().slice();
 		const index = list.indexOf(token);
 		if (index === -1) {
 			return false;
@@ -241,14 +241,12 @@ export default class DOMTokenList {
 	 * @param tokens Tokens.
 	 */
 	public add(...tokens: string[]): void {
-		const list = this[PropertySymbol.getTokenList]();
+		const list = this[PropertySymbol.getTokenList]().slice();
 
 		for (const token of tokens) {
 			const index = list.indexOf(token);
 			if (index === -1) {
 				list.push(token);
-			} else {
-				list[index] = token;
 			}
 		}
 
@@ -264,7 +262,7 @@ export default class DOMTokenList {
 	 * @param tokens Tokens.
 	 */
 	public remove(...tokens: string[]): void {
-		const list = this[PropertySymbol.getTokenList]();
+		const list = this[PropertySymbol.getTokenList]().slice();
 
 		for (const token of tokens) {
 			const index = list.indexOf(token);

packages/happy-dom/test/nodes/element/Element.test.ts

@@ -211,6 +211,18 @@ describe('Element', () => {
 			expect(element.classList[0]).toBe('value1');
 			expect(element.classList[1]).toBe('value2');
 		});
+
+		it('Handles cache correctly (#1812)', () => {
+			element.classList.add('foo', 'bar', 'baz');
+			expect(element.outerHTML).toEqual('<div class="foo bar baz"></div>');
+			element.className = '';
+			element.classList.add('bar', 'baz');
+			expect(element.outerHTML).toEqual('<div class="bar baz"></div>');
+			element.classList.remove('baz');
+			expect(element.outerHTML).toEqual('<div class="bar"></div>');
+			element.classList.replace('bar', 'foo');
+			expect(element.outerHTML).toEqual('<div class="foo"></div>');
+		});
 	});
 
 	describe('set classList()', () => {