View Source HTMLTestHelpers (html_test_helpers v0.1.6)

Functions helpers for unit testing. Validate HTML tag identified by data-testid attributes

examples

Examples

Assuming that you have the following HTML:

  <!doctype html>
  <html>
  <body>
    <section id="content">
      <p data-testid="paragraph-id">First paragraph content</p>
      <ul>
        <li data-testid="test-li-id-1" class="li-class-1"> First line </li>
        <li data-testid="test-li-id-2" class="li-class-2"> Second line </li>
      </ul>
      <a data-testid="test-link-id" class="my-link-class my-other-class" href="/expected/link">Details</a>
      <span data-testid="test-footer-id" class="footer small">2020</span>
    </section>
  </body>
  </html>

You can validate your expected response as follow :

raw_html
|> assert_html_text("paragraph-id", "First paragraph content")
|> assert_html_attribute("test-link-id", "href", "/expected/link")
|> assert_html_attribute("test-link-id", "class", :contains, "my-link-class")
|> assert_html_attribute("test-footer-testid", "class", :equals, "footer small")
|> assert_html_element_exists("test-li-id-1")
|> refute_html_element_exists("test-li-id-5")
# =>
# [{"html", [],
#   [
#     {"body", [],
#     [
#       {"section", [{"id", "content"}],
#         [
#           {"p", [{"data-testid", "paragraph-id"}],
#           ["First paragraph content"]},
#           {"ul", [],
#           [
#             {"li",
#               [{"data-testid", "test-li-id-1"}, {"class", "li-class-1"}],
#               [" First line "]},
#             {"li",
#               [{"data-testid", "test-li-id-2"}, {"class", "li-class-2"}],
#               [" Second line "]}
#           ]},
#           {"a",
#           [
#             {"data-testid", "test-link-id"},
#             {"class", "my-link-class my-other-class"},
#             {"href", "/expected/link"}
#           ], ["Details"]},
#           {"span",
#           [{"data-testid", "test-footer-id"}, {"class", "footer small"}],
#           ["2020"]}
#         ]}
#     ]}
#   ]}
# ]}

if there is an error :

assert_html_text(raw_html, "paragraph-id", "First paragraph content")
# =>
# ** (ExUnit.AssertionError)

# Value identified by data-testid[paragraph-id] is not as expected.

# left:  "First paragraph content"
# right: "wrong content"

#     (html_test_helpers) lib/html_test_helpers.ex:106: HTMLTestHelpers.assert_html_text/3

Also if you just need the value identified by data-testid attribute you can use :

html_texts(raw_html, "test-li-id")
# =>
# ["First line", "Second line]

html_attributes(raw_html, "test-li-id", "class")
# =>
# ["li-class-1", "li-class-2"]

Link to this section Summary

Link to this section Types

@type check_type() :: atom()
@type html() :: html_document() | html_raw()
@type html_document() :: [any()]
@type html_raw() :: String.t()

Link to this section Functions

Link to this function

assert_html_attribute(html, data_test_id, attribute, check_type \\ :equals, attribute_values)

View Source
@spec assert_html_attribute(
  html(),
  String.t(),
  String.t(),
  check_type(),
  [String.t()] | String.t()
) :: html_document()
Link to this function

assert_html_element_exists(html, data_test_id)

View Source
@spec assert_html_element_exists(html(), String.t()) :: html_document()
Link to this function

assert_html_text(raw, data_test_id, expected_value, options \\ [trim: true])

View Source
Link to this function

html_attributes(raw, data_test_id_prefix, attribute)

View Source
@spec html_attributes(html(), String.t(), String.t()) :: [String.t()]
Link to this function

html_texts(raw, data_test_id_prefix)

View Source
@spec html_texts(html(), String.t()) :: [String.t()]
Link to this function

refute_html_element_exists(html, data_test_id)

View Source
@spec refute_html_element_exists(html(), String.t()) :: html_document()