From fac938c2f324a9f7335f5aa0d3c5535138e0c017 Mon Sep 17 00:00:00 2001 From: Carolina Wright Date: Thu, 5 Aug 2021 15:57:21 -0300 Subject: [PATCH 1/5] fix: show description for examples --- src/ApiResourceExampleDocument.d.ts | 2 ++ src/ApiResourceExampleDocument.js | 22 +++++++++++++++++++++ src/styles/Document.js | 4 ++++ test/api-resource-example-document.test.js | 23 ++++++++++++++++++++++ 4 files changed, 51 insertions(+) diff --git a/src/ApiResourceExampleDocument.d.ts b/src/ApiResourceExampleDocument.d.ts index 130b903..260dcee 100644 --- a/src/ApiResourceExampleDocument.d.ts +++ b/src/ApiResourceExampleDocument.d.ts @@ -213,5 +213,7 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { _computeExampleTitle(example: Example): string; + _computeExampleDescription(example: Example): string; + _exampleTitleIsMediaType(example: Example): boolean; } diff --git a/src/ApiResourceExampleDocument.js b/src/ApiResourceExampleDocument.js index cdce344..4e87deb 100644 --- a/src/ApiResourceExampleDocument.js +++ b/src/ApiResourceExampleDocument.js @@ -561,6 +561,27 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { return html`
${label}
`; } + /** + * @param {Example} example + * @returns {string} + */ + _computeExampleDescription(example) { + const { description } = example + return !description ? '' : description; + } + + /** + * @param {Example} example + * @returns {TemplateResult|string} + */ + _descriptionTemplate(example) { + if (example.isScalar) { + return ''; + } + const description = this._computeExampleDescription(example) + return html`
${description}
`; + } + /** * Returns title to render for example * @param {Example} example @@ -596,6 +617,7 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { return examples.map((item) => html`
${this._titleTemplate(item)} + ${this._descriptionTemplate(item)}
{ }); }); + describe('_computeExampleDescription()', () => { + let element = /** @type ApiResourceExampleDocument */ (null); + + beforeEach(async () => { + element = await basicFixture(); + await nextFrame(); + }); + + it('returns empty if no description is present', () => { + const example = {}; + const description = element._computeExampleDescription(example); + assert.equal(description, ''); + }); + + it('returns description if present', () => { + const example = { + description: "example description", + }; + const title = element._computeExampleDescription(example); + assert.equal(title, example.description); + }); + }); + describe('a11y', () => { let element = /** @type ApiResourceExampleDocument */ (null); let amf; From a38da2e5aa85f6a25e27b3d37d0d9e84ab2c1654 Mon Sep 17 00:00:00 2001 From: Carolina Wright Date: Thu, 5 Aug 2021 15:57:34 -0300 Subject: [PATCH 2/5] build: bump version --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 01f1d92..a800d06 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@api-components/api-resource-example-document", - "version": "4.3.2", + "version": "4.3.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 87ef719..0a2460d 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@api-components/api-resource-example-document", "description": "A viewer for examples in a resource based on AMF model", - "version": "4.3.2", + "version": "4.3.3", "license": "Apache-2.0", "main": "index.js", "module": "index.js", From a5da1ab1cee11387a75bcf908cab8e389c1f525f Mon Sep 17 00:00:00 2001 From: Carolina Wright Date: Fri, 6 Aug 2021 11:50:11 -0300 Subject: [PATCH 3/5] chore: update dependencies --- demo/APIC-332/APIC-332.raml | 0 package-lock.json | 6 +++--- package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) create mode 100644 demo/APIC-332/APIC-332.raml diff --git a/demo/APIC-332/APIC-332.raml b/demo/APIC-332/APIC-332.raml new file mode 100644 index 0000000..e69de29 diff --git a/package-lock.json b/package-lock.json index a800d06..6bde4d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -282,9 +282,9 @@ "integrity": "sha512-lrSwMmcKBWj5HiwgS516WInU3ytS2XOzXSui7maZiQysnqLraO6zDAldcBbgNwHYfuK/DDASoI0znwZOnc7aiw==" }, "@api-components/api-example-generator": { - "version": "4.4.8", - "resolved": "https://registry.npmjs.org/@api-components/api-example-generator/-/api-example-generator-4.4.8.tgz", - "integrity": "sha512-Qp+UeESM7P8g6GCDvHgeDbpwf7ktmKhwGCpSgJ85GSJ79mMVJkLDrcUhnKPDddjghz/XoMGUzaAH8B7gPjrdow==", + "version": "4.4.13", + "resolved": "https://registry.npmjs.org/@api-components/api-example-generator/-/api-example-generator-4.4.13.tgz", + "integrity": "sha512-K0AS7iG3b6IRx9bl63MT8gBfzG2Ii5UClFGl3qG+atPZ1g29cmWi0f75wCvobTtLThfOjAL7NCcaLE2437MNpQ==", "requires": { "@api-components/amf-helper-mixin": "^4.1.8", "lit-element": "^2.4.0" diff --git a/package.json b/package.json index 0a2460d..ce185a2 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "@advanced-rest-client/prism-highlight": "^4.0.4", "@anypoint-web-components/anypoint-button": "^1.2.0", "@api-components/amf-helper-mixin": "^4.3.6", - "@api-components/api-example-generator": "^4.4.8", + "@api-components/api-example-generator": "^4.4.13", "lit-element": "^2.4.0" }, "devDependencies": { From 96f4ef836134af80e91eae5eb966b8225c493e0a Mon Sep 17 00:00:00 2001 From: Carolina Wright Date: Fri, 6 Aug 2021 11:50:35 -0300 Subject: [PATCH 4/5] fix: do not render empty example description --- src/ApiResourceExampleDocument.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/ApiResourceExampleDocument.js b/src/ApiResourceExampleDocument.js index 4e87deb..8fed051 100644 --- a/src/ApiResourceExampleDocument.js +++ b/src/ApiResourceExampleDocument.js @@ -579,6 +579,9 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { return ''; } const description = this._computeExampleDescription(example) + if (!description) { + return ''; + } return html`
${description}
`; } From 127b76a29af74969a5beb8141c15af6885191633 Mon Sep 17 00:00:00 2001 From: Carolina Wright Date: Fri, 6 Aug 2021 11:51:10 -0300 Subject: [PATCH 5/5] test: example description being rendered --- demo/APIC-332/APIC-332.raml | 22 ++++++++ demo/apis.json | 1 + demo/index.js | 1 + test/api-resource-example-document.test.js | 60 ++++++++++++++++------ 4 files changed, 69 insertions(+), 15 deletions(-) diff --git a/demo/APIC-332/APIC-332.raml b/demo/APIC-332/APIC-332.raml index e69de29..caf171a 100644 --- a/demo/APIC-332/APIC-332.raml +++ b/demo/APIC-332/APIC-332.raml @@ -0,0 +1,22 @@ +#%RAML 1.0 +title: API with Examples + +types: + Org: + type: object + description: This description for the type is shown + properties: + name: string + address?: string + value?: string + +/organization: + post: + body: + application/json: + type: Org + example: + value: + name: Fake SA + value: Something + description: This description for the example is never shown \ No newline at end of file diff --git a/demo/apis.json b/demo/apis.json index f75f76d..936f6d0 100644 --- a/demo/apis.json +++ b/demo/apis.json @@ -2,6 +2,7 @@ "demo-api/demo-api.raml": "RAML 1.0", "raml-types/raml-types.raml": "RAML 1.0", "google-drive-api/google-drive-api.raml": "RAML 1.0", + "APIC-332/APIC-332.raml": "RAML 1.0", "oas-3-api/oas-3-api.yaml": { "type": "OAS 3.0", "mime": "application/yaml" }, "steveTest-1/stevetest.json": { "type": "OAS 2.0", "mime": "application/json" } } diff --git a/demo/index.js b/demo/index.js index a13b818..b5f9b75 100644 --- a/demo/index.js +++ b/demo/index.js @@ -110,6 +110,7 @@ class ApiDemo extends ApiDemoPage { ['demo-api', 'Demo API'], ['google-drive-api', 'Google Drive'], ['raml-types', 'RAML types with raml examples'], + ['APIC-332', 'APIC-332'], ].forEach(([file, label]) => { result[result.length] = html` ${label} - compact model diff --git a/test/api-resource-example-document.test.js b/test/api-resource-example-document.test.js index 76e4b82..d8186e7 100644 --- a/test/api-resource-example-document.test.js +++ b/test/api-resource-example-document.test.js @@ -32,7 +32,6 @@ describe('ApiResourceExampleDocument', () => { return localStorage.jsonTableEnabled; } - describe('_tableChanged()', () => { let element = /** @type ApiResourceExampleDocument */ (null); beforeEach(async () => { @@ -312,6 +311,23 @@ describe('ApiResourceExampleDocument', () => { return element._ensureArray(schema[key]); } + async function resolveWhenReady(elm, model, path, method, payloadIndex) { + return new Promise((resolve) => { + let payload = getPayload(elm, model, path, method); + if (payloadIndex !== undefined) { + payload = payload[payloadIndex] + } + elm.examples = payload; + elm.addEventListener('has-examples-changed', function f(e) { + if (!e.detail.value) { + return; + } + elm.removeEventListener('has-examples-changed', f); + setTimeout(() => resolve()); + }); + }); + } + describe('__computeExamples()', () => { [ ['Regular model', false], @@ -529,6 +545,34 @@ describe('ApiResourceExampleDocument', () => { }); }); + describe('APIC-332', () => { + [ + ['Regular model', false], + ['Compact model', true] + ].forEach((item) => { + describe(String(item[0]), () => { + let amf; + before(async () => { + amf = await AmfLoader.load(item[1], 'APIC-332'); + }); + + let element = /** @type ApiResourceExampleDocument */ (null); + beforeEach(async () => { + element = await basicFixture(); + element.amf = amf; + await nextFrame(); + }); + + it('renders description for an example', async () => { + element.mediaType = 'application/json'; + await resolveWhenReady(element, amf, '/organization', 'post', 0); + const description = /** @type HTMLElement */ (element.shadowRoot.querySelector('.example-description')); + assert.equal(description.innerText, 'This description for the example is never shown'); + }); + }); + }); + }); + describe('_computeExampleTitle()', () => { let element = /** @type ApiResourceExampleDocument */ (null); @@ -597,20 +641,6 @@ describe('ApiResourceExampleDocument', () => { element.amf = amf; }); - async function resolveWhenReady(elm, model, path, method) { - return new Promise((resolve) => { - const payloads = getPayload(elm, model, path, method); - elm.examples = payloads; - elm.addEventListener('has-examples-changed', function f(e) { - if (!e.detail.value) { - return; - } - elm.removeEventListener('has-examples-changed', f); - setTimeout(() => resolve()); - }); - }); - } - it('passes accessibility test', async () => { await resolveWhenReady(element, amf, '/IncludedInType', 'post'); await assert.isAccessible(element, {