通过实践学习 TDD：在 Umbraco 的富文本编辑器中标记成员

<mention user-id="1324" class="mcenoneditable">@d_inventor</mention>

rtedecorator.$inject = ["$delegate"];export function rtedecorator($delegate: any) {  const original = $delegate.initializeeditor;  $delegate.initializeeditor = function (args: any) {    original.apply($delegate, arguments);    args.editor.contentstyles.push("mention { background-color: #f7f3c1; }");    args.editor.ui.registry.addautocompleter("mentions", {      trigger: "@",      fetch: (        pattern: string,        maxresults: number,        _fetchoptions: record<string unknown>      ): promise<imceautocompleteitem>        // todo: fetch from backend        =&gt; promise.resolve([{ type: "autocompleteitem", value: "1234", text: "d_inventor" }]),      onaction: (api: any, rng: range, value: string): void =&gt; {        // todo: business logic        api.hide();      },    });  };  return $delegate;}</imceautocompleteitem></string>

describe("mentionsmanager.fetch", () => {  let sut: mentionsmanager;  let items: imention[];  beforeeach(() => {    items = [];    sut = new mentionsmanager();  });  test("should be able to fetch one result", async () => {    items.push({ userid: "1234", username: "d_inventor" });    const result = await sut.fetch(1);    expect(result).tohavelength(1);  });});

describe("mentionsmanager.fetch", () => {  let sut: mentionsmanager;  let items: imention[];  beforeeach(() => {    items = [];    sut = new mentionsmanager(() => promise.resolve(items));  });  test("should be able to fetch one result", async () => {    items.push({ userid: "1234", username: "d_inventor" });    const result = await sut.fetch(1);    expect(result).tohavelength(1);  });  test("should be able to fetch empty result", async () => {    const result = await sut.fetch(1);    expect(result).tohavelength(0);  });  test("should be able to fetch many results", async () => {    items.push({ userid: "1324", username: "d_inventor" }, { userid: "3456", username: "d_inventor2" });    const result = await sut.fetch(2);    expect(result).tohavelength(2);  });  test("should return empty list upon error", () => {    const sut = new mentionsmanager(() => {      throw new error("something went wrong while fetching");    }, {} as imentionsui);    return expect(sut.fetch(1)).resolves.tohavelength(0);  });});

export class MentionsManager {  private mentions: IMention[] = [];  constructor(    private source: MentionsAPI,    private ui: IMentionsUI  ) {}  async fetch(take: number, query?: string): Promise<imention> {    try {      const result = await this.source(take, query);      if (result.length === 0) return [];      this.mentions = result;      return result;    } catch {      return [];    }  }  pick(id: string, location: Range): void {    const mention = this.mentions.find((m) =&gt; m.userId === id);    if (!mention) return;    this.ui.insertMention(mention, location);  }}</imention>