Skip to content

Commit

Permalink
fat(getter): add methods to search elements by text including html
Browse files Browse the repository at this point in the history
  • Loading branch information
@frinyvonnick
frinyvonnick committed Sep 12, 2023
1 parent 76b8eb0 commit 718cd40
Show file tree
Hide file tree
Showing 3 changed files with 264 additions and 2 deletions.
6 changes: 6 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
94 changes: 94 additions & 0 deletions addon/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<HTMLElement>.
*/
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<HTMLElement>.
*/
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<HTMLElement>).
*/
export function findAllByTextWithHtml(html) {
const matcherFunction = (_, element) => {
return _cleanHtml(element.innerHTML) === html;
};
const { findAllByText } = getScreen();
return findAllByText(matcherFunction);
}
166 changes: 164 additions & 2 deletions tests/integration/index_test.js
View file
Original file line number Diff line number Diff line change
@@ -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 () {
Expand All @@ -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`<div>
Le niveau 7 est enfin disponible ! Vous pouvez en apprendre plus via <a href="https://pix.fr/actualites/decouvrez-le-niveau-7-des-maintenant-sur-pix" class="link" target="_blank" rel="noopener noreferrer">cette actualité</a>.
{{!----}}
</div>`);

assert.ok(
getByTextWithHtml(
'Le niveau 7 est enfin disponible ! Vous pouvez en apprendre plus via <a href="https://pix.fr/actualites/decouvrez-le-niveau-7-des-maintenant-sur-pix" class="link" target="_blank" rel="noopener noreferrer">cette actualité</a>.',
),
);
});

test('should throw an error', async function (assert) {
await render(hbs`<div>
Le niveau 7 est enfin disponible ! Vous pouvez en apprendre plus via <a href="https://pix.fr/actualites/decouvrez-le-niveau-7-des-maintenant-sur-pix" class="link" target="_blank" rel="noopener noreferrer">cette actualité</a>.
{{!----}}
</div>`);

try {
getByTextWithHtml(
`Cette chaîne n'est pas présente ! Vous pouvez en apprendre plus via <a href="https://pix.fr/actualites/decouvrez-le-niveau-7-des-maintenant-sur-pix" class="link" target="_blank" rel="noopener noreferrer">cette actualité</a>.`,
);
} 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`<ul>
<li>Membre <a href="#">voir profil</a></li>
<li>Membre <a href="#">voir profil</a></li>
<li>Admin <a href="#">voir profil</a></li>
</ul>`);

const result = getAllByTextWithHtml('Membre <a href="#">voir profil</a>');
assert.equal(result.length, 2);
});

test('should throw an error', async function (assert) {
await render(hbs`<ul>
<li>Membre <a href="#">voir profil</a></li>
<li>Membre <a href="#">voir profil</a></li>
</ul>`);

try {
getAllByTextWithHtml('Admin <a href="#">voir profil</a>');
} 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`<ul>
<li>Membre <a href="#">voir profil</a></li>
<li>Membre <a href="#">voir profil</a></li>
<li>Admin <a href="#">voir profil</a></li>
</ul>`);

assert.ok(queryByTextWithHtml('Admin <a href="#">voir profil</a>'));
});

test('should return null if element is not present', async function (assert) {
await render(hbs`<ul>
<li>Membre <a href="#">voir profil</a></li>
<li>Membre <a href="#">voir profil</a></li>
</ul>`);

const result = queryByTextWithHtml('Admin <a href="#">voir profil</a>');
assert.equal(result, null);
});
});

module('#queryAllByTextWithHtml', function () {
test('should return element which contain string with html in it', async function (assert) {
await render(hbs`<ul>
<li>Membre <a href="#">voir profil</a></li>
<li>Membre <a href="#">voir profil</a></li>
<li>Admin <a href="#">voir profil</a></li>
</ul>`);

assert.ok(queryAllByTextWithHtml('Membre <a href="#">voir profil</a>'));
});

test('should return null if elements are not present', async function (assert) {
await render(hbs`<ul>
<li>Membre <a href="#">voir profil</a></li>
<li>Membre <a href="#">voir profil</a></li>
</ul>`);

const result = queryAllByTextWithHtml(
'Admin <a href="#">voir profil</a>',
);
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`<ul>
<li>Membre <a href="#">voir profil</a></li>
<li>Membre <a href="#">voir profil</a></li>
<li>Admin <a href="#">voir profil</a></li>
</ul>`);

assert.ok(await findByTextWithHtml('Admin <a href="#">voir profil</a>'));
});

test('should return null if element is not present', async function (assert) {
await render(hbs`<ul>
<li>Membre <a href="#">voir profil</a></li>
<li>Membre <a href="#">voir profil</a></li>
</ul>`);

try {
await findByTextWithHtml('Admin <a href="#">voir profil</a>');
} 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`<ul>
<li>Membre <a href="#">voir profil</a></li>
<li>Membre <a href="#">voir profil</a></li>
<li>Admin <a href="#">voir profil</a></li>
</ul>`);
const result = await findAllByTextWithHtml(
'Membre <a href="#">voir profil</a>',
);
assert.equal(result.length, 2);
});

test('should return null if element is not present', async function (assert) {
await render(hbs`<ul>
<li>Membre <a href="#">voir profil</a></li>
<li>Membre <a href="#">voir profil</a></li>
</ul>`);

try {
await findAllByTextWithHtml('Admin <a href="#">voir profil</a>');
} catch (err) {
assert.ok(err);
}
});
});
});

0 comments on commit 718cd40

Please sign in to comment.