Застрял в домашнем задании проверки кармы (nodejs, angularjs)

0

У меня есть домашняя работа со стеком MEAN, в котором необходимо изменить 2 файла, чтобы пройти тест кармы. Этими двумя файлами являются search_bar.html и функции в controller.js. Идея состоит в том, чтобы передать файл test.js.

Звучит достаточно просто, но я не могу ради любви своей жизни сделать это. Я читал задание снова и снова, и это то, что я получил:

search_bar.html:

<div class="search-bar-wrapper">
    <input class="search-bar-input" ng-model="searchText" ng-change="update()"/>
</div>

<div ng-repeat="product in productsList" class="autocomplete-result">
    {{product}}
</div>

Controller.js:

exports.SearchBarController = function($scope, $http) {
    // TODO: this function should make an HTTP request to
    // '/api/v1/product/text/:searchText' and expose the response's
    // 'products' property as 'results' to the scope.
    $scope.update = function() {
        $http.
            get('/api/v1/product/text/' + $scope.searchText).
                success(function(data) {
                    $scope.productsList = data;
                }
            );
    };

Цель домашней работы заключается в следующем:

  • Вам нужно будет изменить SearchBarController в controllers.js, чтобы заполнить функцию update(), которая сделает HTTP-запрос на сервер и выведет ответ сервера на ваш HTML.

  • Вам нужно будет изменить HTML в templates/search_bar.html, чтобы добавить поле ввода с классом "поиск-бар-ввод", который имеет двустороннюю привязку данных к переменной searchText и вызывает функцию update() с помощью ngChange директивы. Вам также нужно будет ngRepeat элемента div с помощью "autocomplete-result" класса для каждого результата поиска.

Я считаю, что мой текущий код делает именно это, но, видимо, это неправильно. Я давно застрял здесь, и я не вижу, что случилось.

Может кто-нибудь помочь?

================================================== =============

Дополнительная информация:

Если вам любопытно или хочется делать доброе дело дня (я надеюсь, что вы это делаете), вот дополнительная информация о домашнем задании, а также файл с zip:

В этом упражнении вы реализуете домашний вид для розничного приложения MEAN, первое представление, которое пользователь увидит при посещении вашего сайта. В представлении содержится одна панель поиска, которая ищет продукты по тексту, то есть с использованием конечной точки API-интерфейса REST API/api/v1/product/text/: query.

В первую очередь вы будете заботиться о написании кода, который проходит тесты мокки, указанные в файле test.js. Вам не нужно фактически запускать свой код в браузере, вместо этого вы будете использовать gulp и karma для запуска ваших тестов. Тесты intest.js предоставят вам более быструю обратную связь, а также предоставят вам точную спецификацию того, что вам нужно сделать, чтобы завершить это упражнение.

Чтобы запустить тесты, вам необходимо:

  • Запустите npm install в предоставленном примере кода
  • Запустите gulp, используя. /node_modules/gulp/bin/gulp watch
  • Начало кармы с использованием. /node_modules/karma/bin/karma start./karma.local.conf.js
  • Вы должны взглянуть на тесты в test.js, чтобы увидеть, что именно должен делать ваш код AngularJS.

  • Измените controllers.js и templates/search_bar.html, как описано ниже, пока тесты не пройдут, и карма даст вам следующий результат:

    LOG: "Испытания преуспели! Скопируйте/вставьте приведенный ниже код, чтобы выполнить это задание: 'LOG:' 'Chrome 43.0.2357 (Linux): Выполнено 4 из 4 УСПЕХ (0.21 secs/0.126 secs)

  • 0
    Если вы хотите помочь исправить ошибочные тесты, вы также должны показать тесты :)
  • 0
    Тестовый файл довольно большой, я скоро найду способ его опубликовать!
Показать ещё 4 комментария
Теги:
mean-stack
karma-runner

2 ответа

0
Лучший ответ

Хотя ответ, предоставленный HankScorpio, направил меня в правильном направлении, он не был полным и оставил некоторые объяснения.

Единственное, что действительно помогло мне (так как я новичок в этом) было тщательно проверять сами тесты с кармой, в частности:

it('makes an HTTP request to '/api/v1/product/text/test' and exposes results to scope', function(done) {
    httpBackend.expectGET('/api/v1/product/text/test').respond({
      products: [{ name: 'test1' }, { name: 'test2' }]
    });

    scope.$on('SearchBarController', function() {
      element.find('input').val('test');
      element.find('input').trigger('input');
      assert.equal(scope.searchText, 'test');

      httpBackend.flush();
      assert.equal(scope.results.length, 2);
      assert.equal(scope.results[0].name, 'test1');
      assert.equal(scope.results[1].name, 'test2');

      ++succeeded;
      done();
    });
  });

Здесь я вижу, что на деле мне нужны переменные scope.results и product.name а также что в контроллере у меня должны быть data.products.

Как подозревали, я был близок, но имена переменных меня отбрасывали. Спасибо за помощь!

Поделиться
2
  1. "делает HTTP-запрос /api/v1/product/text/test и выводит результаты в область видимости"

$scope.productsList = data; должен быть $scope.results = data; (обязательно прочитайте вопрос, ваш инструктор или тот, кто написал, что комментарий TODO сказал вам назвать его results, а не productsList), и, конечно же, в любом другом месте, где вы ссылаетесь на productsList следует также изменить results.

  1. "отображает результаты автозаполнения в формате HTML"

{{product}} должен быть {{product.name}}

Поделиться
  • 0
    Близко, но не сигара! Тем не менее, ваши усилия направили меня. Щедрость ваша, как заслуженная!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню