Skip to content
This repository has been archived by the owner on Feb 7, 2019. It is now read-only.

Commit

Permalink
Update: added parameters secttion hide button. Updated test cases
Browse files Browse the repository at this point in the history
  • Loading branch information
@jarrodek
jarrodek committed Mar 8, 2017
1 parent 247b9e8 commit 2c76585
Show file tree
Hide file tree
Showing 4 changed files with 208 additions and 18 deletions.
7 changes: 5 additions & 2 deletions bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,10 @@
"marked-element": "PolymerElements/marked-element#^1.2.0",
"raml-docs-response-panel": "advanced-rest-client/raml-docs-response-panel#^1.0.1",
"iron-media-query": "PolymerElements/iron-media-query#^1.0.8",
"markdown-styles": "advanced-rest-client/markdown-styles#^1.0.0"
"markdown-styles": "advanced-rest-client/markdown-styles#^1.0.0",
"iron-collapse": "PolymerElements/iron-collapse#^1.3.0",
"iron-icon": "PolymerElements/iron-icon#^1.0.12",
"arc-icons": "advanced-rest-client/arc-icons#^1.0.14"
},
"devDependencies": {
"iron-component-page": "polymerelements/iron-component-page#1.0.0",
Expand All @@ -56,4 +59,4 @@
"tasks"
],
"version": "0.1.8"
}
}
145 changes: 135 additions & 10 deletions raml-docs-method-viewer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@
<link rel="import" href="../iron-media-query/iron-media-query.html">
<link rel="import" href="../marked-element/marked-element.html">
<link rel="import" href="../markdown-styles/markdown-styles.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../arc-icons/arc-icons.html">

<!--
`<raml-docs-method-viewer>` Documentation view for the method defined in RAML file
Expand Down Expand Up @@ -184,6 +189,33 @@
:host([narrow]) h3 {
font-size: 17px;
}

.section-title-area {
@apply(--layout-horizontal);
@apply(--layout-center);
}

.section-title-area h3 {
@apply(--layout-flex);
}

.toggle-button {
color: var(--arc-toggle-view-icon-color, rgba(0, 0, 0, 0.54));
transition: color 0.25s linear;
}

.toggle-icon {
transform: rotateZ(0deg);
transition: transform 0.3s linear;
}

.toggle-icon.opened {
transform: rotateZ(-180deg);
}

.toggle-button:hover {
color: var(--arc-toggle-view-icon-hover-color, rgba(0, 0, 0, 0.78));
}
</style>
<iron-media-query query="(max-width: [[narrowWidth]])" query-matches="{{narrow}}"></iron-media-query>
<section class="container">
Expand Down Expand Up @@ -212,16 +244,54 @@ <h2>Request</h2>
<div class="url-value">[[raml.absoluteUri]]</div>
</div>

<h3 hidden$="[[!hasParameters]]">Parameters</h3>
<docs-parameters-table hidden$="[[!hasParameters]]" uri-parameters="[[raml.allUriParameters]]" query-parameters="[[raml.queryParameters]]" has-query-parameteres="{{hasQueryParameteres}}" has-uri-parameteres="{{hasUriParameteres}}" auto-hide></docs-parameters-table>

<h3 hidden$="[[!hasHeaders]]">Headers</h3>
<docs-headers-table has-headers="{{hasHeaders}}" headers="[[raml.headers]]" auto-hide></docs-headers-table>

<div hidden$="[[!hasBody]]">
<h3>Body</h3>
<docs-body-parameters-table body="[[raml.body]]"></docs-body-parameters-table>
</div>
<section hidden$="[[!hasParameters]]">
<div class="section-title-area">
<h3>Parameters</h3>
<div class="title-area-actions">
<paper-button data-section="parameters" on-tap="toggleCollapseSection" class="toggle-button" title="Toogle parameters details">
[[_computeToggleActionLabel(parametersOpened)]]
<iron-icon icon="arc:expand-more" class$="[[_computeToggleIconClass(parametersOpened)]]"></iron-icon>
</paper-button>
</div>
</div>
<iron-collapse opened="[[parametersOpened]]">
<docs-parameters-table
uri-parameters="[[raml.allUriParameters]]"
query-parameters="[[raml.queryParameters]]"
has-query-parameteres="{{hasQueryParameteres}}"
has-uri-parameteres="{{hasUriParameteres}}" auto-hide></docs-parameters-table>
</iron-collapse>
</section>

<section hidden$="[[!hasHeaders]]">
<div class="section-title-area">
<h3>Headers</h3>
<div class="title-area-actions">
<paper-button data-section="headers" on-tap="toggleCollapseSection" class="toggle-button" title="Toogle headers details">
[[_computeToggleActionLabel(headersOpened)]]
<iron-icon icon="arc:expand-more" class$="[[_computeToggleIconClass(headersOpened)]]"></iron-icon>
</paper-button>
</div>
</div>
<iron-collapse opened="[[headersOpened]]">
<docs-headers-table has-headers="{{hasHeaders}}" headers="[[raml.headers]]" auto-hide></docs-headers-table>
</iron-collapse>
</section>

<section hidden$="[[!hasBody]]">
<div class="section-title-area">
<h3>Body</h3>
<div class="title-area-actions">
<paper-button data-section="body" on-tap="toggleCollapseSection" class="toggle-button" title="Toogle body details">
[[_computeToggleActionLabel(bodyOpened)]]
<iron-icon icon="arc:expand-more" class$="[[_computeToggleIconClass(bodyOpened)]]"></iron-icon>
</paper-button>
</div>
</div>
<iron-collapse opened="[[bodyOpened]]">
<docs-body-parameters-table body="[[raml.body]]"></docs-body-parameters-table>
</iron-collapse>
</section>
</section>

<section class="response-doc" hidden$="[[!hasResponses]]">
Expand Down Expand Up @@ -313,6 +383,21 @@ <h2>Response</h2>
narrowWidth: {
type: String,
value: '768px'
},
// If true then the parameters docs table is displayed.
parametersOpened: {
type: Boolean,
value: true
},
// If true then the headers docs table is displayed.
headersOpened: {
type: Boolean,
value: true
},
// If true then the body docs table is displayed.
bodyOpened: {
type: Boolean,
value: true
}
},

Expand Down Expand Up @@ -426,6 +511,46 @@ <h2>Response</h2>
return '';
}
return endpoint.displayName || endpoint.relativeUri;
},

/**
* Toogles collapsable sections.
* The toggle button must have `data-section` property with the name of the
* section to toggle. Variable that controls the state (Boolean value)
* must be called section + 'Opened'.
*/
toggleCollapseSection: function(e) {
var path = e.path;
var target;
var section;
while (true) {
target = path.shift();
if (!target) {
break;
}
if (!target.dataset || !target.dataset.section) {
continue;
}
section = target.dataset.section;
}
if (!section) {
return console.warn('Toggle section not fond in path ', e.path);
}
var variable = section + 'Opened';
this[variable] = !this[variable];
},

// Computes class for the toggle's button icon.
_computeToggleIconClass: function(opened) {
var clazz = 'toggle-icon';
if (opened) {
clazz += ' opened';
}
return clazz;
},
// Computes a label for the section toggle buttons.
_computeToggleActionLabel: function(opened) {
return opened ? 'Hide' : 'Show';
}
});
</script>
Expand Down
69 changes: 63 additions & 6 deletions test/basic-test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,24 +35,36 @@
</test-fixture>

<script>
/* global suite, test, fixture, assert */
/* global suite, test, fixture, assert, MockInteractions, TestHelpers */
suite('basic', function() {
var element;
setup(function(done) {
var raml;
var parentRaml;

suiteSetup(function(done) {
var baseUrl = location.href.substr(0, location.href.lastIndexOf('/') + 1);
element = fixture('basic');
var parser = fixture('parser');
parser.loadApi(baseUrl + 'test.raml')
.then(function() {
element.parentEndpoint = parser.get('latestJson.specification.resources.0');
element.raml = parser.get('latestJson.specification.resources.0.methods.0');
raml = parser.get('latestJson.specification.resources.0.methods.0');
parentRaml = parser.get('latestJson.specification.resources.0');
done();
})
.catch(function(e) {
done(e);
});
});

setup(function() {
element = fixture('basic');
element.parentEndpoint = parentRaml;
element.raml = raml;
});

function isVisible(elm) {
return !!(elm.offsetWidth || elm.offsetHeight || elm.getClientRects().length);
}

test('hasBody should be false', function() {
assert.equal(element.hasBody, false);
});
Expand All @@ -65,10 +77,55 @@
assert.equal(element.methodName, 'get');
});

test('Hiddenshould be false', function() {
test('Hidden should be false', function() {
assert.equal(element.hidden, false);
});

test('hasParameters should be true', function() {
assert.equal(element.hasParameters, true);
});

test('hasResponses should be true', function() {
assert.equal(element.hasResponses, true);
});

test('noTryit hiddes action button', function() {
element.noTryit = true;
TestHelpers.forceXIfStamp(element);

var buttons = Polymer.dom(element.root).querySelectorAll('.action-button');
var visible = isVisible(buttons[0]);
assert.isFalse(visible, 'First action button is invisible');
visible = isVisible(buttons[1]);
assert.isFalse(visible, 'Second action button is invisible');
});

test('documentation sections are opened by default', function() {
assert.equal(element.parametersOpened, true, 'Parameters section is opened');
assert.equal(element.headersOpened, true, 'Headers section is opened');
assert.equal(element.bodyOpened, true, 'Body section is opened');
});

test('Parameters toggle event is handled correctly', function() {
var button = Polymer.dom(element.root).querySelector('[data-section="parameters"]');
assert.isDefined(button, 'Parameters toggle button is defined');
MockInteractions.tap(button, {emulateTouch: true});
assert.equal(element.parametersOpened, false, 'Parameters section is closed');
});

test('Headers toggle event is handled correctly', function() {
var button = Polymer.dom(element.root).querySelector('[data-section="headers"]');
assert.isDefined(button, 'Headers toggle button is defined');
MockInteractions.tap(button, {emulateTouch: true});
assert.equal(element.headersOpened, false, 'Headers section is closed');
});

test('Body toggle event is handled correctly', function() {
var button = Polymer.dom(element.root).querySelector('[data-section="body"]');
assert.isDefined(button, 'Body toggle button is defined');
MockInteractions.tap(button, {emulateTouch: true});
assert.equal(element.bodyOpened, false, 'Body section is closed');
});
});
</script>

Expand Down
5 changes: 5 additions & 0 deletions test/test.raml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,12 @@ types:
phone: Phone # inherits all properties from type `Phone`; uses shortcut syntax
Alertable: Manager | AlertableAdmin # union type; either a `Manager` or `AlertableAdmin`
/{orgId}:
uriParameters:
orgId:
type: string
get:
queryParameters:
test: string
responses:
200:
body:
Expand Down

0 comments on commit 2c76585

Please sign in to comment.