Как обрезать пробелы при динамической установке идентификатора автоматизации данных

Question

Я делаю простой виджет выбора времени в Angular, чтобы сравнить нашу текущую производительность с предыдущей. Мой виджет содержит два списка dropdown и несколько кнопок и полей ввода (забудьте о кнопках и полях ввода). Мой вопрос касается тестирования этих выпадающих. Вот мой код:

timeselector.component. html

<select data-automation-id="timeselection-mode-primary">
  <option *ngFor="let mode of modes" [attr.data-automation-id]="'options_' + mode">
    {{ mode }}
  </option>
</select>

<!--some input fields and toggle button goes here-->

<select data-automation-id="timeselection-mode-secondary">
  <option *ngFor="let mode of modes" [attr.data-automation-id]="'previous_options_' + mode">
    Previous {{ mode }}
  </option>
</select>

И оба они читают modes из одного и того же массива в моей машинописи:

timeselector.component.ts

modes=['Calendar year', 'Year-to-date', 'Quarter', 'Monthly Pipe', 'Weekly Sprint']

Моя проблема в том, что Calendar year, Monthly Pipe и Weekly Sprint имеют пробелы. Таким образом, мой data-automation-id будет выглядеть следующим образом:

options_Calendar year, options_Monthly Pipe, options_Weekly Sprint.

Чтобы решить эту проблему, я ввел index значений для каждого опция, подобная этой:

<option *ngFor="let mode of modes; let i=index"
                [attr.data-automation-id]="'options_' +i">

и

<option *ngFor="let mode of modes; let i=index"
                [attr.data-automation-id]="'previous_options_' +i">

Это также работает. Но мой технический лидер не очень доволен этим индексным подходом. Она хочет, чтобы я использовал только mode. Она сказала мне использовать truncate, trim или любое другое существующее решение, но без индексов.

Я знаю, как использовать такие методы, как truncate, trim, subString. Но я не могу понять, как это сделать во время выполнения с помощью data-автоматизации-id. Я пробовал некоторые другие решения, но не работал. Пожалуйста, помогите мне.

Виджет выглядит так:

Answer 1

Если вы хотите удалить пробел между строкой, вы можете передать строку в функцию и получить ее split (с пробелом) и join (с да sh -), как,

  getModifiedText(mode){
    const splitMode = mode.split(' ');
    const joinMode = splitMode.join('-')
    return joinMode;
  }

Поэтому измените файлы, например,

component. html:

<select data-automation-id="timeselection-mode-primary">
  <option *ngFor="let mode of modes;" [attr.data-automation-id]="'options_'+ getModifiedText(mode)">
      {{ mode }}
  </option>
</select>

component.ts :

  getModifiedText(mode){
    const splitMode = mode.split(' ');
    const joinMode = splitMode.join('-')
    return joinMode;
  }

Я дал splitMode.join('-'), вы можете изменить эту часть в соответствии с вашими потребностями .. Например: splitMode.join('_') ..

И работает Stackblitz здесь ...

Answer 2

Как насчет делегирования генерации data-automation-id части контроллера (файл TS), а не шаблону (HTML)?

Скажем timeselector.component.ts вместо

modes=['Calendar year', 'Year-to-date', 'Quarter', 'Monthly Pipe', 'Weekly Sprint']

вместо этого есть:

modes = {
  name: 'Calendar year',
  id: 'options_calendar_year',
  ...
}

, тогда в timeselector.component.html вы можете иметь:

<select data-automation-id="timeselection-mode-primary">
  <option *ngFor="let mode of modes" [attr.data-automation-id]="mode.id">
    {{ mode.name }}
  </option>
</select>