feat(number matcher): Matcher can be a number

Number matchers behave the same as if number.toString() were used as the matcher. Eg 8 and '8' will return the same matcher results.
ngneat · Dec 22, 2021 · 0657886 · 0657886
1 parent 8a2a34b
commit 0657886
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 4 deletions.
diff --git a/projects/spectator/jest/test/dom-selectors/dom-selectors.component.spec.ts b/projects/spectator/jest/test/dom-selectors/dom-selectors.component.spec.ts
@@ -111,6 +111,20 @@ describe('DomSelectorsComponent', () => {
  });
  });
 
+ describe('with number matcher', () => {
+ it('should match number content', () => {
+ let element = spectator.query(byTextContent(8, { selector: '#number-content-root *' }));
+ expect(element).toHaveId('number-content-only-eight');
+ });
+
+ it('should partially match number with `exact: false`', () => {
+ let elements = spectator.queryAll(byTextContent(8, { selector: '#number-content-root *', exact: false }));
+ expect(elements).toHaveLength(2);
+ expect(elements[0]).toHaveId('number-content-with-eight');
+ expect(elements[1]).toHaveId('number-content-only-eight');
+ });
+ });
+
  describe('with RegExp matcher', () => {
  it('should match the text', () => {
  const element = spectator.query(byTextContent(/^some deeply NESTED TEXT$/, { selector: '#text-content-root' }));
@@ -143,5 +157,6 @@ describe('DomSelectorsComponent', () => {
  expect(element).toHaveId('text-content-span-2');
  });
  });
+
  });
 });
diff --git a/projects/spectator/src/lib/dom-selectors.ts b/projects/spectator/src/lib/dom-selectors.ts
@@ -33,24 +33,23 @@ export const byTextContent = (matcher: Matcher, options: MandatorySelectorMatchi
  const normalizer: NormalizerFn = options?.normalizer || getDefaultNormalizer(options);
  const getTextContent = (elem: Element | null): string => normalizer(elem?.textContent ?? '');
 
- if (typeof matcher === 'string') {
+ if (typeof matcher === 'string' || typeof matcher === 'number') {
  textContentMatcher = (_, elem) => {
  if (options?.exact === false) {
  return (
  getTextContent(elem)
  .toLowerCase()
- .indexOf(matcher.toLowerCase()) >= 0
+ .indexOf(matcher.toString().toLowerCase()) >= 0
  );
  }
 
- return getTextContent(elem) === matcher;
+ return getTextContent(elem) === matcher.toString();
  };
  } else if (matcher instanceof RegExp) {
  textContentMatcher = (_, elem) => matcher.test(getTextContent(elem));
  } else if (typeof matcher === 'function') {
  textContentMatcher = (_, elem) => matcher(getTextContent(elem), elem);
  } else {
- // number Matcher not supported
  throw new Error(`Matcher type not supported: ${typeof matcher}`);
  }
 

diff --git a/projects/spectator/test/dom-selectors/dom-selectors.component.spec.ts b/projects/spectator/test/dom-selectors/dom-selectors.component.spec.ts
@@ -112,6 +112,20 @@ describe('DomSelectorsComponent', () => {
  });
  });
 
+ describe('with number matcher', () => {
+ it('should match number content', () => {
+ let element = spectator.query(byTextContent(8, { selector: '#number-content-root *' }));
+ expect(element).toHaveId('number-content-only-eight');
+ });
+
+ it('should partially match number with `exact: false`', () => {
+ let elements = spectator.queryAll(byTextContent(8, { selector: '#number-content-root *', exact: false }));
+ expect(elements).toHaveLength(2);
+ expect(elements[0]).toHaveId('number-content-with-eight');
+ expect(elements[1]).toHaveId('number-content-only-eight');
+ });
+ });
+
  describe('with RegExp matcher', () => {
  it('should match the text', () => {
  const element = spectator.query(byTextContent(/^some deeply NESTED TEXT$/, { selector: '#text-content-root' }));

diff --git a/projects/spectator/test/dom-selectors/dom-selectors.component.ts b/projects/spectator/test/dom-selectors/dom-selectors.component.ts
@@ -25,6 +25,11 @@ import { Component } from '@angular/core';
  </span>
  </div>
 
+ <div id="number-content-root">
+ <span id="number-content-with-eight"> to prevent #number-content-root having textContent: 8 </span>
+ <span id="number-content-only-eight">8</span>
+ </div>
+
  <div id="aria-checkboxes">
  <section>
  <button role="checkbox" aria-checked="true">Sugar</button>