ionic-framework
Тестирование приложения Ionic в браузере
Поиск…
замечания
Тестирование встроенных функций устройства, таких как Camera, Vibration и другие, многие из которых находятся в документации Ionic Native , не могут быть выполнены в браузере. Это неотъемлемое ограничение того факта, что Cordova, платформа, на которой Ionic зависит, чтобы иметь возможность доступа к родным Android, iOS и Windows Mobile API устройства, не может работать в браузере.
Можно обойти эту проблему, издеваясь над функциональностью собственного плагина.
пример
Вот пример того, как издеваться над плагином Camera :
Идем дальше и создаем дополнительную папку в корневой папке проекта.
cd src
mkdir mocks
cd mocks
touch camera-mock.ts
Откройте camera-mock.ts и скопируйте вставьте следующий код:
export class CameraMock {
getPicture(params) {
return new Promise((resolve, reject) => {
resolve("BASE_64_IMAGE_DATA");
});
}
}
Затем откройте src/app.module.ts и импортируйте класс mock "
import { CameraMock } from "../mocks/camera-mock";
Затем добавьте его в массив поставщиков модулей:
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
CameraMock,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
Теперь вы можете использовать его в любом компоненте после его импорта.
Тестирование в браузере
Использование ionic serve для запуска локального сервера разработки для приложения dev и тестирования. Это полезно как для тестирования настольных браузеров, так и для проверки в браузере устройства, подключенного к той же сети. Кроме того, эта команда запускает LiveReload, которая используется для мониторинга изменений в файловой системе. Как только вы сохраните файл, браузер автоматически обновится. Взгляните на документы Sass, если вы также хотите, чтобы ionic serve просматривала файлы Sass проекта.
$ ionic serve [options]
Для браузера Chrome вы можете проверить устройства (AVD или Mobiles), введите следующую команду в адресной строке браузера Chrome.
chrome://inspect/#devices
LiveReload
По умолчанию LiveReload будет следить за изменениями в вашем www/ каталоге, за исключением www/lib/ . Чтобы изменить это, вы можете указать watchPatterns свойство в ionic.project файл , расположенный в корневом каталоге проекта , чтобы посмотреть (или не смотреть) для конкретных изменений.
{
"name": "myApp",
"app_id": "",
"watchPatterns": [
"www/js/*",
"!www/css/**/*"
]
}
Для справки о синтаксисе шаблонов glob проверьте шаблоны глобусов на веб-сайте Grunt.
Замечания:
$ ionic setup sass
добавит watchPatterns со значениями по умолчанию в ваш файл ionic.project который вы затем сможете редактировать, в дополнение к свойству gulpStartupTasks как описано в документации Sass .
Ионная лаборатория
Ионная лаборатория http://ionicframework.com/img/blog/lab.png
Ionic Lab - это функция поверх ionic serve которая позволяет легко тестировать ваше приложение в раме телефона, а также на платформах iOS и Android бок о бок. Чтобы использовать его, просто запустите
$ ionic serve --lab
Прочтите полное объявление о выпуске для всех деталей!
Указание IP-адреса для использования
Предположим, вы хотите указать, к какому адресу будет подключен ваш браузер, скажем, для тестирования или внешним пользователям. Укажите адрес с аргументом --address .
$ ionic serve --address 68.54.96.105
Сервисные прокси
Команда serve может добавлять некоторые прокси-серверы на http-сервер. Эти прокси-серверы полезны, если вы работаете в браузере, и вам нужно совершать вызовы во внешний API. С помощью этой функции вы можете запросить прокси на внешний api через ионный http-сервер, предотвращая появление No 'Access-Control-Allow-Origin' header is present on the requested resource ошибке No 'Access-Control-Allow-Origin' header is present on the requested resource .
В файле ionic.project вы можете добавить свойство с массивом прокси, который вы хотите добавить. Прокси - объекты с двумя свойствами:
-
path: строка, которая будет сопоставлена с началом URL-адреса входящего запроса. -
proxyUrl: строка с URL-адресом, куда должен идти прокси-запрос.
{
"name": "appname",
"email": "",
"app_id": "",
"proxies": [
{
"path": "/v1",
"proxyUrl": "https://api.instagram.com/v1"
}
]
}
Используя приведенную выше конфигурацию, вы можете теперь отправлять запросы на ваш локальный сервер по адресу http://localhost:8100/v1 чтобы запросить прокси-сервер на https://api.instagram.com/v1
Например:
angular.module('starter.controllers', [])
.constant('InstagramApiUrl', '')
// .constant('InstagramApiUrl','https://api.instagram.com')
//In production, make this the real URL
.controller('FeedCtrl', function($scope, $http, InstagramApiUrl) {
$scope.feed = null;
$http.get(InstagramApiUrl + '/v1/media/search?client_id=1&lat=48&lng=2.294351').then(function(data) {
console.log('data ' , data)
$scope.feed = data;
})
})
См. Также этот пояс для получения дополнительной помощи.
Флаги / параметры командной строки
[--consolelogs|-c] ...... Print app console logs to Ionic CLI
[--serverlogs|-s] ....... Print dev server logs to Ionic CLI
[--port|-p] ............. Dev server HTTP port (8100 default)
[--livereload-port|-i] .. Live Reload port (35729 default)
[--nobrowser|-b] ........ Disable launching a browser
[--nolivereload|-r] ..... Do not start live reload
[--noproxy|-x] .......... Do not add proxies