Quelle test_moz_five_star.html Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/toolkit/content/tests/widgets/test_moz_five_star.html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>MozFiveStar Tests</title>
  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
  <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
  <script type="module" src="chrome://global/content/elements/moz-five-star.mjs"></script>
</head>
<body>
<p id="display"></p>
<div id="content" style="max-width: fit-content">
  <moz-five-star label="Label" rating="2.5"></moz-five-star>
  <moz-five-star rating="2" selectable></moz-five-star>
</div>
<pre id="test">
  <script class="testbody" type="application/javascript">
    const { BrowserTestUtils } = ChromeUtils.importESModule("resource://testing-common/BrowserTestUtils.sys.mjs");

    async function testRatingValue(mozFiveStar, value, ratingRounded, expectation) {
      is(mozFiveStar.rating, value, "Rating property is set to value")

      if (mozFiveStar.ownerDocument.hasPendingL10nMutations) {
        await BrowserTestUtils.waitForEvent(
          mozFiveStar.ownerDocument,
          "L10nMutationsFinished"
        );
      }
      let starsString = Array.from(mozFiveStar.starEls)
        .map(star => star.getAttribute("fill"))
        .join(",");
      is(starsString, expectation, `Rendering of rating ${value}`);

      let ratingsString = Array.from(mozFiveStar.starEls)
        .map(star => star.getAttribute("rating"))
        .join(",");
      is("1,2,3,4,5", ratingsString, `Rendering of rating attributes`);
    }

    add_task(async function testMozFiveStar() {
      const mozFiveStar = document.querySelector("moz-five-star");
      ok(mozFiveStar, "moz-five-star is rendered");

      const stars = mozFiveStar.starEls;
      ok(stars, "moz-five-star has stars");
      is(stars.length, 5, "moz-five-star stars count is 5");

      const rating = mozFiveStar.rating;
      ok(rating, "moz-five-star has a rating");
      is(rating, 2.5, "moz-five-star rating is 2.5");
    });

    add_task(async function testMozFiveStarsDisplay() {
      const mozFiveStar = document.querySelector("moz-five-star");
      ok(mozFiveStar, "moz-five-star is rendered");

      async function testRating(rating, ratingRounded, expectation) {
        mozFiveStar.rating = rating;
        await mozFiveStar.updateComplete;
        await testRatingValue(mozFiveStar, rating, ratingRounded, expectation)

        is(
          mozFiveStar.starsWrapperEl.title,
          `Rated ${ratingRounded} out of 5`,
          "Rendered title must contain at most one fractional digit"
        );

        let isImage = mozFiveStar.starsWrapperEl.getAttribute("role") == "img"
          || mozFiveStar.starsWrapperEl.getAttribute("role") == "image";

        ok(
          isImage,
          "Rating element is an image for the title to be announced"
        );
      }

      await testRating(0.0, "0", "empty,empty,empty,empty,empty");
      await testRating(0.249, "0.2", "empty,empty,empty,empty,empty");
      await testRating(0.25, "0.3", "half,empty,empty,empty,empty");
      await testRating(0.749, "0.7", "half,empty,empty,empty,empty");
      await testRating(0.99, "1", "full,empty,empty,empty,empty");
      await testRating(1.0, "1", "full,empty,empty,empty,empty");
      await testRating(2, "2", "full,full,empty,empty,empty");
      await testRating(3.0, "3", "full,full,full,empty,empty");
      await testRating(4.001, "4", "full,full,full,full,empty");
      await testRating(4.249, "4.2", "full,full,full,full,empty");
      await testRating(4.25, "4.3", "full,full,full,full,half");
      await testRating(4.749, "4.7", "full,full,full,full,half");
      await testRating(4.89, "4.9", "full,full,full,full,full");
      await testRating(5.0, "5", "full,full,full,full,full");
    });

    add_task(async function testMozFiveStarsSelectable() {
      const selectableMozFiveStar = document.querySelector("moz-five-star[selectable]");

      const selectedEvents = [];

      selectableMozFiveStar.addEventListener("select", (e) => selectedEvents.push(e))

      await selectableMozFiveStar.updateComplete;

      await testRatingValue(selectableMozFiveStar, 2, "2", "full,full,empty,empty,empty")

      const fifthStar = Array.from(selectableMozFiveStar.starEls).at(4)
      fifthStar.click();

      is(selectedEvents.length, 1, "dispatched one event")
      const selectedEvent = selectedEvents.at(0);
      is(selectedEvent.type, "select", "dispatched select event")
      is(selectedEvent.detail.rating, 5, "dispatched selected rating number")

      await selectableMozFiveStar.updateComplete;
      await testRatingValue(selectableMozFiveStar, 5, "5", "full,full,full,full,full")

    });

        add_task(async function testMozFiveStarsSelectableHover() {

          function assertFilledBg(star) {
            ok(getComputedStyle(star).backgroundImage.includes("#full"), "bg is filled");
          }

          function assertNotFilledBg(star) {
            ok(getComputedStyle(star).backgroundImage.includes("#empty"), "bg is not filled");
          }

          const selectableMozFiveStar = document.querySelector("moz-five-star[selectable]");

          selectableMozFiveStar.rating = 1;
          await selectableMozFiveStar.updateComplete;

          const [
            firstStar,
            secondStar,
            thirdStar,
            fourthStar,
            fifthStar
          ] = selectableMozFiveStar.starEls

          assertFilledBg(firstStar);
          assertNotFilledBg(secondStar, thirdStar, fourthStar, fifthStar);

          synthesizeMouseAtCenter(fourthStar, { type: "mouseover" });

          assertFilledBg(firstStar, secondStar, thirdStar, fourthStar);
          assertNotFilledBg(fifthStar);

    });
</script>
</pre>
</body>
</html>

Messung V0.5

¤ Dauer der Verarbeitung: 0.13 Sekunden (vorverarbeitet) ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.