<commit_before>import { h, app } from "../src"
import { expectHTMLToBe } from "./util"

beforeEach(() => document.body.innerHTML = "")

const TreeTest = trees =>
  app({
    state: 0,
    view: state => trees[state].tree,
    actions: {
      next: state => (state + 1) % trees.length
    },
    events: {
      loaded: (state, actions) => {
        trees.map(tree => {
          expectHTMLToBe`${tree.html}`
          actions.next()
        })
      }
    }
  })

test("replace element", () => {
  TreeTest([
    {
      tree: h("main", {}),
      html: `<main></main>`
    },
    {
      tree: h("div", {}),
      html: `<div></div>`
    }
  ])
})

test("replace child", () => {
  TreeTest([
    {
      tree: h("main", {}, [h("div", {}, "foo")]),
      html: `
        <main>
          <div>foo</div>
        </main>
      `
    },
    {
      tree: h("main", {}, [h("main", {}, "bar")]),
      html: `
        <main>
          <main>bar</main>
        </main>
      `
    }
  ])
})

test("insert children on top", () => {
  TreeTest([
    {
      tree: h("main", {}, [
        h("div", { key: "a", onCreate: e => e.id = "a" }, "A")
      ]),
      html: `
        <main>
          <div id="a">A</div>
        </main>
      `
    },
    {
      tree: h("main", {}, [
        h("div", { key: "b", onCreate: e => e.id = "b" }, "B"),
        h("div", { key: "a" }, "A")
      ]),
      html: `
        <main>
          <div id="b">B</div>
          <div id="a">A</div>
        </main>
      `
    },
    {
      tree: h("main", {}, [
        h("div", { key: "c", onCreate: e => e.id = "c" }, "C"),
        h("div", { key: "b" }, "B"),
        h("div", { key: "a" }, "A")
      ]),
      html: `
        <main>
          <div id="c">C</div>
          <div id="b">B</div>
          <div id="a">A</div>
        </main>
      `
    },
    {
      tree: h("main", {}, [
        h("div", { key: "d", onCreate: e => e.id = "d" }, "D"),
        h("div", { key: "c" }, "C"),
        h("div", { key: "b" }, "B"),
        h("div", { key: "a" }, "A")
      ]),
      html: `
        <main>
          <div id="d">D</div>
          <div id="c">C</div>
          <div id="b">B</div>
          <div id="a">A</div>
        </main>
      `
    }
  ])
})

test("replace keyed", () => {
  TreeTest([
    {
      tree: h("main", {}, [
        h("div", { key: "a", onCreate: e => e.id = "a" }, "A")
      ]),
      html: `
        <main>
          <div id="a">A</div>
        </main>
      `
    },
    {
      tree: h("main", {}, [
        h("div", { key: "b", onCreate: e => e.id = "b" }, "B")
      ]),
      html: `
        <main>
          <div id="b">B</div>
        </main>
      `
    }
  ])<commit_msg>Add test for when plain-string vnodes are removed<commit_after>import { h, app } from "../src"
import { expectHTMLToBe } from "./util"

beforeEach(() => document.body.innerHTML = "")

const TreeTest = trees =>
  app({
    state: 0,
    view: state => trees[state].tree,
    actions: {
      next: state => (state + 1) % trees.length
    },
    events: {
      loaded: (state, actions) => {
        trees.map(tree => {
          expectHTMLToBe`${tree.html}`
          actions.next()
        })
      }
    }
  })

test("replace element", () => {
  TreeTest([
    {
      tree: h("main", {}),
      html: `<main></main>`
    },
    {
      tree: h("div", {}),
      html: `<div></div>`
    }
  ])
})

test("replace child", () => {
  TreeTest([
    {
      tree: h("main", {}, [h("div", {}, "foo")]),
      html: `
        <main>
          <div>foo</div>
        </main>
      `
    },
    {
      tree: h("main", {}, [h("main", {}, "bar")]),
      html: `
        <main>
          <main>bar</main>
        </main>
      `
    }
  ])
})

test("insert children on top", () => {
  TreeTest([
    {
      tree: h("main", {}, [
        h("div", { key: "a", onCreate: e => e.id = "a" }, "A")
      ]),
      html: `
        <main>
          <div id="a">A</div>
        </main>
      `
    },
    {
      tree: h("main", {}, [
        h("div", { key: "b", onCreate: e => e.id = "b" }, "B"),
        h("div", { key: "a" }, "A")
      ]),
      html: `
        <main>
          <div id="b">B</div>
          <div id="a">A</div>
        </main>
      `
    },
    {
      tree: h("main", {}, [
        h("div", { key: "c", onCreate: e => e.id = "c" }, "C"),
        h("div", { key: "b" }, "B"),
        h("div", { key: "a" }, "A")
      ]),
      html: `
        <main>
          <div id="c">C</div>
          <div id="b">B</div>
          <div id="a">A</div>
        </main>
      `
    },
    {
      tree: h("main", {}, [
        h("div", { key: "d", onCreate: e => e.id = "d" }, "D"),
        h("div", { key: "c" }, "C"),
        h("div", { key: "b" }, "B"),
        h("div", { key: "a" }, "A")
      ]),
      html: `
        <main>
          <div id="d">D</div>
          <div id="c">C</div>
          <div id="b">B</div>
          <div id="a">A</div>
        </main>
      `
    }
  ])
})

test("remove text node", () => {
  TreeTest([
    {
      tree: h("main", {}, [h("div", {}, ["foo"]), "bar"]),
      html: `<main><div>foo</div>bar</main>`
    },
    {
      tree: h("main", {}, [h("div", {}, ["foo"])]),
      html: `<main><div>foo</div></main>`
    }
  ])
})

test("replace keyed", () => {
  TreeTest([
    {
      tree: h("main", {}, [
        h("div", { key: "a", onCreate: e => e.id = "a" }, "A")
      ]),
      html: `
        <main>
          <div id="a">A</div>
        </main>
      `
    },
    {
      tree: h("main", {}, [
        h("div", { key: "b", onCreate: e => e.id = "b" }, "B")
      ]),
      html: `
        <main>
          <div id="b">B</div>
        </main>
      `
    }
  ])
{'fraction_non_alphanumeric': 0.26212227687983136, 'fraction_numerical': 0.0007027406886858749, 'mean_word_length': 1.4266837169650468, 'pattern_counts': {'":': 0, '<': 107, '<?xml version=': 0, '>': 140, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '185962', 'n_tokens_mistral': 2179, 'n_tokens_neox': 2145, 'n_words': 418}