2015-06-05 6 views
7

Я пытаюсь добавить модульное тестирование для JavaScript на свой веб-сайт. Я использую VS2013, и мой проект является веб-сайтом ASP.NET.Как создать тесты QUnit со ссылкой на другой класс?

На основе рекомендаций (http://www.rhyous.com/2013/02/20/creating-a-qunit-test-project-in-visual-studio-2010/) я сделал до сих пор:

  1. Создано новое приложение ASP.NET
  2. Imported QUnit (с использованием NuGet)
  3. В "Сценарии" добавлены ссылки на js- файл на моем исходном веб-сайте (файлы PlayerSkill.js - содержит классы PlayerSkill и trainings.js - содержит Trainer и некоторые другие классы)
  4. Создана новая папка «TestScripts»
  5. Added TrainingTests.js файл
  6. Написал простой тест:

    test("Trainer should have non-empty group", function() { 
        var group = "group"; 
        var trainer = new Trainer(123, "Name123", group, 123); 
        EQUAL(trainer.getTrainerGroup(), group); 
    }); 
    

Примечание: мой файл trainings.js среди прочего содержит

function Trainer(id, name, group, level) { 
    ... 
    var _group = group; 
    this.getTrainerGroup = function() { return _group ; } 
}; 

Когда я исполню мой тест я вижу ошибку: Тренер не определен ,

Похоже, что ссылка на мой класс не признана. Мне кажется, что связать файл недостаточно, но что я пропустил?

Пожалуйста, помогите добавить ссылку на исходный файл с помощью теста класса и пробега.

спасибо.

P.S. Вопрос 2: Могу ли я добавить ссылку на 2 файла (мой модульный тест потребует еще одного класса, который находится в другом файле)? Как?

ответ

4

Вы должны добавить всю необходимую логику вашего приложения в файл модульного тестирования, так что все они выполняют , прежде чем вы запускаете тесты

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>QUnit Test Results</title> 
     <link rel="stylesheet" href="/Content/qunit.css"> 
    </head> 
    <body> 
     <div id="qunit"></div> 
     <div id="qunit-fixture"></div> 
     <script src="/Scripts/qunit.js"></script> 
     <script src="/Scripts/PlayerSkill.js"></script> 
     <script src="/Scripts/trainings.js"></script> 
     <script src="/TestScripts/TrainingTests.js"></script> 
    </body> 
</html> 

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

Если вы действительно хотите их использовать, вы должны позволить Visual Studio intellisense разрешить физический путь файла, подобного этому.

  1. Тип сценария тег <script src=""></script>
  2. Поместите курсор внутри кавычек в атрибуте SRC и нажмите CTRL + SPACE
  3. Поиск файлов и пусть вычисленный путь нетронутую
  4. Если ваше местоположение проекта изменений необходимо обновить связанные файлы, а также ссылки на сценарии.

{Edit1}

Решение 2:

Вы также можете использовать контроллер MVC и Razor View, чтобы создать свою страницу модульного тестирования и связанные файлы будут работать, как ожидается, с единственным что у вас будет дополнительный контроллер в вашем проекте, но это совсем не плохо, если вы хотите протестировать загрузку контента с помощью ajax, который по умолчанию заблокирован браузером, если они запущены из локального файла.

Решение 3:

Вы также можете настроить новый проект MVC просто для яваскрипта модульного тестирования так же, как вы обычно настроить новый проект для любого кода на стороне сервера, и это поможет предотвратить ваше тестирование, чтобы мешать вашему код продукции

{Edit 2}

Решение 4:

в рамках яваскрипта экосистемы можно использовать хрюкать или глотка для автоматизации копия ваших сценариев из любого места в ваш проект перед запуском тестов. Вы можете написать gulpfile.js как этот

var sourcefiles = [/*you project file paths*/]; 
gulp.task('default', function() { 
    return gulp.src(sourcefiles).pipe(gulp.dest('Scripts')); 
}); 

А затем запустить его открытия консоли и выполнив команду gulp или gulp default

+0

Относительно 1-й части комментария: нажатие Ctrl + Пробел в "" не помогает: VS не позволяет выбрать файл с текущего веб-сайта. – Budda

+0

Что касается 2-й части: Советуете ли вы создать MVC-контроллер и Razor View в моем оригинальном проекте? Я явно хочу избежать этого. Но если я создам их в Test-проекте ... как это решит проблему? Я все еще не могу ссылаться на внешние файлы. Вы рекомендуете загружать внешние JS-файлы динамически? – Budda

+0

@Budda О первой части VS ** будет ** разрешать путь, если вы добавите файл в соответствие, если вы еще не добавили его. Я уже тестировал и работает. Во второй части люди обычно создают отдельные проекты для модульных тестов, поэтому вы можете создать отдельный проект MVC для javascript, это зависит от размера проекта и количества модульного тестирования. ИМХО * правильный путь * - создать задачу глобализации и скопировать файлы сценариев перед тестированием, но это может быть сложно для очень простых проектов. – devconcept

3

Выглядит как trainings.js не определен при вызове TrainingTests.js. См. this вопрос для получения более подробной информации о том, почему это происходит! Как только это исправлено, он работает. И да, аналогично trainings.js, вы можете иметь любое количество файлов в любой папке, если вы ссылаетесь на них правильно. Я создал образец скрипку доступную @http://plnkr.co/edit/PnqVebOzmPpGu7x2qWLs?p=preview

<body> 
    <div id="qunit"></div> 
    <div id="qunit-fixture"></div> 
    <script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script> 
    <script src="trainings.js"></script> 
    <script src="TrainingTests.js"></script> 
</body> 
+0

Спасибо, но я хочу ссылаться на файл. Попытки ссылаться на JS одного веб-сайта из другого не работают. Я считаю, что VS и IIS просто предотвращают это. – Budda

+0

Хорошо, но ваш вопрос ничего не упоминал о необходимости ссылки на файл js с другого сервера :) – prem89

0

Ну, из-за помощи двух ответов я сделал локализовать эту проблему на самом деле было в неспособности VS скопировать нужный файл в тестовый проект.

Это может быть, вероятно, решены несколькими способами, я нашел один, идея скопирована из: http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

Решение простое: добавить тег динамически

Для того, чтобы достичь этого, я добавил следующий код в теге:

<script> 
    var fileref = document.createElement('script'); 
    fileref.setAttribute("type", "text/javascript"); 
    var path = 'path'; // here is an absolute address to JS-file on my web site 
    fileref.setAttribute("src", path); 
    document.getElementsByTagName("head")[0].appendChild(fileref); 

    loadjscssfile(, "js") //dynamically load and add this .js file 
</script> 

и пошевелил тестов в (требуется также ссылки на JQuery раньше)

$(document).ready(function() { 
     QUnit.test("Test #1 description", function() { ... }); 
    }); 

Аналогичный подход также работает для чистых тестовых файлов.

+0

Это излишняя задача для очень простой задачи. Точно так же включать тег сценария в абсолютный путь к файлу, единственное различие заключается в том, что он добавляется позже, что в какой-то момент может быть проблемой для модульных тестов, потому что вам нужно дождаться загрузки этих скриптов. Также есть одна основная проблема, вы не можете ссылаться на связанные файлы с помощью этого метода или файлов вне вашего веб-сайта. Сначала вы должны скопировать их, чтобы их можно было легко автоматизировать с помощью задачи gulp. В любом случае это не очень хорошее решение. – devconcept

+0

Я плохо разбираюсь в JavaScript и настройках/средствах сборки, поэтому, если у меня есть какое-либо решение, которое работает (особенно если я передал LONG способ заставить его работать), я иногда останавливаюсь на этом. – Budda

+0

Проблема в том, что в вашем случае вам нужно написать шаблонный код, чтобы убедиться, что сценарии загружаются при запуске тестов. Результатом этого не является то, что, как только проект будет расти, вы закончите тесты недетерминированности. Когда-нибудь у вас будет тест, который провалится без видимых причин, и причина в том, что ваши тесты выполняются, и скрипт завершился, загрузив несколько миллисекунд позже. Вы должны удалить все факторы, которые потенциально могут привести к сбою тестирования. Вот почему добавление javascript динамически не является хорошей идеей, если это действительно не оправдано, или это также часть теста. – devconcept

Смежные вопросы