Skip to content

Instantly share code, notes, and snippets.

@bigopon
Forked from reinholdk/index.html
Created October 10, 2020 04:03
Show Gist options
  • Save bigopon/e83f105c2abe7660ad160c89257bdecf to your computer and use it in GitHub Desktop.
Save bigopon/e83f105c2abe7660ad160c89257bdecf to your computer and use it in GitHub Desktop.
au-signaler-issue
<!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"
}
}
<!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>
/*
* 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();
}
}
.msg-text0 {
color: #008000;
}
.msg-text1 {
color: #ff0000;
}
<template>
<comp1></comp1>
</template>
import './app.css';
export class App {}
<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 as $bootstrap } from 'aurelia-bootstrapper';
import { StageComponent } from 'aurelia-testing';
import { PLATFORM } from 'aurelia-pal';
import { TaskQueue } from 'aurelia-framework';
import { AlternateValueConverter } from '../src/alternate';
// import { Alternate2ValueConverter } from '../../src/alternate2';
// import { configure as configureLib } from '../../src/index';
import { BindingSignaler } from 'aurelia-templating-resources';
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');
});
});
let taskQueue, signaler;
function bootstrap(configure) {
const $configure = aurelia => {
if (taskQueue) {
aurelia.container.registerInstance(TaskQueue, taskQueue);
} else {
taskQueue = aurelia.container.get(TaskQueue);
}
if (signaler) {
aurelia.container.registerInstance(BindingSignaler, signaler);
} else {
signaler = aurelia.container.get(BindingSignaler);
}
return configure(aurelia);
};
return $bootstrap($configure);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment