Skip to content

Commit

Permalink
fix document.title being cleared if none is given to DocumentMeta, cl…
Browse files Browse the repository at this point in the history 
…oses #41
  • Loading branch information
@danieljuhl
danieljuhl committed Jan 5, 2018
1 parent e13fc4e commit 0918c2b
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 47 deletions.
123 changes: 77 additions & 46 deletions lib/__tests__/dom.nested.test.js
View file
Expand Up @@ -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',
Expand Down Expand Up @@ -43,60 +42,88 @@ describe('DocumentMeta - DOM nested', () => {
}
};


beforeEach(() => {
DocumentMeta.canUseDOM = true;
removeDocumentMeta();
TestUtils.renderIntoDocument(
<div>
<DocumentMeta {...DOC_META} />
describe('Basic nested', () => {
beforeEach(() => {
DocumentMeta.canUseDOM = true;
removeDocumentMeta();
TestUtils.renderIntoDocument(
<div>
<DocumentMeta {...DOC_META_NESTED} extend />
<DocumentMeta {...DOC_META} />
<div>
<DocumentMeta {...DOC_META_NESTED} extend />
</div>
</div>
</div>
);
});

it('should render document.title / <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;
Expand All @@ -105,15 +132,15 @@ 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>
);
});

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]`);
Expand All @@ -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`
);
});
});
});
4 changes: 3 additions & 1 deletion lib/index.js
View file
Expand Up @@ -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));
}
}
Expand Down

0 comments on commit 0918c2b

Please sign in to comment.