From c33edbac08ea0d93481770cff5c448d8d4fe9754 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Mon, 12 Nov 2018 16:31:47 +0000 Subject: [PATCH] Fixed webhook modal title showing "New webhook" when editing a webhook refs https://github.com/TryGhost/Ghost/issues/10137 - adjust modal title depending on `webhook.isNew` state - add acceptance tests for modal creation - add missing mirage webhook factory - mock integrations/api-keys/webhooks in test env rather than development --- .../components/modal-webhook-form.hbs | 36 +++++++-------- .../app/templates/settings/integration.hbs | 25 +++++----- ghost/admin/mirage/config.js | 6 +-- ghost/admin/mirage/config/webhooks.js | 5 -- ghost/admin/mirage/factories/webhook.js | 18 ++++++++ .../acceptance/settings/integrations-test.js | 46 +++++++++++++++++++ 6 files changed, 99 insertions(+), 37 deletions(-) create mode 100644 ghost/admin/mirage/factories/webhook.js diff --git a/ghost/admin/app/templates/components/modal-webhook-form.hbs b/ghost/admin/app/templates/components/modal-webhook-form.hbs index f9aab6182c..97608540e0 100644 --- a/ghost/admin/app/templates/components/modal-webhook-form.hbs +++ b/ghost/admin/app/templates/components/modal-webhook-form.hbs @@ -1,30 +1,30 @@
-

New webhook

+

{{if webhook.isNew "New" "Edit"}} webhook

{{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="name"}} - + {{gh-text-input value=(readonly webhook.name) input=(action (mut webhook.name) value="target.value") focus-out=(action "validate" "name" target=webhook) - id="new-webhook-name" + id="webhook-name" name="name" class="gh-input mt1" placeholder="Webhook name..." autofocus="autofocus" autocapitalize="off" autocorrect="off" - data-test-input="new-webhook-name"}} - {{gh-error-message errors=webhook.errors property="name" data-test-error="new-webhook-name"}} + data-test-input="webhook-name"}} + {{gh-error-message errors=webhook.errors property="name" data-test-error="webhook-name"}} {{/gh-form-group}}
{{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="event"}} - + {{one-way-select webhook.event options=availableEvents @@ -35,49 +35,49 @@ includeBlank=true prompt="Select an event" update=(action "selectEvent") - id="new-webhook-event" + id="webhook-event" name="event" - data-test-select="new-webhook-event"}} + data-test-select="webhook-event"}} {{svg-jar "arrow-down-small"}} - {{gh-error-message errors=webhook.errors property="event" data-test-error="new-webhook-event"}} + {{gh-error-message errors=webhook.errors property="event" data-test-error="webhook-event"}} {{/gh-form-group}}
{{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="targetUrl"}} - + {{gh-text-input value=(readonly webhook.targetUrl) input=(action (mut webhook.targetUrl) value="target.value") focus-out=(action "validate" "targetUrl" target=webhook) - id="new-webhook-targetUrl" + id="webhook-targetUrl" name="targetUrl" class="gh-input mt1" placeholder="Webhook target URL..." autofocus="autofocus" autocapitalize="off" autocorrect="off" - data-test-input="new-webhook-targetUrl"}} - {{gh-error-message errors=webhook.errors property="targetUrl" data-test-error="new-webhook-targetUrl"}} + data-test-input="webhook-targetUrl"}} + {{gh-error-message errors=webhook.errors property="targetUrl" data-test-error="webhook-targetUrl"}} {{/gh-form-group}}
{{#if config.enableDeveloperExperiments}}
{{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="secret"}} - + {{gh-text-input value=(readonly webhook.secret) oninput=(action (mut webhook.secret) value="target.value") focus-out=(action "validate" "secret" target=webhook) - id="new-webhook-secret" + id="webhook-secret" name="secret" class="gh-input mt1" placeholder="Webhook secret..." autofocus="autofocus" autocapitalize="off" autocorrect="off" - data-test-input="new-webhook-secret"}} - {{gh-error-message errors=webhook.errors property="secret" data-test-error="new-webhook-secret"}} + data-test-input="webhook-secret"}} + {{gh-error-message errors=webhook.errors property="secret" data-test-error="webhook-secret"}} {{/gh-form-group}}
{{/if}} @@ -87,7 +87,7 @@
- {{gh-task-button buttonText diff --git a/ghost/admin/app/templates/settings/integration.hbs b/ghost/admin/app/templates/settings/integration.hbs index 8b741ab3d7..6255f94fd0 100644 --- a/ghost/admin/app/templates/settings/integration.hbs +++ b/ghost/admin/app/templates/settings/integration.hbs @@ -172,28 +172,30 @@ {{#each filteredWebhooks as |webhook|}} - - {{webhook.name}} - {{event-name webhook.event}} - {{webhook.targetUrl}} - {{or webhook.lastTriggeredAtUTC "Not triggered"}} + + {{webhook.name}} + {{event-name webhook.event}} + {{webhook.targetUrl}} + {{or webhook.lastTriggeredAtUTC "Not triggered"}}
- {{#link-to "settings.integration.webhooks.edit" integration webhook}} + {{#link-to "settings.integration.webhooks.edit" integration webhook data-test-link="edit-webhook"}} {{svg-jar "pen" class="w6 h-auto fill-midgrey pa1 mr1"}} {{/link-to}} -
{{else}} - + No webhooks configured - {{#link-to "settings.integration.webhooks.new" integration classNames="flex items-center"}}{{svg-jar "add" class="w3 h-auto fill-blue mr1"}} Add webhook{{/link-to}} + {{#link-to "settings.integration.webhooks.new" integration classNames="flex items-center" data-test-link="add-webhook"}} + {{svg-jar "add" class="w3 h-auto fill-blue mr1"}} Add webhook + {{/link-to}} @@ -203,8 +205,9 @@ - {{#link-to "settings.integration.webhooks.new" integration classNames="flex items-center"}}{{svg-jar "add" class="w3 - h-auto fill-blue mr1"}} Add webhook{{/link-to}} + {{#link-to "settings.integration.webhooks.new" integration classNames="flex items-center" data-test-link="add-webhook"}} + {{svg-jar "add" class="w3h-auto fill-blue mr1"}} Add webhook + {{/link-to}} diff --git a/ghost/admin/mirage/config.js b/ghost/admin/mirage/config.js index deab1d8775..5a3cd54928 100644 --- a/ghost/admin/mirage/config.js +++ b/ghost/admin/mirage/config.js @@ -25,9 +25,6 @@ export default function () { // this.put('/posts/:id/', versionMismatchResponse); // mockTags(this); // this.loadFixtures('settings'); - mockIntegrations(this); - mockApiKeys(this); - mockWebhooks(this); // keep this line, it allows all other API requests to hit the real server this.passthrough(); @@ -45,8 +42,10 @@ export function testConfig() { // this.timing = 400; // delay for each request, automatically set to 0 during testing // this.logging = true; + mockApiKeys(this); mockAuthentication(this); mockConfiguration(this); + mockIntegrations(this); mockInvites(this); mockPosts(this); mockRoles(this); @@ -57,6 +56,7 @@ export function testConfig() { mockThemes(this); mockUploads(this); mockUsers(this); + mockWebhooks(this); /* Notifications -------------------------------------------------------- */ diff --git a/ghost/admin/mirage/config/webhooks.js b/ghost/admin/mirage/config/webhooks.js index 3c8010b3fa..0c927c7f1c 100644 --- a/ghost/admin/mirage/config/webhooks.js +++ b/ghost/admin/mirage/config/webhooks.js @@ -7,11 +7,6 @@ export default function mockWebhooks(server) { server.post('/webhooks/', function ({webhooks}) { let attrs = this.normalizedRequestAttrs(); - - // TODO: should mirage be handling this? - attrs.integrationId = attrs.integration; - delete attrs.integration; - let errors = []; if (!attrs.name) { diff --git a/ghost/admin/mirage/factories/webhook.js b/ghost/admin/mirage/factories/webhook.js new file mode 100644 index 0000000000..8b18525963 --- /dev/null +++ b/ghost/admin/mirage/factories/webhook.js @@ -0,0 +1,18 @@ +import moment from 'moment'; +import {AVAILABLE_EVENTS} from 'ghost-admin/helpers/event-name'; +import {Factory} from 'ember-cli-mirage'; + +export default Factory.extend({ + name(i) { return `Integration ${i + 1}`;}, + event(i) { + let event = AVAILABLE_EVENTS[i % 3]; + return event.event; + }, + target(i) { return `https://example.com/${i + 1}`; }, + lastTriggeredAt: null, + + createdAt() { return moment.utc().format(); }, + createdBy: 1, + updatedAt() { return moment.utc().format(); }, + updatedBy: 1 +}); diff --git a/ghost/admin/tests/acceptance/settings/integrations-test.js b/ghost/admin/tests/acceptance/settings/integrations-test.js index 1d3584bc33..2a96af96f2 100644 --- a/ghost/admin/tests/acceptance/settings/integrations-test.js +++ b/ghost/admin/tests/acceptance/settings/integrations-test.js @@ -422,6 +422,52 @@ describe('Acceptance: Settings - Integrations', function () { ).to.equal('Test Integration'); }); + it('can manage an integration\'s webhooks', async function () { + server.create('integration'); + + await visit('/settings/integrations/1'); + + expect(find('[data-test-webhooks-blank-slate]').length).to.equal(1); + + // open new webhook modal + await click('[data-test-link="add-webhook"]'); + expect(find('[data-test-modal="webhook-form"]').length).to.equal(1); + expect(find('[data-test-modal="webhook-form"] [data-test-text="title"]').text()) + .to.have.string('New webhook'); + + // can cancel new webhook + await click('[data-test-button="cancel-webhook"]'); + expect(find('[data-test-modal="webhook-form"]').length).to.equal(0); + + // create new webhook + await click('[data-test-link="add-webhook"]'); + await fillIn('[data-test-input="webhook-name"]', 'First webhook'); + await fillIn('[data-test-select="webhook-event"]', 'site.changed'); + await fillIn('[data-test-input="webhook-targetUrl"]', 'https://example.com/first-webhook'); + await click('[data-test-button="save-webhook"]'); + + // modal closed and 1 webhook listed with correct details + expect(find('[data-test-modal="webhook-form"]').length).to.equal(0); + expect(find('[data-test-webhook-row]').length).to.equal(1); + let row = find('[data-test-webhook-row="1"]'); + expect(row.find('[data-test-text="name"]').text()) + .to.have.string('First webhook'); + expect(row.find('[data-test-text="event"]').text()) + .to.have.string('Site Changed (rebuild)'); + expect(row.find('[data-test-text="targetUrl"]').text()) + .to.have.string('https://example.com/first-webhook'); + expect(row.find('[data-test-text="last-triggered"]').text()) + .to.have.string('Not triggered'); + + // click edit webhook link + await click('[data-test-webhook-row="1"] [data-test-link="edit-webhook"]'); + + // modal appears and has correct title + expect(find('[data-test-modal="webhook-form"]').length).to.equal(1); + expect(find('[data-test-modal="webhook-form"] [data-test-text="title"]').text()) + .to.have.string('Edit webhook'); + }); + // test to ensure the `value=description` passed to `gh-text-input` is `readonly` it('doesn\'t show unsaved changes modal after placing focus on description field', async function () { server.create('integration');