Модульное тестирование доступа Aurelia для компонента viewModel - PullRequest
Новая
       16

Модульное тестирование доступа Aurelia для компонента viewModel

0 голосов
/ 24 октября 2018

Я тестирую один из своих компонентов в проекте Aurelia.Я хотел бы получить доступ к viewModel моего компонента в моем модульном тесте, но пока мне не повезло.

Я следовал примеру, доступному на https://aurelia.io/docs/testing/components#manually-handling-lifecycle, но продолжаю получать component.viewModel is undefined.

Вот модульный тест: 

describe.only('some basic tests', function() {
    let component, user;

    before(() => {
        user = new User({ id: 100, first_name: "Bob", last_name: "Schmoe", email: 'joe@schmoe.com'});
        user.save();
    });

    beforeEach( () => {
        component = StageComponent
            .withResources('modules/users/user')
            .inView('<user></user>')
            .boundTo( user );
    });

    it('check for ', () => {
        return component.create(bootstrap)
            .then(() => {
                expect(2).to.equal(2);
                return component.viewModel.activate({user: user});
            });

    });

    it('can manually handle lifecycle', () => {

        return component.manuallyHandleLifecycle().create(bootstrap)
            .then(() => component.bind({user: user}))
            .then(() => component.attached())
            .then(() => component.unbind() )
            .then(() => {
                expect(component.viewModel.name).toBe(null);
                return Promise.resolve(true);
        });
    });

    afterEach( () => {
        component.dispose();
    });
});

Вот ошибка, которую я получаю: 

1) my aurelia tests
       can manually handle lifecycle:
     TypeError: Cannot read property 'name' of undefined

Здесь - этострока, которая определяет viewModel для объекта component, но только если установлено aurelia.root.controllers.length.Я не уверен, как установить контроллеры в моем коде aurelia или нужно ли вообще это делать.

Наверное, мой вопрос: как мне получить доступ к viewModel компонента в моих модульных тестах?

Ответы [ 2 ]

0 голосов
/ 27 октября 2018

Чтобы заставить его работать, мне пришлось использовать Container: 

import { UserCard } from '../../src/modules/users/user-card';
import { Container } from 'aurelia-dependency-injection';


describe.only('some basic tests', function() {
    let component, user;

    before(() => {
        user = new User({ id: 100, first_name: "Bob", last_name: "Schmoe", email: 'joe@schmoe.com'});
        user.save();
    });

    beforeEach(() => {
        container = new Container();
        userCard = container.get( UserCard );
        component = StageComponent
            .withResources('modules/users/user-card')
            .inView('<user-card></user-card>')
            .boundTo( user );
    });

    it('check for ', () => {
        return component.create(bootstrap)
            .then(() => {
                expect(2).to.equal(2);
                return userCard.activate({user: user});
            });
    });
});
0 голосов
/ 25 октября 2018

Правка # 2:

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

Редактировать:

Я пробовал это локально с настройкой karma + webpack + mocha (так как webpackпопулярный выбор в наше время) и было несколько предостережений, чтобы заставить это работать хорошо.Я не уверен, каковы остальные настройки, поэтому я не могу точно сказать, где была ошибка (я мог бы указать на это, если бы вы рассказали мне больше о вашей настройке).

В любом случае,Вот рабочая установка с karma + webpack + mocha, которая правильно проверяет привязку и рендеринг:

https://github.com/fkleuver/aurelia-karma-webpack-testing

Тестовый код: 

import './setup';
import { Greeter } from './../src/greeter';
import { bootstrap } from 'aurelia-bootstrapper';
import { StageComponent, ComponentTester } from 'aurelia-testing';
import { PLATFORM } from 'aurelia-framework';
import { assert } from 'chai';

describe('Greeter', () => {
  let el: HTMLElement;
  let tester: ComponentTester;
  let sut: Greeter;

  beforeEach(async () => {
    tester = StageComponent
      .withResources(PLATFORM.moduleName('greeter'))
      .inView(`<greeter name.bind="name"></greeter>`)
      .manuallyHandleLifecycle();

    await tester.create(bootstrap);
    el = <HTMLElement>tester.element;
    sut = tester.viewModel;
  });

  it('binds correctly', async () => {
    await tester.bind({ name: 'Bob' });

    assert.equal(sut.name, 'Bob');
  });

  it('renders correctly', async () => {
    await tester.bind({ name: 'Bob' });
    await tester.attached();

    assert.equal(el.innerText.trim(), 'Hello, Bob!');
  });
});

greeter.html 

<template>
  Hello, ${name}!
</template>

greeter.ts 

import { bindable } from 'aurelia-framework';

export class Greeter {
  @bindable()
  public name: string;
}

setup.ts 

import 'aurelia-polyfills';
import 'aurelia-loader-webpack';
import { initialize } from 'aurelia-pal-browser';

initialize();

karma.conf.js 

const { AureliaPlugin } = require('aurelia-webpack-plugin');
const { resolve } = require('path');

module.exports = function configure(config) {
  const options = {
    frameworks: ['source-map-support', 'mocha'],
    files: ['test/**/*.ts'],
    preprocessors: { ['test/**/*.ts']: ['webpack', 'sourcemap'] },
    webpack: {
      mode: 'development',
      entry: { setup: './test/setup.ts' },
      resolve: {
        extensions: ['.ts', '.js'],
        modules: [
          resolve(__dirname, 'src'),
          resolve(__dirname, 'node_modules')
        ]
      },
      devtool: 'inline-source-map',
      module: {
        rules: [{
          test: /\.html$/i,
          loader: 'html-loader'
        }, {
          test: /\.ts$/i,
          loader: 'ts-loader',
          exclude: /node_modules/
        }]
      },
      plugins: [new AureliaPlugin()]
    },
    singleRun: false,
    colors: true,
    logLevel: config.browsers && config.browsers[0] === 'ChromeDebugging' ? config.LOG_DEBUG : config.LOG_INFO, // for troubleshooting mode
    mime: { 'text/x-typescript': ['ts'] },
    webpackMiddleware: { stats: 'errors-only' },
    reporters: ['mocha'],
    browsers: config.browsers || ['ChromeHeadless'],
    customLaunchers: {
      ChromeDebugging: {
        base: 'Chrome',
        flags: [ '--remote-debugging-port=9333' ]
      }
    }
  };

  config.set(options);
};

tsconfig.json 

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "importHelpers": true,
    "lib": ["es2018", "dom"],
    "module": "esnext",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es2018"
  },
  "include": ["src"]
}

package.json 

{
  "scripts": {
    "test": "karma start --browsers=ChromeHeadless"
  },
  "dependencies": {
    "aurelia-bootstrapper": "^2.3.0",
    "aurelia-loader-webpack": "^2.2.1"
  },
  "devDependencies": {
    "@types/chai": "^4.1.6",
    "@types/mocha": "^5.2.5",
    "@types/node": "^10.12.0",
    "aurelia-testing": "^1.0.0",
    "aurelia-webpack-plugin": "^3.0.0",
    "chai": "^4.2.0",
    "html-loader": "^0.5.5",
    "karma": "^3.1.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-mocha": "^1.3.0",
    "karma-mocha-reporter": "^2.2.5",
    "karma-source-map-support": "^1.3.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^3.0.5",
    "mocha": "^5.2.0",
    "path": "^0.12.7",
    "ts-loader": "^5.2.2",
    "typescript": "^3.1.3",
    "webpack": "^4.23.1",
    "webpack-dev-server": "^3.1.10"
  }
}

Оригинальный ответ

Если вы вручную делаете жизненный цикл, вам нужно передать ViewModel самостоятельно, чтобы он мог связываться с:)

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

const view = "<div>${msg}</div>";
const bindingContext = { msg: "foo" };
StageComponent
  .withResources(resources/*optional*/)
  .inView(view)
  .boundTo(bindingContext)
  .manuallyHandleLifecycle()
  .create(bootstrap)
  .then(component => {
    component.bind(bindingContext);
  }
  .then(component => {
    component.attached();
  }
  .then(component => {
    expect(component.host.textContent).toEqual("foo");
  }
  .then(component => {
    bindingContext.msg = "bar";
  }
  .then(component => {
    expect(component.host.textContent).toEqual("bar");
  };

Само собой разумеется, поскольку вы сами создаете модель представления (переменную bindingContext в этом примере), вы можете просто получить доступ к объявленной вами переменной.

...