Как проверить вложенный роутер? (СТАРЫЙ: Как проверить элементы <select>с PageLoader?) - PullRequest
Новая
       15

Как проверить вложенный роутер? (СТАРЫЙ: Как проверить элементы <select>с PageLoader?)

0 голосов
/ 03 мая 2019

Я пытаюсь протестировать приложение, которое перемещается по маршрутизатору каждый раз, когда пользователь меняет значение элемента <select>.Я использовал [ngModel] и (ngModelChange) для элемента, чтобы поймать выбранное значение.

Я пытался использовать click() для <option> PageLoaderElement, но безрезультатно.

lib / src / line / lines_component.html: 

<h2>Lines</h2>
<div *ngIf="lines?.isNotEmpty">
  Select line:
  <select [ngModel]="selectedLine" (ngModelChange)="changeLine($event)">
    <option disabled selected [ngValue]="nullLine"> -- select an option -- </option>
    <option *ngFor="let line of lines" [ngValue]="line">{{line.name}}</option>
  </select>
</div>
<div *ngIf="lines?.isEmpty">
  No lines available!
</div>
<router-outlet [routes]="Routes.all"></router-outlet>

lib / src / line / lines_component.dart: 

Future<NavigationResult> changeLine(Line line) =>
      _router.navigate(_lineUrl(line.id));

test / lines_po.dart: 

@ByTagName('option')
List<PageLoaderElement> get _lines;

Future<void> selectLine(var target) async {
  final lineOpt =
      _lines.firstWhere((line) => line.visibleText == target.name);
  await lineOpt.click();
}

test / lines.dart: 

void selectedLineTests(InjectorProbe injector) {
  final targetLine = Line(0, 'Line 0'); // id = 0, name = 'Line 0'

  setUp(() async {
    await po.selectLine(targetLine);
    await fixture.update();
  });

  test('has navigated to detail', () async {
    final mockLocation = injector.get<MockPlatformLocation>(PlatformLocation);
    expect(
        mockLocation.pathname,
        RoutePaths.line
            .toUrl(parameters: {idParam: '${targetLine.id}'}).toString()); // '/lines/0'
  });
}

Результаты теста (из консоли в браузере): 

Expected: '/lines/0'
    Actual: ''
     Which: is different. Both strings start the same, but the actual value is missing the following trailing characters: /lines/0

ОБНОВЛЕНИЕ :

Кажется, проблема связана с маршрутизатором, а не сэлемент click() на <option>.Я следовал руководству на сайте Webdev Dartlang .

Изменение кода для печати результата навигации: 

void _selectLine(int id) async {
  var res = await _router.navigate(_lineUrl(id));
  print(res);
}

Во время теста он печатает: NavigationResult.INVALID_ROUTE.

Я не знаю, помогает ли это, но мои маршруты организованы так:

lib / src / route_paths.dart: 

import 'package:angular_router/angular_router.dart';

const idParam = 'id';

class RoutePaths {
  static final lines = RoutePath(path: 'lines');
}

lib / src / rout.dart: 

import 'not_found_component.template.dart' as not_found_template;
import 'line/lines_component.template.dart' as lines_template;

import 'route_paths.dart';
export 'route_paths.dart';

class Routes {
  static final lines = RouteDefinition(
    routePath: RoutePaths.lines,
    component: lines_template.LinesComponentNgFactory,
  );

  static final all = <RouteDefinition>[
    lines,
    RouteDefinition.redirect(
      path: '',
      redirectTo: RoutePaths.lines.toUrl(),
    ),
    RouteDefinition(
      path: '.+',
      component: not_found_template.NotFoundComponentNgFactory,
    ),
  ];
}

lib / src / line / route_paths.dart: 

import 'package:angular_router/angular_router.dart';

import '../route_paths.dart' as _parent;
export '../route_paths.dart' show idParam;

class RoutePaths {
  static final line = RoutePath(
    path: ':${_parent.idParam}',
    parent: _parent.RoutePaths.lines,
  );
}

lib / src / line / rout.dart: 

import 'package:angular_router/angular_router.dart';

import 'line_component.template.dart' as line_template;

import 'route_paths.dart';
export 'route_paths.dart';

class Routes {
  static final line = RouteDefinition(
    routePath: RoutePaths.line,
    component: line_template.LineComponentNgFactory,
  );

  static final all = <RouteDefinition>[
    line,
  ];
}

1 Ответ

0 голосов
/ 04 мая 2019

Мне пришлось импортировать родительский класс Routes, чтобы тест работал:

тест / дротик 

import 'package:frontend/src/line/routes.dart';
import 'package:frontend/src/routes.dart' as parent_routes;

[...]

@Component(
  selector: 'test',
  template: '''
    <my-lines></my-lines>
    <router-outlet [routes]="[parent_routes.Routes.lines]"></router-outlet>
  ''',
  directives: [RouterOutlet, LinesComponent],
  exports: [parent_routes.Routes],
)
class TestComponent {
  final Router router;

  TestComponent(this.router);
}

Я не знаю, является ли это правильным способом сделать это. Комментарии приветствуются !!!

...