diff --git a/.all-contributorsrc b/.all-contributorsrc index 38024e39f..9bc2e912d 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -2024,6 +2024,782 @@ "contributions": [ "doc" ] + }, + { + "login": "AldinRekic", + "name": "AldinRekic", + "avatar_url": "https://avatars.githubusercontent.com/u/65592409?v=4", + "profile": "https://github.com/AldinRekic", + "contributions": [ + "design" + ] + }, + { + "login": "thanhsonng", + "name": "Son Nguyen", + "avatar_url": "https://avatars.githubusercontent.com/u/28614996?v=4", + "profile": "https://sonng.dev/", + "contributions": [ + "doc" + ] + }, + { + "login": "Lirlev48", + "name": "Lirlev48", + "avatar_url": "https://avatars.githubusercontent.com/u/58209233?v=4", + "profile": "https://github.com/Lirlev48", + "contributions": [ + "doc" + ] + }, + { + "login": "tarjei", + "name": "Tarjei Huse", + "avatar_url": "https://avatars.githubusercontent.com/u/211263?v=4", + "profile": "https://github.com/tarjei", + "contributions": [ + "doc" + ] + }, + { + "login": "ObieMunoz", + "name": "Obie Munoz", + "avatar_url": "https://avatars.githubusercontent.com/u/5696449?v=4", + "profile": "https://www.linkedin.com/in/obedmunozjr/", + "contributions": [ + "doc" + ] + }, + { + "login": "bertybot", + "name": "Bert B", + "avatar_url": "https://avatars.githubusercontent.com/u/44912991?v=4", + "profile": "https://github.com/bertybot", + "contributions": [ + "doc" + ] + }, + { + "login": "alirezahi", + "name": "Alireza Heydari", + "avatar_url": "https://avatars.githubusercontent.com/u/16666064?v=4", + "profile": "https://github.com/alirezahi", + "contributions": [ + "doc" + ] + }, + { + "login": "glebinsky", + "name": "Gleb Radutsky", + "avatar_url": "https://avatars.githubusercontent.com/u/898643?v=4", + "profile": "https://github.com/glebinsky", + "contributions": [ + "doc" + ] + }, + { + "login": "giovanniPepi", + "name": "giovanniPepi", + "avatar_url": "https://avatars.githubusercontent.com/u/5255535?v=4", + "profile": "https://github.com/giovanniPepi", + "contributions": [ + "doc" + ] + }, + { + "login": "mdjastrzebski", + "name": "Maciej Jastrzebski", + "avatar_url": "https://avatars.githubusercontent.com/u/6368606?v=4", + "profile": "https://github.com/mdjastrzebski", + "contributions": [ + "doc" + ] + }, + { + "login": "semoal", + "name": "Sergio Moreno", + "avatar_url": "https://avatars.githubusercontent.com/u/22656541?v=4", + "profile": "https://semoal.github.io/sergiomoreno/", + "contributions": [ + "code" + ] + }, + { + "login": "davidnixon", + "name": "David Nixon", + "avatar_url": "https://avatars.githubusercontent.com/u/7536103?v=4", + "profile": "https://github.com/davidnixon", + "contributions": [ + "doc" + ] + }, + { + "login": "khitrenovich", + "name": "Anton Khitrenovich", + "avatar_url": "https://avatars.githubusercontent.com/u/3424762?v=4", + "profile": "http://technotes.khitrenovich.com/", + "contributions": [ + "doc" + ] + }, + { + "login": "kostasx", + "name": "Kostas Minaidis", + "avatar_url": "https://avatars.githubusercontent.com/u/1638325?v=4", + "profile": "https://plethorathemes.com/", + "contributions": [ + "doc" + ] + }, + { + "login": "MynockSpit", + "name": "Than Hutchins", + "avatar_url": "https://avatars.githubusercontent.com/u/5713867?v=4", + "profile": "https://github.com/MynockSpit", + "contributions": [ + "doc" + ] + }, + { + "login": "edmundsj", + "name": "Jordan Edmunds", + "avatar_url": "https://avatars.githubusercontent.com/u/11085127?v=4", + "profile": "https://github.com/edmundsj", + "contributions": [ + "doc" + ] + }, + { + "login": "mouse484", + "name": "mouse", + "avatar_url": "https://avatars.githubusercontent.com/u/38714187?v=4", + "profile": "https://portfolio.mouse484.vercel.app/", + "contributions": [ + "doc" + ] + }, + { + "login": "robertoms99", + "name": "Roberto Molina", + "avatar_url": "https://avatars.githubusercontent.com/u/54558382?v=4", + "profile": "https://roberto-molina.netlify.app/", + "contributions": [ + "doc" + ] + }, + { + "login": "louis-young", + "name": "Louis Young", + "avatar_url": "https://avatars.githubusercontent.com/u/35606709?v=4", + "profile": "https://www.louisyoung.co.uk/", + "contributions": [ + "doc" + ] + }, + { + "login": "lukaselmer", + "name": "Lukas Elmer", + "avatar_url": "https://avatars.githubusercontent.com/u/326935?v=4", + "profile": "https://www.linkedin.com/in/lukaselmer/", + "contributions": [ + "doc" + ] + }, + { + "login": "brentguf", + "name": "Brent Guffens", + "avatar_url": "https://avatars.githubusercontent.com/u/16427929?v=4", + "profile": "https://github.com/brentguf", + "contributions": [ + "doc" + ] + }, + { + "login": "estebanfelipep", + "name": "Esteban", + "avatar_url": "https://avatars.githubusercontent.com/u/15718690?v=4", + "profile": "https://github.com/estebanfelipep", + "contributions": [ + "doc" + ] + }, + { + "login": "tiborbarsi", + "name": "Tibor Barsi", + "avatar_url": "https://avatars.githubusercontent.com/u/21023594?v=4", + "profile": "https://github.com/tiborbarsi", + "contributions": [ + "doc" + ] + }, + { + "login": "tnyo43", + "name": "Tomoya Kashifuku", + "avatar_url": "https://avatars.githubusercontent.com/u/11014018?v=4", + "profile": "https://github.com/tnyo43", + "contributions": [ + "doc" + ] + }, + { + "login": "wtlin1228", + "name": "Leo", + "avatar_url": "https://avatars.githubusercontent.com/u/16910748?v=4", + "profile": "https://leonerd.gatsbyjs.io/", + "contributions": [ + "doc" + ] + }, + { + "login": "erik-metz", + "name": "Erik Metz", + "avatar_url": "https://avatars.githubusercontent.com/u/69653055?v=4", + "profile": "http://spray-r.com/", + "contributions": [ + "doc" + ] + }, + { + "login": "mrtyagi07", + "name": "Vaibhav Tyagi", + "avatar_url": "https://avatars.githubusercontent.com/u/83115094?v=4", + "profile": "https://github.com/mrtyagi07", + "contributions": [ + "doc" + ] + }, + { + "login": "alleksei37", + "name": "Aleksei Drokin", + "avatar_url": "https://avatars.githubusercontent.com/u/18336748?v=4", + "profile": "https://github.com/alleksei37", + "contributions": [ + "doc" + ] + }, + { + "login": "shaman-apprentice", + "name": "Torsten Knauf", + "avatar_url": "https://avatars.githubusercontent.com/u/3596742?v=4", + "profile": "https://github.com/shaman-apprentice", + "contributions": [ + "doc" + ] + }, + { + "login": "jharlowuk", + "name": "John Harlow", + "avatar_url": "https://avatars.githubusercontent.com/u/41212861?v=4", + "profile": "http://jharlow.uk/", + "contributions": [ + "doc" + ] + }, + { + "login": "morgan121", + "name": "Morgan Hunter", + "avatar_url": "https://avatars.githubusercontent.com/u/62575603?v=4", + "profile": "https://github.com/morgan121", + "contributions": [ + "doc" + ] + }, + { + "login": "Mozl", + "name": "Louis Moselhi", + "avatar_url": "https://avatars.githubusercontent.com/u/24245755?v=4", + "profile": "https://github.com/Mozl", + "contributions": [ + "doc" + ] + }, + { + "login": "rydash", + "name": "Ryan McGill", + "avatar_url": "https://avatars.githubusercontent.com/u/9492442?v=4", + "profile": "https://github.com/rydash", + "contributions": [ + "doc" + ] + }, + { + "login": "renansoares", + "name": "Renan Andrade", + "avatar_url": "https://avatars.githubusercontent.com/u/1657840?v=4", + "profile": "http://rensoares.com/", + "contributions": [ + "doc" + ] + }, + { + "login": "boldurean", + "name": "Vasilii Boldurean", + "avatar_url": "https://avatars.githubusercontent.com/u/64642760?v=4", + "profile": "https://github.com/boldurean", + "contributions": [ + "doc" + ] + }, + { + "login": "josiasds", + "name": "Josias Schneider", + "avatar_url": "https://avatars.githubusercontent.com/u/882253?v=4", + "profile": "http://theoutsider.dev/", + "contributions": [ + "doc" + ] + }, + { + "login": "ledenis", + "name": "Denis LE", + "avatar_url": "https://avatars.githubusercontent.com/u/2855723?v=4", + "profile": "https://github.com/ledenis", + "contributions": [ + "doc" + ] + }, + { + "login": "Nicoss54", + "name": "Nicolas Frizzarin", + "avatar_url": "https://avatars.githubusercontent.com/u/24563545?v=4", + "profile": "https://github.com/Nicoss54", + "contributions": [ + "doc" + ] + }, + { + "login": "santoshyadavdev", + "name": "Santosh Yadav", + "avatar_url": "https://avatars.githubusercontent.com/u/11923975?v=4", + "profile": "https://github.com/santoshyadavdev", + "contributions": [ + "doc" + ] + }, + { + "login": "caiangums", + "name": "Ilê Caian", + "avatar_url": "https://avatars.githubusercontent.com/u/7551787?v=4", + "profile": "http://caian.dev/", + "contributions": [ + "doc" + ] + }, + { + "login": "Clarity-89", + "name": "Alex Khomenko", + "avatar_url": "https://avatars.githubusercontent.com/u/8878045?v=4", + "profile": "https://claritydev.net/", + "contributions": [ + "doc" + ] + }, + { + "login": "LLCampos", + "name": "Luís Campos", + "avatar_url": "https://avatars.githubusercontent.com/u/12008784?v=4", + "profile": "https://llcampos.com/", + "contributions": [ + "doc" + ] + }, + { + "login": "YozhEzhi", + "name": "Alexandr Zhidovlenko", + "avatar_url": "https://avatars.githubusercontent.com/u/2706062?v=4", + "profile": "https://github.com/YozhEzhi", + "contributions": [ + "doc" + ] + }, + { + "login": "lyannel", + "name": "lyannel", + "avatar_url": "https://avatars.githubusercontent.com/u/34246811?v=4", + "profile": "https://github.com/lyannel", + "contributions": [ + "a11y" + ] + }, + { + "login": "yanick", + "name": "Yanick Champoux", + "avatar_url": "https://avatars.githubusercontent.com/u/19954?v=4", + "profile": "https://techblog.babyl.ca/", + "contributions": [ + "doc" + ] + }, + { + "login": "ali-kamalizade", + "name": "Ali", + "avatar_url": "https://avatars.githubusercontent.com/u/1886605?v=4", + "profile": "https://ali-dev.medium.com/", + "contributions": [ + "doc" + ] + }, + { + "login": "macmillen", + "name": "Milan Jaritz", + "avatar_url": "https://avatars.githubusercontent.com/u/33156526?v=4", + "profile": "https://github.com/macmillen", + "contributions": [ + "doc" + ] + }, + { + "login": "dzonatan", + "name": "Rokas Brazdžionis", + "avatar_url": "https://avatars.githubusercontent.com/u/5166666?v=4", + "profile": "https://github.com/dzonatan", + "contributions": [ + "doc" + ] + }, + { + "login": "tomalaforge", + "name": "Laforge Thomas", + "avatar_url": "https://avatars.githubusercontent.com/u/30832608?v=4", + "profile": "https://thomaslaforge.dev/home", + "contributions": [ + "doc" + ] + }, + { + "login": "StephNathai", + "name": "Steph Nathai", + "avatar_url": "https://avatars.githubusercontent.com/u/11414958?v=4", + "profile": "https://github.com/StephNathai", + "contributions": [ + "code", + "a11y" + ] + }, + { + "login": "friederbluemle", + "name": "Frieder Bluemle", + "avatar_url": "https://avatars.githubusercontent.com/u/743291?v=4", + "profile": "https://github.com/friederbluemle", + "contributions": [ + "doc" + ] + }, + { + "login": "ssi02014", + "name": "Gromit (전민재)", + "avatar_url": "https://avatars.githubusercontent.com/u/64779472?v=4", + "profile": "https://blog.naver.com/ssi02014", + "contributions": [ + "doc" + ] + }, + { + "login": "csantos1113", + "name": "Cesar S", + "avatar_url": "https://avatars.githubusercontent.com/u/9648559?v=4", + "profile": "https://github.com/csantos1113", + "contributions": [ + "doc" + ] + }, + { + "login": "crutchcorn", + "name": "Corbin Crutchley", + "avatar_url": "https://avatars.githubusercontent.com/u/9100169?v=4", + "profile": "https://crutchcorn.dev/", + "contributions": [ + "doc" + ] + }, + { + "login": "rbatsenko", + "name": "Roman Batsenko", + "avatar_url": "https://avatars.githubusercontent.com/u/6410057?v=4", + "profile": "https://github.com/rbatsenko", + "contributions": [ + "doc" + ] + }, + { + "login": "snjro", + "name": "snjro", + "avatar_url": "https://avatars.githubusercontent.com/u/34432943?v=4", + "profile": "https://github.com/snjro", + "contributions": [ + "doc" + ] + }, + { + "login": "taro-28", + "name": "taro", + "avatar_url": "https://avatars.githubusercontent.com/u/66539019?v=4", + "profile": "https://bento.me/taro", + "contributions": [ + "doc" + ] + }, + { + "login": "andnorda", + "name": "Andreas Nordahl", + "avatar_url": "https://avatars.githubusercontent.com/u/1894119?v=4", + "profile": "https://github.com/andnorda", + "contributions": [ + "doc" + ] + }, + { + "login": "neaumusic", + "name": "neaumusic", + "avatar_url": "https://avatars.githubusercontent.com/u/3423750?v=4", + "profile": "https://neaumusic.github.io/", + "contributions": [ + "doc" + ] + }, + { + "login": "JoyelJohny", + "name": "Joyel Johny", + "avatar_url": "https://avatars.githubusercontent.com/u/81413791?v=4", + "profile": "https://github.com/JoyelJohny", + "contributions": [ + "code" + ] + }, + { + "login": "bsheps", + "name": "bsheps", + "avatar_url": "https://avatars.githubusercontent.com/u/35780702?v=4", + "profile": "https://github.com/bsheps", + "contributions": [ + "doc" + ] + }, + { + "login": "kyle-n", + "name": "Kyle Nazario", + "avatar_url": "https://avatars.githubusercontent.com/u/13384477?v=4", + "profile": "http://www.kylenazario.com/", + "contributions": [ + "doc" + ] + }, + { + "login": "thefalked", + "name": "Giuliano Crivelli", + "avatar_url": "https://avatars.githubusercontent.com/u/28029756?v=4", + "profile": "https://github.com/thefalked", + "contributions": [ + "doc" + ] + }, + { + "login": "mroforolhc", + "name": "mrkv", + "avatar_url": "https://avatars.githubusercontent.com/u/26799398?v=4", + "profile": "https://t.me/markov_ka", + "contributions": [ + "doc" + ] + }, + { + "login": "smk267", + "name": "smk267", + "avatar_url": "https://avatars.githubusercontent.com/u/88115182?v=4", + "profile": "https://github.com/smk267", + "contributions": [ + "infra" + ] + }, + { + "login": "agentdylan", + "name": "Dylan Gordon", + "avatar_url": "https://avatars.githubusercontent.com/u/3656794?v=4", + "profile": "https://www.dylangordon.co.nz/", + "contributions": [ + "doc" + ] + }, + { + "login": "mcous", + "name": "Michael Cousins", + "avatar_url": "https://avatars.githubusercontent.com/u/2963448?v=4", + "profile": "https://michael.cousins.io/", + "contributions": [ + "doc", + "review" + ] + }, + { + "login": "kettanaito", + "name": "Artem Zakharchenko", + "avatar_url": "https://avatars.githubusercontent.com/u/14984911?v=4", + "profile": "https://kettanaito.com/", + "contributions": [ + "doc" + ] + }, + { + "login": "vadimshvetsov", + "name": "Vadim Shvetsov", + "avatar_url": "https://avatars.githubusercontent.com/u/16336572?v=4", + "profile": "https://github.com/vadimshvetsov", + "contributions": [ + "doc" + ] + }, + { + "login": "domnantas", + "name": "Domantas Petrauskas", + "avatar_url": "https://avatars.githubusercontent.com/u/51953549?v=4", + "profile": "https://domnantas.lt/", + "contributions": [ + "doc" + ] + }, + { + "login": "Efim-Kapliy", + "name": "Efim", + "avatar_url": "https://avatars.githubusercontent.com/u/126895483?v=4", + "profile": "https://portfolio.edkt.ru/", + "contributions": [ + "doc" + ] + }, + { + "login": "denisx", + "name": "denisx", + "avatar_url": "https://avatars.githubusercontent.com/u/427776?v=4", + "profile": "https://github.com/denisx", + "contributions": [ + "code" + ] + }, + { + "login": "ggualiato", + "name": "Giovanni Gualiato", + "avatar_url": "https://avatars.githubusercontent.com/u/26698704?v=4", + "profile": "https://github.com/ggualiato", + "contributions": [ + "doc" + ] + }, + { + "login": "saubaig456", + "name": "Saud Baig", + "avatar_url": "https://avatars.githubusercontent.com/u/143418574?v=4", + "profile": "https://github.com/saubaig456", + "contributions": [ + "doc" + ] + }, + { + "login": "moeyashi", + "name": "Ren Adachi", + "avatar_url": "https://avatars.githubusercontent.com/u/49895682?v=4", + "profile": "https://github.com/moeyashi", + "contributions": [ + "doc" + ] + }, + { + "login": "TyMick", + "name": "Ty Mick", + "avatar_url": "https://avatars.githubusercontent.com/u/5317080?v=4", + "profile": "https://tymick.me/", + "contributions": [ + "doc" + ] + }, + { + "login": "enmanuelduran", + "name": "Enmanuel Durán", + "avatar_url": "https://avatars.githubusercontent.com/u/8060530?v=4", + "profile": "https://enmascript.com/", + "contributions": [ + "doc" + ] + }, + { + "login": "gbhasha", + "name": "Galeel Bhasha Satthar", + "avatar_url": "https://avatars.githubusercontent.com/u/501794?v=4", + "profile": "https://github.com/gbhasha", + "contributions": [ + "doc" + ] + }, + { + "login": "ianlet", + "name": "Ian Létourneau", + "avatar_url": "https://avatars.githubusercontent.com/u/6018732?v=4", + "profile": "https://noma.to/", + "contributions": [ + "doc" + ] + }, + { + "login": "brianlu2610", + "name": "brianlu2610", + "avatar_url": "https://avatars.githubusercontent.com/u/68666483?v=4", + "profile": "https://github.com/brianlu2610", + "contributions": [ + "code" + ] + }, + { + "login": "ezzatron", + "name": "Erin", + "avatar_url": "https://avatars.githubusercontent.com/u/100152?v=4", + "profile": "https://github.com/ezzatron", + "contributions": [ + "doc" + ] + }, + { + "login": "nchen000", + "name": "Nan Chen", + "avatar_url": "https://avatars.githubusercontent.com/u/23487984?v=4", + "profile": "https://www.linkedin.com/in/nan-chen-000/", + "contributions": [ + "doc" + ] + }, + { + "login": "aburdiss", + "name": "Alexander Burdiss", + "avatar_url": "https://avatars.githubusercontent.com/u/31200600?v=4", + "profile": "http://alexanderburdiss.com/", + "contributions": [ + "doc" + ] + }, + { + "login": "peterh-capella", + "name": "Peter Hentges", + "avatar_url": "https://avatars.githubusercontent.com/u/1122723?v=4", + "profile": "https://github.com/peterh-capella", + "contributions": [ + "doc" + ] + }, + { + "login": "neknalb", + "name": "neknalb", + "avatar_url": "https://avatars.githubusercontent.com/u/23031302?v=4", + "profile": "https://github.com/neknalb", + "contributions": [ + "doc" + ] + }, + { + "login": "fetsorn", + "name": "fetsorn", + "avatar_url": "https://avatars.githubusercontent.com/u/12858105?v=4", + "profile": "https://github.com/fetsorn", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, @@ -2031,5 +2807,6 @@ "projectOwner": "testing-library", "repoType": "github", "repoHost": "https://github.com/", - "skipCi": true + "skipCi": true, + "commitType": "docs" } diff --git a/.node-version b/.node-version index 19c7bdba7..dcf74e268 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -16 \ No newline at end of file +16.14 \ No newline at end of file diff --git a/README.md b/README.md index 44b06d399..4ffd940f5 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,7 @@ Documentation site for [React Testing Library](https://github.com/testing-library/react-testing-library), [DOM Testing Library](https://github.com/testing-library/dom-testing-library), +[Angular Testing Library](https://github.com/testing-library/angular-testing-library), and [related projects](https://github.com/testing-library) **https://testing-library.com** @@ -20,7 +21,7 @@ and [related projects](https://github.com/testing-library) https://api.netlify.com/api/v1/badges/24366204-84ca-41e9-b573-2a64f0845e46/deploy-status [build]: https://app.netlify.com/sites/testing-library/deploys [allcontributors-badge]: - https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square + https://img.shields.io/github/all-contributors/testing-library/testing-library-docs?color=ee8449&style=flat-square [coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square [coc]: @@ -134,293 +135,407 @@ Thanks goes to these wonderful people - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Kent C. Dodds
🚧
Alex Krolick
🚧
Sidak Singh Aulakh
💻
Brandon Carroll
💻
David
📖
Ryan James
📖
Brandon Johnson
📖

Edward Coleridge Smith
📖
Adrià Fontcuberta
📖 👀
Tim Deschryver
📖 💻
Ben Monro
📖
Scott Sauber
📝
Shota Tamura
🖋 📖
Giorgio Polvara
📖

michalak111
📖 ⚠️
Huyen Nguyen
📖
Kieren Hughes
📖
Sean McPherson
📖
Michael Lasky
📖
Thomas Lombart
📖
Patrick K Long
📖

Pedro Filho
📖
Tanguy Antoine
📖
Kevin Anderson
📖
Dustin Myers
📖
Vojta Holik
🎨
Steve Schwarz
📖
Aayush Rajvanshi
📖

Eugie Limpin
📖
Kevin
📖
Jennifer Shehane
📖
Steve Taggart
📖
Stephen Sugden
📖
Blai Samitier
📖
Vernon Kesner
📖

Will Douglas
📖
Head
📖
Lee
📖
Mario Beltrán Alarcón
📖
jameslevine
📖
Rahim Alwer
📖
Chenjia
📖

Olivier Le Thanh Duong
📖
Jakub Jastrzębski
📖
Ivan Galiatin
📖
Hendrik Röhm
📖
Sam Kauffman
📖
Turadg Aleahmad
📖
mark g romano
📖

Arturo Romero
📖
Dustin Masters
📖
Darren Lester
📖
Iswara Chaitanya
📖
Nataliia Pylypenko
📖
Hu Chen
📖
Josh
📖

numb86
📖
Nicholas Boll
📖
Billy Matthews
📢 📖
Dale French
📖
aw-davidson
📖
Benjamin Blackwood
📖
Ben
📖

Daniel Afonso
📖
Noman Gul
📖
Rafael Souza
📖
Pavel Pustovalov
📖
Dyma
📖
Matan Borenkraout
📖 💻
timrobinson33
📖

Manuel Dugué
📖
karthik20
📖
Pob Ch
📖
Mohammad Kermani
📖
Adeel Imran
📖
Varun Dey
📖
Pablo R. Dinella
📖

Jamie
📖
Cory House
📖
Jack Zhao
📖
Ryan Kennel
📖
Jesus Hernandez
📖
Aaron Pettengill
📖
Izhaki
📖

Robin Wieruch
✅
Alexander Sokolov
📖
Sascha Tandel
📖
Gyuwon Yi
📖
Boris Serdiuk
📖
balavishnuvj
📖
Sharmila Jesupaul
📖

Batuhan Wilhelm
📖
Dennis Kaffer
📖
Cam Jackson
📖
Jared Luxenberg
📖
Yakir Narkis
📖
Rahul Bhooteshwar
📖
Maja Wichrowska
📖

Kermani
📖 👀
Vasily Malykhin
📖
Brian Alexis
📖
Kalpesh Singh
📖
Gerrit Alex
📖
Winter LaMon
📖
Juliano Penna
📖

Paul Coroneos
📖
Sebastian Silbermann
📖 👀
Paul Salaets
📖
Michaël De Boey
📖
Washington Soares
📖
Jami Suomalainen
📖
Oriol Puig
📖

hedgecox
📖
Sherman Hui
📖
Jesu Castillo
📖
Core HTML5 Canvas, the book
📖
John Sterling
📖
Velu S Gautam
📖
Richard Oliver Bray
📖

Yanlin Jiang
📖
Lidor Avitan
📖
Isaiah Thomason
📖
Denis Barushev
📖
Domas
📖
Anton Niklasson
📖
Nikolai Yakuschenko
📖

Jan Schröder
📖
Nick McCurdy
📖 👀 💻
Sudhanshu
📖
Aleksandr Chernov
📖
Mathias
📖
davidseow
📖
Tony Hallett
📖

prsdta
📖
tal-joffe
📖
Mayank Jethva
📖
Elad Israeli
📖
Francis Chartrand
📖
Preston Carman
📖
Olivier Wilkinson
📖

Amit Miran
📖
Paul Melero
📖
jonathan schatz
📖
Ricky Sullivan Himself
📖
Armin
📖
Dale Baldwin
📖
AdriSolid
📖

Naruth Kongurai
📖
Erfan Mirzapour
📖
Shem Mahluf
💻 🚇 📖
Phil Gibbins
📖
Liad Shiran
📖
Eduardo Simón Picón
📖
Sanjeev Sharma
📖

dror-heller
📖
Aleksei Arro
📖
Carlo Beltrame
📖
ggorlen
📖
mattstobbs
📖
Zach
📖
Angus J. Pope
📖

Dylan Piercey
📖
Ruhollah
📖
Michael Gwynne
📖
Dominik Broj
📖
Stephen Wade
📖
Luiz Baldi
📖
Thomas Ingram
📖

David Johnston
📖
Rupert McKay
📖
Sebastián Maciel
📖
Sidharth Vinod
📖
Honza Kalfus
📖
Christopher Laidler
📖
Nik Savchenko
📖

Steven Frieson
📖
Andrew Rosário
📖
Daniel RB
📖
HonkingGoose
📖
Daniel Kolev
📖
Arryangga Aliev Pratamaputra
📖
Andrew Hansen
📖

JOAO GABRIEL SANTOS NEVES
📖
Luke Ingalls
📖
Aleksey Levenstein
📖
Tomas Zaicevas
📖
Sriram Thiagarajan
📖
Esteban Borai
📖
Arti Villa
📖

Jake Boone
📖
Dennis273
📖
Mosh Feu
📖
Notas Hellout
📖
Max Smolens
📖
Nima Ebrazeh
📖
Philipp Fritsche
👀

Clément Plantier
📖
pppp606
📖
Bilou
📖
David Hewson
📖
Alex Kim
📖
PaquitoSoft
📖
Márcio Gabriel
📖

Krychaxp
📖
momokolo
📖
AndyG
📖
Jason Butz
🚇
Oleg
📖
Dany Paredes
📖
Abel
📖

Patrick Brady
📖
Grant Eaton
📖
Aaron Dunphy
📖
Tom Mrazauskas
📖
Supermaryy
📖
Ben Newton
📖
Matija Marohnić
📖

Thaddeus Jiang
📖
Robin Drexler
📖
Thomas McKee
📖
satanTime
📖
polinamochan
📖
Shai Rose
📖
Kent C. Dodds
Kent C. Dodds
🚧		Alex Krolick
Alex Krolick
🚧		Sidak Singh Aulakh
Sidak Singh Aulakh
💻		Brandon Carroll
Brandon Carroll
💻		David
David
📖		Ryan James
Ryan James
📖		Brandon Johnson
Brandon Johnson
📖
Edward Coleridge Smith
Edward Coleridge Smith
📖		Adrià Fontcuberta
Adrià Fontcuberta
📖 👀		Tim Deschryver
Tim Deschryver
📖 💻		Ben Monro
Ben Monro
📖		Scott Sauber
Scott Sauber
📝		Shota Tamura
Shota Tamura
🖋 📖		Giorgio Polvara
Giorgio Polvara
📖
michalak111
michalak111
📖 ⚠️		Huyen Nguyen
Huyen Nguyen
📖		Kieren Hughes
Kieren Hughes
📖		Sean McPherson
Sean McPherson
📖		Michael Lasky
Michael Lasky
📖		Thomas Lombart
Thomas Lombart
📖		Patrick K Long
Patrick K Long
📖
Pedro Filho
Pedro Filho
📖		Tanguy Antoine
Tanguy Antoine
📖		Kevin Anderson
Kevin Anderson
📖		Dustin Myers
Dustin Myers
📖		Vojta Holik
Vojta Holik
🎨		Steve Schwarz
Steve Schwarz
📖		Aayush Rajvanshi
Aayush Rajvanshi
📖
Eugie Limpin
Eugie Limpin
📖		Kevin
Kevin
📖		Jennifer Shehane
Jennifer Shehane
📖		Steve Taggart
Steve Taggart
📖		Stephen Sugden
Stephen Sugden
📖		Blai Samitier
Blai Samitier
📖		Vernon Kesner
Vernon Kesner
📖
Will Douglas
Will Douglas
📖		Head
Head
📖		Lee
Lee
📖		Mario Beltrán Alarcón
Mario Beltrán Alarcón
📖		jameslevine
jameslevine
📖		Rahim Alwer
Rahim Alwer
📖		Chenjia
Chenjia
📖
Olivier Le Thanh Duong
Olivier Le Thanh Duong
📖		Jakub Jastrzębski
Jakub Jastrzębski
📖		Ivan Galiatin
Ivan Galiatin
📖		Hendrik Röhm
Hendrik Röhm
📖		Sam Kauffman
Sam Kauffman
📖		Turadg Aleahmad
Turadg Aleahmad
📖		mark g romano
mark g romano
📖
Arturo Romero
Arturo Romero
📖		Dustin Masters
Dustin Masters
📖		Darren Lester
Darren Lester
📖		Iswara Chaitanya
Iswara Chaitanya
📖		Nataliia Pylypenko
Nataliia Pylypenko
📖		Hu Chen
Hu Chen
📖		Josh
Josh
📖
numb86
numb86
📖		Nicholas Boll
Nicholas Boll
📖		Billy Matthews
Billy Matthews
📢 📖		Dale French
Dale French
📖		aw-davidson
aw-davidson
📖		Benjamin Blackwood
Benjamin Blackwood
📖		Ben
Ben
📖
Daniel Afonso
Daniel Afonso
📖		Noman Gul
Noman Gul
📖		Rafael Souza
Rafael Souza
📖		Pavel Pustovalov
Pavel Pustovalov
📖		Dyma
Dyma
📖		Matan Borenkraout
Matan Borenkraout
📖 💻		timrobinson33
timrobinson33
📖
Manuel Dugué
Manuel Dugué
📖		karthik20
karthik20
📖		Pob Ch
Pob Ch
📖		Mohammad Kermani
Mohammad Kermani
📖		Adeel Imran
Adeel Imran
📖		Varun Dey
Varun Dey
📖		Pablo R. Dinella
Pablo R. Dinella
📖
Jamie
Jamie
📖		Cory House
Cory House
📖		Jack Zhao
Jack Zhao
📖		Ryan Kennel
Ryan Kennel
📖		Jesus Hernandez
Jesus Hernandez
📖		Aaron Pettengill
Aaron Pettengill
📖		Izhaki
Izhaki
📖
Robin Wieruch
Robin Wieruch
✅		Alexander Sokolov
Alexander Sokolov
📖		Sascha Tandel
Sascha Tandel
📖		Gyuwon Yi
Gyuwon Yi
📖		Boris Serdiuk
Boris Serdiuk
📖		balavishnuvj
balavishnuvj
📖		Sharmila Jesupaul
Sharmila Jesupaul
📖
Batuhan Wilhelm
Batuhan Wilhelm
📖		Dennis Kaffer
Dennis Kaffer
📖		Cam Jackson
Cam Jackson
📖		Jared Luxenberg
Jared Luxenberg
📖		Yakir Narkis
Yakir Narkis
📖		Rahul Bhooteshwar
Rahul Bhooteshwar
📖		Maja Wichrowska
Maja Wichrowska
📖
Kermani
Kermani
📖 👀		Vasily Malykhin
Vasily Malykhin
📖		Brian Alexis
Brian Alexis
📖		Kalpesh Singh
Kalpesh Singh
📖		Gerrit Alex
Gerrit Alex
📖		Winter LaMon
Winter LaMon
📖		Juliano Penna
Juliano Penna
📖
Paul Coroneos
Paul Coroneos
📖		Sebastian Silbermann
Sebastian Silbermann
📖 👀		Paul Salaets
Paul Salaets
📖		Michaël De Boey
Michaël De Boey
📖		Washington Soares
Washington Soares
📖		Jami Suomalainen
Jami Suomalainen
📖		Oriol Puig
Oriol Puig
📖
hedgecox
hedgecox
📖		Sherman Hui
Sherman Hui
📖		Jesu Castillo
Jesu Castillo
📖		Core HTML5 Canvas, the book
Core HTML5 Canvas, the book
📖		John Sterling
John Sterling
📖		Velu S Gautam
Velu S Gautam
📖		Richard Oliver Bray
Richard Oliver Bray
📖
Yanlin Jiang
Yanlin Jiang
📖		Lidor Avitan
Lidor Avitan
📖		Isaiah Thomason
Isaiah Thomason
📖		Denis Barushev
Denis Barushev
📖		Domas
Domas
📖		Anton Niklasson
Anton Niklasson
📖		Nikolai Yakuschenko
Nikolai Yakuschenko
📖
Jan Schröder
Jan Schröder
📖		Nick McCurdy
Nick McCurdy
📖 👀 💻		Sudhanshu
Sudhanshu
📖		Aleksandr Chernov
Aleksandr Chernov
📖		Mathias
Mathias
📖		davidseow
davidseow
📖		Tony Hallett
Tony Hallett
📖
prsdta
prsdta
📖		tal-joffe
tal-joffe
📖		Mayank Jethva
Mayank Jethva
📖		Elad Israeli
Elad Israeli
📖		Francis Chartrand
Francis Chartrand
📖		Preston Carman
Preston Carman
📖		Olivier Wilkinson
Olivier Wilkinson
📖
Amit Miran
Amit Miran
📖		Paul Melero
Paul Melero
📖		jonathan schatz
jonathan schatz
📖		Ricky Sullivan Himself
Ricky Sullivan Himself
📖		Armin
Armin
📖		Dale Baldwin
Dale Baldwin
📖		AdriSolid
AdriSolid
📖
Naruth Kongurai
Naruth Kongurai
📖		Erfan Mirzapour
Erfan Mirzapour
📖		Shem Mahluf
Shem Mahluf
💻 🚇 📖		Phil Gibbins
Phil Gibbins
📖		Liad Shiran
Liad Shiran
📖		Eduardo Simón Picón
Eduardo Simón Picón
📖		Sanjeev Sharma
Sanjeev Sharma
📖
dror-heller
dror-heller
📖		Aleksei Arro
Aleksei Arro
📖		Carlo Beltrame
Carlo Beltrame
📖		ggorlen
ggorlen
📖		mattstobbs
mattstobbs
📖		Zach
Zach
📖		Angus J. Pope
Angus J. Pope
📖
Dylan Piercey
Dylan Piercey
📖		Ruhollah
Ruhollah
📖		Michael Gwynne
Michael Gwynne
📖		Dominik Broj
Dominik Broj
📖		Stephen Wade
Stephen Wade
📖		Luiz Baldi
Luiz Baldi
📖		Thomas Ingram
Thomas Ingram
📖
David Johnston
David Johnston
📖		Rupert McKay
Rupert McKay
📖		Sebastián Maciel
Sebastián Maciel
📖		Sidharth Vinod
Sidharth Vinod
📖		Honza Kalfus
Honza Kalfus
📖		Christopher Laidler
Christopher Laidler
📖		Nik Savchenko
Nik Savchenko
📖
Steven Frieson
Steven Frieson
📖		Andrew Rosário
Andrew Rosário
📖		Daniel RB
Daniel RB
📖		HonkingGoose
HonkingGoose
📖		Daniel Kolev
Daniel Kolev
📖		Arryangga Aliev Pratamaputra
Arryangga Aliev Pratamaputra
📖		Andrew Hansen
Andrew Hansen
📖
JOAO GABRIEL SANTOS NEVES
JOAO GABRIEL SANTOS NEVES
📖		Luke Ingalls
Luke Ingalls
📖		Aleksey Levenstein
Aleksey Levenstein
📖		Tomas Zaicevas
Tomas Zaicevas
📖		Sriram Thiagarajan
Sriram Thiagarajan
📖		Esteban Borai
Esteban Borai
📖		Arti Villa
Arti Villa
📖
Jake Boone
Jake Boone
📖		Dennis273
Dennis273
📖		Mosh Feu
Mosh Feu
📖		Notas Hellout
Notas Hellout
📖		Max Smolens
Max Smolens
📖		Nima Ebrazeh
Nima Ebrazeh
📖		Philipp Fritsche
Philipp Fritsche
👀
Clément Plantier
Clément Plantier
📖		pppp606
pppp606
📖		Bilou
Bilou
📖		David Hewson
David Hewson
📖		Alex Kim
Alex Kim
📖		PaquitoSoft
PaquitoSoft
📖		Márcio Gabriel
Márcio Gabriel
📖
Krychaxp
Krychaxp
📖		momokolo
momokolo
📖		AndyG
AndyG
📖		Jason Butz
Jason Butz
🚇		Oleg
Oleg
📖		Dany Paredes
Dany Paredes
📖		Abel
Abel
📖
Patrick Brady
Patrick Brady
📖		Grant Eaton
Grant Eaton
📖		Aaron Dunphy
Aaron Dunphy
📖		Tom Mrazauskas
Tom Mrazauskas
📖		Supermaryy
Supermaryy
📖		Ben Newton
Ben Newton
📖		Matija Marohnić
Matija Marohnić
📖
Thaddeus Jiang
Thaddeus Jiang
📖		Robin Drexler
Robin Drexler
📖		Thomas McKee
Thomas McKee
📖		satanTime
satanTime
📖		polinamochan
polinamochan
📖		Shai Rose
Shai Rose
📖		AldinRekic
AldinRekic
🎨
Son Nguyen
Son Nguyen
📖		Lirlev48
Lirlev48
📖		Tarjei Huse
Tarjei Huse
📖		Obie Munoz
Obie Munoz
📖		Bert B
Bert B
📖		Alireza Heydari
Alireza Heydari
📖		Gleb Radutsky
Gleb Radutsky
📖
giovanniPepi
giovanniPepi
📖		Maciej Jastrzebski
Maciej Jastrzebski
📖		Sergio Moreno
Sergio Moreno
💻		David Nixon
David Nixon
📖		Anton Khitrenovich
Anton Khitrenovich
📖		Kostas Minaidis
Kostas Minaidis
📖		Than Hutchins
Than Hutchins
📖
Jordan Edmunds
Jordan Edmunds
📖		mouse
mouse
📖		Roberto Molina
Roberto Molina
📖		Louis Young
Louis Young
📖		Lukas Elmer
Lukas Elmer
📖		Brent Guffens
Brent Guffens
📖		Esteban
Esteban
📖
Tibor Barsi
Tibor Barsi
📖		Tomoya Kashifuku
Tomoya Kashifuku
📖		Leo
Leo
📖		Erik Metz
Erik Metz
📖		Vaibhav Tyagi
Vaibhav Tyagi
📖		Aleksei Drokin
Aleksei Drokin
📖		Torsten Knauf
Torsten Knauf
📖
John Harlow
John Harlow
📖		Morgan Hunter
Morgan Hunter
📖		Louis Moselhi
Louis Moselhi
📖		Ryan McGill
Ryan McGill
📖		Renan Andrade
Renan Andrade
📖		Vasilii Boldurean
Vasilii Boldurean
📖		Josias Schneider
Josias Schneider
📖
Denis LE
Denis LE
📖		Nicolas Frizzarin
Nicolas Frizzarin
📖		Santosh Yadav
Santosh Yadav
📖		Ilê Caian
Ilê Caian
📖		Alex Khomenko
Alex Khomenko
📖		Luís Campos
Luís Campos
📖		Alexandr Zhidovlenko
Alexandr Zhidovlenko
📖
lyannel
lyannel
️️️️♿️		Yanick Champoux
Yanick Champoux
📖		Ali
Ali
📖		Milan Jaritz
Milan Jaritz
📖		Rokas Brazdžionis
Rokas Brazdžionis
📖		Laforge Thomas
Laforge Thomas
📖		Steph Nathai
Steph Nathai
💻 ️️️️♿️
Frieder Bluemle
Frieder Bluemle
📖		Gromit (전민재)
Gromit (전민재)
📖		Cesar S
Cesar S
📖		Corbin Crutchley
Corbin Crutchley
📖		Roman Batsenko
Roman Batsenko
📖		snjro
snjro
📖		taro
taro
📖
Andreas Nordahl
Andreas Nordahl
📖		neaumusic
neaumusic
📖		Joyel Johny
Joyel Johny
💻		bsheps
bsheps
📖		Kyle Nazario
Kyle Nazario
📖		Giuliano Crivelli
Giuliano Crivelli
📖		mrkv
mrkv
📖
smk267
smk267
🚇		Dylan Gordon
Dylan Gordon
📖		Michael Cousins
Michael Cousins
📖 👀		Artem Zakharchenko
Artem Zakharchenko
📖		Vadim Shvetsov
Vadim Shvetsov
📖		Domantas Petrauskas
Domantas Petrauskas
📖		Efim
Efim
📖
denisx
denisx
💻		Giovanni Gualiato
Giovanni Gualiato
📖		Saud Baig
Saud Baig
📖		Ren Adachi
Ren Adachi
📖		Ty Mick
Ty Mick
📖		Enmanuel Durán
Enmanuel Durán
📖		Galeel Bhasha Satthar
Galeel Bhasha Satthar
📖
Ian Létourneau
Ian Létourneau
📖		brianlu2610
brianlu2610
💻		Erin
Erin
📖		Nan Chen
Nan Chen
📖		Alexander Burdiss
Alexander Burdiss
📖		Peter Hentges
Peter Hentges
📖		neknalb
neknalb
📖
fetsorn
fetsorn
📖
diff --git a/docs/angular-testing-library/api.mdx b/docs/angular-testing-library/api.mdx index c7570d00a..a5ba65c4b 100644 --- a/docs/angular-testing-library/api.mdx +++ b/docs/angular-testing-library/api.mdx @@ -1,7 +1,6 @@ --- id: api title: API -sidebar_label: API --- `Angular Testing Library` re-exports everything from `DOM Testing Library` as @@ -39,7 +38,8 @@ await render(AppComponent) Instead of passing the component's type as first argument, you can also provide a template. This practice is required to render directives but can also be applied to components, it might even be more useful. The directive's (or -component's) type must then be added to the `declarations`. +component's) type must then be added to the `imports` (or `declarations` in case +of non-standalone components). **example with directive**: @@ -77,21 +77,158 @@ export async function render( ## Component RenderOptions -### `componentProperties` -An object to set `@Input` and `@Output` properties of the component. +### `inputs` -**default** : `{}` +An object to set `@Input` or `input()` properties of the component. -**example**: +**default** : `{}` ```typescript await render(AppComponent, { - componentProperties: { + inputs: { counterValue: 10, - send: (value) => { ... } + // explicitly define aliases using `aliasedInput` + ...aliasedInput('someAlias', 'someValue'), + }, +}) +``` + +### `on` + +An object with callbacks to subscribe to `EventEmitters` and `Observables` of +the component. + +**default** : `{}` + +```ts +// using a manual callback +const sendValue = (value) => { ... } +await render(AppComponent, { + on: { + send: (value) => sendValue(value), } }) + +// using a (jest) spy +const sendValueSpy = jest.fn() + +await render(AppComponent, { + on: { + send: sendValueSpy + } +}) +``` + +### `bindings` + +An array of bindings to apply to the component using Angular's native bindings API. This provides a more direct way to bind inputs and outputs compared to the `inputs` and `on` options. The bindings API uses Angular's `inputBinding`, `outputBinding`, and `twoWayBinding` functions from `@angular/core`. + +**default** : `[]` + +```typescript +import { inputBinding, outputBinding, twoWayBinding, signal } from '@angular/core' + +await render(AppComponent, { + bindings: [ + // Bind a static input value + inputBinding('greeting', () => 'Hello'), + + // Bind a signal as an input + inputBinding('age', () => 25), + + // Two-way binding with a signal + twoWayBinding('name', signal('John')), + + // Output binding with a callback + outputBinding('submitValue', (event) => console.log(event)), + ], +}) +``` + +**Using signals for reactive updates**: + +```typescript +const greetingSignal = signal('Good day') +const nameSignal = signal('David') +const ageSignal = signal(35) + +const { fixture } = await render(AppComponent, { + bindings: [ + inputBinding('greeting', greetingSignal), + inputBinding('age', ageSignal), + twoWayBinding('name', nameSignal), + ], +}) + +// Update signals externally +greetingSignal.set('Good evening') +``` + +**Handling outputs**: + +```typescript +const submitHandler = jest.fn() + +await render(AppComponent, { + bindings: [ + outputBinding('submit', submitHandler), + ], +}) +``` + +### `declarations` + +A collection of components, directives and pipes needed to render the component. +For example, nested components of the component. + +For more info see the +[Angular docs](https://angular.dev/guide/ngmodules/overview#declarations). + +**default** : `[]` + +**example**: + +```typescript +await render(AppComponent, { + declarations: [CustomerDetailComponent, ButtonComponent], +}) +``` + +### `deferBlockBehavior` + +Set the defer blocks behavior. + +For more info see the +[Angular docs](https://angular.dev/api/core/testing/DeferBlockBehavior) + +**default** : `undefined` (uses `DeferBlockBehavior.Manual`, which is different +from the Angular default of `DeferBlockBehavior.Playthrough`) + +**example**: + +```typescript +await render(AppComponent, { + deferBlockBehavior: DeferBlockBehavior.Playthrough, +}) +``` + +### `deferBlockStates` + +Set the initial state of a deferrable blocks in a component. + +For more info see the +[Angular docs](https://angular.dev/api/core/testing/DeferBlockState) + +**default** : `undefined` (uses the Angular default, which is +`DeferBlockState.Placeholder`) + +**example**: + +```typescript +await render(FixtureComponent, { + deferBlockStates: DeferBlockState.Loading, +}) ``` ### `componentProviders` @@ -103,7 +240,7 @@ These will be provided at the component level. To inject dependencies at the module level, use [`providers`](#providers). For more info see the -[Angular docs](https://angular.io/api/core/Directive#providers). +[Angular docs](https://angular.dev/guide/di/hierarchical-dependency-injection#example-providing-services-in-component). **default** : `[]` @@ -115,34 +252,64 @@ await render(AppComponent, { }) ``` -### `declarations` +### `componentImports` -A collection of components, directives and pipes needed to render the component. -For example, nested components of the component. +A collection of imports to override a standalone component's imports with. -For more info see the -[Angular docs](https://angular.io/api/core/NgModule#declarations). +**default** : `undefined` -**default** : `[]` +**example**: + +```typescript +await render(AppComponent, { + componentImports: [MockChildComponent], +}) +``` + +### `childComponentOverrides` + +Collection of child component specified providers to override with. + +**default** : `undefined` **example**: ```typescript await render(AppComponent, { - declarations: [CustomerDetailComponent, ButtonComponent], + childComponentOverrides: [ + { + component: ChildOfAppComponent, + providers: [{provide: ChildService, useValue: {hello: 'world'}}], + }, + ], }) ``` -### `detectChanges` +### `detectChangesOnRender` -Will call `detectChanges` when the component is compiled +Invokes `detectChanges` after the component is rendered. **default** : `true` **example**: ```typescript -await render(AppComponent, {detectChanges: false}) +await render(AppComponent, {detectChangesOnRender: false}) +``` + +### `autoDetectChanges` + +Automatically detect changes as a "real" running component would do. For +example, runs a change detection cycle when an event has occured. + +**default** : `true` + +**example**: + +```typescript +await render(AppComponent, { + autoDetectChanges: false, +}) ``` ### `excludeComponentDeclaration` @@ -169,7 +336,7 @@ modules. Adds `NoopAnimationsModule` by default if `BrowserAnimationsModule` isn't added to the collection For more info see the -[Angular docs](https://angular.io/api/core/NgModule#imports). +[Angular docs](https://angular.dev/guide/components#imports-in-the-component-decorator). **default** : `[NoopAnimationsModule]` @@ -190,7 +357,7 @@ These will be provided at the module level. To inject dependencies at the component level, use [`componentProviders`](#componentProviders). For more info see the -[Angular docs](https://angular.io/api/core/NgModule#providers). +[Angular docs](https://angular.dev/guide/di/dependency-injection-providers#). **default** : `[]` @@ -227,7 +394,7 @@ await render(AppComponent, { The route configuration to set up the router service via `RouterTestingModule.withRoutes`. For more info see the -[Angular Routes docs](https://angular.io/api/router/Routes). +[Angular Routes docs](https://angular.dev/api/router/Routes). **default** : `[]` @@ -256,7 +423,7 @@ A collection of schemas needed to render the component. Allowed values are `NO_ERRORS_SCHEMA` and `CUSTOM_ELEMENTS_SCHEMA`. For more info see the -[Angular docs](https://angular.io/api/core/NgModule#schemas). +[Angular docs](https://angular.dev/guide/components/advanced-configuration#custom-element-schemas). **default** : `[]` @@ -282,6 +449,64 @@ await render(AppComponent, { }) ``` + +### ~~`componentInputs`~~ (deprecated) + +An object to set `@Input` properties of the component. Uses `setInput` to set +the input property. Throws if the component property is not annotated with the +`@Input` attribute. + +**default** : `{}` + +**example**: + +```typescript +await render(AppComponent, { + componentInputs: { + counterValue: 10, + }, +}) +``` + +### ~~`componentOutputs`~~ (deprecated) + +An object to set `@Output` properties of the component. + +**default** : `{}` + +**example**: + +```typescript +await render(AppComponent, { + componentOutputs: { + clicked: (value) => { ... } + } +}) +``` + +### ~~`componentProperties`~~ (deprecated) + +An object to set `@Input` and `@Output` properties of the component. Doesn't +have a fine-grained control as `inputs` and `on`. + +**default** : `{}` + +**example**: + +```typescript +await render(AppComponent, { + componentProperties: { + // an input + counterValue: 10, + // an output + send: (value) => { ... } + // a public property + name: 'Tim' + } +}) +``` + + ## `RenderResult` ### `container` @@ -301,46 +526,47 @@ const {debug} = await render(AppComponent) debug() ``` -### `change` +### `rerender` -Change the input of the component. This calls `detectChanges` after the props -are updated. +Changes the input properties of the existing component instance by following +Angular component lifecycle events (i.e. `ngOnChanges` is called). Input +properties that are not defined are cleared. ```typescript -const {change} = await render(Counter, { - componentProperties: {count: 4, name: 'Sarah'}, +const {rerender} = await render(Counter, { + inputs: {count: 4, name: 'Sarah'}, }) expect(screen.getByTestId('count-value').textContent).toBe('4') expect(screen.getByTestId('name-value').textContent).toBe('Sarah') -change({count: 7}) +await rerender({ + inputs: {count: 7} +}) -// count updated to 7 +// count is updated to 7 expect(screen.getByTestId('count-value').textContent).toBe('7') -// name keeps the same value -expect(screen.getByTestId('name-value').textContent).toBe('Sarah') +// name is undefined because it's not provided in rerender +expect(screen.getByTestId('name-value').textContent).toBeUndefined() ``` -### `rerender` - -Re-render the same component with different props. Input properties that are not -defined are cleared. This calls `detectChanges` after the props are updated. +Using `partialUpdate`, only the newly provided properties will be updated. Other +input properties that aren't provided won't be cleared. ```typescript const {rerender} = await render(Counter, { - componentProperties: {count: 4, name: 'Sarah'}, + inputs: {count: 4, name: 'Sarah'}, }) expect(screen.getByTestId('count-value').textContent).toBe('4') expect(screen.getByTestId('name-value').textContent).toBe('Sarah') -await rerender({count: 7}) +await rerender({inputs: {count: 7}, partialUpdate: true}) -// count updated to 7 +// count is updated to 7 expect(screen.getByTestId('count-value').textContent).toBe('7') -// name is undefined because it's not provided in rerender -expect(screen.getByTestId('name-value').textContent).toBeUndefined() +// name is still rendered as "Sarah" because of the partial update +expect(screen.getByTestId('name-value').textContent).toBe('Sarah') ``` ### `detectChanges` @@ -348,20 +574,20 @@ expect(screen.getByTestId('name-value').textContent).toBeUndefined() Trigger a change detection cycle for the component. For more info see the -[Angular docs](https://angular.io/api/core/testing/ComponentFixture#detectChanges). +[Angular docs](https://angular.dev/api/core/testing/ComponentFixture#detectChanges). ### `debugElement` The Angular `DebugElement` of the component. -For more info see the [Angular docs](https://angular.io/api/core/DebugElement). +For more info see the [Angular docs](https://angular.dev/api/core/DebugElement). ### `fixture` The Angular `ComponentFixture` of the component. For more info see the -[Angular docs](https://angular.io/api/core/testing/ComponentFixture). +[Angular docs](https://angular.dev/api/core/testing/ComponentFixture). ```typescript const {fixture} = await render(AppComponent) @@ -407,3 +633,22 @@ screen.getByRole('heading', { }) queryByLabelText(/First name/i') ``` + +### `renderDeferBlock` + +To test [Deferrable views](https://angular.dev/guide/defer#defer), you can make +use of `renderDeferBlock`. `renderDeferBlock` will set the desired defer state +for a specific deferrable block. The default value of a deferrable view is +`Placeholder`, but you can also set the initial state while rendering the +component. + +```typescript +const {renderDeferBlock} = await render(FixtureComponent, { + deferBlockStates: DeferBlockState.Loading, +}) + +expect(screen.getByText(/loading/i)).toBeInTheDocument() + +await renderDeferBlock(DeferBlockState.Complete) +expect(screen.getByText(/completed/i)).toBeInTheDocument() +``` diff --git a/docs/angular-testing-library/examples.mdx b/docs/angular-testing-library/examples.mdx index 365e42c37..00ae4fa1a 100644 --- a/docs/angular-testing-library/examples.mdx +++ b/docs/angular-testing-library/examples.mdx @@ -1,7 +1,6 @@ --- id: examples -title: Examples -sidebar_label: Examples +title: Example --- > Read about @@ -9,60 +8,75 @@ sidebar_label: Examples > or follow the > [guided example](https://timdeschryver.dev/blog/getting-the-most-value-out-of-your-angular-component-tests) +Angular Testing Library can be used with standalone components and also with Angular components that uses Modules. +The example below shows how to test a standalone component, but the same principles apply to Angular components that uses Modules. +In fact, there should be no difference in how you test both types of components, only the setup might be different. + ```ts title="counter.component.ts" @Component({ - selector: 'counter', + selector: 'app-counter', template: ` + {{ hello() }} - Current Count: {{ counter }} + Current Count: {{ counter() }} `, }) export class CounterComponent { - @Input() counter = 0 + counter = model(0); + hello = input('Hi', { alias: 'greeting' }); increment() { - this.counter += 1 + this.counter.set(this.counter() + 1); } decrement() { - this.counter -= 1 + this.counter.set(this.counter() - 1); } } ``` -```ts title="counter.component.spec.ts" -import {render, screen, fireEvent} from '@testing-library/angular' -import {CounterComponent} from './counter.component.ts' +```typescript title="counter.component.spec.ts" +import { signal, inputBinding, twoWayBinding } from '@angular/core'; +import { render, screen, fireEvent } from '@testing-library/angular'; +import { CounterComponent } from './counter.component'; describe('Counter', () => { - test('should render counter', async () => { + it('renders counter', async () => { await render(CounterComponent, { - componentProperties: {counter: 5}, - }) + bindings: [ + twoWayBinding('counter', signal(5)), + // aliases are handled naturally with inputBinding + inputBinding('greeting', () => 'Hello Alias!'), + ], + }); - expect(screen.getByText('Current Count: 5')).toBeInTheDocument() - }) + expect(screen.getByText('Current Count: 5')).toBeVisible(); + expect(screen.getByText('Hello Alias!')).toBeVisible(); + }); - test('should increment the counter on click', async () => { + it('increments the counter on click', async () => { await render(CounterComponent, { - componentProperties: {counter: 5}, - }) + bindings: [twoWayBinding('counter', signal(5))], + }); - fireEvent.click(screen.getByText('+')) + const incrementButton = screen.getByRole('button', { name: '+' }); + fireEvent.click(incrementButton); - expect(screen.getByText('Current Count: 6')).toBeInTheDocument() - }) -}) + expect(screen.getByText('Current Count: 6')).toBeVisible(); + }); +}); ``` +## More examples + More examples can be found in the [GitHub project](https://github.com/testing-library/angular-testing-library/tree/master/apps/example-app/src/app/examples). These examples include: -- `@Input` and `@Output` properties -- (Reactive) Forms -- Integration with NgRx (mock) Store +- `input` and `output` properties +- Forms +- Integration injected services - And [more](https://github.com/testing-library/angular-testing-library/tree/master/apps/example-app/src/app/examples) diff --git a/docs/angular-testing-library/faq.mdx b/docs/angular-testing-library/faq.mdx index b758c270c..e333db4b3 100644 --- a/docs/angular-testing-library/faq.mdx +++ b/docs/angular-testing-library/faq.mdx @@ -31,7 +31,8 @@ As you write your tests, keep in mind: In general, you should avoid mocking out components (see [the Guiding Principles section](guiding-principles.mdx)). However, if you need -to, then try to use [ng-mocks](https://ng-mocks.sudo.eu/) and its [`MockBuilder`](https://ng-mocks.sudo.eu/extra/with-3rd-party#testing-libraryangular-and-mockbuilder). +to, then try to use [ng-mocks](https://ng-mocks.sudo.eu/) and its +[`MockBuilder`](https://ng-mocks.sudo.eu/extra/with-3rd-party#testing-libraryangular-and-mockbuilder). ```typescript import {Component, NgModule} from '@angular/core' @@ -58,7 +59,7 @@ export class AppModule {} describe('ParentComponent', () => { it('should not render ChildComponent when shallow rendering', async () => { // all imports, declarations and exports of AppModule will be mocked. - const dependencies = MockBuilder(ParentComponent, AppModule).build(); + const dependencies = MockBuilder(ParentComponent, AppModule).build() await render(ParentComponent, dependencies) diff --git a/docs/angular-testing-library/intro.mdx b/docs/angular-testing-library/intro.mdx index 7fb31f31a..a7820b7f0 100644 --- a/docs/angular-testing-library/intro.mdx +++ b/docs/angular-testing-library/intro.mdx @@ -8,9 +8,17 @@ sidebar_label: Introduction builds on top of [`DOM Testing Library`](https://github.com/testing-library/dom-testing-library) by adding APIs for working with Angular components. +Starting from ATL version 17, you also need to install `@testing-library/dom`: + +```bash npm2yarn +npm install --save-dev @testing-library/angular @testing-library/dom +``` + +Or, you can use the `ng add` command. +This sets up your project to use Angular Testing Library, which also includes the installation of `@testing-library/dom`. ```bash -npm install --save-dev @testing-library/angular +ng add @testing-library/angular ``` - [`@testing-library/angular-testing-library` on GitHub](https://github.com/testing-library/angular-testing-library) diff --git a/docs/angular-testing-library/version-compatibility.mdx b/docs/angular-testing-library/version-compatibility.mdx new file mode 100644 index 000000000..3b64dd5d2 --- /dev/null +++ b/docs/angular-testing-library/version-compatibility.mdx @@ -0,0 +1,18 @@ +--- +id: version-compatibility +title: Version compatibility +--- + +An overview of the compatibility between different versions of Angular Testing +Library and Angular. + +| Angular | Angular Testing Library | +| ------- | ---------------------------------- | +| 20.x | 18.x | +| 19.x | 18.x, 17.x, 16.x, 15.x, 14.x, 13.x | +| 18.x | 17.x, 16.x, 15.x, 14.x, 13.x | +| 17.x | 17.x, 16.x, 15.x, 14.x, 13.x | +| 16.x | 14.x, 13.x | +| >= 15.1 | 14.x, 13.x | +| < 15.1 | 12.x, 11.x | +| 14.x | 12.x, 11.x | diff --git a/docs/bs-react-testing-library/examples.mdx b/docs/bs-react-testing-library/examples.mdx index 0fe68d08a..08e96a7c9 100644 --- a/docs/bs-react-testing-library/examples.mdx +++ b/docs/bs-react-testing-library/examples.mdx @@ -1,6 +1,6 @@ --- id: examples -title: Examples +title: Example --- You can find more bs-dom-testing-library examples at diff --git a/docs/bs-react-testing-library/intro.mdx b/docs/bs-react-testing-library/intro.mdx index 8e2545423..316ccc9b2 100644 --- a/docs/bs-react-testing-library/intro.mdx +++ b/docs/bs-react-testing-library/intro.mdx @@ -13,8 +13,11 @@ Bindings for several testing libraries have been ported to [ReasonML][re]. [`bs-dom-testing-library`][gh-dom] contains [BuckleScript][bs] bindings for `DOM Testing Library`. -``` +```bash npm2yarn npm install --save-dev bs-dom-testing-library +``` + +```bash npm2yarn npm install --save-dev bs-react-testing-library ``` @@ -49,7 +52,7 @@ _or_ This is what [BuckleScript][bs] uses to compile the [Reason][re] code to JS. If it is not in your project you can install it like so: -``` +```bash npm2yarn npm install --save-dev bs-platform ``` @@ -60,7 +63,7 @@ examples here will be using it. - [bs-jest on GitHub](https://github.com/glennsl/bs-jest) -``` +```bash npm2yarn npm install --save-dev @glennsl/bs-jest ``` diff --git a/docs/cypress-testing-library/intro.mdx b/docs/cypress-testing-library/intro.mdx index 95e749d67..3c88d4d2b 100644 --- a/docs/cypress-testing-library/intro.mdx +++ b/docs/cypress-testing-library/intro.mdx @@ -6,7 +6,7 @@ title: Cypress Testing Library [`Cypress Testing Library`][gh] allows the use of dom-testing queries within [Cypress](https://cypress.io) end-to-end browser tests. -``` +```bash npm2yarn npm install --save-dev cypress @testing-library/cypress ``` @@ -22,8 +22,7 @@ Add this line to your project's `cypress/support/commands.js`: import '@testing-library/cypress/add-commands' ``` -You can now use all of `DOM Testing Library`'s `findBy`, `findAllBy`, `queryBy` -and `queryAllBy` commands off the global `cy` object. +You can now use some of `DOM Testing Library`'s `findBy`, and `findAllBy` commands off the global `cy` object. [See the `About queries` docs for reference](/docs/queries/about). > Note: the `get*` queries are not supported because for reasonable Cypress diff --git a/docs/dom-testing-library/api-async.mdx b/docs/dom-testing-library/api-async.mdx index f466e8270..700fbe81d 100644 --- a/docs/dom-testing-library/api-async.mdx +++ b/docs/dom-testing-library/api-async.mdx @@ -45,7 +45,9 @@ function waitFor( ``` When in need to wait for any period of time you can use `waitFor`, to wait for -your expectations to pass. Here's a simple example: +your expectations to pass. Returning _a falsy condition is not sufficient_ to +trigger a retry, the callback must throw an error in order to retry the +condition. Here's a simple example: ```javascript // ... @@ -63,14 +65,14 @@ This can be useful if you have a unit test that mocks API calls and you need to wait for your mock promises to all resolve. If you return a promise in the `waitFor` callback (either explicitly or -implicitly with `async` syntax), then the `waitFor` utility will not call your -callback again until that promise rejects. This allows you to `waitFor` things -that must be checked asynchronously. +implicitly with the `async` syntax), then the `waitFor` utility does not call +your callback again until that promise rejects. This allows you to `waitFor` +things that must be checked asynchronously. The default `container` is the global `document`. Make sure the elements you wait for are descendants of `container`. -The default `interval` is `50ms`. However it will run your callback immediately +The default `interval` is `50ms`. However it runs your callback immediately before starting the intervals. The default `timeout` is `1000ms`. @@ -81,9 +83,9 @@ what caused the timeout. The default `mutationObserverOptions` is `{subtree: true, childList: true, attributes: true, characterData: true}` which -will detect additions and removals of child elements (including text nodes) in -the `container` and any of its descendants. It will also detect attribute -changes. When any of those changes occur, it will re-run the callback. +detects additions and removals of child elements (including text nodes) in the +`container` and any of its descendants. It also detects attribute changes. When +any of those changes occur, it re-runs the callback. ## `waitForElementToBeRemoved` @@ -123,8 +125,8 @@ el.parentElement.removeChild(el) // logs 'Element no longer in DOM' ``` -`waitForElementToBeRemoved` will throw an error if the first argument is `null` -or an empty array: +`waitForElementToBeRemoved` throws an error if the first argument is `null` or +an empty array: ```javascript waitForElementToBeRemoved(null).catch(err => console.log(err)) diff --git a/docs/dom-testing-library/api-configuration.mdx b/docs/dom-testing-library/api-configuration.mdx index dbf13eaa2..72dd2e196 100644 --- a/docs/dom-testing-library/api-configuration.mdx +++ b/docs/dom-testing-library/api-configuration.mdx @@ -21,8 +21,15 @@ The library can be configured via the `configure` function, which accepts: > Framework-specific wrappers like React Testing Library may add more options to > the ones shown below. - + ```js title="setup-tests.js" @@ -47,6 +54,19 @@ configure({ import {configure} from '@testing-library/react' configure({testIdAttribute: 'data-my-test-id'}) +``` + + + + +```ts title="setup-tests.ts" +import {configure} from '@testing-library/angular' + +configure({ + dom: { + testIdAttribute: 'data-my-test-id', + }, +}) ``` @@ -70,14 +90,15 @@ second argument. If you're using testing-library in a browser you almost always want to set this to `true`. Only very old browser don't support this property (such as IE 8 and earlier). However, `jsdom` does not support the second argument currently. This includes versions of `jsdom` prior to `16.4.0` and any -version that logs a `not implemented` warning when calling `getComputedStyle` +version that logs a `not implemented` warning when calling +[`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) with a second argument e.g. `window.getComputedStyle(document.createElement('div'), '::after')`. Defaults to `false` ### `defaultHidden` -The default value for the `hidden` option used by +The default value for the [`hidden` option](queries/byrole#hidden) used by [`getByRole`](queries/byrole.mdx). Defaults to `false`. ### `defaultIgnore` @@ -90,17 +111,18 @@ Defaults to `script, style`. ### `showOriginalStackTrace` -By default, `waitFor` will ensure that the stack trace for errors thrown by -Testing Library is cleaned up and shortened so it's easier for you to identify -the part of your code that resulted in the error (async stack traces are hard to -debug). If you want to disable this, then set`showOriginalStackTrace` to -`false`. You can also disable this for a specific call in the options you pass -to `waitFor`. +By default, [`waitFor`](api-async#waitfor) will ensure that the stack trace for +errors thrown by Testing Library is cleaned up and shortened so it's easier for +you to identify the part of your code that resulted in the error (async stack +traces are hard to debug). If you want to disable this, then +set`showOriginalStackTrace` to `false`. You can also disable this for a specific +call in the options you pass to `waitFor`. ### `throwSuggestions` (experimental) -When enabled, if [better queries](queries/about.mdx#priority) are available the -test will fail and provide a suggested query to use instead. Default to `false`. +When enabled, if [better queries](queries/about.mdx#priority) are available, the +test will fail and provide a suggested query to use instead. Defaults to +`false`. To disable a suggestion for a single query just add `{suggest:false}` as an option. @@ -109,6 +131,35 @@ option. screen.getByTestId('foo', {suggest: false}) // will not throw a suggestion ``` +:::note + +When this option is enabled, it may provide suggestions that lack an intuitive +implementation. Typically this happens for +[roles which cannot be named](https://w3c.github.io/aria/#namefromprohibited), +most notably paragraphs. For instance, if you attempt to use +[`getByText`](queries/bytext.mdx), you may encounter the following error: + +``` +TestingLibraryElementError: A better query is available, try this: + getByRole('paragraph') +``` + +However, there is no direct way to query paragraphs using the config object +parameter, such as in `getByRole('paragraph', { name: 'Hello World' })`. + +To address this issue, you can leverage a custom function to validate the +element's structure, as shown in the example below. More information can be +found in the +[GitHub issue](https://github.com/testing-library/dom-testing-library/issues/1306) + +```js +getByRole('paragraph', { + name: (_, element) => element.textContent === 'Hello world', +}) +``` + +::: + ### `testIdAttribute` The attribute used by [`getByTestId`](queries/bytestid.mdx) and related queries. @@ -122,5 +173,5 @@ message and container object as arguments. ### `asyncUtilTimeout` -The global timeout value in milliseconds used by `waitFor` utilities. Defaults -to 1000ms. +The global timeout value in milliseconds used by [`waitFor`](api-async#waitfor) +utilities. Defaults to 1000ms. diff --git a/docs/dom-testing-library/api-custom-queries.mdx b/docs/dom-testing-library/api-custom-queries.mdx index 452f518f7..8147ead50 100644 --- a/docs/dom-testing-library/api-custom-queries.mdx +++ b/docs/dom-testing-library/api-custom-queries.mdx @@ -3,9 +3,6 @@ id: api-custom-queries title: Custom Queries --- -import Tabs from '@theme/Tabs' -import TabItem from '@theme/TabItem' - `DOM Testing Library` exposes many of the helper functions that are used to implement the default queries. You can use the helpers to build custom queries. For example, the code below shows a way to override the default `testId` queries diff --git a/docs/dom-testing-library/api-debugging.mdx b/docs/dom-testing-library/api-debugging.mdx index 2817a074f..492542440 100644 --- a/docs/dom-testing-library/api-debugging.mdx +++ b/docs/dom-testing-library/api-debugging.mdx @@ -5,8 +5,8 @@ title: Debugging ## Automatic Logging -When you use any `get` calls in your test cases, the current state of the -`container` (DOM) gets printed on the console. For example: +When any `get` or `find` calls you use in your test cases fail, the current +state of the `container` (DOM) gets printed on the console. For example: ```javascript //
Hello world
@@ -26,13 +26,13 @@ Here is the state of your container: ``` -Note: Since the DOM size can get really large, you can set the limit of DOM +**Note**: Since the DOM size can get really large, you can set the limit of DOM content to be printed via environment variable `DEBUG_PRINT_LIMIT`. The default value is `7000`. You will see `...` in the console, when the DOM content is stripped off, because of the length you have set or due to default size limit. Here's how you might increase this limit when running tests: -``` +```bash npm2yarn DEBUG_PRINT_LIMIT=10000 npm test ``` @@ -40,10 +40,24 @@ This works on macOS/Linux, you'll need to do something else for Windows. If you'd like a solution that works for both, see [`cross-env`](https://www.npmjs.com/package/cross-env). +**Note**: The output of the DOM is colorized by default if your tests are +running in a node environment. However, you may sometimes want to turn off +colors, such as in cases where the output is written to a log file for debugging +purposes. You can use the environment variable `COLORS` to explicitly force the +colorization off or on. For example: + +```bash npm2yarn +COLORS=false npm test +``` + +This works on macOS/Linux, you'll need to do something else for Windows. If +you'd like a solution that works for both, see +[`cross-env`](https://www.npmjs.com/package/cross-env). + ## `prettyDOM` Built on top of -[`pretty-format`](https://github.com/facebook/jest/tree/master/packages/pretty-format), +[`pretty-format`](https://github.com/jestjs/jest/tree/main/packages/pretty-format), this helper function can be used to print out readable representation of the DOM tree of a node. This can be helpful for instance when debugging tests. @@ -65,7 +79,7 @@ It receives the root node to print out, an optional extra parameter to limit the size of the resulting string, for cases when it becomes too large. It has a last parameter which allows you to configure your formatting. In addition to the options listed you can also pass the -[options](https://github.com/facebook/jest/tree/master/packages/pretty-format#usage-with-options) +[options](https://github.com/jestjs/jest/tree/main/packages/pretty-format#usage-with-options) of `pretty-format`. By default, ` - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/static/img/users/ifood.png b/static/img/users/ifood.png index ffcd582fd..b1c8531e9 100644 Binary files a/static/img/users/ifood.png and b/static/img/users/ifood.png differ diff --git a/static/img/users/infojobs.svg b/static/img/users/infojobs.svg index 7109d42f2..aa7b8bed8 100644 --- a/static/img/users/infojobs.svg +++ b/static/img/users/infojobs.svg @@ -1,57 +1 @@ - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/static/img/users/sui.svg b/static/img/users/sui.svg index db9848d9b..46ab850d1 100644 --- a/static/img/users/sui.svg +++ b/static/img/users/sui.svg @@ -1,11 +1 @@ - - - - - - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/static/img/users/sunhat.svg b/static/img/users/sunhat.svg new file mode 100644 index 000000000..c7fa7a91a --- /dev/null +++ b/static/img/users/sunhat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/users/zup.png b/static/img/users/zup.png index 34b85d6bf..132b5a235 100644 Binary files a/static/img/users/zup.png and b/static/img/users/zup.png differ