vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Remove Link to Blog in QE + Refactor quayRequire Directive (#2523)

Browse source 
* refactoring quayRequire directive

* added tests, show element if input changes

* use ngIfDirective in QuayRequireDirective
This commit is contained in:
Alec Merdler 2017-04-10 11:57:09 -07:00 committed by GitHub
parent f0b3308131
commit 32843e4f22
6 changed files with 104 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
static/directives/header-bar.html
View file

@ -25,7 +25,7 @@
<li><a ng-href="/tutorial/" quay-section="tutorial">Tutorial</a></li>
<li quay-require="['BILLING']"><a ng-href="/plans/" quay-section="plans">Pricing</a></li>
<li><a href="https://docs.quay.io/" ng-safenewtab>Docs</a></li>
<li><a href="https://blog.quay.io/" ng-safenewtab>Blog</a></li>
<li quay-require="['BILLING']"><a href="https://blog.quay.io/" ng-safenewtab>Blog</a></li>
</ul>
<!-- Signed in -->
@ -34,7 +34,7 @@
<li><a ng-href="/repository/" quay-section="repository">Repositories</a></li>
<li><a ng-href="/tutorial/" quay-section="tutorial">Tutorial</a></li>
<li><a href="https://docs.quay.io/" ng-safenewtab>Docs</a></li>
<li><a href="https://blog.quay.io/" ng-safenewtab>Blog</a></li>
<li quay-require="['BILLING']"><a href="https://blog.quay.io/" ng-safenewtab>Blog</a></li>
</ul>
<!-- Phone -->

14
static/js/directives/quay-layout.js
View file

@ -2,20 +2,6 @@
* Directives which show, hide, include or otherwise mutate the DOM based on Features and Config.
*/
/**
* Adds a quay-require attribute includes an element in the DOM iff the features specified are true.
*/
angular.module('quay').directive('quayRequire', function ($animate, Features, AngularHelper) {
return {
transclude: 'element',
priority: 600,
terminal: true,
restrict: 'A',
link: AngularHelper.buildConditionalLinker($animate, 'quayRequire', function(value) {
return Features.matchesFeatures(value);
})
};
});
/**
* Adds a quay-show attribute that shows the element only if the attribute evaluates to true.

59
static/js/directives/structural/quay-require/quay-require.directive.spec.ts Normal file
View file

@ -0,0 +1,59 @@
import { QuayRequireDirective } from './quay-require.directive';
import { Mock } from 'ts-mocks';
import Spy = jasmine.Spy;
describe("QuayRequireDirective", () => {
var directive: QuayRequireDirective;
var featuresMock: Mock<any>;
var $elementMock: Mock<ng.IAugmentedJQuery>;
var $scopeMock: Mock<ng.IScope>;
var $transcludeMock: Mock<ng.ITranscludeFunction>;
var ngIfDirectiveMock: Mock<ng.IDirective>;
beforeEach(() => {
featuresMock = new Mock<any>();
$elementMock = new Mock<ng.IAugmentedJQuery>();
$scopeMock = new Mock<ng.IScope>();
$transcludeMock = new Mock<ng.ITranscludeFunction>();
ngIfDirectiveMock = new Mock<ng.IDirective>();
directive = new QuayRequireDirective(featuresMock.Object,
$elementMock.Object,
$scopeMock.Object,
$transcludeMock.Object,
[ngIfDirectiveMock.Object]);
directive.requiredFeatures = ['BILLING', 'SOME_OTHER_FEATURE'];
});
describe("ngAfterContentInit", () => {
var linkMock: Mock<ng.IDirectiveLinkFn>;
beforeEach(() => {
linkMock = new Mock<ng.IDirectiveLinkFn>();
linkMock.setup(mock => (<Function>mock).apply);
ngIfDirectiveMock.setup(mock => mock.link).is(linkMock.Object);
});
it("calls ngIfDirective link method with own element's arguments to achieve ngIf functionality", () => {
featuresMock.setup(mock => mock.matchesFeatures).is((features) => false);
directive.ngAfterContentInit();
expect((<Spy>(<Function>linkMock.Object).apply).calls.argsFor(0)[0]).toEqual(ngIfDirectiveMock.Object);
expect((<Spy>(<Function>linkMock.Object).apply).calls.argsFor(0)[1][0]).toEqual($elementMock.Object);
expect((<Spy>(<Function>linkMock.Object).apply).calls.argsFor(0)[1][1]).toEqual($scopeMock.Object);
expect(Object.keys((<Spy>(<Function>linkMock.Object).apply).calls.argsFor(0)[1][2])).toEqual(['ngIf']);
expect((<Spy>(<Function>linkMock.Object).apply).calls.argsFor(0)[1][3]).toEqual(null);
expect((<Spy>(<Function>linkMock.Object).apply).calls.argsFor(0)[1][4]).toEqual($transcludeMock.Object);
});
it("calls feature service to check if given features are present in application", () => {
featuresMock.setup(mock => mock.matchesFeatures).is((features) => false);
directive.ngAfterContentInit();
expect((<Spy>(<Function>linkMock.Object).apply).calls.argsFor(0)[1][2]['ngIf']()).toBe(false);
expect(featuresMock.Object.matchesFeatures).toHaveBeenCalled();
expect((<Spy>featuresMock.Object.matchesFeatures).calls.argsFor(0)[0]).toEqual(directive.requiredFeatures);
});
});
});

41
static/js/directives/structural/quay-require/quay-require.directive.ts Normal file
View file

@ -0,0 +1,41 @@
import { Directive, Inject, Input, AfterContentInit } from 'ng-metadata/core';
/**
* Structural directive that adds/removes its host element if the given list of feature flags are set.
* Utilizes the existing AngularJS ngIf directive by applying its 'link' function to the host element's properties.
*
* Inspired by http://stackoverflow.com/a/29010910
*/
@Directive({
selector: '[quayRequire]',
legacy: {
transclude: 'element',
}
})
export class QuayRequireDirective implements AfterContentInit {
@Input('<quayRequire') public requiredFeatures: string[] = [];
private ngIfDirective: ng.IDirective;
constructor(@Inject('Features') private features: any,
@Inject('$element') private $element: ng.IAugmentedJQuery,
@Inject('$scope') private $scope: ng.IScope,
@Inject('$transclude') private $transclude: ng.ITranscludeFunction,
@Inject('ngIfDirective') ngIfDirective: ng.IDirective[]) {
this.ngIfDirective = ngIfDirective[0];
}
public ngAfterContentInit(): void {
const attrs: {[name: string]: any} = {'ngIf': () => this.features.matchesFeatures(this.requiredFeatures)};
(<Function>this.ngIfDirective.link).apply(this.ngIfDirective,
[
this.$scope,
this.$element,
attrs,
null,
this.$transclude
]);
}
}

2
static/js/quay.module.ts
View file

@ -19,6 +19,7 @@ import { AvatarServiceImpl } from './services/avatar/avatar.service.impl';
import { DockerfileServiceImpl } from './services/dockerfile/dockerfile.service.impl';
import { DataFileServiceImpl } from './services/datafile/datafile.service.impl';
import { UtilServiceImpl } from './services/util/util.service.impl';
import { QuayRequireDirective } from './directives/structural/quay-require/quay-require.directive';
/**
@ -42,6 +43,7 @@ import { UtilServiceImpl } from './services/util/util.service.impl';
CorTableComponent,
CorTableColumn,
ChannelIconComponent,
QuayRequireDirective,
],
providers: [
ViewArrayImpl,

4
yarn.lock
View file

@ -30,10 +30,6 @@
version "0.9.39"
resolved "https://registry.yarnpkg.com/@types/core-js/-/core-js-0.9.39.tgz#9b3d9869c2b7de02d372d32d6c6d9f5db3178c65"
"@types/es6-shim@^0.31.32":
version "0.31.32"
resolved "https://registry.yarnpkg.com/@types/es6-shim/-/es6-shim-0.31.32.tgz#8196c09e1e40ac977c713bf258090989f501d8ff"
"@types/jasmine@^2.5.41":
version "2.5.43"
resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.43.tgz#6328a8c26082f2fd84f043c802c9ed7fa110b2dd"