From a61dfbf9a761fb55a962f14011b1a368202b748e Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Mon, 13 May 2019 15:18:41 +0100 Subject: [PATCH] Refactored deprecated usage of this.$() in rendering tests no issue - https://emberjs.com/deprecations/v3.x#toc_jquery-apis --- .../components/gh-file-uploader-test.js | 4 +- .../components/gh-image-uploader-test.js | 10 +---- .../integration/components/gh-navitem-test.js | 40 ++++++++--------- .../components/gh-search-input-test.js | 4 +- .../components/gh-tag-settings-form-test.js | 43 ++++++++----------- .../components/gh-unsplash-test.js | 2 +- 6 files changed, 45 insertions(+), 58 deletions(-) diff --git a/tests/integration/components/gh-file-uploader-test.js b/tests/integration/components/gh-file-uploader-test.js index b9000da1a..4113094ee 100644 --- a/tests/integration/components/gh-file-uploader-test.js +++ b/tests/integration/components/gh-file-uploader-test.js @@ -280,7 +280,7 @@ describe('Integration: Component: gh-file-uploader', function () { files: [] } }); - this.$('.gh-image-uploader').trigger(dragover); + $(find('.gh-image-uploader')).trigger(dragover); }); await settled(); @@ -307,7 +307,7 @@ describe('Integration: Component: gh-file-uploader', function () { await render(hbs`{{gh-file-uploader url=uploadUrl uploadSuccess=(action uploadSuccess)}}`); run(() => { - this.$('.gh-image-uploader').trigger(drop); + $(find('.gh-image-uploader')).trigger(drop); }); await settled(); diff --git a/tests/integration/components/gh-image-uploader-test.js b/tests/integration/components/gh-image-uploader-test.js index b880dcf12..e5546cb22 100644 --- a/tests/integration/components/gh-image-uploader-test.js +++ b/tests/integration/components/gh-image-uploader-test.js @@ -61,12 +61,6 @@ describe('Integration: Component: gh-image-uploader', function () { server.shutdown(); }); - it('renders', async function () { - this.set('image', 'http://example.com/test.png'); - await render(hbs`{{gh-image-uploader image=image}}`); - expect(this.$()).to.have.length(1); - }); - it('renders form with supplied alt text', async function () { await render(hbs`{{gh-image-uploader image=image altText="text test"}}`); expect(find('[data-test-file-input-description]')).to.have.trimmed.text('Upload image of "text test"'); @@ -279,7 +273,7 @@ describe('Integration: Component: gh-image-uploader', function () { files: [] } }); - this.$('.gh-image-uploader').trigger(dragover); + $(find('.gh-image-uploader')).trigger(dragover); }); await settled(); @@ -305,7 +299,7 @@ describe('Integration: Component: gh-image-uploader', function () { await render(hbs`{{gh-image-uploader uploadSuccess=(action uploadSuccess)}}`); run(() => { - this.$('.gh-image-uploader').trigger(drop); + $(find('.gh-image-uploader')).trigger(drop); }); await settled(); diff --git a/tests/integration/components/gh-navitem-test.js b/tests/integration/components/gh-navitem-test.js index 98ad14d42..16ad97367 100644 --- a/tests/integration/components/gh-navitem-test.js +++ b/tests/integration/components/gh-navitem-test.js @@ -1,6 +1,6 @@ import NavItem from 'ghost-admin/models/navigation-item'; import hbs from 'htmlbars-inline-precompile'; -import {click, render, triggerEvent} from '@ember/test-helpers'; +import {click, find, render, triggerEvent} from '@ember/test-helpers'; import {describe, it} from 'mocha'; import {expect} from 'chai'; import {setupRenderingTest} from 'ember-mocha'; @@ -16,36 +16,36 @@ describe('Integration: Component: gh-navitem', function () { this.set('navItem', NavItem.create({label: 'Test', url: '/url'})); await render(hbs`{{gh-navitem navItem=navItem baseUrl=baseUrl}}`); - let $item = this.$('.gh-blognav-item'); + let item = find('.gh-blognav-item'); - expect($item.find('.gh-blognav-grab').length).to.equal(1); - expect($item.find('.gh-blognav-label').length).to.equal(1); - expect($item.find('.gh-blognav-url').length).to.equal(1); - expect($item.find('.gh-blognav-delete').length).to.equal(1); + expect(item.querySelector('.gh-blognav-grab')).to.exist; + expect(item.querySelector('.gh-blognav-label')).to.exist; + expect(item.querySelector('.gh-blognav-url')).to.exist; + expect(item.querySelector('.gh-blognav-delete')).to.exist; // doesn't show any errors - expect($item.hasClass('gh-blognav-item--error')).to.be.false; - expect($item.find('.error').length).to.equal(0); - expect($item.find('.response:visible').length).to.equal(0); + expect(find('.gh-blognav-item--error')).to.not.exist; + expect(find('.error')).to.not.exist; + expect(find('.response')).to.not.be.displayed; }); it('doesn\'t show drag handle for new items', async function () { this.set('navItem', NavItem.create({label: 'Test', url: '/url', isNew: true})); await render(hbs`{{gh-navitem navItem=navItem baseUrl=baseUrl}}`); - let $item = this.$('.gh-blognav-item'); + let item = find('.gh-blognav-item'); - expect($item.find('.gh-blognav-grab').length).to.equal(0); + expect(item.querySelector('.gh-blognav-grab')).to.not.exist; }); it('shows add button for new items', async function () { this.set('navItem', NavItem.create({label: 'Test', url: '/url', isNew: true})); await render(hbs`{{gh-navitem navItem=navItem baseUrl=baseUrl}}`); - let $item = this.$('.gh-blognav-item'); + let item = find('.gh-blognav-item'); - expect($item.find('.gh-blognav-add').length).to.equal(1); - expect($item.find('.gh-blognav-delete').length).to.equal(0); + expect(item.querySelector('.gh-blognav-add')).to.exist; + expect(item.querySelector('.gh-blognav-delete')).to.not.exist; }); it('triggers delete action', async function () { @@ -112,12 +112,12 @@ describe('Integration: Component: gh-navitem', function () { this.get('navItem').validate(); await render(hbs`{{gh-navitem navItem=navItem baseUrl=baseUrl}}`); - let $item = this.$('.gh-blognav-item'); + let item = find('.gh-blognav-item'); - expect($item.hasClass('gh-blognav-item--error')).to.be.true; - expect($item.find('.gh-blognav-label').hasClass('error')).to.be.true; - expect($item.find('.gh-blognav-label .response').text().trim()).to.equal('You must specify a label'); - expect($item.find('.gh-blognav-url').hasClass('error')).to.be.true; - expect($item.find('.gh-blognav-url .response').text().trim()).to.equal('You must specify a URL or relative path'); + expect(item).to.have.class('gh-blognav-item--error'); + expect(item.querySelector('.gh-blognav-label')).to.have.class('error'); + expect(item.querySelector('.gh-blognav-label .response')).to.have.trimmed.text('You must specify a label'); + expect(item.querySelector('.gh-blognav-url')).to.have.class('error'); + expect(item.querySelector('.gh-blognav-url .response')).to.have.trimmed.text('You must specify a URL or relative path'); }); }); diff --git a/tests/integration/components/gh-search-input-test.js b/tests/integration/components/gh-search-input-test.js index 8582ec232..1b186a623 100644 --- a/tests/integration/components/gh-search-input-test.js +++ b/tests/integration/components/gh-search-input-test.js @@ -2,7 +2,7 @@ import Pretender from 'pretender'; import hbs from 'htmlbars-inline-precompile'; import {describe, it} from 'mocha'; import {expect} from 'chai'; -import {fillIn, findAll, render} from '@ember/test-helpers'; +import {fillIn, find, findAll, render} from '@ember/test-helpers'; import {setupRenderingTest} from 'ember-mocha'; describe('Integration: Component: gh-search-input', function () { @@ -22,7 +22,7 @@ describe('Integration: Component: gh-search-input', function () { // renders the component on the page await render(hbs`{{gh-search-input}}`); - expect(this.$('.ember-power-select-search input')).to.have.length(1); + expect(find('.ember-power-select-search input')).to.exist; }); it('opens the dropdown on text entry', async function () { diff --git a/tests/integration/components/gh-tag-settings-form-test.js b/tests/integration/components/gh-tag-settings-form-test.js index 6c94726f2..691779e22 100644 --- a/tests/integration/components/gh-tag-settings-form-test.js +++ b/tests/integration/components/gh-tag-settings-form-test.js @@ -45,13 +45,6 @@ describe('Integration: Component: gh-tag-settings-form', function () { this.owner.register('service:media-queries', mediaQueriesStub); }); - it('renders', async function () { - await render(hbs` - {{gh-tag-settings-form tag=tag setProperty=(action setProperty)}} - `); - expect(this.$()).to.have.length(1); - }); - it('has the correct title', async function () { await render(hbs` {{gh-tag-settings-form tag=tag setProperty=(action setProperty)}} @@ -167,24 +160,24 @@ describe('Integration: Component: gh-tag-settings-form', function () { {{gh-tag-settings-form tag=tag setProperty=(action setProperty)}} `); - let nameFormGroup = this.$('input[name="name"]').closest('.form-group'); - expect(nameFormGroup.hasClass('error'), 'name form group has error state').to.be.true; - expect(nameFormGroup.find('.response').length, 'name form group has error message').to.equal(1); + let nameFormGroup = find('input[name="name"]').closest('.form-group'); + expect(nameFormGroup, 'name form group has error state').to.have.class('error'); + expect(nameFormGroup.querySelector('.response'), 'name form group has error message').to.exist; - let slugFormGroup = this.$('input[name="slug"]').closest('.form-group'); - expect(slugFormGroup.hasClass('error'), 'slug form group has error state').to.be.true; - expect(slugFormGroup.find('.response').length, 'slug form group has error message').to.equal(1); + let slugFormGroup = find('input[name="slug"]').closest('.form-group'); + expect(slugFormGroup, 'slug form group has error state').to.have.class('error'); + expect(slugFormGroup.querySelector('.response'), 'slug form group has error message').to.exist; - let descriptionFormGroup = this.$('textarea[name="description"]').closest('.form-group'); - expect(descriptionFormGroup.hasClass('error'), 'description form group has error state').to.be.true; + let descriptionFormGroup = find('textarea[name="description"]').closest('.form-group'); + expect(descriptionFormGroup, 'description form group has error state').to.have.class('error'); - let metaTitleFormGroup = this.$('input[name="metaTitle"]').closest('.form-group'); - expect(metaTitleFormGroup.hasClass('error'), 'metaTitle form group has error state').to.be.true; - expect(metaTitleFormGroup.find('.response').length, 'metaTitle form group has error message').to.equal(1); + let metaTitleFormGroup = find('input[name="metaTitle"]').closest('.form-group'); + expect(metaTitleFormGroup, 'metaTitle form group has error state').to.have.class('error'); + expect(metaTitleFormGroup.querySelector('.response'), 'metaTitle form group has error message').to.exist; - let metaDescriptionFormGroup = this.$('textarea[name="metaDescription"]').closest('.form-group'); - expect(metaDescriptionFormGroup.hasClass('error'), 'metaDescription form group has error state').to.be.true; - expect(metaDescriptionFormGroup.find('.response').length, 'metaDescription form group has error message').to.equal(1); + let metaDescriptionFormGroup = find('textarea[name="metaDescription"]').closest('.form-group'); + expect(metaDescriptionFormGroup, 'metaDescription form group has error state').to.have.class('error'); + expect(metaDescriptionFormGroup.querySelector('.response'), 'metaDescription form group has error message').to.exist; }); it('displays char count for text fields', async function () { @@ -192,11 +185,11 @@ describe('Integration: Component: gh-tag-settings-form', function () { {{gh-tag-settings-form tag=tag setProperty=(action setProperty)}} `); - let descriptionFormGroup = this.$('textarea[name="description"]').closest('.form-group'); - expect(descriptionFormGroup.find('.word-count').text(), 'description char count').to.equal('12'); + let descriptionFormGroup = find('textarea[name="description"]').closest('.form-group'); + expect(descriptionFormGroup.querySelector('.word-count'), 'description char count').to.have.trimmed.text('12'); - let metaDescriptionFormGroup = this.$('textarea[name="metaDescription"]').closest('.form-group'); - expect(metaDescriptionFormGroup.find('.word-count').text(), 'description char count').to.equal('16'); + let metaDescriptionFormGroup = find('textarea[name="metaDescription"]').closest('.form-group'); + expect(metaDescriptionFormGroup.querySelector('.word-count'), 'description char count').to.have.trimmed.text('16'); }); it('renders SEO title preview', async function () { diff --git a/tests/integration/components/gh-unsplash-test.js b/tests/integration/components/gh-unsplash-test.js index 239d3f645..697896a69 100644 --- a/tests/integration/components/gh-unsplash-test.js +++ b/tests/integration/components/gh-unsplash-test.js @@ -18,7 +18,7 @@ describe('Integration: Component: gh-unsplash', function () { // `); await render(hbs`{{gh-unsplash}}`); - expect(this.$()).to.have.length(1); + expect(this.element).to.exist; }); it('loads new photos by default');