mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-21 01:41:46 +03:00
95d27e7f58
- this is a small part of a bit of cleanup of our test files - the goal is to make the existing tests clearer with a view to making it easier to write more tests - this makes the test structure follow the codebase structure more closely - eventually we will colocate the frontend tests with the frontend code
352 lines
18 KiB
JavaScript
352 lines
18 KiB
JavaScript
const should = require('should');
|
|
const concat = require('../../../../core/frontend/helpers/concat');
|
|
const link = require('../../../../core/frontend/helpers/link');
|
|
const url = require('../../../../core/frontend/helpers/url');
|
|
const handlebars = require('../../../../core/frontend/services/theme-engine/engine').handlebars;
|
|
|
|
const configUtils = require('../../../utils/configUtils');
|
|
|
|
let defaultGlobals;
|
|
|
|
function compile(templateString) {
|
|
const template = handlebars.compile(templateString);
|
|
template.with = (locals = {}, globals) => {
|
|
globals = globals || defaultGlobals;
|
|
|
|
return template(locals, globals);
|
|
};
|
|
|
|
return template;
|
|
}
|
|
|
|
describe('{{link}} helper', function () {
|
|
before(function () {
|
|
handlebars.registerHelper('link', link);
|
|
handlebars.registerHelper('url', url);
|
|
handlebars.registerHelper('concat', concat);
|
|
configUtils.config.set('url', 'https://siteurl.com');
|
|
defaultGlobals = {
|
|
data: {
|
|
site: {
|
|
url: configUtils.config.get('url')
|
|
}
|
|
}
|
|
};
|
|
});
|
|
|
|
after(function () {
|
|
configUtils.restore();
|
|
});
|
|
|
|
describe('basic behaviour: simple links without context', function () {
|
|
it('throws an error for missing href=""', function () {
|
|
(function compileWith() {
|
|
compile('{{#link}}text{{/link}}')
|
|
.with({});
|
|
}).should.throw();
|
|
});
|
|
|
|
it('silently accepts an empty href...', function () {
|
|
compile('{{#link href=tag.slug}}text{{/link}}')
|
|
.with({tag: null})
|
|
.should.eql('<a href="">text</a>');
|
|
});
|
|
|
|
it('<a> tag with a specific URL', function () {
|
|
compile('{{#link href="/about/"}}text{{/link}}')
|
|
.with({})
|
|
.should.eql('<a href="/about/">text</a>');
|
|
});
|
|
|
|
it('<a> tag with an anchor', function () {
|
|
compile('{{#link href="#myheading"}}text{{/link}}')
|
|
.with({})
|
|
.should.eql('<a href="#myheading">text</a>');
|
|
});
|
|
|
|
it('<a> tag with global variable', function () {
|
|
compile('{{#link href=@site.url}}text{{/link}}')
|
|
.with({})
|
|
.should.eql('<a href="https://siteurl.com">text</a>');
|
|
});
|
|
|
|
it('<a> tag with local variable', function () {
|
|
compile('{{#link href=tag.slug}}text{{/link}}')
|
|
.with({tag: {slug: 'my-tag'}})
|
|
.should.eql('<a href="my-tag">text</a>');
|
|
});
|
|
|
|
it('<a> tag with nested helpers', function () {
|
|
compile('{{#link href=(url)}}{{title}}{{/link}}')
|
|
// Simulate a post - using a draft to prove url helper gets called
|
|
// because published posts get their urls from a cache that we don't have access to, so we just get 404
|
|
.with({title: 'My Draft Post', slug: 'my-post', html: '<p>My Post</p>', uuid: '1234'})
|
|
.should.eql('<a href="/p/1234/">My Draft Post</a>');
|
|
});
|
|
|
|
it('can wrap html content', function () {
|
|
compile('{{#link href="/"}}<img src="myfile.jpg" />{{/link}}')
|
|
.with({})
|
|
.should.eql('<a href="/"><img src="myfile.jpg" /></a>');
|
|
});
|
|
|
|
it('honours class attribute', function () {
|
|
compile('{{#link href="#myheading" class="my-class"}}text{{/link}}')
|
|
.with({})
|
|
.should.eql('<a class="my-class" href="#myheading">text</a>');
|
|
});
|
|
|
|
it('supports multiple classes', function () {
|
|
compile('{{#link href="#myheading" class="my-class and-stuff"}}text{{/link}}')
|
|
.with({})
|
|
.should.eql('<a class="my-class and-stuff" href="#myheading">text</a>');
|
|
});
|
|
|
|
it('can handle classes that come from variables', function () {
|
|
compile('{{#link href="#myheading" class=slug}}text{{/link}}')
|
|
.with({slug: 'fred'})
|
|
.should.eql('<a class="fred" href="#myheading">text</a>');
|
|
});
|
|
|
|
it('can handle classes that come from helpers', function () {
|
|
compile('{{#link href="#myheading" class=(concat "my-" slug)}}text{{/link}}')
|
|
.with({slug: 'fred'})
|
|
.should.eql('<a class="my-fred" href="#myheading">text</a>');
|
|
});
|
|
|
|
it('supports multiple attributes', function () {
|
|
compile('{{#link href="#myheading" class="my-class" target="_blank"}}text{{/link}}')
|
|
.with({})
|
|
.should.eql('<a class="my-class" href="#myheading" target="_blank">text</a>');
|
|
});
|
|
});
|
|
|
|
describe('dynamic behaviour: advanced links using context', function () {
|
|
describe('activeClass', function () {
|
|
it('gets applied correctly', function () {
|
|
// Test matching relative URL
|
|
compile('{{#link href="/about/"}}text{{/link}}')
|
|
.with({relativeUrl: '/about/'})
|
|
.should.eql('<a class="nav-current" href="/about/">text</a>');
|
|
|
|
// Test non-matching relative URL
|
|
compile('{{#link href="/about/"}}text{{/link}}')
|
|
.with({relativeUrl: '/'})
|
|
.should.eql('<a href="/about/">text</a>');
|
|
});
|
|
|
|
it('ignores anchors', function () {
|
|
// Anchor in href
|
|
compile('{{#link href="/about/#me"}}text{{/link}}')
|
|
.with({relativeUrl: '/about/'})
|
|
.should.eql('<a class="nav-current" href="/about/#me">text</a>');
|
|
|
|
// Anchor in relative URL
|
|
compile('{{#link href="/about/"}}text{{/link}}')
|
|
.with({relativeUrl: '/about/#me'})
|
|
.should.eql('<a class="nav-current" href="/about/">text</a>');
|
|
});
|
|
|
|
it('handles missing trailing slashes', function () {
|
|
compile('{{#link href="/about"}}text{{/link}}')
|
|
.with({relativeUrl: '/about/'})
|
|
.should.eql('<a class="nav-current" href="/about">text</a>');
|
|
});
|
|
|
|
it('handles absolute URLs', function () {
|
|
// Correct URL gets class
|
|
compile('{{#link href="https://siteurl.com/about/"}}text{{/link}}')
|
|
.with({relativeUrl: '/about/'})
|
|
.should.eql('<a class="nav-current" href="https://siteurl.com/about/">text</a>');
|
|
|
|
// Incorrect URL doesn't get class
|
|
compile('{{#link href="https://othersite.com/about/"}}text{{/link}}')
|
|
.with({relativeUrl: '/about/'})
|
|
.should.eql('<a href="https://othersite.com/about/">text</a>');
|
|
});
|
|
|
|
it('handles absolute URL with missing trailing slash', function () {
|
|
compile('{{#link href="https://siteurl.com/about"}}text{{/link}}')
|
|
.with({relativeUrl: '/about/'})
|
|
.should.eql('<a class="nav-current" href="https://siteurl.com/about">text</a>');
|
|
});
|
|
|
|
it('activeClass can be customised', function () {
|
|
compile('{{#link href="/about/" activeClass="nav-active"}}text{{/link}}')
|
|
.with({relativeUrl: '/about/'})
|
|
.should.eql('<a class="nav-active" href="/about/">text</a>');
|
|
|
|
compile('{{#link href="/about/" activeClass=slug}}text{{/link}}')
|
|
.with({relativeUrl: '/about/', slug: 'fred'})
|
|
.should.eql('<a class="fred" href="/about/">text</a>');
|
|
|
|
compile('{{#link href="/about/" activeClass=(concat slug "active" separator="-")}}text{{/link}}')
|
|
.with({relativeUrl: '/about/', slug: 'fred'})
|
|
.should.eql('<a class="fred-active" href="/about/">text</a>');
|
|
});
|
|
|
|
it('activeClass and other classes work together', function () {
|
|
// Single extra class
|
|
compile('{{#link href="/about/" class="about"}}text{{/link}}')
|
|
.with({relativeUrl: '/about/'})
|
|
.should.eql('<a class="about nav-current" href="/about/">text</a>');
|
|
|
|
// Multiple extra classes
|
|
compile('{{#link href="/about/" class="about my-link"}}text{{/link}}')
|
|
.with({relativeUrl: '/about/'})
|
|
.should.eql('<a class="about my-link nav-current" href="/about/">text</a>');
|
|
});
|
|
|
|
it('can disable activeClass with falsey values', function () {
|
|
// Empty string
|
|
compile('{{#link href="/about/" activeClass=""}}text{{/link}}')
|
|
.with({relativeUrl: '/about/'})
|
|
.should.eql('<a href="/about/">text</a>');
|
|
|
|
// false
|
|
compile('{{#link href="/about/" activeClass=false}}text{{/link}}')
|
|
.with({relativeUrl: '/about/'})
|
|
.should.eql('<a href="/about/">text</a>');
|
|
});
|
|
});
|
|
|
|
describe('parentActiveClass', function () {
|
|
it('gets applied correctly', function () {
|
|
// Parent and child links with PARENT as relative URL
|
|
compile('{{#link href="/about/"}}parent{{/link}}{{#link href="/about/team/"}}child{{/link}}')
|
|
.with({relativeUrl: '/about/'})
|
|
.should.eql('<a class="nav-current" href="/about/">parent</a><a href="/about/team/">child</a>');
|
|
|
|
// Parent and child links with CHILD as relative URL
|
|
compile('{{#link href="/about/"}}parent{{/link}}{{#link href="/about/team/"}}child{{/link}}')
|
|
.with({relativeUrl: '/about/team/'})
|
|
.should.eql('<a class="nav-current-parent" href="/about/">parent</a><a class="nav-current" href="/about/team/">child</a>');
|
|
});
|
|
|
|
it('ignores anchors', function () {
|
|
// Anchor in href
|
|
|
|
// Parent and child links with PARENT as relative URL
|
|
compile('{{#link href="/about/#me"}}parent{{/link}}{{#link href="/about/team/"}}child{{/link}}')
|
|
.with({relativeUrl: '/about/'})
|
|
.should.eql('<a class="nav-current" href="/about/#me">parent</a><a href="/about/team/">child</a>');
|
|
|
|
// Parent and child links with CHILD as relative URL
|
|
compile('{{#link href="/about/#me"}}parent{{/link}}{{#link href="/about/team/"}}child{{/link}}')
|
|
.with({relativeUrl: '/about/team/'})
|
|
.should.eql('<a class="nav-current-parent" href="/about/#me">parent</a><a class="nav-current" href="/about/team/">child</a>');
|
|
|
|
// Anchor in relative URL
|
|
|
|
// Parent and child links with PARENT as relative URL
|
|
compile('{{#link href="/about/"}}parent{{/link}}{{#link href="/about/team/"}}child{{/link}}')
|
|
.with({relativeUrl: '/about/#me'})
|
|
.should.eql('<a class="nav-current" href="/about/">parent</a><a href="/about/team/">child</a>');
|
|
|
|
// Parent and child links with CHILD as relative URL
|
|
compile('{{#link href="/about/"}}parent{{/link}}{{#link href="/about/team/"}}child{{/link}}')
|
|
.with({relativeUrl: '/about/team/#me'})
|
|
.should.eql('<a class="nav-current-parent" href="/about/">parent</a><a class="nav-current" href="/about/team/">child</a>');
|
|
});
|
|
|
|
it('handles missing trailing slashes', function () {
|
|
// Parent and child links with PARENT as relative URL
|
|
compile('{{#link href="/about"}}parent{{/link}}{{#link href="/about/team"}}child{{/link}}')
|
|
.with({relativeUrl: '/about/'})
|
|
.should.eql('<a class="nav-current" href="/about">parent</a><a href="/about/team">child</a>');
|
|
|
|
// Parent and child links with CHILD as relative URL
|
|
compile('{{#link href="/about"}}parent{{/link}}{{#link href="/about/team"}}child{{/link}}')
|
|
.with({relativeUrl: '/about/team/'})
|
|
.should.eql('<a class="nav-current-parent" href="/about">parent</a><a class="nav-current" href="/about/team">child</a>');
|
|
});
|
|
|
|
it('handles absolute URLs', function () {
|
|
// Correct URL gets class
|
|
|
|
// Parent and child links with PARENT as relative URL
|
|
compile('{{#link href="https://siteurl.com/about/"}}parent{{/link}}{{#link href="https://siteurl.com/about/team/"}}child{{/link}}')
|
|
.with({relativeUrl: '/about/'})
|
|
.should.eql('<a class="nav-current" href="https://siteurl.com/about/">parent</a><a href="https://siteurl.com/about/team/">child</a>');
|
|
|
|
// Parent and child links with CHILD as relative URL
|
|
compile('{{#link href="https://siteurl.com/about/"}}parent{{/link}}{{#link href="https://siteurl.com/about/team/"}}child{{/link}}')
|
|
.with({relativeUrl: '/about/team/'})
|
|
.should.eql('<a class="nav-current-parent" href="https://siteurl.com/about/">parent</a><a class="nav-current" href="https://siteurl.com/about/team/">child</a>');
|
|
|
|
// Incorrect URL doesn't get class
|
|
|
|
// Parent and child links with PARENT as relative URL
|
|
compile('{{#link href="https://othersite.com/about/"}}parent{{/link}}{{#link href="https://othersite.com/about/team/"}}child{{/link}}')
|
|
.with({relativeUrl: '/about/'})
|
|
.should.eql('<a href="https://othersite.com/about/">parent</a><a href="https://othersite.com/about/team/">child</a>');
|
|
|
|
// Parent and child links with CHILD as relative URL
|
|
compile('{{#link href="https://othersite.com/about/"}}parent{{/link}}{{#link href="https://othersite.com/about/team/"}}child{{/link}}')
|
|
.with({relativeUrl: '/about/team/'})
|
|
.should.eql('<a href="https://othersite.com/about/">parent</a><a href="https://othersite.com/about/team/">child</a>');
|
|
});
|
|
|
|
it('handles absolute URLs with missing trailing slashes', function () {
|
|
// Parent and child links with PARENT as relative URL
|
|
compile('{{#link href="https://siteurl.com/about"}}parent{{/link}}{{#link href="https://siteurl.com/about/team"}}child{{/link}}')
|
|
.with({relativeUrl: '/about/'})
|
|
.should.eql('<a class="nav-current" href="https://siteurl.com/about">parent</a><a href="https://siteurl.com/about/team">child</a>');
|
|
|
|
// Parent and child links with CHILD as relative URL
|
|
compile('{{#link href="https://siteurl.com/about"}}parent{{/link}}{{#link href="https://siteurl.com/about/team"}}child{{/link}}')
|
|
.with({relativeUrl: '/about/team/'})
|
|
.should.eql('<a class="nav-current-parent" href="https://siteurl.com/about">parent</a><a class="nav-current" href="https://siteurl.com/about/team">child</a>');
|
|
});
|
|
|
|
it('parentActiveClass can be customised', function () {
|
|
compile('{{#link href="/about/" parentActiveClass="parent"}}parent{{/link}}{{#link href="/about/team/"}}child{{/link}}')
|
|
.with({relativeUrl: '/about/team/'})
|
|
.should.eql('<a class="parent" href="/about/">parent</a><a class="nav-current" href="/about/team/">child</a>');
|
|
|
|
compile('{{#link href="/about/" parentActiveClass="parent"}}parent{{/link}}{{#link href="/about/team/" parentActiveClass="parent"}}child{{/link}}')
|
|
.with({relativeUrl: '/about/team/'})
|
|
.should.eql('<a class="parent" href="/about/">parent</a><a class="nav-current" href="/about/team/">child</a>');
|
|
|
|
compile('{{#link href="/about/" parentActiveClass=slug}}parent{{/link}}{{#link href="/about/team/" parentActiveClass="parent"}}child{{/link}}')
|
|
.with({relativeUrl: '/about/team/', slug: 'fred'})
|
|
.should.eql('<a class="fred" href="/about/">parent</a><a class="nav-current" href="/about/team/">child</a>');
|
|
|
|
compile('{{#link href="/about/" parentActiveClass=(concat slug "-parent")}}parent{{/link}}{{#link href="/about/team/" parentActiveClass="parent"}}child{{/link}}')
|
|
.with({relativeUrl: '/about/team/', slug: 'fred'})
|
|
.should.eql('<a class="fred-parent" href="/about/">parent</a><a class="nav-current" href="/about/team/">child</a>');
|
|
});
|
|
|
|
it('customising activeClass also customises parentActiveClass', function () {
|
|
compile('{{#link href="/about/" activeClass="active"}}parent{{/link}}{{#link href="/about/team/" activeClass="active"}}child{{/link}}')
|
|
.with({relativeUrl: '/about/team/'})
|
|
.should.eql('<a class="active-parent" href="/about/">parent</a><a class="active" href="/about/team/">child</a>');
|
|
|
|
compile('{{#link href="/about/" activeClass="active" parentActiveClass="parent"}}parent{{/link}}{{#link href="/about/team/" activeClass="active"}}child{{/link}}')
|
|
.with({relativeUrl: '/about/team/'})
|
|
.should.eql('<a class="parent" href="/about/">parent</a><a class="active" href="/about/team/">child</a>');
|
|
});
|
|
|
|
it('can disable parentActiveClass with falsey values', function () {
|
|
compile('{{#link href="/about/" parentActiveClass=""}}text{{/link}}')
|
|
.with({relativeUrl: '/about/team/'})
|
|
.should.eql('<a href="/about/">text</a>');
|
|
|
|
compile('{{#link href="/about/" parentActiveClass=false}}text{{/link}}')
|
|
.with({relativeUrl: '/about/team/'})
|
|
.should.eql('<a href="/about/">text</a>');
|
|
});
|
|
|
|
it('disabling activeClass does not affect parentActiveClass', function () {
|
|
compile('{{#link href="/about/" activeClass=""}}parent{{/link}}{{#link href="/about/team/" activeClass=""}}child{{/link}}')
|
|
.with({relativeUrl: '/about/team/'})
|
|
.should.eql('<a class="nav-current-parent" href="/about/">parent</a><a href="/about/team/">child</a>');
|
|
|
|
compile('{{#link href="/about/" activeClass=false parentActiveClass="parent"}}parent{{/link}}{{#link href="/about/team/" activeClass=false}}child{{/link}}')
|
|
.with({relativeUrl: '/about/team/'})
|
|
.should.eql('<a class="parent" href="/about/">parent</a><a href="/about/team/">child</a>');
|
|
});
|
|
});
|
|
});
|
|
});
|