How to determine type when an Ember Array is passed in?

I would really like for my component to work with strings, arrays and Ember Arrays. But I run into a problem when the type is Ember Array.

The problem is with this line: let local = typeof input === ‘string’ ? [input] : input; So, how do I test for types?

Promise rejected during “it handles a trail as an Ember Array”: Assertion Failed: Cannot call meta on string@ 23 ms Source: Error: Assertion Failed: Cannot call meta on string

component

  // split up crumb by -, _, and space; discard empties.
  // Capitalize the first letter and each letter preceded by a space.
  // Glue the bits with spaces.
  transformPath(input) {
    if (!input) return '';

    let local = typeof input === 'string' ? [input] : input;

    const transformedSegments = local.map((crumb) => {
      crumb = this.stripOutAllHexSections(crumb);
      crumb = this.addSpaceBetweenAdjacentWords(crumb);
      return crumb
        .split(/[-_ ]/)
        .filter(Boolean)
        .map((word) => this.capitalizeFirstLetter(word))
        .join(' ');
    });
    return transformedSegments.join(' > ');
  }

  get breadCrumb() {
    return this.transformPath(this.args.model);
  }

  <template>
    <div
      class='w-full bg-slate-200 pb-[.3rem] pl-3 text-blue-900 font-semibold text-lg'
      ...attributes
    >{{this.breadCrumb}}</div>
  </template>
}

Intended tests

  test('it handles a specific path with hex section (3)', async function (assert) {
    // Render the component with the specific path
    const crumbs = [
      'some path',
      'someOtherPath-0123456789abcdefFEDCBA9876543210',
    ];
    await render(<template><BreadCrumb @model={{crumbs}} /></template>);

    // Check that the breadcrumb is correctly formatted
    assert.dom(this.element).hasText('Some Path > Some Other Path');
  });

  test('it handles a trail as a string', async function (assert) {
    // Render the component with a URL without a leading /
    const crumb = 'invoicing';
    await render(<template><BreadCrumb @model={{crumb}} /></template>);

    // Check that the breadcrumb is correctly formatted
    assert.dom(this.element).hasText('Invoicing');
  });

  test('it handles a trail as an Ember Array', async function (assert) {
    // Render the component with a URL without a leading /
    const crumb = A('invoicing');
    await render(<template><BreadCrumb @model={{crumb}} /></template>);

    // Check that the breadcrumb is correctly formatted
    assert.dom(this.element).hasText('Invoicing');
  });

3 posts - 2 participants

Read full topic