diff --git a/README.md b/README.md index 0014e8e..5674c3a 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,12 @@ The current API methods that can be used are as follows: - fillByLabel - selectByLabelAndOption - selectOptionInRadioGroup +- getByTextWithHtml +- getAllByTextWithHtml +- queryByTextWithHtml +- queryAllByTextWithHtml +- findByTextWithHtml +- findAllByTextWithHtml Please note that Ember Testing Library does not include the userEvent package, and that you should therefore use Ember built-in test helpers to interact with components and/or DOM nodes in integration/acceptance tests. diff --git a/addon/index.js b/addon/index.js index 4e7df4e..2131d06 100644 --- a/addon/index.js +++ b/addon/index.js @@ -118,3 +118,97 @@ export function selectOptionInRadioGroup(label, option, options) { const element = withinTL(parent).getByRole('radio', { name: option }); return click(element); } + +function _cleanHtml(html) { + return html.replace('', '').trim(); +} + +/** + * Return an HTML element matching the string containing HTML passed as param + * + * @param {string} string containing HTML to look for in the DOM. + * @param {*} options Testing library getByText options. + * @returns HTMLElement. + */ +export function getByTextWithHtml(html) { + const matcherFunction = (_, element) => { + return _cleanHtml(element.innerHTML) === html; + }; + const { getByText } = getScreen(); + return getByText(matcherFunction); +} + +/** + * Return an array of HTML element matching the string containing HTML passed as param + * + * @param {string} string containing HTML to look for in the DOM. + * @param {*} options Testing library getByText options. + * @returns Array. + */ +export function getAllByTextWithHtml(html) { + const matcherFunction = (_, element) => { + return _cleanHtml(element.innerHTML) === html; + }; + const { getAllByText } = getScreen(); + return getAllByText(matcherFunction); +} + +/** + * Return HTML element matching the string containing HTML passed as param or nothing + * + * @param {string} string containing HTML to look for in the DOM. + * @param {*} options Testing library getByText options. + * @returns HTMLElement. + */ +export function queryByTextWithHtml(html) { + const matcherFunction = (_, element) => { + return _cleanHtml(element.innerHTML) === html; + }; + const { queryByText } = getScreen(); + return queryByText(matcherFunction); +} + +/** + * Return an array of HTML element matching the string containing HTML passed as param or nothing + * + * @param {string} string containing HTML to look for in the DOM. + * @param {*} options Testing library getByText options. + * @returns Array. + */ +export function queryAllByTextWithHtml(html) { + const matcherFunction = (_, element) => { + return _cleanHtml(element.innerHTML) === html; + }; + const { queryAllByText } = getScreen(); + return queryAllByText(matcherFunction); +} + +/** + * Return a Promise of HTML element matching the string containing HTML passed as param + * + * @param {string} string containing HTML to look for in the DOM. + * @param {*} options Testing library getByText options. + * @returns Promise(HTMLElement). + */ +export function findByTextWithHtml(html) { + const matcherFunction = (_, element) => { + return _cleanHtml(element.innerHTML) === html; + }; + const { findByText } = getScreen(); + return findByText(matcherFunction); +} + +/** + * Return a Promise of HTML element array matching the string containing HTML passed as param + * + * @param {string} string containing HTML to look for in the DOM. + * @param {*} options Testing library getByText options. + * @returns Promise(Array). + */ +export function findAllByTextWithHtml(html) { + const matcherFunction = (_, element) => { + return _cleanHtml(element.innerHTML) === html; + }; + const { findAllByText } = getScreen(); + return findAllByText(matcherFunction); +} diff --git a/tests/integration/index_test.js b/tests/integration/index_test.js index 9f40ec5..c2ff1f4 100644 --- a/tests/integration/index_test.js +++ b/tests/integration/index_test.js @@ -1,9 +1,17 @@ -import { render } from '@1024pix/ember-testing-library'; +import { + render, + getByTextWithHtml, + getAllByTextWithHtml, + queryByTextWithHtml, + queryAllByTextWithHtml, + findByTextWithHtml, + findAllByTextWithHtml, +} from '@1024pix/ember-testing-library'; import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; import { hbs } from 'ember-cli-htmlbars'; -module('Integration | testing-library', function (hooks) { +module.only('Integration | testing-library', function (hooks) { setupRenderingTest(hooks); module('#render', function () { @@ -12,4 +20,158 @@ module('Integration | testing-library', function (hooks) { assert.ok(screen.getByText('Hello')); }); }); + + module('#getByTextWithHtml', function () { + test('should return element which contain string with html in it', async function (assert) { + await render(hbs`
+ Le niveau 7 est enfin disponible ! Vous pouvez en apprendre plus via cette actualité. +{{!----}} +
`); + + assert.ok( + getByTextWithHtml( + 'Le niveau 7 est enfin disponible ! Vous pouvez en apprendre plus via cette actualité.', + ), + ); + }); + + test('should throw an error', async function (assert) { + await render(hbs`
+ Le niveau 7 est enfin disponible ! Vous pouvez en apprendre plus via cette actualité. +{{!----}} +
`); + + try { + getByTextWithHtml( + `Cette chaîne n'est pas présente ! Vous pouvez en apprendre plus via cette actualité.`, + ); + } catch (err) { + assert.ok(err); + } + }); + }); + + module('#getAllByTextWithHtml', function () { + test('should return an array of element which contain string with html in it', async function (assert) { + await render(hbs``); + + const result = getAllByTextWithHtml('Membre voir profil'); + assert.equal(result.length, 2); + }); + + test('should throw an error', async function (assert) { + await render(hbs``); + + try { + getAllByTextWithHtml('Admin voir profil'); + } catch (err) { + assert.ok(err); + } + }); + }); + + module('#queryByTextWithHtml', function () { + test('should return element which contain string with html in it', async function (assert) { + await render(hbs``); + + assert.ok(queryByTextWithHtml('Admin voir profil')); + }); + + test('should return null if element is not present', async function (assert) { + await render(hbs``); + + const result = queryByTextWithHtml('Admin voir profil'); + assert.equal(result, null); + }); + }); + + module('#queryAllByTextWithHtml', function () { + test('should return element which contain string with html in it', async function (assert) { + await render(hbs``); + + assert.ok(queryAllByTextWithHtml('Membre voir profil')); + }); + + test('should return null if elements are not present', async function (assert) { + await render(hbs``); + + const result = queryAllByTextWithHtml( + 'Admin voir profil', + ); + assert.equal(result.length, 0); + }); + }); + + module('#findByTextWithHtml', function () { + test('should return element which contain string with html in it', async function (assert) { + await render(hbs``); + + assert.ok(await findByTextWithHtml('Admin voir profil')); + }); + + test('should return null if element is not present', async function (assert) { + await render(hbs``); + + try { + await findByTextWithHtml('Admin voir profil'); + } catch (err) { + assert.ok(err); + } + }); + }); + + module('#findAllByTextWithHtml', function () { + test('should return element which contain string with html in it', async function (assert) { + await render(hbs``); + const result = await findAllByTextWithHtml( + 'Membre voir profil', + ); + assert.equal(result.length, 2); + }); + + test('should return null if element is not present', async function (assert) { + await render(hbs``); + + try { + await findAllByTextWithHtml('Admin voir profil'); + } catch (err) { + assert.ok(err); + } + }); + }); });