diff --git a/client/components/close-on-escape/test/index.jsx b/client/components/close-on-escape/test/index.jsx index 4a6b5af61dc74..fa22f63fba495 100644 --- a/client/components/close-on-escape/test/index.jsx +++ b/client/components/close-on-escape/test/index.jsx @@ -1,10 +1,7 @@ /** * @jest-environment jsdom */ - -import { expect } from 'chai'; import { mount, shallow } from 'enzyme'; -import { spy } from 'sinon'; import CloseOnEscape from '../'; const simulateEscapeKeydown = () => @@ -14,13 +11,13 @@ describe( 'CloseOnEscape', () => { describe( 'rendering', () => { test( 'renders nothing', () => { const wrapper = shallow( ); - expect( wrapper.type() ).to.be.a( 'null' ); + expect( wrapper.type() ).toBe( null ); } ); } ); describe( 'escape keydown event', () => { test( 'calls the `onEscape` method of stacked components in LIFO order on each escape keydown', () => { - const onEscapeSpy = spy(); + const onEscapeSpy = jest.fn(); const wrapper1 = mount( { ); simulateEscapeKeydown(); - expect( onEscapeSpy ).to.have.been.calledWith( 2 ); - expect( onEscapeSpy ).not.to.have.been.calledWith( 1 ); + expect( onEscapeSpy ).toHaveBeenCalledWith( 2 ); + expect( onEscapeSpy ).not.toHaveBeenCalledWith( 1 ); simulateEscapeKeydown(); - expect( onEscapeSpy ).to.have.been.calledWith( 1 ); + expect( onEscapeSpy ).toHaveBeenCalledWith( 1 ); } ); } ); } ); diff --git a/client/components/count/test/index.jsx b/client/components/count/test/index.jsx index 901249a02b28e..6241ba742b189 100644 --- a/client/components/count/test/index.jsx +++ b/client/components/count/test/index.jsx @@ -1,17 +1,15 @@ -import { expect } from 'chai'; import { shallow } from 'enzyme'; -import { spy } from 'sinon'; import { Count } from '../'; describe( 'Count', () => { test( 'should use the correct class name', () => { const count = shallow( string } /> ); - expect( count.hasClass( 'count' ) ).to.equal( true ); + expect( count.hasClass( 'count' ) ).toBe( true ); } ); test( 'should call provided as prop numberFormat function', () => { - const numberFormatSpy = spy(); + const numberFormatSpy = jest.fn(); shallow( ); - expect( numberFormatSpy ).to.have.been.calledWith( 23 ); + expect( numberFormatSpy ).toHaveBeenCalledWith( 23 ); } ); } ); diff --git a/client/components/d3-base/test/index.js b/client/components/d3-base/test/index.js index f4dc3a1973a9a..46a05aa2edd18 100644 --- a/client/components/d3-base/test/index.js +++ b/client/components/d3-base/test/index.js @@ -2,7 +2,6 @@ * @jest-environment jsdom */ -import { assert } from 'chai'; import { shallow, mount } from 'enzyme'; import D3Base from '..'; @@ -14,7 +13,7 @@ describe( 'D3base', () => { test( 'should have d3-base CSS class', () => { const base = shallowWithoutLifecycle( ); - assert.lengthOf( base.find( '.d3-base' ), 1 ); + expect( base.find( '.d3-base' ).length ).toBe( 1 ); } ); test( 'should render an svg', () => { @@ -22,7 +21,7 @@ describe( 'D3base', () => { const base = mount( ); - assert.lengthOf( base.render().find( 'svg' ), 1 ); + expect( base.render().find( 'svg' ).length ).toBe( 1 ); } ); test( 'should render a result of the drawChart prop', () => { @@ -37,7 +36,7 @@ describe( 'D3base', () => { const base = mount( ); - assert.lengthOf( base.render().find( 'circle' ), 1 ); + expect( base.render().find( 'circle' ).length ).toBe( 1 ); } ); test( 'should pass a property of getParams output to drawChart function', () => { @@ -51,6 +50,6 @@ describe( 'D3base', () => { const base = mount( ); - assert.lengthOf( base.render().find( 'circle' ), 1 ); + expect( base.render().find( 'circle' ).length ).toBe( 1 ); } ); } ); diff --git a/client/components/data/media-list-data/test/index.jsx b/client/components/data/media-list-data/test/index.jsx index 3713650b03500..8d183fb5cd8fd 100644 --- a/client/components/data/media-list-data/test/index.jsx +++ b/client/components/data/media-list-data/test/index.jsx @@ -1,8 +1,6 @@ /** * @jest-environment jsdom */ - -import { expect } from 'chai'; import { shallow } from 'enzyme'; import { MediaListData } from 'calypso/components/data/media-list-data'; @@ -26,7 +24,7 @@ describe( 'EditorMediaModal', () => { const query = { search: true }; const result = tree.getQuery( query ); - expect( result ).to.eql( query ); + expect( result ).toEqual( query ); } ); test( 'should pass and process filter parameter to media query', () => { @@ -38,7 +36,7 @@ describe( 'EditorMediaModal', () => { const query = { filter: 'images' }; const result = tree.getQuery( query ); - expect( result ).to.eql( { mime_type: 'image/' } ); + expect( result ).toEqual( { mime_type: 'image/' } ); } ); test( 'should pass and process filter parameter for google photos', () => { @@ -50,7 +48,7 @@ describe( 'EditorMediaModal', () => { const query = { filter: 'images', source: 'google_photos' }; const result = tree.getQuery( query ); - expect( result ).to.eql( { + expect( result ).toEqual( { source: 'google_photos', path: 'recent', filter: [ 'mediaType=photo' ], @@ -66,7 +64,7 @@ describe( 'EditorMediaModal', () => { const query = { filter: 'images', source: 'pexels' }; const result = tree.getQuery( query ); - expect( result ).to.eql( { source: 'pexels', path: 'recent' } ); + expect( result ).toEqual( { source: 'pexels', path: 'recent' } ); } ); test( 'should pass source parameter and set recent path to media query', () => { @@ -78,7 +76,7 @@ describe( 'EditorMediaModal', () => { const query = { source: 'anything' }; const result = tree.getQuery( query ); - expect( result ).to.eql( { path: 'recent', source: 'anything' } ); + expect( result ).toEqual( { path: 'recent', source: 'anything' } ); } ); test( 'should pass categoryFilter parameter to media query for Google Photos', () => { @@ -90,7 +88,7 @@ describe( 'EditorMediaModal', () => { const query = { categoryFilter: 'cats', source: 'google_photos' }; const result = tree.getQuery( query ); - expect( result ).to.eql( { + expect( result ).toEqual( { filter: [ 'categoryInclude=cats' ], path: 'recent', source: 'google_photos', @@ -106,6 +104,6 @@ describe( 'EditorMediaModal', () => { const query = { categoryFilter: 'cats', source: '' }; const result = tree.getQuery( query ); - expect( result ).to.eql( {} ); + expect( result ).toEqual( {} ); } ); } ); diff --git a/client/components/data/media-list-data/test/utils.js b/client/components/data/media-list-data/test/utils.js index fad980eac1083..c87efb847b126 100644 --- a/client/components/data/media-list-data/test/utils.js +++ b/client/components/data/media-list-data/test/utils.js @@ -1,4 +1,3 @@ -import { expect } from 'chai'; import utils from '../utils'; describe( 'utils', () => { @@ -6,31 +5,31 @@ describe( 'utils', () => { test( 'should return an empty string for an unknown filter', () => { const baseType = utils.getMimeBaseTypeFromFilter( 'unknown' ); - expect( baseType ).to.equal( '' ); + expect( baseType ).toEqual( '' ); } ); test( 'should return "image/" for "images"', () => { const baseType = utils.getMimeBaseTypeFromFilter( 'images' ); - expect( baseType ).to.equal( 'image/' ); + expect( baseType ).toEqual( 'image/' ); } ); test( 'should return "audio/" for "audio"', () => { const baseType = utils.getMimeBaseTypeFromFilter( 'audio' ); - expect( baseType ).to.equal( 'audio/' ); + expect( baseType ).toEqual( 'audio/' ); } ); test( 'should return "video/" for "videos"', () => { const baseType = utils.getMimeBaseTypeFromFilter( 'videos' ); - expect( baseType ).to.equal( 'video/' ); + expect( baseType ).toEqual( 'video/' ); } ); test( 'should return "application/" for "documents"', () => { const baseType = utils.getMimeBaseTypeFromFilter( 'documents' ); - expect( baseType ).to.equal( 'application/' ); + expect( baseType ).toEqual( 'application/' ); } ); } ); @@ -38,19 +37,19 @@ describe( 'utils', () => { test( 'show return video for videos type', () => { const filter = utils.convertMimeFilter( 'videos' ); - expect( filter ).to.equal( 'video' ); + expect( filter ).toEqual( 'video' ); } ); test( 'show return photo for images type', () => { const filter = utils.convertMimeFilter( 'images' ); - expect( filter ).to.equal( 'photo' ); + expect( filter ).toEqual( 'photo' ); } ); test( 'show return null for unsupported type', () => { const filter = utils.convertMimeFilter( 'cats' ); - expect( filter ).to.equal( null ); + expect( filter ).toBeNull(); } ); } ); @@ -59,7 +58,7 @@ describe( 'utils', () => { const original = { source: 'google_photos' }; const google = utils.getGoogleQuery( original, {} ); - expect( google ).to.eql( original ); + expect( google ).toEqual( original ); } ); test( 'show return media type filter when supplied', () => { @@ -67,7 +66,7 @@ describe( 'utils', () => { const expected = { filter: [ 'mediaType=video' ] }; const google = utils.getGoogleQuery( {}, original ); - expect( google ).to.eql( expected ); + expect( google ).toEqual( expected ); } ); test( 'show return category filter when supplied', () => { @@ -75,7 +74,7 @@ describe( 'utils', () => { const expected = { filter: [ 'categoryInclude=cats' ] }; const google = utils.getGoogleQuery( {}, original ); - expect( google ).to.eql( expected ); + expect( google ).toEqual( expected ); } ); test( 'show return category and media type filter when supplied', () => { @@ -83,7 +82,7 @@ describe( 'utils', () => { const expected = { filter: [ 'mediaType=video', 'categoryInclude=cats' ] }; const google = utils.getGoogleQuery( {}, original ); - expect( google ).to.eql( expected ); + expect( google ).toEqual( expected ); } ); } ); } ); diff --git a/client/components/domains/domain-suggestion/test/index.js b/client/components/domains/domain-suggestion/test/index.js index 84ad773cb87f4..f29b62504d8dc 100644 --- a/client/components/domains/domain-suggestion/test/index.js +++ b/client/components/domains/domain-suggestion/test/index.js @@ -2,7 +2,6 @@ * @jest-environment jsdom */ -import { expect } from 'chai'; import { shallow } from 'enzyme'; import DomainSuggestion from 'calypso/components/domains/domain-suggestion'; @@ -21,7 +20,7 @@ describe( 'Domain Suggestion', () => { /> ); - expect( domainSuggestion.props()[ 'data-e2e-domain' ] ).to.equal( 'example.com' ); + expect( domainSuggestion.props()[ 'data-e2e-domain' ] ).toEqual( 'example.com' ); } ); } ); } ); diff --git a/client/components/domains/registrant-extra-info/test/fr-form.js b/client/components/domains/registrant-extra-info/test/fr-form.js index 087bc11826e0f..d741c3bc436d9 100644 --- a/client/components/domains/registrant-extra-info/test/fr-form.js +++ b/client/components/domains/registrant-extra-info/test/fr-form.js @@ -1,4 +1,3 @@ -import { expect } from 'chai'; import { sanitizeVat } from '../fr-form'; describe( 'fr-form', () => { @@ -14,7 +13,7 @@ describe( 'fr-form', () => { ]; vatPatterns.forEach( ( { before, after } ) => - expect( sanitizeVat( before ) ).to.eql( after ) + expect( sanitizeVat( before ) ).toEqual( after ) ); } ); @@ -66,8 +65,8 @@ describe( 'fr-form', () => { [ 'GBHA9997' ], ]; - validVatPatterns.forEach( ( [ pattern, description ] ) => - expect( sanitizeVat( pattern ) ).to.eql( pattern.toUpperCase(), description ) + validVatPatterns.forEach( ( [ pattern ] ) => + expect( sanitizeVat( pattern ) ).toEqual( pattern.toUpperCase() ) ); } ); } ); diff --git a/client/components/domains/registrant-extra-info/test/fr-validate-contact-details.js b/client/components/domains/registrant-extra-info/test/fr-validate-contact-details.js index 5e14ea60198ce..70937c5080f81 100644 --- a/client/components/domains/registrant-extra-info/test/fr-validate-contact-details.js +++ b/client/components/domains/registrant-extra-info/test/fr-validate-contact-details.js @@ -1,4 +1,3 @@ -import { expect } from 'chai'; import { omit } from 'lodash'; import validateContactDetails from '../fr-validate-contact-details'; @@ -40,13 +39,13 @@ describe( 'validateContactDetails', () => { } test( 'should accept valid example data (sanity check)', () => { - expect( validateContactDetails( contactDetails ) ).to.eql( {} ); + expect( validateContactDetails( contactDetails ) ).toEqual( {} ); } ); test( 'should handle missing extra', () => { const testDetails = omit( contactDetails, 'extra' ); - expect( validateContactDetails( testDetails ) ).to.have.property( 'extra' ); + expect( validateContactDetails( testDetails ) ).toHaveProperty( 'extra' ); } ); test( 'should handle null extra', () => { @@ -54,7 +53,7 @@ describe( 'validateContactDetails', () => { extra: null, } ); - expect( validateContactDetails( testDetails ) ).to.have.property( 'extra' ); + expect( validateContactDetails( testDetails ) ).toHaveProperty( 'extra' ); } ); // validateContactDetails data @@ -78,21 +77,21 @@ describe( 'validateContactDetails', () => { } ); test( 'should accept an organization', () => { - expect( validateContactDetails( organizationDetails ) ).to.eql( {} ); + expect( validateContactDetails( organizationDetails ) ).toEqual( {} ); } ); test( 'should not be missing', () => { const testDetails = omit( organizationDetails, 'organization' ); const result = validateContactDetails( testDetails ); - expect( result ).to.have.property( 'organization' ); + expect( result ).toHaveProperty( 'organization' ); } ); test( 'should not be empty', () => { const testDetails = Object.assign( {}, organizationDetails, { organization: '' } ); const result = validateContactDetails( testDetails ); - expect( result ).to.have.property( 'organization' ); + expect( result ).toHaveProperty( 'organization' ); } ); test( 'should reject long strings', () => { @@ -101,7 +100,7 @@ describe( 'validateContactDetails', () => { } ); const result = validateContactDetails( testDetails ); - expect( result ).to.have.property( 'organization' ); + expect( result ).toHaveProperty( 'organization' ); } ); test( 'should reject invalid characters', () => { @@ -110,7 +109,7 @@ describe( 'validateContactDetails', () => { } ); const result = validateContactDetails( testDetails ); - expect( result ).to.have.property( 'organization' ); + expect( result ).toHaveProperty( 'organization' ); } ); } ); @@ -123,21 +122,21 @@ describe( 'validateContactDetails', () => { const testDetails = omit( individualDetails, 'organization' ); const result = validateContactDetails( testDetails ); - expect( result ).to.eql( {} ); + expect( result ).toEqual( {} ); } ); test( 'should accept null organization', () => { const testDetails = Object.assign( {}, individualDetails, { organization: '' } ); const result = validateContactDetails( testDetails ); - expect( result ).to.eql( {} ); + expect( result ).toEqual( {} ); } ); test( 'should accept empty organization', () => { const testDetails = Object.assign( {}, individualDetails, { organization: '' } ); const result = validateContactDetails( testDetails ); - expect( result ).to.eql( {} ); + expect( result ).toEqual( {} ); } ); } ); } ); @@ -148,7 +147,8 @@ describe( 'validateContactDetails', () => { const testDetails = contactWithExtraProperty( 'sirenSiret', sirenSiret ); const result = validateContactDetails( testDetails ); - expect( result, `expected to accept '${ sirenSiret }'` ).to.eql( {} ); + // expected to accept '${ sirenSiret }' + expect( result ).toEqual( {} ); } ); } ); @@ -164,10 +164,10 @@ describe( 'validateContactDetails', () => { const testDetails = Object.assign( {}, contactDetails, { extra: { fr: { sirenSiret } } } ); const result = validateContactDetails( testDetails ); - expect( result, `expected to reject '${ sirenSiret }'` ) - .to.have.property( 'extra' ) - .with.property( 'fr' ) - .with.property( 'sirenSiret' ); + // expected to reject '${ sirenSiret }' + expect( result ).toHaveProperty( 'extra' ); + expect( result.extra ).toHaveProperty( 'fr' ); + expect( result.extra.fr ).toHaveProperty( 'sirenSiret' ); } ); } ); @@ -178,11 +178,10 @@ describe( 'validateContactDetails', () => { const testDetails = Object.assign( {}, contactDetails, { extra: { fr: { sirenSiret } } } ); const result = validateContactDetails( testDetails ); - expect( result, `expected to reject '${ sirenSiret }'` ) - .to.have.property( 'extra' ) - .with.property( 'fr' ) - .with.property( 'sirenSiret' ) - .to.deep.equal( [ 'checksum' ] ); + // expected to reject '${ sirenSiret }' + expect( result ).toHaveProperty( 'extra' ); + expect( result.extra ).toHaveProperty( 'fr' ); + expect( result.extra.fr ).toHaveProperty( 'sirenSiret', [ 'checksum' ] ); } ); } ); @@ -190,7 +189,7 @@ describe( 'validateContactDetails', () => { const testDetails = contactWithExtraProperty( 'sirenSiret', '' ); const result = validateContactDetails( testDetails ); - expect( result ).to.eql( {} ); + expect( result ).toEqual( {} ); } ); test( 'should accept a missing value', () => { @@ -199,7 +198,7 @@ describe( 'validateContactDetails', () => { extra: { fr: omit( contactDetails.extra.fr, 'sirenSiret' ) }, }; - expect( validateContactDetails( testDetails ) ).to.eql( {} ); + expect( validateContactDetails( testDetails ) ).toEqual( {} ); } ); } ); @@ -254,7 +253,8 @@ describe( 'validateContactDetails', () => { const testDetails = contactWithExtraProperty( 'registrantVatId', registrantVatId ); const result = validateContactDetails( testDetails ); - expect( result, `expected to accept '${ registrantVatId }'` ).to.eql( {} ); + // expected to accept '${ registrantVatId }' + expect( result ).toEqual( {} ); } ); } ); @@ -265,10 +265,10 @@ describe( 'validateContactDetails', () => { } ); const result = validateContactDetails( testDetails ); - expect( result, `expected to reject '${ registrantVatId }'` ) - .to.have.property( 'extra' ) - .with.property( 'fr' ) - .with.property( 'registrantVatId' ); + // expected to reject '${ registrantVatId }' + expect( result ).toHaveProperty( 'extra' ); + expect( result.extra ).toHaveProperty( 'fr' ); + expect( result.extra.fr ).toHaveProperty( 'registrantVatId' ); } ); } ); @@ -276,7 +276,7 @@ describe( 'validateContactDetails', () => { const testDetails = contactWithExtraProperty( 'registrantVatId', '' ); const result = validateContactDetails( testDetails ); - expect( result ).to.eql( {} ); + expect( result ).toEqual( {} ); } ); test( 'should accept a missing value', () => { @@ -285,7 +285,7 @@ describe( 'validateContactDetails', () => { extra: { fr: omit( contactDetails.extra.fr, 'registrantVatId' ) }, }; - expect( validateContactDetails( testDetails ) ).to.eql( {} ); + expect( validateContactDetails( testDetails ) ).toEqual( {} ); } ); } ); @@ -299,7 +299,8 @@ describe( 'validateContactDetails', () => { const testDetails = contactWithExtraProperty( 'trademarkNumber', trademarkNumber ); const result = validateContactDetails( testDetails ); - expect( result, `expected to accept '${ trademarkNumber }'` ).to.eql( {} ); + // expected to accept '${ trademarkNumber }' + expect( result ).toEqual( {} ); } ); } ); @@ -311,10 +312,10 @@ describe( 'validateContactDetails', () => { const result = validateContactDetails( testDetails ); - expect( result, `expected to reject '${ trademarkNumber }'` ) - .to.have.property( 'extra' ) - .with.property( 'fr' ) - .with.property( 'trademarkNumber' ); + // expected to reject '${ trademarkNumber }' + expect( result ).toHaveProperty( 'extra' ); + expect( result.extra ).toHaveProperty( 'fr' ); + expect( result.extra.fr ).toHaveProperty( 'trademarkNumber' ); } ); } ); @@ -322,7 +323,7 @@ describe( 'validateContactDetails', () => { const testDetails = contactWithExtraProperty( 'trademarkNumber', '' ); const result = validateContactDetails( testDetails ); - expect( result ).to.eql( {} ); + expect( result ).toEqual( {} ); } ); test( 'should accept a missing value', () => { @@ -331,7 +332,7 @@ describe( 'validateContactDetails', () => { extra: omit( contactDetails.extra, 'trademarkNumber' ), }; - expect( validateContactDetails( testDetails ) ).to.eql( {} ); + expect( validateContactDetails( testDetails ) ).toEqual( {} ); } ); } ); } ); diff --git a/client/components/domains/registrant-extra-info/test/index.js b/client/components/domains/registrant-extra-info/test/index.js index 19106f10d621e..cf5938aff3087 100644 --- a/client/components/domains/registrant-extra-info/test/index.js +++ b/client/components/domains/registrant-extra-info/test/index.js @@ -1,4 +1,3 @@ -import { expect } from 'chai'; import { shallow } from 'enzyme'; import RegistrantExtraInfoCaForm from '../ca-form'; import RegistrantExtraInfoFrForm from '../fr-form'; @@ -9,22 +8,22 @@ describe( 'Switcher Form', () => { test( 'should render correct form for fr', () => { const wrapper = shallow( ); - expect( wrapper.find( RegistrantExtraInfoFrForm ) ).to.have.length( 1 ); - expect( wrapper.find( RegistrantExtraInfoCaForm ) ).to.have.length( 0 ); + expect( wrapper.find( RegistrantExtraInfoFrForm ) ).toHaveLength( 1 ); + expect( wrapper.find( RegistrantExtraInfoCaForm ) ).toHaveLength( 0 ); } ); test( 'should render correct form for ca', () => { const wrapper = shallow( ); - expect( wrapper.find( RegistrantExtraInfoCaForm ) ).to.have.length( 1 ); - expect( wrapper.find( RegistrantExtraInfoFrForm ) ).to.have.length( 0 ); + expect( wrapper.find( RegistrantExtraInfoCaForm ) ).toHaveLength( 1 ); + expect( wrapper.find( RegistrantExtraInfoFrForm ) ).toHaveLength( 0 ); } ); test( 'should render correct form for uk', () => { const wrapper = shallow( ); - expect( wrapper.find( RegistrantExtraInfoCaForm ) ).to.have.length( 0 ); - expect( wrapper.find( RegistrantExtraInfoFrForm ) ).to.have.length( 0 ); - expect( wrapper.find( RegistrantExtraInfoUkForm ) ).to.have.length( 1 ); + expect( wrapper.find( RegistrantExtraInfoCaForm ) ).toHaveLength( 0 ); + expect( wrapper.find( RegistrantExtraInfoFrForm ) ).toHaveLength( 0 ); + expect( wrapper.find( RegistrantExtraInfoUkForm ) ).toHaveLength( 1 ); } ); } ); diff --git a/client/components/drop-zone/test/index.jsx b/client/components/drop-zone/test/index.jsx index 306b9da82db6e..637b7e802ea85 100644 --- a/client/components/drop-zone/test/index.jsx +++ b/client/components/drop-zone/test/index.jsx @@ -1,8 +1,6 @@ /** * @jest-environment jsdom */ - -import { expect } from 'chai'; import { Component, createElement } from 'react'; import ReactDom from 'react-dom'; import TestUtils from 'react-dom/test-utils'; @@ -51,7 +49,7 @@ describe( 'index', () => { test( 'should render as a child of its container by default', () => { const tree = ReactDom.render( createElement( DropZone, requiredProps ), container ); - expect( tree.zoneRef.current.parentNode.id ).to.equal( 'container' ); + expect( tree.zoneRef.current.parentNode.id ).toEqual( 'container' ); } ); test( 'should accept a fullScreen prop to be rendered at the root', () => { @@ -63,8 +61,8 @@ describe( 'index', () => { container ); - expect( tree.zoneRef.current.parentNode.id ).to.not.equal( 'container' ); - expect( tree.zoneRef.current.parentNode.parentNode ).to.eql( document.body ); + expect( tree.zoneRef.current.parentNode.id ).not.toEqual( 'container' ); + expect( tree.zoneRef.current.parentNode.parentNode ).toBe( document.body ); } ); test( 'should render default content if none is provided', () => { @@ -73,7 +71,7 @@ describe( 'index', () => { TestUtils.findRenderedDOMComponentWithClass( tree, 'drop-zone__content-icon' ); TestUtils.findRenderedDOMComponentWithClass( tree, 'drop-zone__content-text' ); - expect( content.textContent ).to.equal( 'Drop files to upload' ); + expect( content.textContent ).toEqual( 'Drop files to upload' ); } ); test( 'should accept children to override the default content', () => { @@ -83,7 +81,7 @@ describe( 'index', () => { ); const content = TestUtils.findRenderedDOMComponentWithClass( tree, 'drop-zone__content' ); - expect( content.textContent ).to.equal( 'Hello World' ); + expect( content.textContent ).toEqual( 'Hello World' ); } ); test( 'should accept an icon to override the default icon', () => { @@ -97,7 +95,7 @@ describe( 'index', () => { const icon = TestUtils.findRenderedDOMComponentWithClass( tree, 'customIconClassName' ); - expect( TestUtils.isDOMComponent( icon ) ).to.equal( true ); + expect( TestUtils.isDOMComponent( icon ) ).toEqual( true ); } ); test( 'should highlight the drop zone when dragging over the body', () => { @@ -106,8 +104,8 @@ describe( 'index', () => { window.dispatchEvent( dragEnterEvent ); - expect( tree.state.isDraggingOverDocument ).to.be.ok; - expect( tree.state.isDraggingOverElement ).to.not.be.ok; + expect( tree.state.isDraggingOverDocument ).toBeTruthy(); + expect( tree.state.isDraggingOverElement ).toBeFalsy(); } ); test( 'should start observing the body for mutations when dragging over', () => { @@ -118,7 +116,7 @@ describe( 'index', () => { window.dispatchEvent( dragEnterEvent ); process.nextTick( function () { - expect( tree.observer ).to.be.ok; + expect( tree.observer ).toBeTruthy(); done(); } ); } ); @@ -134,7 +132,7 @@ describe( 'index', () => { window.dispatchEvent( dragLeaveEvent ); process.nextTick( function () { - expect( tree.observer ).to.be.undefined; + expect( tree.observer ).toBeUndefined(); done(); } ); } ); @@ -155,8 +153,8 @@ describe( 'index', () => { window.dispatchEvent( dragEnterEvent ); - expect( tree.state.isDraggingOverDocument ).to.not.be.ok; - expect( tree.state.isDraggingOverElement ).to.not.be.ok; + expect( tree.state.isDraggingOverDocument ).toBeFalsy(); + expect( tree.state.isDraggingOverElement ).toBeFalsy(); } ); test( 'should further highlight the drop zone when dragging over the element', () => { @@ -166,8 +164,8 @@ describe( 'index', () => { const dragEnterEvent = new window.MouseEvent( 'dragenter' ); window.dispatchEvent( dragEnterEvent ); - expect( tree.state.isDraggingOverDocument ).to.be.ok; - expect( tree.state.isDraggingOverElement ).to.be.ok; + expect( tree.state.isDraggingOverDocument ).toBeTruthy(); + expect( tree.state.isDraggingOverElement ).toBeTruthy(); } ); test( 'should further highlight the drop zone when dragging over the body if fullScreen', () => { @@ -182,8 +180,8 @@ describe( 'index', () => { const dragEnterEvent = new window.MouseEvent( 'dragenter' ); window.dispatchEvent( dragEnterEvent ); - expect( tree.state.isDraggingOverDocument ).to.be.ok; - expect( tree.state.isDraggingOverElement ).to.be.ok; + expect( tree.state.isDraggingOverDocument ).toBeTruthy(); + expect( tree.state.isDraggingOverElement ).toBeTruthy(); } ); test( 'should call onDrop with the raw event data when a drop occurs', () => { @@ -202,8 +200,8 @@ describe( 'index', () => { const dropEvent = new window.MouseEvent( 'drop' ); window.dispatchEvent( dropEvent ); - expect( spyDrop.calledOnce ).to.be.ok; - expect( spyDrop.getCall( 0 ).args[ 0 ] ).to.eql( dropEvent ); + expect( spyDrop.calledOnce ).toBeTruthy(); + expect( spyDrop.getCall( 0 ).args[ 0 ] ).toBe( dropEvent ); } ); test( 'should call onFilesDrop with the files array when a drop occurs', () => { @@ -222,8 +220,8 @@ describe( 'index', () => { dropEvent.dataTransfer = { files: [ 1, 2, 3 ] }; window.dispatchEvent( dropEvent ); - expect( spyDrop.calledOnce ).to.be.ok; - expect( spyDrop.getCall( 0 ).args[ 0 ] ).to.eql( [ 1, 2, 3 ] ); + expect( spyDrop.calledOnce ).toBeTruthy(); + expect( spyDrop.getCall( 0 ).args[ 0 ] ).toEqual( [ 1, 2, 3 ] ); } ); test( 'should not call onFilesDrop if onVerifyValidTransfer returns false', () => { @@ -245,7 +243,7 @@ describe( 'index', () => { dropEvent.dataTransfer = { files: [ 1, 2, 3 ] }; window.dispatchEvent( dropEvent ); - expect( spyDrop.called ).to.not.be.ok; + expect( spyDrop.called ).toBeFalsy(); } ); test( 'should allow more than one rendered DropZone on a page', () => { @@ -264,10 +262,10 @@ describe( 'index', () => { const dragEnterEvent = new window.MouseEvent( 'dragenter' ); window.dispatchEvent( dragEnterEvent ); - expect( rendered ).to.have.lengthOf( 2 ); + expect( rendered ).toHaveLength( 2 ); rendered.forEach( function ( zone ) { - expect( zone.state.isDraggingOverDocument ).to.be.ok; - expect( zone.state.isDraggingOverElement ).to.not.be.ok; + expect( zone.state.isDraggingOverDocument ).toBeTruthy(); + expect( zone.state.isDraggingOverElement ).toBeFalsy(); } ); } ); @@ -285,7 +283,7 @@ describe( 'index', () => { 'drop-zone__content-text' ); - expect( textContent.textContent ).to.equal( 'Custom Drop Zone Label' ); + expect( textContent.textContent ).toEqual( 'Custom Drop Zone Label' ); } ); test( 'should show the default text label if none specified', () => { @@ -296,6 +294,6 @@ describe( 'index', () => { 'drop-zone__content-text' ); - expect( textContent.textContent ).to.equal( 'Drop files to upload' ); + expect( textContent.textContent ).toEqual( 'Drop files to upload' ); } ); } ); diff --git a/client/components/feature-example/test/index.js b/client/components/feature-example/test/index.js index 3d89536900f94..5cc2ed7e7da77 100644 --- a/client/components/feature-example/test/index.js +++ b/client/components/feature-example/test/index.js @@ -1,11 +1,10 @@ -import { assert } from 'chai'; import { shallow } from 'enzyme'; import FeatureExample from '../index'; describe( 'Feature Example', () => { test( 'should have Feature-example class', () => { const featureExample = shallow( ); - assert.lengthOf( featureExample.find( '.feature-example' ), 1 ); + expect( featureExample.find( '.feature-example' ).length ).toBe( 1 ); } ); test( 'should contains the passed children wrapped by a feature-example div', () => { @@ -14,6 +13,6 @@ describe( 'Feature Example', () => {
test
 ); - assert.isTrue( featureExample.contains(
test
) ); + expect( featureExample.contains(
test
) ).toBe( true ); } ); } ); diff --git a/client/components/forms/counted-textarea/test/index.jsx b/client/components/forms/counted-textarea/test/index.jsx index 54f06eda05522..0ad5f8629bd4a 100644 --- a/client/components/forms/counted-textarea/test/index.jsx +++ b/client/components/forms/counted-textarea/test/index.jsx @@ -1,4 +1,3 @@ -import { expect } from 'chai'; import ShallowRenderer from 'react-test-renderer/shallow'; import { CountedTextarea } from '../'; @@ -13,23 +12,23 @@ describe( 'index', () => { renderer.render( ); const result = renderer.getRenderOutput(); - expect( result.props.className ).to.equal( 'counted-textarea' ); - expect( result.props.children ).to.have.length( 2 ); - expect( result.props.children[ 1 ].props.children[ 0 ] ).to.equal( '12 characters' ); + expect( result.props.className ).toEqual( 'counted-textarea' ); + expect( result.props.children ).toHaveLength( 2 ); + expect( result.props.children[ 1 ].props.children[ 0 ] ).toEqual( '12 characters' ); } ); test( 'should render warning styles when the acceptable length is exceeded', () => { renderer.render( ); const result = renderer.getRenderOutput(); - expect( result.props.className ).to.equal( 'counted-textarea is-exceeding-acceptable-length' ); + expect( result.props.className ).toEqual( 'counted-textarea is-exceeding-acceptable-length' ); } ); test( 'should apply className to the wrapper element', () => { renderer.render( ); const result = renderer.getRenderOutput(); - expect( result.props.className ).to.equal( 'counted-textarea custom-class' ); + expect( result.props.className ).toEqual( 'counted-textarea custom-class' ); } ); test( 'should pass props to the child textarea', () => { @@ -41,10 +40,10 @@ describe( 'index', () => { ); const result = renderer.getRenderOutput(); - expect( result.props.children ).to.have.length( 2 ); - expect( result.props.children[ 0 ].props.value ).to.equal( value ); - expect( result.props.children[ 0 ].props.placeholder ).to.equal( placeholder ); - expect( result.props.children[ 0 ].props.className ).to.equal( 'counted-textarea__input' ); + expect( result.props.children ).toHaveLength( 2 ); + expect( result.props.children[ 0 ].props.value ).toEqual( value ); + expect( result.props.children[ 0 ].props.placeholder ).toEqual( placeholder ); + expect( result.props.children[ 0 ].props.className ).toEqual( 'counted-textarea__input' ); } ); test( 'should not use the placeholder as the counted item if value is empty and countPlaceholderLength is not set', () => { @@ -56,7 +55,7 @@ describe( 'index', () => { ); const result = renderer.getRenderOutput(); - expect( result.props.children[ 1 ].props.children[ 0 ] ).to.equal( '0 characters' ); + expect( result.props.children[ 1 ].props.children[ 0 ] ).toEqual( '0 characters' ); } ); test( 'should use the placeholder as the counted item if value is empty and countPlaceholderLength is true', () => { @@ -73,7 +72,7 @@ describe( 'index', () => { ); const result = renderer.getRenderOutput(); - expect( result.props.children[ 1 ].props.children[ 0 ] ).to.equal( '16 characters' ); + expect( result.props.children[ 1 ].props.children[ 0 ] ).toEqual( '16 characters' ); } ); test( 'should use the value as the counted item if value is set', () => { @@ -85,7 +84,7 @@ describe( 'index', () => { ); const result = renderer.getRenderOutput(); - expect( result.props.children[ 1 ].props.children[ 0 ] ).to.equal( '12 characters' ); + expect( result.props.children[ 1 ].props.children[ 0 ] ).toEqual( '12 characters' ); } ); test( 'should not pass acceptableLength prop to the child textarea', () => { @@ -101,10 +100,10 @@ describe( 'index', () => { ); const result = renderer.getRenderOutput(); - expect( result.props.children ).to.have.length( 2 ); - expect( result.props.children[ 0 ].props.value ).to.equal( value ); - expect( result.props.children[ 0 ].props.acceptableLength ).to.be.undefined; - expect( result.props.children[ 0 ].props.className ).to.equal( 'counted-textarea__input' ); + expect( result.props.children ).toHaveLength( 2 ); + expect( result.props.children[ 0 ].props.value ).toEqual( value ); + expect( result.props.children[ 0 ].props.acceptableLength ).toBeUndefined(); + expect( result.props.children[ 0 ].props.className ).toEqual( 'counted-textarea__input' ); } ); test( 'should render a reversed count when set to showRemainingCount', () => { @@ -120,9 +119,9 @@ describe( 'index', () => { ); const result = renderer.getRenderOutput(); - expect( result.props.className ).to.equal( 'counted-textarea' ); - expect( result.props.children ).to.have.length( 2 ); - expect( result.props.children[ 1 ].props.children[ 0 ] ).to.equal( '128 characters remaining' ); + expect( result.props.className ).toEqual( 'counted-textarea' ); + expect( result.props.children ).toHaveLength( 2 ); + expect( result.props.children[ 1 ].props.children[ 0 ] ).toEqual( '128 characters remaining' ); } ); test( 'should render additional panel content when set', () => { @@ -141,9 +140,9 @@ describe( 'index', () => { ); const result = renderer.getRenderOutput(); - expect( result.props.className ).to.equal( 'counted-textarea' ); - expect( result.props.children ).to.have.length( 2 ); - expect( result.props.children[ 1 ].props.children[ 0 ] ).to.equal( '128 characters remaining' ); - expect( result.props.children[ 1 ].props.children[ 1 ] ).to.equal( 'Extra stuff' ); + expect( result.props.className ).toEqual( 'counted-textarea' ); + expect( result.props.children ).toHaveLength( 2 ); + expect( result.props.children[ 1 ].props.children[ 0 ] ).toEqual( '128 characters remaining' ); + expect( result.props.children[ 1 ].props.children[ 1 ] ).toEqual( 'Extra stuff' ); } ); } ); diff --git a/client/components/forms/range/test/index.jsx b/client/components/forms/range/test/index.jsx index 80f677c129722..d615d661870aa 100644 --- a/client/components/forms/range/test/index.jsx +++ b/client/components/forms/range/test/index.jsx @@ -5,7 +5,6 @@ /* eslint jest/expect-expect: ["error", { "assertFunctionNames": ["TestUtils.*"] }] */ import { Gridicon } from '@automattic/components'; -import { expect } from 'chai'; import ReactDom from 'react-dom'; import TestUtils from 'react-dom/test-utils'; import FormRange from '../'; @@ -28,8 +27,8 @@ describe( 'index', () => { ); const content = TestUtils.scryRenderedDOMComponentsWithClass( range, 'range__content' ); - expect( content ).to.have.length( 1 ); - expect( content[ 0 ].getAttribute( 'class' ) ).to.contain( 'is-min' ); + expect( content ).toHaveLength( 1 ); + expect( content[ 0 ].getAttribute( 'class' ) ).toEqual( expect.stringContaining( 'is-min' ) ); } ); test( 'should render ending content if passed a `maxContent` prop', () => { @@ -45,8 +44,8 @@ describe( 'index', () => { ); const content = TestUtils.scryRenderedDOMComponentsWithClass( range, 'range__content' ); - expect( content ).to.have.length( 1 ); - expect( content[ 0 ].getAttribute( 'class' ) ).to.contain( 'is-max' ); + expect( content ).toHaveLength( 1 ); + expect( content[ 0 ].getAttribute( 'class' ) ).toEqual( expect.stringContaining( 'is-max' ) ); } ); test( 'should render a value label if passed a truthy `showValueLabel` prop', () => { @@ -55,6 +54,6 @@ describe( 'index', () => { ); const label = TestUtils.findRenderedDOMComponentWithClass( range, 'range__label' ); - expect( label.textContent ).to.equal( '8' ); + expect( label.textContent ).toEqual( '8' ); } ); } ); diff --git a/client/components/happiness-support/test/index.jsx b/client/components/happiness-support/test/index.jsx index cfb109b78ab87..06bd4011e4c14 100644 --- a/client/components/happiness-support/test/index.jsx +++ b/client/components/happiness-support/test/index.jsx @@ -1,6 +1,4 @@ -import { expect } from 'chai'; import { shallow } from 'enzyme'; -import { spy } from 'sinon'; import HappychatButton from 'calypso/components/happychat/button'; import HappychatConnection from 'calypso/components/happychat/connection-connected'; import { @@ -23,14 +21,14 @@ describe( 'HappinessSupport', () => { test( 'should render translated heading content', () => { const heading = wrapper.find( 'h3' ); - expect( heading ).to.have.length( 1 ); - expect( heading.props().children ).to.equal( 'Translated: Priority support' ); + expect( heading ).toHaveLength( 1 ); + expect( heading.props().children ).toEqual( 'Translated: Priority support' ); } ); test( 'should render translated help content', () => { const content = wrapper.find( 'p.happiness-support__description' ); - expect( content ).to.have.length( 1 ); - expect( content.props().children ).to.equal( + expect( content ).toHaveLength( 1 ); + expect( content.props().children ).toEqual( 'Translated: {{strong}}Need help?{{/strong}} A Happiness Engineer can answer questions about your site and your\xA0account.' ); } ); @@ -38,7 +36,7 @@ describe( 'HappinessSupport', () => { test( 'should render a translated support button', () => { expect( wrapper.find( 'ForwardRef(Button).happiness-support__support-button>span' ).props().children - ).to.equal( 'Translated: Support documentation' ); + ).toEqual( 'Translated: Support documentation' ); } ); test( 'should render a support button with link to SUPPORT_ROOT if it is not for JetPack', () => { @@ -47,25 +45,23 @@ describe( 'HappinessSupport', () => { ); expect( wrapper.find( 'ForwardRef(Button).happiness-support__support-button' ).props().href - ).to.equal( SUPPORT_ROOT ); + ).toEqual( SUPPORT_ROOT ); } ); test( 'should render a support button with link to JETPACK_SUPPORT if it is for JetPack', () => { wrapper = shallow( ); - expect( wrapper.find( 'ForwardRef(Button)' ).last().prop( 'href' ) ).to.equal( - JETPACK_SUPPORT - ); + expect( wrapper.find( 'ForwardRef(Button)' ).last().prop( 'href' ) ).toEqual( JETPACK_SUPPORT ); } ); test( 'should have is-placeholder className only if it is a placeholder', () => { - expect( wrapper.find( '.happiness-support' ).hasClass( 'is-placeholder' ) ).to.be.false; + expect( wrapper.find( '.happiness-support' ).hasClass( 'is-placeholder' ) ).toBe( false ); wrapper = shallow( ); - expect( wrapper.find( '.happiness-support' ).hasClass( 'is-placeholder' ) ).to.be.true; + expect( wrapper.find( '.happiness-support' ).hasClass( 'is-placeholder' ) ).toBe( true ); } ); test( 'should render a when showLiveChat prop is true', () => { @@ -76,7 +72,7 @@ describe( 'HappinessSupport', () => { showLiveChatButton={ true } /> ); - expect( wrapper.find( HappychatConnection ) ).to.have.length( 1 ); + expect( wrapper.find( HappychatConnection ) ).toHaveLength( 1 ); } ); describe( 'LiveChat button', () => { @@ -93,42 +89,42 @@ describe( 'HappinessSupport', () => { test( 'should be rendered only when showLiveChatButton prop is true and LiveChat is available', () => { // should be rendered here - expect( wrapper.find( HappychatButton ) ).to.have.length( 1 ); + expect( wrapper.find( HappychatButton ) ).toHaveLength( 1 ); // false cases wrapper = shallow( ); - expect( wrapper.find( HappychatButton ) ).to.have.length( 0 ); + expect( wrapper.find( HappychatButton ) ).toHaveLength( 0 ); wrapper = shallow( ); - expect( wrapper.find( HappychatButton ) ).to.have.length( 0 ); + expect( wrapper.find( HappychatButton ) ).toHaveLength( 0 ); wrapper = shallow( ); - expect( wrapper.find( HappychatButton ) ).to.have.length( 0 ); + expect( wrapper.find( HappychatButton ) ).toHaveLength( 0 ); wrapper = shallow( ); - expect( wrapper.find( HappychatButton ) ).to.have.length( 0 ); + expect( wrapper.find( HappychatButton ) ).toHaveLength( 0 ); wrapper = shallow( ); - expect( wrapper.find( HappychatButton ) ).to.have.length( 0 ); + expect( wrapper.find( HappychatButton ) ).toHaveLength( 0 ); wrapper = shallow( ); - expect( wrapper.find( HappychatButton ) ).to.have.length( 0 ); + expect( wrapper.find( HappychatButton ) ).toHaveLength( 0 ); } ); test( 'should render translated content', () => { - expect( wrapper.find( HappychatButton ).props().children ).to.equal( + expect( wrapper.find( HappychatButton ).props().children ).toEqual( 'Translated: Ask a question' ); } ); test( 'should fire tracks event with given event name when clicked', () => { - const recordTracksEvent = spy(); + const recordTracksEvent = jest.fn(); wrapper = shallow( { /> ); - expect( recordTracksEvent ).not.to.be.called; + expect( recordTracksEvent ).not.toHaveBeenCalled(); wrapper.find( HappychatButton ).simulate( 'click' ); - expect( recordTracksEvent ).to.be.calledWith( 'test:eventName' ); + expect( recordTracksEvent ).toHaveBeenCalledWith( 'test:eventName' ); } ); test( 'should not fire tracks event when no event name is passed even if clicked', () => { - const recordTracksEvent = spy(); + const recordTracksEvent = jest.fn(); wrapper = shallow( { /> ); - expect( recordTracksEvent ).not.to.be.called; + expect( recordTracksEvent ).not.toHaveBeenCalled(); wrapper.find( HappychatButton ).simulate( 'click' ); - expect( recordTracksEvent ).not.to.be.called; + expect( recordTracksEvent ).not.toHaveBeenCalled(); } ); } ); @@ -175,47 +171,47 @@ describe( 'HappinessSupport', () => { wrapper = shallow( ); - expect( wrapper.find( selector ) ).to.have.length( 0 ); + expect( wrapper.find( selector ) ).toHaveLength( 0 ); // should be rendered in the following cases wrapper = shallow( ); - expect( wrapper.find( selector ) ).to.have.length( 1 ); + expect( wrapper.find( selector ) ).toHaveLength( 1 ); wrapper = shallow( ); - expect( wrapper.find( selector ) ).to.have.length( 1 ); + expect( wrapper.find( selector ) ).toHaveLength( 1 ); wrapper = shallow( ); - expect( wrapper.find( selector ) ).to.have.length( 1 ); + expect( wrapper.find( selector ) ).toHaveLength( 1 ); wrapper = shallow( ); - expect( wrapper.find( selector ) ).to.have.length( 1 ); + expect( wrapper.find( selector ) ).toHaveLength( 1 ); wrapper = shallow( ); - expect( wrapper.find( selector ) ).to.have.length( 1 ); + expect( wrapper.find( selector ) ).toHaveLength( 1 ); wrapper = shallow( ); - expect( wrapper.find( selector ) ).to.have.length( 1 ); + expect( wrapper.find( selector ) ).toHaveLength( 1 ); } ); test( 'should be rendered with link to CALYPSO_CONTACT if it is not for JetPack', () => { wrapper = shallow( ); - expect( wrapper.find( selector ).prop( 'href' ) ).to.equal( CALYPSO_CONTACT ); + expect( wrapper.find( selector ).prop( 'href' ) ).toEqual( CALYPSO_CONTACT ); } ); test( 'should be rendered with link to JETPACK_CONTACT_SUPPORT if it is for JetPack', () => { wrapper = shallow( ); - expect( wrapper.find( selector ).prop( 'href' ) ).to.equal( JETPACK_CONTACT_SUPPORT ); + expect( wrapper.find( selector ).prop( 'href' ) ).toEqual( JETPACK_CONTACT_SUPPORT ); } ); test( 'should render translated content', () => { wrapper = shallow( ); - expect( wrapper.find( selector ).props().children ).to.equal( 'Translated: Ask a question' ); + expect( wrapper.find( selector ).props().children ).toEqual( 'Translated: Ask a question' ); } ); } ); } ); diff --git a/client/components/infinite-list/test/scroll-helper.js b/client/components/infinite-list/test/scroll-helper.js index feaa6389e0e0d..d680ddb396f48 100644 --- a/client/components/infinite-list/test/scroll-helper.js +++ b/client/components/infinite-list/test/scroll-helper.js @@ -1,4 +1,3 @@ -import { assert } from 'chai'; import { range } from 'lodash'; import ScrollHelper from '../scroll-helper'; @@ -17,19 +16,19 @@ describe( 'scroll-helper', () => { helper.updateContextHeight( 1000 ); test( 'top hard hide levels is 1 vh above context', () => { - assert.equal( helper.topHideLevelHard, -1000 ); + expect( helper.topHideLevelHard ).toEqual( -1000 ); } ); test( 'top soft hide level is 2 vh above context', () => { - assert.equal( helper.topHideLevelSoft, -2000 ); + expect( helper.topHideLevelSoft ).toEqual( -2000 ); } ); test( 'bottom hard hide level is 1 vh below context', () => { - assert.equal( helper.bottomHideLevelHard, 2000 ); + expect( helper.bottomHideLevelHard ).toEqual( 2000 ); } ); test( 'bottom soft hide level is 2 vh below context', () => { - assert.equal( helper.bottomHideLevelSoft, 3000 ); + expect( helper.bottomHideLevelSoft ).toEqual( 3000 ); } ); test( 'bottom 3rd hide level is 3 vh below context', () => { - assert.equal( helper.bottomHideLevelUltraSoft, 4000 ); + expect( helper.bottomHideLevelUltraSoft ).toEqual( 4000 ); } ); } ); @@ -42,19 +41,19 @@ describe( 'scroll-helper', () => { helper.updateContextHeight( 200 ); test( 'top hard hide levels is 5 items above context', () => { - assert.equal( helper.topHideLevelHard, -500 ); + expect( helper.topHideLevelHard ).toEqual( -500 ); } ); test( 'top soft hide level is 10 items above context', () => { - assert.equal( helper.topHideLevelSoft, -1000 ); + expect( helper.topHideLevelSoft ).toEqual( -1000 ); } ); test( 'bottom hard hide level is 5 items below context', () => { - assert.equal( helper.bottomHideLevelHard, 700 ); + expect( helper.bottomHideLevelHard ).toEqual( 700 ); } ); test( 'bottom soft hide level is 10 items below context', () => { - assert.equal( helper.bottomHideLevelSoft, 1200 ); + expect( helper.bottomHideLevelSoft ).toEqual( 1200 ); } ); test( 'bottom 3rd hide level is 15 items below context', () => { - assert.equal( helper.bottomHideLevelUltraSoft, 1700 ); + expect( helper.bottomHideLevelUltraSoft ).toEqual( 1700 ); } ); } ); } ); @@ -68,16 +67,16 @@ describe( 'scroll-helper', () => { helper.updatePlaceholderDimensions(); test( 'Placeholders height determined using their bounds', () => { - assert.equal( helper.topPlaceholderHeight, 1000 ); - assert.equal( helper.bottomPlaceholderHeight, 2000 ); + expect( helper.topPlaceholderHeight ).toEqual( 1000 ); + expect( helper.bottomPlaceholderHeight ).toEqual( 2000 ); } ); test( 'Container top determined using top placeholder bounds', () => { - assert.equal( helper.containerTop, -2000 ); + expect( helper.containerTop ).toEqual( -2000 ); } ); test( 'Container bottom determined using bottom placeholder bounds', () => { - assert.equal( helper.containerBottom, 4000 ); + expect( helper.containerBottom ).toEqual( 4000 ); } ); } ); @@ -94,12 +93,12 @@ describe( 'scroll-helper', () => { test( 'renders only up to bottom soft hide level', () => { helper.props.items = range( 100 ); - assert.equal( helper.initialLastRenderedIndex(), 14 ); // 3000 / 200 - 1 + expect( helper.initialLastRenderedIndex() ).toEqual( 14 ); // 3000 / 200 - 1 } ); test( 'renders everything if it should fit', () => { helper.props.items = range( 10 ); - assert.equal( helper.initialLastRenderedIndex(), 9 ); + expect( helper.initialLastRenderedIndex() ).toEqual( 9 ); } ); } ); @@ -110,10 +109,10 @@ describe( 'scroll-helper', () => { helper.topPlaceholderHeight = 500; helper.topHideLevelSoft = -2000; - assert.ok( helper.shouldHideItemsAbove() ); + expect( helper.shouldHideItemsAbove() ).toBeTruthy(); helper.topPlaceholderHeight = 1500; - assert.notOk( helper.shouldHideItemsAbove() ); + expect( helper.shouldHideItemsAbove() ).toBeFalsy(); } ); describe( 'Hiding batch of items', () => { @@ -148,26 +147,23 @@ describe( 'scroll-helper', () => { helper.hideItemsAbove(); test( 'updated state', () => { - assert( helper.stateUpdated ); + expect( helper.stateUpdated ).toBeTruthy(); } ); test( 'created placeholder for 3 items', () => { - assert.equal( 900, helper.topPlaceholderHeight ); + expect( 900 ).toEqual( helper.topPlaceholderHeight ); } ); test( 'hid 3 items', () => { - assert.equal( 3, helper.firstRenderedIndex ); + expect( 3 ).toEqual( helper.firstRenderedIndex ); } ); test( 'stored hidden items height', () => { - assert.deepEqual( - { - i0: 250, - i1: 350, - i2: 300, - }, - helper.itemHeights - ); + expect( { + i0: 250, + i1: 350, + i2: 300, + } ).toEqual( helper.itemHeights ); } ); } ); @@ -201,11 +197,11 @@ describe( 'scroll-helper', () => { helper.hideItemsAbove(); test( 'created placeholder for 2 items', () => { - assert.equal( 600, helper.topPlaceholderHeight ); + expect( 600 ).toEqual( helper.topPlaceholderHeight ); } ); test( 'hid 2 items', () => { - assert.equal( 2, helper.firstRenderedIndex ); + expect( 2 ).toEqual( helper.firstRenderedIndex ); } ); } ); @@ -215,10 +211,10 @@ describe( 'scroll-helper', () => { helper.topPlaceholderHeight = 2500; helper.topHideLevelHard = -1000; - assert.ok( helper.shouldShowItemsAbove() ); + expect( helper.shouldShowItemsAbove() ).toBeTruthy(); helper.topPlaceholderHeight = 1500; - assert.notOk( helper.shouldShowItemsAbove() ); + expect( helper.shouldShowItemsAbove() ).toBeFalsy(); } ); describe( 'Showing batch of items', () => { @@ -246,24 +242,21 @@ describe( 'scroll-helper', () => { helper.showItemsAbove(); test( 'updated state', () => { - assert( helper.stateUpdated ); + expect( helper.stateUpdated ).toBeTruthy(); } ); test( 'reduced placeholder height', () => { - assert.equal( 250, helper.topPlaceholderHeight ); + expect( 250 ).toEqual( helper.topPlaceholderHeight ); } ); test( 'shown 4 items', () => { - assert.equal( 1, helper.firstRenderedIndex ); + expect( 1 ).toEqual( helper.firstRenderedIndex ); } ); test( 'removed shown items height', () => { - assert.deepEqual( - { - i0: 250, - }, - helper.itemHeights - ); + expect( { + i0: 250, + } ).toEqual( helper.itemHeights ); } ); } ); @@ -287,11 +280,11 @@ describe( 'scroll-helper', () => { helper.showItemsAbove(); test( 'placeholder height is never negative', () => { - assert.equal( 0, helper.topPlaceholderHeight ); + expect( 0 ).toEqual( helper.topPlaceholderHeight ); } ); test( 'shown all items', () => { - assert.equal( 0, helper.firstRenderedIndex ); + expect( 0 ).toEqual( helper.firstRenderedIndex ); } ); } ); @@ -313,7 +306,7 @@ describe( 'scroll-helper', () => { helper.showItemsAbove(); - assert.equal( 0, helper.topPlaceholderHeight ); + expect( 0 ).toEqual( helper.topPlaceholderHeight ); } ); } ); @@ -324,10 +317,10 @@ describe( 'scroll-helper', () => { helper.bottomPlaceholderHeight = 500; helper.bottomHideLevelUltraSoft = 4000; - assert.ok( helper.shouldHideItemsBelow() ); + expect( helper.shouldHideItemsBelow() ).toBeTruthy(); helper.bottomPlaceholderHeight = 1500; - assert.notOk( helper.shouldHideItemsBelow() ); + expect( helper.shouldHideItemsBelow() ).toBeFalsy(); } ); describe( 'Hiding batch of items', () => { @@ -366,27 +359,24 @@ describe( 'scroll-helper', () => { helper.hideItemsBelow(); test( 'updated state', () => { - assert.ok( helper.stateUpdated ); + expect( helper.stateUpdated ).toBeTruthy(); } ); test( 'created placeholder for 3 items', () => { - assert.equal( 2800, helper.bottomPlaceholderHeight ); + expect( 2800 ).toEqual( helper.bottomPlaceholderHeight ); } ); test( 'hid 4 items', () => { - assert.equal( 5, helper.lastRenderedIndex ); + expect( 5 ).toEqual( helper.lastRenderedIndex ); } ); test( 'stored hidden items height', () => { - assert.deepEqual( - { - i6: 300, - i7: 900, - i8: 300, - i9: 500, - }, - helper.itemHeights - ); + expect( { + i6: 300, + i7: 900, + i8: 300, + i9: 500, + } ).toEqual( helper.itemHeights ); } ); } ); @@ -413,11 +403,11 @@ describe( 'scroll-helper', () => { helper.hideItemsBelow(); test( 'created placeholder for 2 items', () => { - assert.equal( 1400, helper.bottomPlaceholderHeight ); + expect( 1400 ).toEqual( helper.bottomPlaceholderHeight ); } ); test( 'hid all items', () => { - assert.equal( -1, helper.lastRenderedIndex ); + expect( -1 ).toEqual( helper.lastRenderedIndex ); } ); } ); @@ -427,10 +417,10 @@ describe( 'scroll-helper', () => { helper.bottomPlaceholderHeight = 3500; helper.bottomHideLevelHard = 2000; - assert.ok( helper.shouldShowItemsBelow() ); + expect( helper.shouldShowItemsBelow() ).toBeTruthy(); helper.bottomPlaceholderHeight = 2500; - assert.notOk( helper.shouldShowItemsBelow() ); + expect( helper.shouldShowItemsBelow() ).toBeFalsy(); } ); describe( 'Showing batch of items', () => { @@ -459,24 +449,21 @@ describe( 'scroll-helper', () => { helper.showItemsBelow(); test( 'updated state', () => { - assert( helper.stateUpdated ); + expect( helper.stateUpdated ).toBeTruthy(); } ); test( 'reduced placeholder height', () => { - assert.equal( 2500, helper.bottomPlaceholderHeight ); + expect( 2500 ).toEqual( helper.bottomPlaceholderHeight ); } ); test( 'shown 2 items', () => { - assert.equal( 6, helper.lastRenderedIndex ); + expect( 6 ).toEqual( helper.lastRenderedIndex ); } ); test( 'removed shown items height', () => { - assert.deepEqual( - { - i7: 900, - }, - helper.itemHeights - ); + expect( { + i7: 900, + } ).toEqual( helper.itemHeights ); } ); } ); @@ -505,11 +492,11 @@ describe( 'scroll-helper', () => { helper.showItemsBelow(); test( 'reduced placeholder height', () => { - assert.equal( 1900, helper.bottomPlaceholderHeight ); + expect( 1900 ).toEqual( helper.bottomPlaceholderHeight ); } ); test( 'shown 2 items', () => { - assert.equal( 5, helper.lastRenderedIndex ); + expect( 5 ).toEqual( helper.lastRenderedIndex ); } ); } ); @@ -533,15 +520,15 @@ describe( 'scroll-helper', () => { helper.showItemsBelow(); test( 'placeholder height is never negative', () => { - assert.equal( 0, helper.bottomPlaceholderHeight ); + expect( 0 ).toEqual( helper.bottomPlaceholderHeight ); } ); test( 'container bottom is increased', () => { - assert.equal( 1600, helper.containerBottom ); + expect( 1600 ).toEqual( helper.containerBottom ); } ); test( 'shown 3 items', () => { - assert.equal( 7, helper.lastRenderedIndex ); + expect( 7 ).toEqual( helper.lastRenderedIndex ); } ); } ); @@ -565,8 +552,8 @@ describe( 'scroll-helper', () => { helper.showItemsBelow(); - assert.equal( 0, helper.bottomPlaceholderHeight ); - assert.equal( 7, helper.lastRenderedIndex ); + expect( 0 ).toEqual( helper.bottomPlaceholderHeight ); + expect( 7 ).toEqual( helper.lastRenderedIndex ); } ); } ); @@ -586,22 +573,22 @@ describe( 'scroll-helper', () => { } ); test( 'loaded when container bottom above hard limit', () => { - assert.ok( helper.shouldLoadNextPage() ); + expect( helper.shouldLoadNextPage() ).toBeTruthy(); } ); test( 'not loaded when loading previous', () => { helper.props.fetchingNextPage = true; - assert.notOk( helper.shouldLoadNextPage() ); + expect( helper.shouldLoadNextPage() ).toBeFalsy(); } ); test( 'not loaded on last page', () => { helper.props.lastPage = true; - assert.notOk( helper.shouldLoadNextPage() ); + expect( helper.shouldLoadNextPage() ).toBeFalsy(); } ); test( 'not loaded if some items hidden', () => { helper.bottomPlaceholderHeight = 100; - assert.notOk( helper.shouldLoadNextPage() ); + expect( helper.shouldLoadNextPage() ).toBeFalsy(); } ); } ); } ); diff --git a/client/components/marketing-survey/cancel-purchase-form/step-components/test/business-at-step.jsx b/client/components/marketing-survey/cancel-purchase-form/step-components/test/business-at-step.jsx index c70ef5775cf29..d272d7b481f16 100644 --- a/client/components/marketing-survey/cancel-purchase-form/step-components/test/business-at-step.jsx +++ b/client/components/marketing-survey/cancel-purchase-form/step-components/test/business-at-step.jsx @@ -1,6 +1,4 @@ -import { expect } from 'chai'; import { shallow } from 'enzyme'; -import { stub } from 'sinon'; import { BusinessATStep } from '../business-at-step'; const noop = () => {}; @@ -15,13 +13,13 @@ describe( 'BusinessATStep', () => { } ); test( 'should render translated heading content', () => { - expect( wrapper.find( 'FormSectionHeading' ).props().children ).to.equal( + expect( wrapper.find( 'FormSectionHeading' ).props().children ).toEqual( 'Translated: New! Install Custom Plugins and Themes' ); } ); test( 'should render translated link content', () => { - expect( wrapper.find( 'FormFieldset > p' ).at( 0 ).props().children ).to.equal( + expect( wrapper.find( 'FormFieldset > p' ).at( 0 ).props().children ).toEqual( 'Translated: Have a theme or plugin you need to install to build the site you want? ' + 'Now you can! ' + 'Learn more about {{pluginLink}}installing plugins{{/pluginLink}} and ' + @@ -30,7 +28,7 @@ describe( 'BusinessATStep', () => { } ); test( 'should render translated confirmation content', () => { - expect( wrapper.find( 'FormFieldset > p' ).at( 1 ).props().children ).to.equal( + expect( wrapper.find( 'FormFieldset > p' ).at( 1 ).props().children ).toEqual( 'Translated: Are you sure you want to cancel your subscription and lose access to these new features?' ); } ); @@ -52,7 +50,7 @@ describe( 'BusinessATStep', () => { let wrapper; beforeEach( () => { - recordTracksEvent = stub(); + recordTracksEvent = jest.fn(); wrapper = shallow( ); @@ -61,7 +59,7 @@ describe( 'BusinessATStep', () => { test( 'should fire tracks event for plugin support link when clicked', () => { wrapper.find( 'a' ).at( 0 ).simulate( 'click' ); - expect( recordTracksEvent ).to.have.been.calledWith( + expect( recordTracksEvent ).toHaveBeenCalledWith( 'calypso_cancellation_business_at_plugin_support_click' ); } ); @@ -69,7 +67,7 @@ describe( 'BusinessATStep', () => { test( 'should fire tracks event for theme support link when clicked', () => { wrapper.find( 'a' ).at( 1 ).simulate( 'click' ); - expect( recordTracksEvent ).to.have.been.calledWith( + expect( recordTracksEvent ).toHaveBeenCalledWith( 'calypso_cancellation_business_at_theme_support_click' ); } ); diff --git a/client/components/marketing-survey/cancel-purchase-form/step-components/test/upgrade-at-step.jsx b/client/components/marketing-survey/cancel-purchase-form/step-components/test/upgrade-at-step.jsx index 96d8761fecad3..ba63bcb4ddea8 100644 --- a/client/components/marketing-survey/cancel-purchase-form/step-components/test/upgrade-at-step.jsx +++ b/client/components/marketing-survey/cancel-purchase-form/step-components/test/upgrade-at-step.jsx @@ -1,7 +1,5 @@ import { Button } from '@automattic/components'; -import { expect } from 'chai'; import { shallow } from 'enzyme'; -import { stub } from 'sinon'; import { UpgradeATStep } from '../upgrade-at-step'; const noop = () => {}; @@ -24,20 +22,20 @@ describe( 'UpgradeATStep', () => { } ); test( 'should render translated heading content', () => { - expect( wrapper.find( 'FormSectionHeading' ).props().children ).to.equal( + expect( wrapper.find( 'FormSectionHeading' ).props().children ).toEqual( 'Translated: New! Install Custom Plugins and Themes' ); } ); test( 'should render translated link content', () => { - expect( wrapper.find( 'FormFieldset > p' ).props().children ).to.equal( + expect( wrapper.find( 'FormFieldset > p' ).props().children ).toEqual( 'Translated: Did you know that you can now use third-party plugins and themes on the WordPress.com Business plan? ' + 'Claim a 25% discount when you upgrade your site today - {{b}}enter the code BIZC25 at checkout{{/b}}.' ); } ); test( 'should render translated confirmation content', () => { - expect( wrapper.find( 'FormFieldset > ForwardRef(Button)' ).props().children ).to.equal( + expect( wrapper.find( 'FormFieldset > ForwardRef(Button)' ).props().children ).toEqual( 'Translated: Upgrade My Site' ); } ); @@ -48,13 +46,13 @@ describe( 'UpgradeATStep', () => { ); - expect( wrapper.find( Button ).props().href ).to.equal( + expect( wrapper.find( Button ).props().href ).toEqual( '/checkout/site_slug/business?coupon=BIZC25' ); } ); test( 'should fire tracks event when button is clicked', () => { - const recordTracksEvent = stub(); + const recordTracksEvent = jest.fn(); const wrapper = shallow( { wrapper.find( Button ).simulate( 'click' ); - expect( recordTracksEvent ).to.have.been.calledWith( + expect( recordTracksEvent ).toHaveBeenCalledWith( 'calypso_cancellation_upgrade_at_step_upgrade_click' ); } ); diff --git a/client/components/marketing-survey/cancel-purchase-form/test/initial-survey-state.js b/client/components/marketing-survey/cancel-purchase-form/test/initial-survey-state.js index da32366a0a47d..7a2c6a5a3de9b 100644 --- a/client/components/marketing-survey/cancel-purchase-form/test/initial-survey-state.js +++ b/client/components/marketing-survey/cancel-purchase-form/test/initial-survey-state.js @@ -1,9 +1,8 @@ -import { expect } from 'chai'; import initialSurveyState from '../initial-survey-state'; describe( 'initialSurveyState', () => { test( 'should contain empty values for questions', () => { - expect( initialSurveyState() ).to.deep.equal( { + expect( initialSurveyState() ).toEqual( { questionOneRadio: '', questionTwoRadio: '', importQuestionRadio: '', diff --git a/client/components/marketing-survey/cancel-purchase-form/test/is-survey-filled-in.js b/client/components/marketing-survey/cancel-purchase-form/test/is-survey-filled-in.js index b34dd55a8380f..325046172839f 100644 --- a/client/components/marketing-survey/cancel-purchase-form/test/is-survey-filled-in.js +++ b/client/components/marketing-survey/cancel-purchase-form/test/is-survey-filled-in.js @@ -1,9 +1,8 @@ -import { expect } from 'chai'; import isSurveyFilledIn from '../is-survey-filled-in'; describe( 'isSurveyFilledIn', () => { test( 'should return false when no questions are answered', () => { - expect( isSurveyFilledIn( {} ) ).to.equal( false ); + expect( isSurveyFilledIn( {} ) ).toEqual( false ); } ); test( 'should return true when question one and two are answered', () => { @@ -12,7 +11,7 @@ describe( 'isSurveyFilledIn', () => { questionOneRadio: 'tooHard', questionTwoRadio: 'tooHard', } ) - ).to.equal( true ); + ).toEqual( true ); } ); test( 'should return true when question one is answered and there are no options for question two', () => { @@ -21,7 +20,7 @@ describe( 'isSurveyFilledIn', () => { questionOneRadio: 'tooHard', questionTwoOrder: [], } ) - ).to.equal( true ); + ).toEqual( true ); } ); test( 'should return false when question one is another reason and there is no text', () => { @@ -31,7 +30,7 @@ describe( 'isSurveyFilledIn', () => { questionOneText: '', questionTwoRadio: 'tooHard', } ) - ).to.equal( false ); + ).toEqual( false ); } ); test( 'should return false when question two is another reason and there is no text', () => { @@ -41,7 +40,7 @@ describe( 'isSurveyFilledIn', () => { questionTwoRadio: 'anotherReasonTwo', questionTwoText: '', } ) - ).to.equal( false ); + ).toEqual( false ); } ); test( 'should return true when question one and two are another reason and both have text', () => { @@ -52,6 +51,6 @@ describe( 'isSurveyFilledIn', () => { questionTwoRadio: 'anotherReasonTwo', questionTwoText: 'the reason', } ) - ).to.equal( true ); + ).toEqual( true ); } ); } ); diff --git a/client/components/marketing-survey/cancel-purchase-form/test/next-step.js b/client/components/marketing-survey/cancel-purchase-form/test/next-step.js index 0d955a3be6240..bfeede3344b67 100644 --- a/client/components/marketing-survey/cancel-purchase-form/test/next-step.js +++ b/client/components/marketing-survey/cancel-purchase-form/test/next-step.js @@ -1,18 +1,17 @@ -import { expect } from 'chai'; import nextStep from '../next-step'; describe( 'nextStep', () => { const steps = [ 'a', 'b', 'c' ]; test( 'should return final step if current step is unknown', () => { - expect( nextStep( 'unknown', steps ) ).to.equal( 'c' ); + expect( nextStep( 'unknown', steps ) ).toEqual( 'c' ); } ); test( 'should return final step if current step is final step', () => { - expect( nextStep( 'c', steps ) ).to.equal( 'c' ); + expect( nextStep( 'c', steps ) ).toEqual( 'c' ); } ); test( 'should return next step current step is earlier step', () => { - expect( nextStep( 'a', steps ) ).to.equal( 'b' ); + expect( nextStep( 'a', steps ) ).toEqual( 'b' ); } ); } ); diff --git a/client/components/marketing-survey/cancel-purchase-form/test/previous-step.js b/client/components/marketing-survey/cancel-purchase-form/test/previous-step.js index bd544912102c5..1b21fdecbf9dd 100644 --- a/client/components/marketing-survey/cancel-purchase-form/test/previous-step.js +++ b/client/components/marketing-survey/cancel-purchase-form/test/previous-step.js @@ -1,18 +1,17 @@ -import { expect } from 'chai'; import previousStep from '../previous-step'; describe( 'previousStep', () => { const steps = [ 'a', 'b', 'c' ]; test( 'should return initial step if current step is unknown', () => { - expect( previousStep( 'unknown', steps ) ).to.equal( 'a' ); + expect( previousStep( 'unknown', steps ) ).toEqual( 'a' ); } ); test( 'should return initial step if current step is initial step', () => { - expect( previousStep( 'a', steps ) ).to.equal( 'a' ); + expect( previousStep( 'a', steps ) ).toEqual( 'a' ); } ); test( 'should return previous step current step is subsequent step', () => { - expect( previousStep( 'c', steps ) ).to.equal( 'b' ); + expect( previousStep( 'c', steps ) ).toEqual( 'b' ); } ); } ); diff --git a/client/components/post-schedule/test/index.js b/client/components/post-schedule/test/index.js index 07a37cb4c325b..557234d52cfef 100644 --- a/client/components/post-schedule/test/index.js +++ b/client/components/post-schedule/test/index.js @@ -1,4 +1,3 @@ -import { expect } from 'chai'; import { is12hr, isValidGMTOffset, @@ -10,23 +9,23 @@ import { describe( 'is12hr', () => { test( 'Should return true for a 12-hour time format', () => { - expect( is12hr( 'F j, Y, g:i a' ) ).to.be.true; - expect( is12hr( 'h:i' ) ).to.be.true; + expect( is12hr( 'F j, Y, g:i a' ) ).toBe( true ); + expect( is12hr( 'h:i' ) ).toBe( true ); } ); test( 'Should return false for a 24-hour time', () => { - expect( is12hr( 'H:i:s' ) ).to.be.false; - expect( is12hr( 'G:i' ) ).to.be.false; + expect( is12hr( 'H:i:s' ) ).toBe( false ); + expect( is12hr( 'G:i' ) ).toBe( false ); } ); } ); describe( 'gmtOffset', () => { test( 'Should return true for a valid gtm offset', () => { - expect( isValidGMTOffset( 2 ) ).to.be.true; + expect( isValidGMTOffset( 2 ) ).toBe( true ); } ); test( 'Should return false for an invalid gtm offset', () => { - expect( isValidGMTOffset( '2' ) ).to.be.false; + expect( isValidGMTOffset( '2' ) ).toBe( false ); } ); } ); @@ -36,78 +35,78 @@ describe( 'getLocalizedDate', () => { test( 'Should return a date localized at Amsterdam (utc: 60 minutes)', () => { const nowInAmsterdam = getLocalizedDate( now, 'Europe/Amsterdam' ); - expect( nowInAmsterdam.utcOffset() ).to.equal( 60 ); + expect( nowInAmsterdam.utcOffset() ).toEqual( 60 ); } ); test( 'Should return a date localized at New York (utc: -300 minutes)', () => { const nowInNewYork = getLocalizedDate( now, 'America/New_York' ); - expect( nowInNewYork.utcOffset() ).to.equal( -300 ); + expect( nowInNewYork.utcOffset() ).toEqual( -300 ); } ); test( 'Should return a date localized at UTC+3:30 (utc: 210 minutes)', () => { const NowAtUTC3_30 = getLocalizedDate( now, false, 210 ); - expect( NowAtUTC3_30.utcOffset() ).to.equal( 210 ); + expect( NowAtUTC3_30.utcOffset() ).toEqual( 210 ); } ); } ); describe( 'convertHoursToHHMM', () => { test( 'Should convert 3.1 hours to `3:06`', () => { - expect( convertHoursToHHMM( 3.1 ) ).to.equal( '+3:06' ); + expect( convertHoursToHHMM( 3.1 ) ).toEqual( '+3:06' ); } ); test( 'Should convert 3 hours to `3`', () => { - expect( convertHoursToHHMM( 3 ) ).to.equal( '+3' ); + expect( convertHoursToHHMM( 3 ) ).toEqual( '+3' ); } ); test( 'Should convert -3.1 hours to `-3:06`', () => { - expect( convertHoursToHHMM( -3.1 ) ).to.equal( '-3:06' ); + expect( convertHoursToHHMM( -3.1 ) ).toEqual( '-3:06' ); } ); test( 'Should convert -3 hours to `3`', () => { - expect( convertHoursToHHMM( -3 ) ).to.equal( '-3' ); + expect( convertHoursToHHMM( -3 ) ).toEqual( '-3' ); } ); } ); describe( 'convertMinutesToHHMM', () => { test( 'Should convert 186 minutes to `3:06`', () => { - expect( convertMinutesToHHMM( 186 ) ).to.equal( '+3:06' ); + expect( convertMinutesToHHMM( 186 ) ).toEqual( '+3:06' ); } ); test( 'Should convert 180 minutes to `3`', () => { - expect( convertMinutesToHHMM( 180 ) ).to.equal( '+3' ); + expect( convertMinutesToHHMM( 180 ) ).toEqual( '+3' ); } ); test( 'Should convert -186 minutes to `-3:06`', () => { - expect( convertMinutesToHHMM( -186 ) ).to.equal( '-3:06' ); + expect( convertMinutesToHHMM( -186 ) ).toEqual( '-3:06' ); } ); test( 'Should convert -180 minutes to `-3`', () => { - expect( convertMinutesToHHMM( -180 ) ).to.equal( '-3' ); + expect( convertMinutesToHHMM( -180 ) ).toEqual( '-3' ); } ); test( 'Should convert 0 minutes to `0`', () => { - expect( convertMinutesToHHMM( 0 ) ).to.equal( '0' ); + expect( convertMinutesToHHMM( 0 ) ).toEqual( '0' ); } ); test( 'Should convert -0 minutes to `0`', () => { - expect( convertMinutesToHHMM( -0 ) ).to.equal( '0' ); + expect( convertMinutesToHHMM( -0 ) ).toEqual( '0' ); } ); } ); describe( 'parseAndValidateNumber', () => { test( 'Should return `false` when the value is a string', () => { - expect( parseAndValidateNumber( 'ab' ) ).to.be.false; + expect( parseAndValidateNumber( 'ab' ) ).toBe( false ); } ); test( 'Should return `false` when the value is a negative number', () => { - expect( parseAndValidateNumber( -10 ) ).to.be.false; + expect( parseAndValidateNumber( -10 ) ).toBe( false ); } ); test( 'Should return a 4 when the value is `04`', () => { - expect( parseAndValidateNumber( '04' ) ).to.equal( 4 ); + expect( parseAndValidateNumber( '04' ) ).toEqual( 4 ); } ); test( 'Should return a 99 when the value is `99`', () => { - expect( parseAndValidateNumber( '99' ) ).to.equal( 99 ); + expect( parseAndValidateNumber( '99' ) ).toEqual( 99 ); } ); } ); diff --git a/client/components/purchase-detail/test/index.jsx b/client/components/purchase-detail/test/index.jsx index bdace2046daa7..6c8b7b27bf7c7 100644 --- a/client/components/purchase-detail/test/index.jsx +++ b/client/components/purchase-detail/test/index.jsx @@ -1,4 +1,3 @@ -import { expect } from 'chai'; import { shallow } from 'enzyme'; import PurchaseDetail from '..'; import PurchaseButton from '../purchase-button'; @@ -11,16 +10,16 @@ describe( 'PurchaseDetail', () => { test( 'should be a placeholder if in need', () => { wrapper = shallow( ); - expect( wrapper.hasClass( 'is-placeholder' ) ).to.be.false; + expect( wrapper.hasClass( 'is-placeholder' ) ).toBe( false ); wrapper = shallow( ); - expect( wrapper.hasClass( 'is-placeholder' ) ).to.be.true; + expect( wrapper.hasClass( 'is-placeholder' ) ).toBe( true ); } ); test( 'should render given title and description', () => { wrapper = shallow( ); - expect( wrapper.find( '.purchase-detail__title' ).props().children ).to.equal( 'test:title' ); - expect( wrapper.find( '.purchase-detail__description' ).props().children ).to.equal( + expect( wrapper.find( '.purchase-detail__title' ).props().children ).toEqual( 'test:title' ); + expect( wrapper.find( '.purchase-detail__description' ).props().children ).toEqual( 'test:description' ); } ); @@ -29,27 +28,27 @@ describe( 'PurchaseDetail', () => { wrapper = shallow( ); const notice = wrapper.find( '.purchase-detail__required-notice > em' ); - expect( notice ).to.have.length( 1 ); - expect( notice.props().children ).to.equal( 'test:notice' ); + expect( notice ).toHaveLength( 1 ); + expect( notice.props().children ).toEqual( 'test:notice' ); } ); test( 'should render given body text', () => { wrapper = shallow( ); const body = wrapper.find( '.purchase-detail__body' ); - expect( body ).to.have.length( 1 ); - expect( body.props().children ).to.equal( 'test:body' ); + expect( body ).toHaveLength( 1 ); + expect( body.props().children ).toEqual( 'test:body' ); } ); test( 'should render a with given tip info unless the body text is passed', () => { wrapper = shallow( ); const tipInfo = wrapper.find( TipInfo ); - expect( tipInfo ).to.have.length( 1 ); - expect( tipInfo.prop( 'info' ) ).to.equal( 'test:tip-info' ); + expect( tipInfo ).toHaveLength( 1 ); + expect( tipInfo.prop( 'info' ) ).toEqual( 'test:tip-info' ); wrapper = shallow( ); - expect( wrapper.find( TipInfo ) ).to.have.length( 0 ); + expect( wrapper.find( TipInfo ) ).toHaveLength( 0 ); } ); test( 'should render a with given info unless the body text is passed', () => { @@ -65,15 +64,15 @@ describe( 'PurchaseDetail', () => { wrapper = shallow( ); const purchaseButton = wrapper.find( PurchaseButton ); - expect( purchaseButton ).to.have.length( 1 ); - expect( purchaseButton.prop( 'disabled' ) ).to.be.false; - expect( purchaseButton.prop( 'href' ) ).to.equal( 'https://wordpress.com/test/url' ); - expect( purchaseButton.prop( 'onClick' ) ).to.equal( noop ); - expect( purchaseButton.prop( 'target' ) ).to.equal( 'test:target' ); - expect( purchaseButton.prop( 'rel' ) ).to.equal( 'test:rel' ); - expect( purchaseButton.prop( 'text' ) ).to.equal( buttonProps.buttonText ); + expect( purchaseButton ).toHaveLength( 1 ); + expect( purchaseButton.prop( 'disabled' ) ).toBe( false ); + expect( purchaseButton.prop( 'href' ) ).toEqual( 'https://wordpress.com/test/url' ); + expect( purchaseButton.prop( 'onClick' ) ).toEqual( noop ); + expect( purchaseButton.prop( 'target' ) ).toEqual( 'test:target' ); + expect( purchaseButton.prop( 'rel' ) ).toEqual( 'test:rel' ); + expect( purchaseButton.prop( 'text' ) ).toEqual( buttonProps.buttonText ); wrapper = shallow( ); - expect( wrapper.find( PurchaseButton ) ).to.have.length( 0 ); + expect( wrapper.find( PurchaseButton ) ).toHaveLength( 0 ); } ); } ); diff --git a/client/components/search/test/index.jsx b/client/components/search/test/index.jsx index 48fe128ee7ee5..542fc5d671a6c 100644 --- a/client/components/search/test/index.jsx +++ b/client/components/search/test/index.jsx @@ -1,8 +1,6 @@ /** * @jest-environment jsdom */ - -import { expect } from 'chai'; import { createElement } from 'react'; import TestUtils from 'react-dom/test-utils'; import sinon from 'sinon'; @@ -31,7 +29,7 @@ describe( 'Search', () => { } ); test( 'should set state.keyword with the initialValue after mount', () => { - expect( rendered.state.keyword ).to.equal( initialValue ); + expect( rendered.state.keyword ).toEqual( initialValue ); } ); } ); @@ -44,7 +42,7 @@ describe( 'Search', () => { } ); test( 'should set state.keyword empty string after mount', () => { - expect( rendered.state.keyword ).to.equal( '' ); + expect( rendered.state.keyword ).toEqual( '' ); } ); } ); } ); diff --git a/client/components/section-nav/test/index.jsx b/client/components/section-nav/test/index.jsx index 7cae3d3d61ed9..a8fcd49e81b13 100644 --- a/client/components/section-nav/test/index.jsx +++ b/client/components/section-nav/test/index.jsx @@ -1,13 +1,10 @@ /** * @jest-environment jsdom */ - -import { assert } from 'chai'; import { createElement, Children } from 'react'; import ReactDom from 'react-dom'; import TestUtils from 'react-dom/test-utils'; import ShallowRenderer from 'react-test-renderer/shallow'; -import sinon from 'sinon'; import SectionNav from '../'; jest.mock( 'calypso/lib/analytics/ga', () => ( { @@ -48,24 +45,25 @@ describe( 'section-nav', () => { } ); test( 'should render a header and a panel', () => { - assert.equal( headerElem.props.className, 'section-nav__mobile-header' ); - assert.equal( panelElem.props.className, 'section-nav__panel' ); - assert.equal( headerTextElem.props.className, 'section-nav__mobile-header-text' ); + expect( headerElem.props.className ).toEqual( 'section-nav__mobile-header' ); + expect( panelElem.props.className ).toEqual( 'section-nav__panel' ); + expect( headerTextElem.props.className ).toEqual( 'section-nav__mobile-header-text' ); } ); test( 'should render selectedText within mobile header', () => { - assert.equal( text, 'test' ); + expect( text ).toEqual( 'test' ); } ); test( 'should render children', () => { return new Promise( ( done ) => { //React.Children.only should work here but gives an error about not being the only child - Children.map( panelElem.props.children, function ( obj ) { - if ( obj.type === 'p' ) { - assert.equal( obj.props.children, 'mmyellow' ); + Children.map( + panelElem.props.children.filter( ( o ) => o.type === 'p' ), + function ( obj ) { + expect( obj.props.children ).toEqual( 'mmyellow' ); done(); } - } ); + ); } ); } ); @@ -82,7 +80,7 @@ describe( 'section-nav', () => { const header = component.props.children.find( ( child ) => child && child.className === 'section-nav__mobile-header' ); - assert.equal( header, null ); + expect( header ).toBeUndefined(); } ); } ); @@ -100,19 +98,19 @@ describe( 'section-nav', () => {

placeholder

); const tree = TestUtils.renderIntoDocument( elem ); - assert( ! tree.state.mobileOpen ); + expect( tree.state.mobileOpen ).toBe( false ); TestUtils.Simulate.click( ReactDom.findDOMNode( TestUtils.findRenderedDOMComponentWithClass( tree, 'section-nav__mobile-header' ) ) ); - assert( tree.state.mobileOpen ); + expect( tree.state.mobileOpen ).toBe( true ); } ); } ); test( 'should call onMobileNavPanelOpen function passed as a prop twice when tapped three times', () => { return new Promise( ( done ) => { - const spy = sinon.spy(); + const spy = jest.fn(); const elem = createElement( SectionNav, { @@ -123,27 +121,27 @@ describe( 'section-nav', () => { ); const tree = TestUtils.renderIntoDocument( elem ); - assert( ! tree.state.mobileOpen ); + expect( tree.state.mobileOpen ).toBe( false ); TestUtils.Simulate.click( ReactDom.findDOMNode( TestUtils.findRenderedDOMComponentWithClass( tree, 'section-nav__mobile-header' ) ) ); - assert( tree.state.mobileOpen ); + expect( tree.state.mobileOpen ).toBe( true ); TestUtils.Simulate.click( ReactDom.findDOMNode( TestUtils.findRenderedDOMComponentWithClass( tree, 'section-nav__mobile-header' ) ) ); - assert( ! tree.state.mobileOpen ); + expect( tree.state.mobileOpen ).toBe( false ); TestUtils.Simulate.click( ReactDom.findDOMNode( TestUtils.findRenderedDOMComponentWithClass( tree, 'section-nav__mobile-header' ) ) ); - assert( tree.state.mobileOpen ); + expect( tree.state.mobileOpen ).toBe( true ); - assert( spy.calledTwice ); + expect( spy ).toHaveBeenCalledTimes( 2 ); done(); } ); } ); diff --git a/client/components/select-dropdown/test/index.js b/client/components/select-dropdown/test/index.js index 91bef82b8b5a6..a9122bddfba43 100644 --- a/client/components/select-dropdown/test/index.js +++ b/client/components/select-dropdown/test/index.js @@ -1,10 +1,7 @@ /** * @jest-environment jsdom */ - -import { expect } from 'chai'; import { shallow, mount } from 'enzyme'; -import sinon from 'sinon'; import SelectDropdown from '../index'; describe( 'index', () => { @@ -13,43 +10,43 @@ describe( 'index', () => { const dropdown = mountDropdown(); expect( dropdown.find( '.select-dropdown__options li.select-dropdown__label' ).text() - ).to.eql( 'Statuses' ); + ).toEqual( 'Statuses' ); expect( dropdown.find( '.select-dropdown__options li.select-dropdown__option' ) - ).to.have.lengthOf( 4 ); + ).toHaveLength( 4 ); } ); test( 'should render a separator in place of any falsy option', () => { const dropdown = mountDropdown(); expect( dropdown.find( '.select-dropdown__options li.select-dropdown__separator' ) - ).to.have.lengthOf( 1 ); + ).toHaveLength( 1 ); } ); test( 'should be initially closed', () => { const dropdown = shallowRenderDropdown(); - expect( dropdown.find( '.select-dropdown' ) ).to.have.lengthOf( 1 ); - expect( dropdown.find( '.select-dropdown.is-open' ) ).to.be.empty; + expect( dropdown.find( '.select-dropdown' ) ).toHaveLength( 1 ); + expect( dropdown.find( '.select-dropdown.is-open' ) ).toHaveLength( 0 ); } ); test( 'should execute toggleDropdown when clicked', () => { const dropdown = shallowRenderDropdown(); dropdown.find( '.select-dropdown__container' ).simulate( 'click' ); - expect( dropdown.find( '.select-dropdown.is-open' ) ).to.have.lengthOf( 1 ); + expect( dropdown.find( '.select-dropdown.is-open' ) ).toHaveLength( 1 ); } ); test( 'should not respond when clicked when disabled', () => { const dropdown = shallowRenderDropdown( { disabled: true } ); - expect( dropdown.find( '.select-dropdown.is-disabled' ) ).to.have.lengthOf( 1 ); + expect( dropdown.find( '.select-dropdown.is-disabled' ) ).toHaveLength( 1 ); dropdown.find( '.select-dropdown__container' ).simulate( 'click' ); - expect( dropdown.find( '.select-dropdown.is-open' ) ).to.be.empty; + expect( dropdown.find( '.select-dropdown.is-open' ) ).toHaveLength( 0 ); // Repeat to be sure dropdown.find( '.select-dropdown__container' ).simulate( 'click' ); - expect( dropdown.find( '.select-dropdown.is-open' ) ).to.be.empty; + expect( dropdown.find( '.select-dropdown.is-open' ) ).toHaveLength( 0 ); } ); test( 'should be possible to open the dropdown via keyboard', () => { @@ -57,7 +54,7 @@ describe( 'index', () => { // simulate pressing 'space' key dropdown.find( '.select-dropdown__container' ).simulate( 'keydown', createKeyEvent( 32 ) ); - expect( dropdown.find( '.select-dropdown.is-open' ) ).to.have.lengthOf( 1 ); + expect( dropdown.find( '.select-dropdown.is-open' ) ).toHaveLength( 1 ); } ); } ); @@ -65,18 +62,18 @@ describe( 'index', () => { test( 'should return the initially selected value (if any)', () => { const dropdown = shallowRenderDropdown( { initialSelected: 'drafts' } ); const initialSelectedValue = dropdown.instance().getInitialSelectedItem(); - expect( initialSelectedValue ).to.equal( 'drafts' ); + expect( initialSelectedValue ).toEqual( 'drafts' ); } ); test( "should return `undefined`, when there aren't options", () => { const dropdown = shallow( ); - expect( dropdown.instance().getInitialSelectedItem() ).to.be.undefined; + expect( dropdown.instance().getInitialSelectedItem() ).toBeUndefined(); } ); test( "should return the first not-label option, when there isn't a preselected value", () => { const dropdown = shallowRenderDropdown(); const initialSelectedValue = dropdown.instance().getInitialSelectedItem(); - expect( initialSelectedValue ).to.equal( 'published' ); + expect( initialSelectedValue ).toEqual( 'published' ); } ); } ); @@ -84,33 +81,33 @@ describe( 'index', () => { test( 'should return the initially selected text (if any)', () => { const dropdown = shallowRenderDropdown( { selectedText: 'Drafts' } ); const initialSelectedText = dropdown.instance().getSelectedText(); - expect( initialSelectedText ).to.equal( 'Drafts' ); + expect( initialSelectedText ).toEqual( 'Drafts' ); } ); test( 'should return the `label` associated to the selected option', () => { const dropdown = shallowRenderDropdown(); const initialSelectedText = dropdown.instance().getSelectedText(); - expect( initialSelectedText ).to.equal( 'Published' ); + expect( initialSelectedText ).toEqual( 'Published' ); } ); test( 'should return the `label` associated to the initial selected option', () => { const dropdown = shallowRenderDropdown( { initialSelected: 'scheduled' } ); const initialSelectedText = dropdown.instance().getSelectedText(); - expect( initialSelectedText ).to.equal( 'Scheduled' ); + expect( initialSelectedText ).toEqual( 'Scheduled' ); } ); } ); describe( 'selectItem', () => { test( 'should run the `onSelect` hook, and then update the state', () => { const dropdownOptions = getDropdownOptions(); - const onSelectSpy = sinon.spy(); + const onSelectSpy = jest.fn(); const dropdown = mount( ); const newSelectedOption = dropdownOptions[ 2 ]; dropdown.instance().selectItem( newSelectedOption ); - expect( dropdown.state( 'selected' ) ).to.equal( newSelectedOption.value ); + expect( dropdown.state( 'selected' ) ).toEqual( newSelectedOption.value ); } ); } ); @@ -121,7 +118,7 @@ describe( 'index', () => { dropdown.setState( { isOpen: isCurrentlyOpen } ); dropdown.instance().toggleDropdown(); - expect( dropdown.state( 'isOpen' ) ).to.equal( ! isCurrentlyOpen ); + expect( dropdown.state( 'isOpen' ) ).toEqual( ! isCurrentlyOpen ); } runToggleDropdownTest( true ); @@ -133,7 +130,7 @@ describe( 'index', () => { test( 'should set the `isOpen` state property equal `true`', () => { const dropdown = shallowRenderDropdown(); dropdown.instance().openDropdown(); - expect( dropdown.state( 'isOpen' ) ).to.equal( true ); + expect( dropdown.state( 'isOpen' ) ).toEqual( true ); } ); } ); @@ -141,7 +138,7 @@ describe( 'index', () => { test( "shouldn't do anything when the dropdown is already closed", () => { const dropdown = shallowRenderDropdown(); dropdown.instance().closeDropdown(); - expect( dropdown.state( 'isOpen' ) ).to.equal( false ); + expect( dropdown.state( 'isOpen' ) ).toEqual( false ); } ); test( 'should set the `isOpen` state property equal `false`', () => { @@ -150,8 +147,8 @@ describe( 'index', () => { dropdown.instance().focused = 1; dropdown.instance().closeDropdown(); - expect( dropdown.state( 'isOpen' ) ).to.equal( false ); - expect( dropdown.instance().focused ).to.be.undefined; + expect( dropdown.state( 'isOpen' ) ).toEqual( false ); + expect( dropdown.instance().focused ).toBeUndefined(); } ); } ); @@ -164,19 +161,18 @@ describe( 'index', () => { dropdown.setState( { isOpen: true } ); dropdown.find( '.select-dropdown__container' ).simulate( 'keydown', tabEvent ); - expect( dropdown.instance().focused ).to.equal( 1 ); + expect( dropdown.instance().focused ).toEqual( 1 ); } ); test( 'permits to select an option by pressing ENTER, or SPACE', () => { function runNavigateItemTest( keyCode ) { const dropdown = shallowRenderDropdown(); - const activateItemSpy = sinon.spy( dropdown.instance(), 'activateItem' ); + const activateItemSpy = jest.spyOn( dropdown.instance(), 'activateItem' ); const keyEvent = createKeyEvent( keyCode ); dropdown.find( '.select-dropdown__container' ).simulate( 'keydown', keyEvent ); - expect( dropdown.state( 'isOpen' ) ).to.equal( true ); - sinon.assert.calledOnce( keyEvent.preventDefault ); - sinon.assert.calledOnce( activateItemSpy ); + expect( dropdown.state( 'isOpen' ) ).toEqual( true ); + expect( activateItemSpy ).toBeCalledTimes( 1 ); } const enterKeyCode = 13; @@ -194,10 +190,9 @@ describe( 'index', () => { const container = dropdown.find( '.select-dropdown__container' ); container.simulate( 'keydown', escEvent ); - expect( dropdown.state( 'isOpen' ) ).to.equal( false ); - sinon.assert.calledOnce( escEvent.preventDefault ); + expect( dropdown.state( 'isOpen' ) ).toEqual( false ); // check that container was focused - expect( container.instance() ).to.equal( document.activeElement ); + expect( container.instance() ).toEqual( document.activeElement ); dropdown.unmount(); } ); @@ -208,10 +203,10 @@ describe( 'index', () => { dropdown.instance().focused = 1; dropdown.find( '.select-dropdown__container' ).simulate( 'keydown', keyEvent ); - expect( dropdown.state( 'isOpen' ) ).to.equal( true ); + expect( dropdown.state( 'isOpen' ) ).toEqual( true ); dropdown.find( '.select-dropdown__container' ).simulate( 'keydown', keyEvent ); - expect( dropdown.instance().focused ).to.equal( nextFocused ); + expect( dropdown.instance().focused ).toEqual( nextFocused ); } const arrowUp = { keyCode: 38, nextFocused: 0 }; @@ -252,7 +247,7 @@ describe( 'index', () => { function createKeyEvent( keyCode ) { return { keyCode, - preventDefault: sinon.spy(), + preventDefault: jest.fn(), }; } } ); diff --git a/client/components/select-dropdown/test/item.js b/client/components/select-dropdown/test/item.js index b38749dde6b20..1ba09b3a4d991 100644 --- a/client/components/select-dropdown/test/item.js +++ b/client/components/select-dropdown/test/item.js @@ -1,29 +1,28 @@ /** * @jest-environment jsdom */ - -import { expect } from 'chai'; import { shallow } from 'enzyme'; -import sinon from 'sinon'; import SelectDropdownItem from '../item'; describe( 'item', () => { describe( 'component rendering', () => { test( 'should render a list entry', () => { const dropdownItem = shallow( Published ); - expect( dropdownItem.is( 'li.select-dropdown__option' ) ).to.be.true; + expect( dropdownItem.is( 'li.select-dropdown__option' ) ).toBe( true ); } ); test( 'should contain a link', () => { const dropdownItem = shallow( Published ); - expect( dropdownItem.children( 'a.select-dropdown__item' ).length ).to.eql( 1 ); - expect( dropdownItem.find( 'span.select-dropdown__item-text' ).text() ).to.eql( 'Published' ); + expect( dropdownItem.children( 'a.select-dropdown__item' ).length ).toEqual( 1 ); + expect( dropdownItem.find( 'span.select-dropdown__item-text' ).text() ).toEqual( + 'Published' + ); } ); } ); describe( 'when the component is clicked', () => { test( 'should do nothing when is disabled', () => { - const onClickSpy = sinon.spy(); + const onClickSpy = jest.fn(); const dropdownItem = shallow( Published @@ -31,19 +30,19 @@ describe( 'item', () => { ); const link = dropdownItem.children( 'a.select-dropdown__item' ); - expect( link.hasClass( 'is-disabled' ) ).to.be.true; + expect( link.hasClass( 'is-disabled' ) ).toBe( true ); link.simulate( 'click' ); - sinon.assert.notCalled( onClickSpy ); + expect( onClickSpy ).not.toHaveBeenCalled(); } ); test( 'should run the `onClick` hook', () => { - const onClickSpy = sinon.spy(); + const onClickSpy = jest.fn(); const dropdownItem = shallow( Published ); dropdownItem.children( 'a.select-dropdown__item' ).simulate( 'click' ); - sinon.assert.calledOnce( onClickSpy ); + expect( onClickSpy ).toHaveBeenCalledTimes( 1 ); } ); } ); } ); diff --git a/client/components/seo/meta-title-editor/test/index.js b/client/components/seo/meta-title-editor/test/index.js index 2bee45b2f098b..66a9dd549bacc 100644 --- a/client/components/seo/meta-title-editor/test/index.js +++ b/client/components/seo/meta-title-editor/test/index.js @@ -1,11 +1,10 @@ -import { expect } from 'chai'; import { nativeToRaw, rawToNative, fromApi, toApi } from '../mappings'; describe( 'SEO', () => { describe( 'Title Format Editor', () => { describe( '#nativeToRaw', () => { test( 'should produce empty formats', () => { - expect( nativeToRaw( [] ) ).to.eql( [] ); + expect( nativeToRaw( [] ) ).toEqual( [] ); } ); test( 'should produce plain-text strings', () => { @@ -15,7 +14,7 @@ describe( 'SEO', () => { { type: 'string', value: ' a ' }, { type: 'string', value: 'string' }, ] ) - ).to.eql( [ { type: 'string', value: 'just a string' } ] ); + ).toEqual( [ { type: 'string', value: 'just a string' } ] ); } ); test( 'should convert token formats', () => { @@ -25,7 +24,7 @@ describe( 'SEO', () => { { type: 'string', value: ' | ' }, { type: 'postTitle' }, ] ) - ).to.eql( [ + ).toEqual( [ { type: 'token', value: 'site_name' }, { type: 'string', value: ' | ' }, { type: 'token', value: 'post_title' }, @@ -35,11 +34,11 @@ describe( 'SEO', () => { describe( '#rawToNative', () => { test( 'should handle empty strings', () => { - expect( rawToNative( [] ) ).to.eql( [] ); + expect( rawToNative( [] ) ).toEqual( [] ); } ); test( 'should handle plain strings', () => { - expect( rawToNative( [ { type: 'string', value: 'just a string' } ] ) ).to.eql( [ + expect( rawToNative( [ { type: 'string', value: 'just a string' } ] ) ).toEqual( [ { type: 'string', value: 'just a string' }, ] ); } ); @@ -51,7 +50,7 @@ describe( 'SEO', () => { { type: 'string', value: ' | ' }, { type: 'token', value: 'post_title' }, ] ) - ).to.eql( [ + ).toEqual( [ { type: 'siteName' }, { type: 'string', value: ' | ' }, { type: 'postTitle' }, @@ -61,7 +60,7 @@ describe( 'SEO', () => { describe( '#fromApi', () => { test( 'should produce empty formats', () => { - expect( fromApi( {} ) ).to.eql( {} ); + expect( fromApi( {} ) ).toEqual( {} ); } ); test( 'should remap keys and values', () => { @@ -77,7 +76,7 @@ describe( 'SEO', () => { { type: 'token', value: 'site_name' }, ], } ) - ).to.eql( { + ).toEqual( { frontPage: [ { type: 'siteName' }, { type: 'string', value: ' is awesome!' } ], posts: [ { type: 'postTitle' }, { type: 'string', value: ' | ' }, { type: 'siteName' } ], } ); @@ -86,7 +85,7 @@ describe( 'SEO', () => { describe( '#toApi', () => { test( 'should produce empty formats', () => { - expect( toApi( {} ) ).to.eql( {} ); + expect( toApi( {} ) ).toEqual( {} ); } ); test( 'should remap keys and values', () => { @@ -99,7 +98,7 @@ describe( 'SEO', () => { { type: 'siteName' }, ], } ) - ).to.eql( { + ).toEqual( { front_page: [ { type: 'token', value: 'site_name' }, { type: 'string', value: ' is awesome!' }, diff --git a/client/components/sites-dropdown/test/index.js b/client/components/sites-dropdown/test/index.js index d4b7ed70c3241..bd6071d0a47d2 100644 --- a/client/components/sites-dropdown/test/index.js +++ b/client/components/sites-dropdown/test/index.js @@ -1,10 +1,7 @@ /** * @jest-environment jsdom */ - -import { expect } from 'chai'; import { shallow } from 'enzyme'; -import sinon from 'sinon'; import { SitesDropdown } from '..'; const noop = () => {}; @@ -13,46 +10,46 @@ describe( 'index', () => { describe( 'component rendering', () => { test( 'should render a dropdown component initially closed', () => { const sitesDropdown = shallow( ); - expect( sitesDropdown.hasClass( 'sites-dropdown' ) ).to.equal( true ); - expect( sitesDropdown.hasClass( 'is-open' ) ).to.equal( false ); + expect( sitesDropdown.hasClass( 'sites-dropdown' ) ).toEqual( true ); + expect( sitesDropdown.hasClass( 'is-open' ) ).toEqual( false ); } ); test( 'with multiple sites, should toggle the dropdown when it is clicked', () => { - const toggleOpenSpy = sinon.spy( SitesDropdown.prototype, 'toggleOpen' ); + const toggleOpenSpy = jest.spyOn( SitesDropdown.prototype, 'toggleOpen' ); const sitesDropdown = shallow( ); sitesDropdown.find( '.sites-dropdown__selected' ).simulate( 'click' ); - sinon.assert.calledOnce( toggleOpenSpy ); - expect( sitesDropdown.hasClass( 'has-multiple-sites' ) ).to.equal( true ); - expect( sitesDropdown.hasClass( 'is-open' ) ).to.equal( true ); + expect( toggleOpenSpy ).toBeCalledTimes( 1 ); + expect( sitesDropdown.hasClass( 'has-multiple-sites' ) ).toEqual( true ); + expect( sitesDropdown.hasClass( 'is-open' ) ).toEqual( true ); - toggleOpenSpy.restore(); + toggleOpenSpy.mockRestore(); } ); test( 'with only one site, nothing should happen when it is clicked', () => { - const toggleOpenSpy = sinon.spy( SitesDropdown.prototype, 'toggleOpen' ); + const toggleOpenSpy = jest.spyOn( SitesDropdown.prototype, 'toggleOpen' ); const sitesDropdown = shallow( ); sitesDropdown.find( '.sites-dropdown__selected' ).simulate( 'click' ); - sinon.assert.calledOnce( toggleOpenSpy ); - expect( sitesDropdown.hasClass( 'has-multiple-sites' ) ).to.equal( false ); - expect( sitesDropdown.hasClass( 'is-open' ) ).to.equal( false ); + expect( toggleOpenSpy ).toBeCalledTimes( 1 ); + expect( sitesDropdown.hasClass( 'has-multiple-sites' ) ).toEqual( false ); + expect( sitesDropdown.hasClass( 'is-open' ) ).toEqual( false ); - toggleOpenSpy.restore(); + toggleOpenSpy.mockRestore(); } ); } ); describe( 'component state', () => { test( 'should initially consider as selected the selectedOrPrimarySiteId prop', () => { const sitesDropdown = shallow( ); - expect( sitesDropdown.instance().state.selectedSiteId ).to.be.equal( 1234567 ); + expect( sitesDropdown.instance().state.selectedSiteId ).toEqual( 1234567 ); } ); } ); describe( 'selectSite', () => { test( 'should update the `selectedSiteSlug`, and `open` state properties', () => { - const setStateSpy = sinon.spy(); - const siteSelectedSpy = sinon.spy(); + const setStateSpy = jest.fn(); + const siteSelectedSpy = jest.fn(); const fakeContext = { setState: setStateSpy, props: { @@ -62,17 +59,17 @@ describe( 'index', () => { SitesDropdown.prototype.selectSite.call( fakeContext, 12345 ); - sinon.assert.calledOnce( siteSelectedSpy ); - sinon.assert.calledWith( siteSelectedSpy, 12345 ); + expect( siteSelectedSpy ).toBeCalledTimes( 1 ); + expect( siteSelectedSpy ).toHaveBeenCalledWith( 12345 ); - sinon.assert.calledOnce( setStateSpy ); - sinon.assert.calledWith( setStateSpy, { open: false, selectedSiteId: 12345 } ); + expect( setStateSpy ).toBeCalledTimes( 1 ); + expect( setStateSpy ).toHaveBeenCalledWith( { open: false, selectedSiteId: 12345 } ); } ); } ); describe( 'onClose', () => { test( 'should set `open` state property to false', () => { - const setStateSpy = sinon.spy(); + const setStateSpy = jest.fn(); const fakeContext = { setState: setStateSpy, props: { @@ -82,12 +79,12 @@ describe( 'index', () => { SitesDropdown.prototype.onClose.call( fakeContext ); - sinon.assert.calledOnce( setStateSpy ); - sinon.assert.calledWith( setStateSpy, { open: false } ); + expect( setStateSpy ).toBeCalledTimes( 1 ); + expect( setStateSpy ).toHaveBeenCalledWith( { open: false } ); } ); test( 'should run the component `onClose` hook, when it is provided', () => { - const onCloseSpy = sinon.spy(); + const onCloseSpy = jest.fn(); const fakeContext = { setState: noop, props: { @@ -96,7 +93,7 @@ describe( 'index', () => { }; SitesDropdown.prototype.onClose.call( fakeContext ); - sinon.assert.calledOnce( onCloseSpy ); + expect( onCloseSpy ).toBeCalledTimes( 1 ); } ); } ); } ); diff --git a/client/components/theme/test/index.jsx b/client/components/theme/test/index.jsx index eeff2e8c8af32..a45ade1e8dc15 100644 --- a/client/components/theme/test/index.jsx +++ b/client/components/theme/test/index.jsx @@ -3,7 +3,6 @@ */ import { parse } from 'url'; -import { assert } from 'chai'; import { shallow } from 'enzyme'; import { createElement } from 'react'; import ReactDom from 'react-dom'; @@ -41,21 +40,18 @@ describe( 'Theme', () => { } ); test( 'should render a
with a className of "theme"', () => { - assert( themeNode !== null, "DOM node doesn't exist" ); - assert( themeNode.nodeName === 'DIV', 'nodeName doesn\'t equal "DIV"' ); - assert.include( - themeNode.className, - 'theme is-actionable', - 'className does not contain "theme is-actionable"' + expect( themeNode ).not.toBeNull(); + expect( themeNode.nodeName ).toBe( 'DIV' ); + expect( themeNode.className ).toEqual( expect.stringContaining( 'theme is-actionable' ) ); + expect( themeNode.getElementsByTagName( 'h2' )[ 0 ].textContent ).toBe( + 'Twenty Seventeen' ); - - assert( themeNode.getElementsByTagName( 'h2' )[ 0 ].textContent === 'Twenty Seventeen' ); } ); test( 'should render a screenshot', () => { const imgNode = themeNode.getElementsByTagName( 'img' )[ 0 ]; const src = imgNode.getAttribute( 'src' ); - assert.include( src, '/screenshot.png' ); + expect( src ).toEqual( expect.stringContaining( '/screenshot.png' ) ); } ); test( 'should include photon parameters', () => { @@ -71,21 +67,18 @@ describe( 'Theme', () => { test( 'should call onScreenshotClick() on click on screenshot', () => { const imgNode = themeNode.getElementsByTagName( 'img' )[ 0 ]; TestUtils.Simulate.click( imgNode ); - assert( props.onScreenshotClick.calledOnce, 'onClick did not trigger onScreenshotClick' ); + expect( props.onScreenshotClick.calledOnce ).toBe( true ); } ); test( 'should not show a price when there is none', () => { - assert( - themeNode.getElementsByClassName( 'price' ).length === 0, - 'price should not appear' - ); + expect( themeNode.getElementsByClassName( 'price' ) ).toHaveLength( 0 ); } ); test( 'should render a More button', () => { const more = themeNode.getElementsByClassName( 'theme__more-button' ); - assert( more.length === 1, 'More button container not found' ); - assert( more[ 0 ].getElementsByTagName( 'button' ).length === 1, 'More button not found' ); + expect( more ).toHaveLength( 1 ); + expect( more[ 0 ].getElementsByTagName( 'button' ) ).toHaveLength( 1 ); } ); test( 'should match snapshot', () => { @@ -104,7 +97,7 @@ describe( 'Theme', () => { test( 'should not render a More button', () => { const more = themeNode.getElementsByClassName( 'theme__more-button' ); - assert( more.length === 0, 'More button container found' ); + expect( more ).toHaveLength( 0 ); } ); } ); } ); @@ -122,8 +115,8 @@ describe( 'Theme', () => { } ); test( 'should render a
with an is-placeholder class', () => { - assert( themeNode.nodeName === 'DIV', 'nodeName doesn\'t equal "DIV"' ); - assert.include( themeNode.className, 'is-placeholder', 'no is-placeholder' ); + expect( themeNode.nodeName ).toBe( 'DIV' ); + expect( themeNode.className ).toEqual( expect.stringContaining( 'is-placeholder' ) ); } ); } ); @@ -136,7 +129,9 @@ describe( 'Theme', () => { } ); test( 'should show a price', () => { - assert( themeNode.getElementsByClassName( 'theme__badge-price' )[ 0 ].textContent === '$50' ); + expect( themeNode.getElementsByClassName( 'theme__badge-price' )[ 0 ].textContent ).toBe( + '$50' + ); } ); } ); } ); diff --git a/client/components/track-input-changes/test/index.jsx b/client/components/track-input-changes/test/index.jsx index 0f959e4ea75bc..1c59a7d90ad37 100644 --- a/client/components/track-input-changes/test/index.jsx +++ b/client/components/track-input-changes/test/index.jsx @@ -1,12 +1,9 @@ /** * @jest-environment jsdom */ - -import { expect } from 'chai'; import { Component } from 'react'; import ReactDom from 'react-dom'; import TestUtils from 'react-dom/test-utils'; -import sinon from 'sinon'; import TrackInputChanges from '../'; /** @@ -47,7 +44,7 @@ describe( 'TrackInputChanges#onNewValue', () => { beforeEach( () => { for ( const spy in spies ) { - spies[ spy ] = sinon.spy(); + spies[ spy ] = jest.fn(); } tree = ReactDom.render( @@ -63,26 +60,26 @@ describe( 'TrackInputChanges#onNewValue', () => { test( 'should pass through callbacks but not trigger on a change event', () => { dummyInput.triggerChange( 'abc' ); - expect( spies.onNewValue ).to.have.callCount( 0 ); - expect( spies.onChange ).to.have.callCount( 1 ); - expect( spies.onBlur ).to.have.callCount( 0 ); + expect( spies.onNewValue ).toHaveBeenCalledTimes( 0 ); + expect( spies.onChange ).toHaveBeenCalledTimes( 1 ); + expect( spies.onBlur ).toHaveBeenCalledTimes( 0 ); } ); test( 'should pass through callbacks but not trigger on a blur event', () => { dummyInput.triggerBlur(); - expect( spies.onNewValue ).to.have.callCount( 0 ); - expect( spies.onChange ).to.have.callCount( 0 ); - expect( spies.onBlur ).to.have.callCount( 1 ); + expect( spies.onNewValue ).toHaveBeenCalledTimes( 0 ); + expect( spies.onChange ).toHaveBeenCalledTimes( 0 ); + expect( spies.onBlur ).toHaveBeenCalledTimes( 1 ); } ); test( 'should pass through callbacks and trigger on a change then a blur', () => { dummyInput.triggerChange( 'abc' ); dummyInput.triggerBlur(); - expect( spies.onNewValue ).to.have.callCount( 1 ); - expect( spies.onChange ).to.have.callCount( 1 ); - expect( spies.onBlur ).to.have.callCount( 1 ); + expect( spies.onNewValue ).toHaveBeenCalledTimes( 1 ); + expect( spies.onChange ).toHaveBeenCalledTimes( 1 ); + expect( spies.onBlur ).toHaveBeenCalledTimes( 1 ); } ); test( 'should trigger once on each blur event only if value changed', () => { @@ -95,9 +92,9 @@ describe( 'TrackInputChanges#onNewValue', () => { dummyInput.triggerBlur(); dummyInput.triggerChange( 'abcdefg' ); - expect( spies.onNewValue ).to.have.callCount( 2 ); - expect( spies.onChange ).to.have.callCount( 5 ); - expect( spies.onBlur ).to.have.callCount( 3 ); + expect( spies.onNewValue ).toHaveBeenCalledTimes( 2 ); + expect( spies.onChange ).toHaveBeenCalledTimes( 5 ); + expect( spies.onBlur ).toHaveBeenCalledTimes( 3 ); } ); test( 'should throw if multiple child elements', () => { @@ -109,6 +106,6 @@ describe( 'TrackInputChanges#onNewValue', () => { , container ) - ).to.throw; + ).toThrow(); } ); } );