fix(mock-doc): implement part API (#6423)

* fix(mock-doc): implement part API

* refactor(mock-doc): unify classList and part into MockTokenList

* fix: run lint --fix to sort imports

* fix: run prettier to format code

Author: ritoban23

src/mock-doc/class-list.ts

@@ -1,5 +1,4 @@
 import { createAttributeProxy, MockAttr, MockAttributeMap } from './attribute';
-import { MockClassList } from './class-list';
 import { NODE_NAMES, NODE_TYPES } from './constants';
 import { createCSSStyleDeclaration, MockCSSStyleDeclaration } from './css-style-declaration';
 import { attributeChanged, checkAttributeChanged, connectNode, disconnectNode } from './custom-element-registry';
@@ -15,6 +14,7 @@ import {
 import { parseFragmentUtil } from './parse-util';
 import { matches, selectAll, selectOne } from './selector';
 import { NON_ESCAPABLE_CONTENT, serializeNodeToHtml, SerializeNodeToHtmlOptions } from './serialize-node';
+import { MockTokenList } from './token-list';
 
 export class MockNode {
   private _nodeValue: string | null;
@@ -368,7 +368,11 @@ export class MockElement extends MockNode {
   }
 
   get classList() {
-    return new MockClassList(this as any);
+    return new MockTokenList(this as any, 'class');
+  }
+
+  get part() {
+    return new MockTokenList(this as any, 'part');
   }
 
   click() {

src/mock-doc/node.ts

@@ -0,0 +1,56 @@
+import { MockTokenList } from '../token-list';
+import { MockDocument } from '../document';
+import { MockElement } from '../node';
+
+describe('token-list', () => {
+  let tokenList: MockTokenList;
+  beforeEach(() => {
+    const doc = new MockDocument();
+    const el = new MockElement(doc, 'div');
+    tokenList = new MockTokenList(el as any, 'class');
+  });
+
+  it('add and remove tokens', () => {
+    tokenList.add('one');
+    tokenList.add('two', 'three');
+    tokenList.add(null);
+    tokenList.add(undefined);
+    tokenList.add(1 as any, 2 as any);
+    expect(tokenList.toString()).toEqual('one two three null undefined 1 2');
+
+    expect(tokenList.contains('one')).toBe(true);
+    expect(tokenList.contains('two')).toBe(true);
+    expect(tokenList.contains('three')).toBe(true);
+    expect(tokenList.contains('null')).toBe(true);
+    expect(tokenList.contains(null)).toBe(true);
+    expect(tokenList.contains('undefined')).toBe(true);
+    expect(tokenList.contains('1')).toBe(true);
+    expect(tokenList.contains(2 as any)).toBe(true);
+
+    tokenList.remove('one');
+    tokenList.remove('two', 'three');
+    tokenList.remove(null);
+    tokenList.remove(undefined);
+    tokenList.remove(1 as any, 2 as any);
+
+    expect(tokenList.toString()).toEqual('');
+  });
+
+  it('should throw if empty', () => {
+    expect(() => {
+      tokenList.add('');
+    }).toThrow();
+    expect(() => {
+      tokenList.remove('');
+    }).toThrow();
+  });
+
+  it('should throw if has spaces', () => {
+    expect(() => {
+      tokenList.add('');
+    }).toThrow();
+    expect(() => {
+      tokenList.remove(' ');
+    }).toThrow();
+  });
+});

src/mock-doc/test/class-list.spec.ts

@@ -0,0 +1,85 @@
+export class MockTokenList {
+  constructor(
+    private elm: HTMLElement,
+    private attr: string,
+  ) {}
+
+  add(...tokens: string[]) {
+    const items = getItems(this.elm, this.attr);
+    let updated = false;
+    tokens.forEach((token) => {
+      token = String(token);
+      validateToken(token);
+      if (items.includes(token) === false) {
+        items.push(token);
+        updated = true;
+      }
+    });
+    if (updated) {
+      this.elm.setAttributeNS(null, this.attr, items.join(' '));
+    }
+  }
+
+  remove(...tokens: string[]) {
+    const items = getItems(this.elm, this.attr);
+    let updated = false;
+    tokens.forEach((token) => {
+      token = String(token);
+      validateToken(token);
+      const index = items.indexOf(token);
+      if (index > -1) {
+        items.splice(index, 1);
+        updated = true;
+      }
+    });
+    if (updated) {
+      this.elm.setAttributeNS(null, this.attr, items.filter((c) => c.length > 0).join(' '));
+    }
+  }
+
+  contains(token: string) {
+    token = String(token);
+    return getItems(this.elm, this.attr).includes(token);
+  }
+
+  toggle(token: string) {
+    token = String(token);
+    if (this.contains(token) === true) {
+      this.remove(token);
+    } else {
+      this.add(token);
+    }
+  }
+
+  get length() {
+    return getItems(this.elm, this.attr).length;
+  }
+
+  item(index: number) {
+    return getItems(this.elm, this.attr)[index];
+  }
+
+  toString() {
+    return getItems(this.elm, this.attr).join(' ');
+  }
+}
+
+function validateToken(token: string) {
+  if (token === '') {
+    throw new Error('The token provided must not be empty.');
+  }
+  if (/\s/.test(token)) {
+    throw new Error(`The token provided ('${token}') contains HTML space characters, which are not valid in tokens.`);
+  }
+}
+
+function getItems(elm: HTMLElement, attr: string) {
+  const value = elm.getAttribute(attr);
+  if (typeof value === 'string' && value.length > 0) {
+    return value
+      .trim()
+      .split(' ')
+      .filter((c) => c.length > 0);
+  }
+  return [];
+}