github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-05 03:16:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add snapshot tests for history dropdown

Browse Source
This commit is contained in:
Łukasz Mierzwa
2017-08-12 21:21:25 -07:00
parent 9645287d88
commit 256453ccaf
4 changed files with 431 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

374
assets/static/__snapshots__/filters.test.js.snap Normal file
View File

@@ -0,0 +1,374 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`appended filtes should be present in history 1`] = `
"<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
default
</span>
<i class=\\"fa fa-home\\"></i>
<span class=\\"label-list label label-info\\">
default
</span>
</a>
</li>"
`;
exports[`appended filtes should be present in history 2`] = `
"<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
default
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<span class=\\"label-list label label-info\\">
default
</span>
</a>
</li>
<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
default
</span>
<i class=\\"fa fa-home\\"></i>
<span class=\\"label-list label label-info\\">
default
</span>
</a>
</li>"
`;
exports[`appended filtes should be present in history 3`] = `
"<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
default,bar
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<span class=\\"label-list label label-info\\">
default
</span>
<span class=\\"label-list label label-info\\">
bar
</span>
</a>
</li>
<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
default
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<span class=\\"label-list label label-info\\">
default
</span>
</a>
</li>
<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
default
</span>
<i class=\\"fa fa-home\\"></i>
<span class=\\"label-list label label-info\\">
default
</span>
</a>
</li>"
`;
exports[`appended filtes should be present in history 4`] = `
"<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
default,bar,@state=active
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<span class=\\"label-list label label-info\\">
default
</span>
<span class=\\"label-list label label-info\\">
bar
</span>
<span class=\\"label-list label label-info\\">
@state=active
</span>
</a>
</li>
<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
default,bar
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<span class=\\"label-list label label-info\\">
default
</span>
<span class=\\"label-list label label-info\\">
bar
</span>
</a>
</li>
<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
default
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<span class=\\"label-list label label-info\\">
default
</span>
</a>
</li>
<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
default
</span>
<i class=\\"fa fa-home\\"></i>
<span class=\\"label-list label label-info\\">
default
</span>
</a>
</li>"
`;
exports[`appended filtes should be present in history 5`] = `
"<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
default,bar,@state=active
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<span class=\\"label-list label label-info\\">
default
</span>
<span class=\\"label-list label label-info\\">
bar
</span>
<span class=\\"label-list label label-info\\">
@state=active
</span>
</a>
</li>
<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
default,bar
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<span class=\\"label-list label label-info\\">
default
</span>
<span class=\\"label-list label label-info\\">
bar
</span>
</a>
</li>
<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
default
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<span class=\\"label-list label label-info\\">
default
</span>
</a>
</li>
<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
default
</span>
<i class=\\"fa fa-home\\"></i>
<span class=\\"label-list label label-info\\">
default
</span>
</a>
</li>"
`;
exports[`appended filtes should be present in history 6`] = `
"<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
@state=active
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<span class=\\"label-list label label-info\\">
@state=active
</span>
</a>
</li>
<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
default,bar,@state=active
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<span class=\\"label-list label label-info\\">
default
</span>
<span class=\\"label-list label label-info\\">
bar
</span>
<span class=\\"label-list label label-info\\">
@state=active
</span>
</a>
</li>
<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
default,bar
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<span class=\\"label-list label label-info\\">
default
</span>
<span class=\\"label-list label label-info\\">
bar
</span>
</a>
</li>
<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
default
</span>
<i class=\\"fa fa-home\\"></i>
<span class=\\"label-list label label-info\\">
default
</span>
</a>
</li>"
`;
exports[`default filter should be in history after setting filter to foo 1`] = `
"<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
default
</span>
<i class=\\"fa fa-home\\"></i>
<span class=\\"label-list label label-info\\">
default
</span>
</a>
</li>"
`;

5
assets/static/filters.js
View File

@@ -56,6 +56,10 @@ function addFilter(text) {
$(selectors.filter).tagsinput("add", text);
}
function clearFilters() {
$(selectors.filter).tagsinput("removeAll");
}
function setUpdating() {
// visual hint that alerts are reloaded due to filter change
$(selectors.icon).removeClass("fa-search fa-pause").addClass("fa-circle-o-notch fa-spin");
@@ -217,6 +221,7 @@ function init(historyStore) {
exports.init = init;
exports.addFilter = addFilter;
exports.clearFilters = clearFilters;
exports.setFilters = setFilters;
exports.getFilters = getFilters;
exports.addBadge = addBadge;

76
assets/static/filters.test.js
View File

@@ -30,10 +30,10 @@ test("default filter should be in history after setting filter to foo", () => {
filters.setFilters();
filters.renderHistory();
var elems = $("#historyMenu").find(".rawFilter");
// foo is active so should only get default
expect(elems.length).toBe(1);
expect($(elems[0]).text().trim()).toBe("default");
// use snapshot to check that generated HTML is what we expect
const historyMenu = $("#historyMenu").html().trim();
expect(historyMenu).toMatchSnapshot();
// we set foo, so that what should be in history
expect(LocalStorageMock.getItem("filterHistory")).toBe("foo");
});
@@ -62,24 +62,19 @@ test("appended filtes should be present in history", () => {
filters.setFilters();
filters.renderHistory();
// default is used, expect single history entry
var elems = $("#historyMenu").find(".rawFilter");
expect(elems.length).toBe(1);
// default is used but default is always rendered so should be there
expect($(elems[0]).text().trim()).toBe("default");
// we only used default, so there should be a single (default) entry
let historyMenu = $("#historyMenu").html().trim();
expect(historyMenu).toMatchSnapshot();
// and that's what history should have
expect(LocalStorageMock.getItem("filterHistory")).toBe("default");
// now we append more filters, so q=default becomes q=default,bar
filters.addFilter("bar");
filters.setFilters();
elems = $("#historyMenu").find(".rawFilter");
expect(elems.length).toBe(2);
// default will be repeated because it's both: last filter and the defult
// that's always rendered
expect($(elems[0]).text().trim()).toBe("default");
expect($(elems[1]).text().trim()).toBe("default");
// now we got non-default filter as active, so we should have 2 entries
// both for default (as recent and as global default)
historyMenu = $("#historyMenu").html().trim();
expect(historyMenu).toMatchSnapshot();
expect(
LocalStorageMock.getItem("filterHistory").split("\n")
).toMatchObject(
@@ -89,17 +84,50 @@ test("appended filtes should be present in history", () => {
// append another filter, so we now have: q=default,bar,@state=active
filters.addFilter("@state=active");
filters.setFilters();
elems = $("#historyMenu").find(".rawFilter");
expect(elems.length).toBe(3);
// default will be repeated because it's both: last filter and the defult
// that's always rendered
expect($(elems[0]).text().trim()).toBe("default,bar");
expect($(elems[1]).text().trim()).toBe("default");
expect($(elems[1]).text().trim()).toBe("default");
// now we should have 3 entries, 2x default + default,bar
historyMenu = $("#historyMenu").html().trim();
expect(historyMenu).toMatchSnapshot();
expect(
LocalStorageMock.getItem("filterHistory").split("\n")
).toMatchObject(
[ "default,bar,@state=active", "default,bar", "default" ]
);
// clear filters, so now we have: q=
filters.clearFilters();
filters.setFilters();
// now we should have 4 entries, 2x default + default,bar + default,bar,@state=active
historyMenu = $("#historyMenu").html().trim();
expect(historyMenu).toMatchSnapshot();
expect(
LocalStorageMock.getItem("filterHistory").split("\n")
).toMatchObject(
[ "default,bar,@state=active", "default,bar", "default" ]
);
// now add a filter back, so now we have: q=@state=active
filters.addFilter("@state=active");
filters.setFilters();
// we should have same filters as before
historyMenu = $("#historyMenu").html().trim();
expect(historyMenu).toMatchSnapshot();
expect(
LocalStorageMock.getItem("filterHistory").split("\n")
).toMatchObject(
[ "@state=active", "default,bar,@state=active", "default,bar", "default" ]
);
// as a last test add default back to have @state=active rendered
filters.clearFilters();
filters.addFilter("default");
filters.setFilters();
// we should have same filters as before
historyMenu = $("#historyMenu").html().trim();
expect(historyMenu).toMatchSnapshot();
// default should move from the bottom to to top of the list
expect(
LocalStorageMock.getItem("filterHistory").split("\n")
).toMatchObject(
[ "default", "@state=active", "default,bar,@state=active", "default,bar" ]
);
});

2
assets/templates/history.html
View File

@@ -6,11 +6,9 @@
<% } %>
<% }) %>
<% } %>
<% if (defaultFilter) { %>
<%= renderTemplate("historyMenuItem", {filter: defaultFilter, icon: "fa fa-home"}) %>
<% } %>
<% if (savedFilter) { %>
<%= renderTemplate("historyMenuItem", {filter: savedFilter, icon: "fa fa-floppy-o"}) %>
<% } %>