{"id":21874043,"url":"https://github.com/eeue56/elm-html-test","last_synced_at":"2025-04-15T01:14:10.135Z","repository":{"id":57675019,"uuid":"73865114","full_name":"eeue56/elm-html-test","owner":"eeue56","description":"Test elm-html in Elm!","archived":false,"fork":false,"pushed_at":"2019-10-16T07:28:36.000Z","size":210,"stargazers_count":67,"open_issues_count":21,"forks_count":15,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-15T01:14:05.020Z","etag":null,"topics":["elm","elm-html","test"],"latest_commit_sha":null,"homepage":"http://package.elm-lang.org/packages/eeue56/elm-html-test/latest","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eeue56.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-15T23:38:10.000Z","updated_at":"2024-08-29T08:26:04.000Z","dependencies_parsed_at":"2022-09-02T15:01:40.334Z","dependency_job_id":null,"html_url":"https://github.com/eeue56/elm-html-test","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eeue56%2Felm-html-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eeue56%2Felm-html-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eeue56%2Felm-html-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eeue56%2Felm-html-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eeue56","download_url":"https://codeload.github.com/eeue56/elm-html-test/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248986315,"owners_count":21194025,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["elm","elm-html","test"],"created_at":"2024-11-28T07:10:45.386Z","updated_at":"2025-04-15T01:14:10.118Z","avatar_url":"https://github.com/eeue56.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"# elm-html-test\n\nTest views by writing expectations about `Html` values. [![Build Status](https://travis-ci.org/eeue56/elm-html-test.svg?branch=master)](https://travis-ci.org/eeue56/elm-html-test)\n\n```elm\nimport Html\nimport Html.Attributes exposing (class)\nimport Test exposing (test)\nimport Test.Html.Query as Query\nimport Test.Html.Selector exposing (text, tag)\n\n\ntest \"Button has the expected text\" \u003c|\n    \\() -\u003e\n        Html.div [ class \"container\" ]\n            [ Html.button [] [ Html.text \"I'm a button!\" ] ]\n            |\u003e Query.fromHtml\n            |\u003e Query.find [ tag \"button\" ]\n            |\u003e Query.has [ text \"I'm a button!\" ]\n```\n\nThese tests are designed to be written in a pipeline like this:\n\n1. Call [`Query.fromHtml`](http://package.elm-lang.org/packages/eeue56/elm-html-test/latest/Test-Html-Query#fromHtml) on your [`Html`](http://package.elm-lang.org/packages/elm-lang/html/latest/Html#Html) to begin querying it.\n2. Use queries like [`Query.find`](http://package.elm-lang.org/packages/eeue56/elm-html-test/latest/Test-Html-Query#find), [`Query.findAll`](http://package.elm-lang.org/packages/eeue56/elm-html-test/latest/Test-Html-Query#findAll), and [`Query.children`](http://package.elm-lang.org/packages/eeue56/elm-html-test/latest/Test-Html-Query#children) to find the elements to test.\n3. Create expectations using things like [`Query.has`](http://package.elm-lang.org/packages/eeue56/elm-html-test/latest/Test-Html-Query#has) and [`Query.count`](http://package.elm-lang.org/packages/eeue56/elm-html-test/latest/Test-Html-Query#count).\n\nThese are normal expectations, so you can use them with [`fuzz`](http://package.elm-lang.org/packages/elm-community/elm-test/latest/Test#fuzz) just as easily as with [`test`](http://package.elm-lang.org/packages/elm-community/elm-test/3.1.0/Test#test)!\n\n## Querying\n\nQueries come in two flavors: [`Single`](http://package.elm-lang.org/packages/eeue56/elm-html-test/latest/Test-Html-Query#Single) and [`Multiple`](http://package.elm-lang.org/packages/eeue56/elm-html-test/latest/Test-Html-Query#Multiple).\n\nThis is because some queries are expected to return a single result, whereas\nothers may return multiple results.\n\nIf a `Single` query finds exactly one result, it will succeed and continue with\nany further querying or expectations. If it finds zero results, or more than one,\nthe test will fail.\n\nSince other querying and expectation functions are written in terms of `Single`\nand `Multiple`, the compiler can help make sure queries are connected as\nexpected. For example, [`count`](http://package.elm-lang.org/packages/eeue56/elm-html-test/latest/Test-Html-Query#count) accepts a `Multiple`, because counting a single element does not make much sense!\n\nIf you have a `Multiple` and want to use an expectation that works on a `Single`,\nsuch as [`Query.has`](http://package.elm-lang.org/packages/eeue56/elm-html-test/latest/Test-Html-Query#has), you can use [`Query.each`](http://package.elm-lang.org/packages/eeue56/elm-html-test/latest/Test-Html-Query#each) to run the expectation on each of the elements in the `Multiple`.\n\n## Selecting elements by `Html.Attribute msg`\n\nOrdinary `Html.Attribute msg` values can be used to select elements using\n`Test.Html.Selector.attribute`. It is important when using this selector to\nunderstand its behavior.\n\n- `Html.Attributes.class` and `Html.Attributes.classList` will work the same as\n  [`Test.Html.Selector.classes`](http://package.elm-lang.org/packages/eeue56/elm-html-test/latest/Test-Html-Selector#classes),\n  matching any element with at least the given classes. This behavior echoes\n  that of `element.querySelectorAll('.my-class')` from JavaScript, where any\n  element with at least `.my-class` will match the query.\n\n- `Html.Attributes.style` will work the same way as\n  [`Test.Html.Selector.styles`](http://package.elm-lang.org/packages/eeue56/elm-html-test/latest/Test-Html-Selector#styles),\n  matching any element with at least the given style properties.\n\n- Any other `String` attributes and properties like `title`, or `Bool`\n  attributes like `disabled` will match elements with the exact value for those\n  attributes.\n\n- Any attributes from `Html.Events`, or attributes with values that have types\n  other than `String` or `Bool` will not match anything.\n\nThe example below demonstrates usage\n\n```elm\nimport Html\nimport Html.Attributes as Attr\nimport Test exposing (test, describe)\nimport Test.Html.Query as Query\nimport Test.Html.Selector exposing (attribute, text)\n\ntests =\n    describe \"attributes\"\n        [ test \"the welcome \u003ch1\u003e says hello!\" \u003c|\n            \\() -\u003e\n                Html.div [] [ Html.h1 [ Attr.title \"greeting\" ] [ Html.text \"Hello!\" ] ]\n                    |\u003e Query.fromHtml\n                    |\u003e Query.find [ attribute \u003c| Attr.title \"greeting\" ]\n                    |\u003e Query.has [ text \"Hello!\" ]\n        , test \"the .Hello.World div has the class Hello\" \u003c|\n            \\() -\u003e\n                Html.div\n                    [ Attr.classList\n                        [ ( True, \"Hello\" )\n                        , ( True, \"World\" )\n                        ]\n                    ]\n                    |\u003e Query.fromHtml\n                    |\u003e Query.find\n                        [ attribute \u003c|\n                            Attr.classList [ ( True, Hello ) ]\n                        ]\n        , test \"the header is red\" \u003c|\n            \\() -\u003e\n                Html.header\n                    [ Attr.style\n                        [ ( \"backround-color\", \"red\" )\n                        , ( \"color\", \"yellow\" )\n                        ]\n                    ]\n                    |\u003e Query.fromHtml\n                    |\u003e Query.find\n                        [ attribute \u003c|\n                            Attr.style [ ( \"backround-color\", \"red\" ) ]\n                        ]\n        ]\n```\n\n\n## Releases\n| Version | Notes |\n| ------- | ----- |\n| [**5.1.2**](https://github.com/eeue56/elm-html-test/tree/5.1.2) | Fix bug with mapped and lazy views\n| [**5.1.1**](https://github.com/eeue56/elm-html-test/tree/5.1.1) | Fix children\n| [**5.1.0**](https://github.com/eeue56/elm-html-test/tree/5.1.0) | Add filtermap\n| [**5.0.1**](https://github.com/eeue56/elm-html-test/tree/5.0.1) | Fix bug with lazy views\n| [**5.0.0**](https://github.com/eeue56/elm-html-test/tree/5.0.0) | Allow querying by attributes\n| [**4.1.0**](https://github.com/eeue56/elm-html-test/tree/4.1.0) | Query styles\n| [**4.0.0**](https://github.com/eeue56/elm-html-test/tree/4.0.0) | Allow custom events\n| [**3.0.0**](https://github.com/eeue56/elm-html-test/tree/3.0.0) | Allow events to be testable\n| [**2.0.0**](https://github.com/eeue56/elm-html-test/tree/2.0.0) | Better support for events by @rogeriochaves\n| [**1.1.0**](https://github.com/eeue56/elm-html-test/tree/1.1.0) | Support for events by @rogeriochaves\n| [**1.0.0**](https://github.com/eeue56/elm-html-test/tree/1.0.0) | Initial release\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feeue56%2Felm-html-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feeue56%2Felm-html-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feeue56%2Felm-html-test/lists"}