From 0918c2b7d970b4ed9abe01267e7beca33d716431 Mon Sep 17 00:00:00 2001 From: Daniel Juhl Date: Fri, 5 Jan 2018 09:58:36 +0100 Subject: [PATCH] fix document.title being cleared if none is given to DocumentMeta, closes #41 --- lib/__tests__/dom.nested.test.js | 123 +++++++++++++++++++------------ lib/index.js | 4 +- 2 files changed, 80 insertions(+), 47 deletions(-) diff --git a/lib/__tests__/dom.nested.test.js b/lib/__tests__/dom.nested.test.js index a0418c7..ebceff2 100644 --- a/lib/__tests__/dom.nested.test.js +++ b/lib/__tests__/dom.nested.test.js @@ -8,7 +8,6 @@ import { getElements, getAttr } from './test-utils'; const document = global.document; describe('DocumentMeta - DOM nested', () => { - const DOC_META = { title: 'This is a document title', description: 'This meta value is describing the page we are looking at', @@ -43,60 +42,88 @@ describe('DocumentMeta - DOM nested', () => { } }; - - beforeEach(() => { - DocumentMeta.canUseDOM = true; - removeDocumentMeta(); - TestUtils.renderIntoDocument( -
- + describe('Basic nested', () => { + beforeEach(() => { + DocumentMeta.canUseDOM = true; + removeDocumentMeta(); + TestUtils.renderIntoDocument(
- + +
+ +
-
- ); - }); - - it('should render document.title / according to the nested title-prop', () => { - assert.strictEqual( document.title, DOC_META_NESTED.title ); - }); + ); + }); - it('should render <meta name="description" content="..."> according to the nested description-prop', () => { - assert.strictEqual( getAttr('meta[name=description]', 'content'), DOC_META_NESTED.description ); - }); + it('should render document.title / <title> according to the nested title-prop', () => { + assert.strictEqual(document.title, DOC_META_NESTED.title); + }); - it('should render <link rel="canonical" href="..." according to the nested canonical-prop', () => { - assert.strictEqual( getAttr('link[rel=canonical]', 'href'), DOC_META_NESTED.canonical ); - }); + it('should render <meta name="description" content="..."> according to the nested description-prop', () => { + assert.strictEqual( + getAttr('meta[name=description]', 'content'), + DOC_META_NESTED.description + ); + }); - it('should render simple meta tags, eg. <meta charset="...">', () => { - assert.strictEqual( getAttr('meta[charset]', 'charset'), DOC_META.meta.charset ); - }); + it('should render <link rel="canonical" href="..." according to the nested canonical-prop', () => { + assert.strictEqual( + getAttr('link[rel=canonical]', 'href'), + DOC_META_NESTED.canonical + ); + }); - it('should render normal meta tags, eg. <meta name="..." content="...">', () => { - Object.keys( DOC_META.meta.name ).forEach(name => { - const value = DOC_META_NESTED.meta.name.hasOwnProperty(name) - ? DOC_META_NESTED.meta.name[name] - : DOC_META.meta.name[name]; - assert.strictEqual( getAttr(`meta[name=${ name }]`, 'content'), value, `<meta name="${ name }" ... /> has not been rendered correctly` ); + it('should render simple meta tags, eg. <meta charset="...">', () => { + assert.strictEqual( + getAttr('meta[charset]', 'charset'), + DOC_META.meta.charset + ); }); - }); - it('should render normal link tags, eg. <link rel="..." href="...">', () => { - Object.keys( DOC_META.link.rel ).forEach(rel => { - const value = DOC_META_NESTED.link.rel.hasOwnProperty(rel) - ? DOC_META_NESTED.link.rel[rel] - : DOC_META.link.rel[rel]; - const values = Array.isArray(value) ? value : [ value ]; + it('should render normal meta tags, eg. <meta name="..." content="...">', () => { + Object.keys(DOC_META.meta.name).forEach(name => { + const value = DOC_META_NESTED.meta.name.hasOwnProperty(name) + ? DOC_META_NESTED.meta.name[name] + : DOC_META.meta.name[name]; + assert.strictEqual( + getAttr(`meta[name=${name}]`, 'content'), + value, + `<meta name="${name}" ... /> has not been rendered correctly` + ); + }); + }); - let idx = 0; - const elements = getElements( `link[rel=${ rel }]` ); - for (const element of elements) { - assert.strictEqual( element.getAttribute('href'), values[idx++], `<link rel="${ rel }" ... /> has not been rendered correctly` ); - } + it('should render normal link tags, eg. <link rel="..." href="...">', () => { + Object.keys(DOC_META.link.rel).forEach(rel => { + const value = DOC_META_NESTED.link.rel.hasOwnProperty(rel) + ? DOC_META_NESTED.link.rel[rel] + : DOC_META.link.rel[rel]; + const values = Array.isArray(value) ? value : [value]; + + let idx = 0; + const elements = getElements(`link[rel=${rel}]`); + for (const element of elements) { + assert.strictEqual( + element.getAttribute('href'), + values[idx++], + `<link rel="${rel}" ... /> has not been rendered correctly` + ); + } + }); }); }); + it('keep document.title if none is provided to DocumentMeta', () => { + DocumentMeta.canUseDOM = true; + removeDocumentMeta(); + document.title = 'Static document title'; + TestUtils.renderIntoDocument(<DocumentMeta />); + assert.strictEqual(document.title, 'Static document title'); + TestUtils.renderIntoDocument(<DocumentMeta title="Dynamic document title" />); + assert.strictEqual(document.title, 'Dynamic document title'); + }); + describe('Deep nesting', () => { beforeEach(() => { DocumentMeta.canUseDOM = true; @@ -105,7 +132,7 @@ describe('DocumentMeta - DOM nested', () => { <DocumentMeta meta={{ name: { l1: 'a' } }}> <DocumentMeta meta={{ name: { l2: 'b' } }} extend> <DocumentMeta meta={{ name: { l3: 'c' } }}> - <DocumentMeta meta={{ name: { l4: 'd' } }} extend /> + <DocumentMeta meta={{ name: { l4: 'd' } }} extend /> </DocumentMeta> </DocumentMeta> </DocumentMeta> @@ -113,7 +140,7 @@ describe('DocumentMeta - DOM nested', () => { }); it('should render inside-out, but only as long as the parent component is extendable', () => { - const expected = { l4: 'd', 'l3': 'c' }; + const expected = { l4: 'd', l3: 'c' }; const actual = {}; const elements = getElements(`meta[name]`); @@ -122,7 +149,11 @@ describe('DocumentMeta - DOM nested', () => { actual[name] = element.getAttribute('content'); } - assert.deepEqual(expected, actual, `<meta name="..." content="..." /> has not been rendered correctly`); + assert.deepEqual( + expected, + actual, + `<meta name="..." content="..." /> has not been rendered correctly` + ); }); }); }); diff --git a/lib/index.js b/lib/index.js index c5a0104..82c4b6d 100644 --- a/lib/index.js +++ b/lib/index.js @@ -38,7 +38,9 @@ function reducePropsTostate(propsList) { function handleStateChangeOnClient(props) { if (canUseDOM) { - document.title = props.title || ''; + if (typeof props.title === 'string') { + document.title = props.title; + } insertDocumentMeta(getTags(props)); } }