<!DOCTYPE html>
<sky>
<style>
  div { font-size: 5px; }
  .font-10 { font-size: 10px; }
  .font-12 { font-size: 12px; }
  .font-24 { font-size: 24px; }
</style>
<div id="sandbox"></div>
<script>
import "../resources/third_party/unittest/unittest.dart";
import "../resources/unit.dart";

import "dart:sky";

main() {
  initUnit();

  var sandbox = document.getElementById("sandbox");
  var target = null;

  setUp(() {
    target = document.createElement("div");
    sandbox.appendChild(target);
  });

  tearDown(() {
    target.remove();
  });

  // test("should add multiple classes", () {
  //   target.classList..add("first", "second", "third");
  //   expect(target.classList.toString(), equals("first second third"));
  // });

  test("should add classes in order", () {
    target.classList..add("first")
                    ..add("second");
    expect(target.classList.toString(), equals("first second"));
  });

  test("should remove classes", () {
    target.classList..add("first")
                    ..add("second")
                    ..add("third")
                    ..remove("second");
    expect(target.classList.toString(), equals("first third"));
  });

  // test("should remove multiple classes", () {
  //   target.classList.add("first", "second", "third");
  //   target.classList.remove("first", "third");
  //   expect(target.classList.toString(), equals("second"));
  // });

  test("should clear all classes", () {
    target.classList.add("first");
    target.classList.add("second");
    target.classList.clear();
    expect(target.classList.toString(), equals(""));
    expect(target.hasAttribute("class"), isFalse);
  });

  test("should check for classes", () {
    target.classList..add("first")
                    ..add("second")
                    ..add("third");
    expect(target.classList.contains("first"), isTrue);
    expect(target.classList.contains("second"), isTrue);
    expect(target.classList.contains("third"), isTrue);
    target.classList.remove("second");
    expect(target.classList.contains("first"), isTrue);
    expect(target.classList.contains("second"), isFalse);
    expect(target.classList.contains("third"), isTrue);
  });

  test("should get classes by index", () {
    target.classList..add("first")
                    ..add("second")
                    ..add("third");
    // expect(target.classList[0], equals("first"));
    // expect(target.classList[1], equals("second"));
    // expect(target.classList[2], equals("third"));
    expect(target.classList.item(0), equals("first"));
    expect(target.classList.item(1), equals("second"));
    expect(target.classList.item(2), equals("third"));
  });

  test("should toggle classes", () {
    target.classList..add("first")
                    ..add("second");
    expect(target.classList.toggle("first"), isFalse);
    expect(target.classList.toString(), equals("second"));
    expect(target.classList.toggle("first"), isTrue);
    expect(target.classList.toString(), equals("second first"));
    // expect(target.classList.toggle("second", true), isTrue);
    // expect(target.classList.toString(), equals("second first"));
    // expect(target.classList.toggle("second", true), isTrue);
    // expect(target.classList.toggle("second", false), isFalse);
    // expect(target.classList.toggle("second", false), isFalse);
    // expect(target.classList.toString(), equals("first"));
  });

  test("should dynamically update style", () {
    expect(window.getComputedStyle(target)["font-size"],
           equals("5px"));
    target.classList.add("font-10");
    target.classList.add("font-12");
    expect(window.getComputedStyle(target)["font-size"],
           equals("12px"));
    target.classList.add("font-24");
    expect(window.getComputedStyle(target)["font-size"],
           equals("24px"));
    target.classList.remove("font-12");
    expect(window.getComputedStyle(target)["font-size"],
           equals("24px"));
    target.classList.remove("font-24");
    expect(window.getComputedStyle(target)["font-size"],
           equals("10px"));
    target.classList.remove("font-10");
    expect(window.getComputedStyle(target)["font-size"],
           equals("5px"));
  });
}
</script>
</sky>