reinholdk · October 10, 2020 04:03
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>Dumber Gist</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <base href="/">
 </head>
 <!--
 Dumber gist uses dumber bundler, the default bundle file
 is /dist/entry-bundle.js.
 The starting module is pointed to aurelia-bootstrapper
 (data-main attribute on script) for Aurelia,
 The aurelia bootstrapper then loads up user module "main"
 (aurelia-app attribute on <body>) which is your src/main.js.
 -->
 <body aurelia-app="main">
  <script src="/dist/entry-bundle.js" data-main="aurelia-bootstrapper"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
 {
  "dependencies": {
    "aurelia-bootstrapper": "^2.3.3",
    "aurelia-testing": "^1.0.0"
  }
 }
diff --git a/run-tests.html b/run-tests.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Unit Tests</title>
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/jasmine-core@3/lib/jasmine-core/jasmine.min.css">
 </head>
 <body>
 <script src="//cdn.jsdelivr.net/npm/jasmine-core@3/lib/jasmine-core/jasmine.min.js"></script>
 <script src="//cdn.jsdelivr.net/npm/jasmine-core@3/lib/jasmine-core/jasmine-html.min.js"></script>
 <script src="//cdn.jsdelivr.net/npm/jasmine-core@3/lib/jasmine-core/boot.min.js"></script>
 <script src="/dist/entry-bundle.js"></script>
 <script>
 requirejs([
  // Load test/setup if exists.
  // or tests/setup, __test__/setup, __tests__/setup
  // also matches files in any src/**/__test__
  /\/(tests?|__tests?__)\/setup$/,
  // Load test/**/*.spec.js if exists.
  // or tests/**/*.test.js, __test__/**/*.spec.js
  // also matches files in any src/**/__test__
  /\.(spec|test)$/
 ]);
 </script>
 </body>
 </html>
diff --git a/src\alternate.js b/src\alternate.js
 /*
 * Value converter that appends alternating 1 or 0 to the value.
 * Just to visualize that binding is re-evaluated when receiving a signal.
 */
 export class AlternateValueConverter {
    static count = 0;

    static reset() {
        AlternateValueConverter.count = 0;
    }

    static toggle() {
        AlternateValueConverter.count = ++AlternateValueConverter.count % 2;
        return AlternateValueConverter.count;
    }

    toView(value) {
        return value + AlternateValueConverter.toggle();
    }
 }
diff --git a/src\app.css b/src\app.css
 .msg-text0 {
    color: #008000;
 }

 .msg-text1 {
    color: #ff0000;
 }
diff --git a/src\app.html b/src\app.html
 <template>
  <comp1></comp1>
 </template>
diff --git a/src\app.js b/src\app.js
 import './app.css';
 export class App {}
diff --git a/src\comp1.html b/src\comp1.html
 <template>
  <require from="./alternate"></require>
  <h1 id="message" class.bind="clazz | alternate & signal:'my-signal'">Hello</h1>
  <button click.delegate="toggle()">toggle</button>
 </template>
diff --git a/src\comp1.js b/src\comp1.js
 import { BindingSignaler } from 'aurelia-templating-resources';

 export class Comp1 {
  static inject = [BindingSignaler];

  constructor(signaler) {
    this.signaler = signaler;
    this.clazz = 'msg-text';
  }

  toggle() {
    this.signaler.signal('my-signal');
  }

 }
diff --git a/src\main.js b/src\main.js
 export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging('info')
    .globalResources('comp1');
  aurelia.start().then(() => aurelia.setRoot());
 }
diff --git a/test\app.spec.js b/test\app.spec.js
 import { bootstrap } from 'aurelia-bootstrapper';
 import { StageComponent } from 'aurelia-testing';
 import { PLATFORM } from 'aurelia-pal';
 import { AlternateValueConverter } from '../src/alternate';
 // import { Alternate2ValueConverter } from '../../src/alternate2';
 // import { configure as configureLib } from '../../src/index';

 function configure(aurelia) {
  return aurelia.use
    .standardConfiguration()
    .globalResources('comp1');
 }

 describe('Stage Component', function () {
  let component;

  async function checkMessage(expected) {
    const msgElement = component.element.querySelector('#message');
    try {
      await component.waitForElement(`#message.${expected}`, { present: true, timeout: 1000 });
    } finally {
      expect([...msgElement.classList]).toContain(expected);
    }
  }

  describe('comp1', function () {
    beforeEach(async function () {
      AlternateValueConverter.reset();
      component = StageComponent
        .withResources(PLATFORM.moduleName('comp1'))
        .inView('<comp1></comp1>');
      component.bootstrap(configure);
      await component.create(bootstrap);
    });

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

    it('should render message - first', async function () {
      // check initial state of the message
      await checkMessage('msg-text1');
      // trigger signal to force re-binding
      component.viewModel.toggle();
      // check updated state of the message
      await checkMessage('msg-text0');
    });

    it('should render message - second', async function () {
      // check initial state of the message
      await checkMessage('msg-text1');
      // trigger signal to force re-binding
      component.viewModel.toggle();
      // check updated state of the message
      await checkMessage('msg-text0');
    });
  });

 });
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Dumber Gist</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
	<base href="/">
	</head>
	<!--
	Dumber gist uses dumber bundler, the default bundle file
	is /dist/entry-bundle.js.
	The starting module is pointed to aurelia-bootstrapper
	(data-main attribute on script) for Aurelia,
	The aurelia bootstrapper then loads up user module "main"
	(aurelia-app attribute on <body>) which is your src/main.js.
	-->
	<body aurelia-app="main">
	<script src="/dist/entry-bundle.js" data-main="aurelia-bootstrapper"></script>
	</body>
	</html>
	{
	"dependencies": {
	"aurelia-bootstrapper": "^2.3.3",
	"aurelia-testing": "^1.0.0"
	}
	}
	/*
	* Value converter that appends alternating 1 or 0 to the value.
	* Just to visualize that binding is re-evaluated when receiving a signal.
	*/
	export class AlternateValueConverter {
	static count = 0;

	static reset() {
	AlternateValueConverter.count = 0;
	}

	static toggle() {
	AlternateValueConverter.count = ++AlternateValueConverter.count % 2;
	return AlternateValueConverter.count;
	}

	toView(value) {
	return value + AlternateValueConverter.toggle();
	}
	}
	<template>
	<require from="./alternate"></require>
	<h1 id="message" class.bind="clazz \| alternate & signal:'my-signal'">Hello</h1>
	<button click.delegate="toggle()">toggle</button>
	</template>
	import { BindingSignaler } from 'aurelia-templating-resources';

	export class Comp1 {
	static inject = [BindingSignaler];

	constructor(signaler) {
	this.signaler = signaler;
	this.clazz = 'msg-text';
	}

	toggle() {
	this.signaler.signal('my-signal');
	}

	}
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging('info')
	.globalResources('comp1');
	aurelia.start().then(() => aurelia.setRoot());
	}
	import { bootstrap } from 'aurelia-bootstrapper';
	import { StageComponent } from 'aurelia-testing';
	import { PLATFORM } from 'aurelia-pal';
	import { AlternateValueConverter } from '../src/alternate';
	// import { Alternate2ValueConverter } from '../../src/alternate2';
	// import { configure as configureLib } from '../../src/index';

	function configure(aurelia) {
	return aurelia.use
	.standardConfiguration()
	.globalResources('comp1');
	}

	describe('Stage Component', function () {
	let component;

	async function checkMessage(expected) {
	const msgElement = component.element.querySelector('#message');
	try {
	await component.waitForElement(`#message.${expected}`, { present: true, timeout: 1000 });
	} finally {
	expect([...msgElement.classList]).toContain(expected);
	}
	}

	describe('comp1', function () {
	beforeEach(async function () {
	AlternateValueConverter.reset();
	component = StageComponent
	.withResources(PLATFORM.moduleName('comp1'))
	.inView('<comp1></comp1>');
	component.bootstrap(configure);
	await component.create(bootstrap);
	});

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

	it('should render message - first', async function () {
	// check initial state of the message
	await checkMessage('msg-text1');
	// trigger signal to force re-binding
	component.viewModel.toggle();
	// check updated state of the message
	await checkMessage('msg-text0');
	});

	it('should render message - second', async function () {
	// check initial state of the message
	await checkMessage('msg-text1');
	// trigger signal to force re-binding
	component.viewModel.toggle();
	// check updated state of the message
	await checkMessage('msg-text0');
	});
	});

	});