product-admin
Version:
EA admin screens
488 lines (386 loc) • 19.2 kB
HTML
<html>
<head>
<meta charset="utf-8">
<script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../bower_components/web-component-tester/browser.js"></script>
<link rel="import" href="../../element.html" />
<!-- <link rel="import" href="../../bower_components/polymer/polymer.html" /> -->
<link rel="import" href="./edit-product.html">
</head>
<body>
<test-fixture id="create-product-fixture">
<template>
<edit-product
resources='{ "en": { "headingCreate": "Create", "headingEdit": "Edit", "name": "Name", "productCode": "productCode", "productDescription": "Description", "productDescriptionParen": "(>150 characters)", "currentSpecificationRate": "Production Rate", "currentSpecificationRateLabel": "PPH", "estCycleTime": "Estimated Cycle Time", "hours": "Hours", "minutes": "Min", "btnCreateEditPositive": "Save", "btnCreateEditNegative": "Cancel" } }'
language="en"
is-create="true"
></edit-product>
</template>
</test-fixture>
<test-fixture id="edit-product-fixture">
<template>
<edit-product
resources='{ "en": { "headingCreate": "Create", "headingEdit": "Edit", "name": "Name", "productCode": "productCode", "productDescription": "Description", "productDescriptionParen": "(>150 characters)", "currentSpecificationRate": "Production Rate", "currentSpecificationRateLabel": "PPH", "estCycleTime": "Estimated Cycle Time", "hours": "Hours", "minutes": "Min", "btnCreateEditPositive": "Save", "btnCreateEditNegative": "Cancel" } }'
language="en"
pk="1234567890"
></edit-product>
</template>
</test-fixture>
<test-fixture id="edit-product-with-assets-fixture">
<template>
<edit-product is-create="false" assets='[{ "label": "no no no no no", "value": "unit 1" }, { "label": "check check", "value": "unit 2", "checked": true }]'></edit-product>
</template>
</test-fixture>
<script>
suite('<edit-product>', function () {
setup(function (done) {
window.myEl = fixture("create-product-fixture");
window.myElEditFixture = fixture("edit-product-fixture");
window.sandbox = sinon.sandbox.create();
Polymer.dom.flush();
flush(done);
});
teardown((done) => {
sandbox.restore();
flush(done);
});
test("edit-product exists", () => {
expect(myEl).to.exist;
});
suite("modal", () => {
test("name field", () => {
expect(myEl.$.productDescription.getAttribute("type")).to.equal("text");
});
test("productCode field", () => {
expect(myEl.$.productCode.getAttribute("type")).to.equal("text");
});
test("longDescription field", () => {
const thing = myEl.$.longDescription;
expect(thing.constructor.name).to.equal("HTMLDivElement");
expect(thing.getAttribute("contenteditable")).to.equal("true");
});
test("currentSpecificationRate field", () => {
expect(myEl.$.currentSpecificationRate.getAttribute("type")).to.equal("number");
});
test("estCycleTimeHours field", () => {
expect(myEl.$.estCycleTimeHours.getAttribute("type")).to.equal("number");
});
test("estCycleTimeMinutes field", () => {
expect(myEl.$.estCycleTimeMinutes.getAttribute("type")).to.equal("number");
});
test("should create a checkbox per unit of `assets`", (done) => {
myEl.assets = [
{ value: "ddc92eb3-9610-3775-b3da-3814fa30efa2", name: "hello", selected: true },
{ value: "364df7d2-0d6a-304c-80d0-364cffe6720b", name: "world", selected: true }
];
flush(() => {
const ALL_THE_CHILDREN = Polymer.dom(myEl.root).querySelectorAll("paper-checkbox + label");
expect(ALL_THE_CHILDREN.length).to.equal(2);
done();
});
});
test("update props", (done) => {
const EXPECTED = Object.freeze({product:{
productDescription: "JOE Blow",
productCode: 1234,
longDescription: "A short description",
currentSpecificationRate: 999
}
});
for (let key in EXPECTED) {
myEl[key] = EXPECTED[key];
}
flush(() => {
expect(myEl.$.productDescription.value).to.equal(EXPECTED.product.productDescription);
expect(myEl.$.productCode.value).to.equal(EXPECTED.product.productCode.toString());
expect(myEl.$.currentSpecificationRate.value).to.equal(EXPECTED.product.currentSpecificationRate.toString());
done();
});
});
test("should have a root px-modal element", () => {
expect(myEl.$.pxModalContainer.constructor.name).to.equal("px-modal");
});
test("should have a title of 'create' if it isCreate", () => {
const container = myEl.$.pxModalContainer;
myEl._updateLocalization();
expect(container.textContent).to.contain("Create");
});
test("should have a title of 'edit' if it NOT isCreate", () => {
expect(myElEditFixture.$.pxModalContainer.textContent).to.contain("Edit");
});
test("should have a save button", () => {
var btn = myEl.$.pxModalContainer.querySelector("button#btnModalPositive");
expect(btn.textContent).to.equal("Save");
});
test("should have a cancel button", () => {
var btn = myEl.$.pxModalContainer.querySelector("button#btnModalNegative");
expect(btn.textContent).to.equal("Cancel");
});
test("should have an asset for each provided asset", (done) => {
myEl.assets = [
{ value: "asset1", name: "0" },
{ value: "asset2", name: "2" },
{ value: "asset3", name: "3" }
];
flush(() => {
const checkboxes = myEl.$.pxModalContainer.querySelectorAll("paper-checkbox");
expect(checkboxes.length).to.equal(3);
done();
});
});
suite("submit", () => {
test("should submit with expected body for CREATE", () => {
const EXPECTED_BODY = {
"productDescription": "Metal Gear",
"longDescription": "Metal Gear 1986",
"productCode": "MetalGear-001",
"currentSpecificationRate": 90
};
myEl.product = EXPECTED_BODY;
const body = myEl.$.productApiRequest.body;
expect(body).to.have.deep.property("productDescription", EXPECTED_BODY.productDescription);
expect(body).to.have.deep.property("productCode", EXPECTED_BODY.productCode);
expect(body).to.have.deep.property("longDescription", EXPECTED_BODY.longDescription);
expect(body).to.have.deep.property("currentSpecificationRate", EXPECTED_BODY.currentSpecificationRate);
});
test("should submit with expected body for UPDATE", () => {
const EXPECTED_BODY = {
"productDescription": "Metal Gear",
"longDescription": "Metal Gear 1986",
"productCode": "MetalGear-001",
"currentSpecificationRate": 90
};
myElEditFixture.product = EXPECTED_BODY;
const body = myElEditFixture.$.productApiRequest.body;
expect(body).to.have.deep.property("productDescription", EXPECTED_BODY.productDescription);
expect(body).to.have.deep.property("longDescription", EXPECTED_BODY.longDescription);
expect(body).to.have.deep.property("productCode", EXPECTED_BODY.productCode);
expect(body).to.have.deep.property("currentSpecificationRate", EXPECTED_BODY.currentSpecificationRate);
});
test("should submit each checked asset", function () {
const EXPECTED_PRODUCT = {
assets: [],
productCode: "TEST 01"
};
sandbox.stub(myEl.$.productApiRequest, "generateRequest");
sandbox.stub(myEl.$.editCreateForm, "checkValidity", function () { return true; });
myEl.product = EXPECTED_PRODUCT;
myEl._btnModalPositiveClicked();
expect(myEl.product).to.deep.equal(EXPECTED_PRODUCT);
expect(myEl.$.productApiRequest.generateRequest.called).to.be.true;
});
test("should submit for create if creating", (done) => {
sandbox.stub(myEl.$.productApiRequest, "generateRequest", () => {
expect(myEl.$.productApiRequest.url).to.equal("/createProduct");
done();
});
sandbox.stub(myEl.$.editCreateForm, "checkValidity", function () { return true; });
const expectedEvent = {
target: {
id: "btnModalPositive"
}
};
myEl.$.pxModalContainer.modalActionButtonClicked(expectedEvent);
});
test("should submit for update if not creating", (done) => {
myElEditFixture.product = {pk:"1234567890"};
sandbox.stub(myElEditFixture.$.productApiRequest, "generateRequest", () => {
expect(myElEditFixture.$.productApiRequest.url).to.equal("/updateProduct/".concat(1234567890));
done();
});
const expectedEvent = {
target: {
id: "btnModalPositive"
}
};
myElEditFixture.$.pxModalContainer.modalActionButtonClicked(expectedEvent);
});
});
suite("cancel", () => {
test("should not submit upon canceling", () => {
var spy = sandbox.spy(myEl.$.productApiRequest, "generateRequest");
myEl.$.pxModalContainer.modalActionButtonClicked({ target: { id: "" }});
expect(spy.called).to.be.false;
});
});
});
suite("localization", () => {
test("should reflect a change to language", () => {
expect(myEl.language).to.equal("en");
});
test("should default to 'en'", (done) => {
myEl.language = "blah blah bleep bloop";
myEl._updateLocalization.call(myEl);
flush(() => {
expect(myEl.localizedHeading).to.equal(myEl.resources.en.headingCreate);
done();
});
});
});
suite("create", () => {
test("productCode should be editable if operation is `create`", (done) => {
myEl.attached();
flush(() => {
expect(myEl.$.productCode.readonly).not.to.be.true;
done();
});
});
});
suite("edit", () => {
test("productCode should not be editable if operation is not `create`", () => {
expect(myElEditFixture.$.productCode.getAttribute("readonly")).to.exist;
// For some reason, you can't do flush here -_-
// flush(() => {
// expect(myElEditFixture.$.productCode.readonly).to.be.true;
// done();
// });
});
});
suite("#refresh", function () {
test("should set longDescription innerHTML to product's longDescription", function () {
const LYRICS = "Hey you get off of my cloud";
myEl.product.longDescription = LYRICS;
myEl.refresh();
expect(myEl.$.longDescription.innerHTML).to.equal(LYRICS);
});
test("should loop each asset and set it to false", function () {
myEl.product = {};
myEl.assets = [
{ value: "a" },
{ value: "b" },
{ value: "d" },
{ value: "e" },
{ value: "f" }
];
myEl.refresh();
expect(myEl.assets[0].selected).to.be.false;
expect(myEl.assets[1].selected).to.be.false;
expect(myEl.assets[2].selected).to.be.false;
expect(myEl.assets[3].selected).to.be.false;
expect(myEl.assets[4].selected).to.be.false;
});
test("should initialize values of this.product", function () {
myEl.product = {
currentSpecificationRate: undefined,
estCycleTimeHours: null,
estCycleTimeMinutes: false
};
myEl.refresh();
expect(myEl.product.currentSpecificationRate).to.equal(0);
expect(myEl.product.estCycleTimeHours).to.equal(0);
expect(myEl.product.estCycleTimeMinutes).to.equal(0);
});
test("should select each selected asset", function () {
var PRODUCT_ASSETS = [
"1",
"5"
];
const ALL_MY_ASSETS = [
{ value: "1" },
{ value: "3" },
{ value: "5" },
{ value: "7" },
{ value: "9" }
];
myEl.product = { assets: PRODUCT_ASSETS };
myEl.assets = ALL_MY_ASSETS;
myEl.refresh();
expect(myEl.assets.filter(asset => asset.selected).length).to.equal(2);
expect(myEl.assets[0]).to.deep.equal({ value: "1", selected: true });
expect(myEl.assets[2]).to.deep.equal({ value: "5", selected: true });
});
test("should set this.isFormValid according to form's validity", function () {
sandbox.stub(myEl.$.editCreateForm, "checkValidity", function () { return true; });
myEl.isFormValid = false;
myEl.refresh();
expect(myEl.isFormValid).to.be.true;
});
});
suite("#_validateField", function () {
test("should trim longDescription length to 150", function () {
myEl.$.longDescription.innerHTML = "I say, it is the cruel law of art that human beings should die and that we ourselves must die after exhausting the gamut of suffering, so that the grass, not of oblivion but of eternal life may grow, the thick grass of fecund works.";
myEl._validateField({ target: myEl.$.longDescription });
expect(myEl.$.longDescription.innerHTML.length).to.equal(150);
});
test("should not trim longDescription length to 150 if longDescription is less than 150", function () {
myEl.$.longDescription.innerHTML = "I say, no more Philosopher quote in testing";
myEl._validateField({ target: myEl.$.longDescription });
expect(myEl.$.longDescription.innerHTML.length).to.equal(43);
});
test("should set isFormValid to false if field is invalid", function () {
var spy = sandbox.spy(myEl.$.productCode, "reportValidity");
myEl._validateField({ target: myEl.$.productCode });
expect(myEl.isFormValid).to.be.false;
expect(spy.called).to.be.true;
});
test("should set isFormValid to true if all fields are valid", function () {
sandbox.stub(myEl.$.editCreateForm, "checkValidity", function () {
return true;
});
const event = {
target: {
validity: {
valid: true
}
}
};
myEl._validateField(event);
expect(myEl.isFormValid).to.be.true;
});
});
suite("#_btnModalPositiveClicked", function () {
test("should not generate request if fields are invalid", function () {
sandbox.stub(myEl.$.productApiRequest, "generateRequest", function () {});
sandbox.stub(myEl.$.editCreateForm, "checkValidity", function () {
return false;
});
myEl._btnModalPositiveClicked();
expect(myEl.$.productApiRequest.generateRequest.calledOnce).to.be.false;
});
test("should sanitize the description content", function () {
sandbox.stub(myEl.$.productApiRequest, "generateRequest", function () {});
sandbox.stub(myEl.$.editCreateForm, "checkValidity", function () { return true; });
const EXPECTED_STR = "The world as will \n \nand representation \n";
myEl.$.longDescription.innerHTML = "The world as will<br><div>and representation";
myEl._btnModalPositiveClicked();
expect(myEl.product.longDescription).to.equal(EXPECTED_STR);
});
test("should limit text length to 150 chars", function () {
sandbox.stub(myEl.$.productApiRequest, "generateRequest", function () {});
sandbox.stub(myEl.$.editCreateForm, "checkValidity", function () { return true; });
myEl.$.longDescription.innerHTML = `Being and Nothingness: Sartre's opinion, consciousness does not make sense by itself: it arises only as an awareness of objects. Consciousness is therefore always and essentially consciousness of something, whether this "something" is a thing, a person, an imaginary object, etc. Phenomenologists often refer to this quality of consciousness as "intentionality". Sartre's contribution, then, is that in addition to always being consciousness of something, consciousness is always consciousness of itself. In other words, all consciousness is, by definition, self-consciousness. By "self-consciousness", Sartre does not mean being aware of oneself thought of as an object (e.g., one's "ego"), but rather that, as a phenomenon in the world, consciousness both appears and appears to itself at the same time. By appearing to itself, Sartre argues that consciousness is fully transparent; unlike an ordinary "object" (a house, for instance, of which it is impossible to perceive all of the sides at the same time), consciousness "sees" all aspects of itself at once. This non-positional quality of consciousness is what makes it a unique type of being, a being that exists for itself.
In this sense, Sartre uses phenomenology to describe ontology. Thus, the subtitle An Essay on Phenomenological Ontology or, alternatively, A Phenomenological Essay on Ontology: what truly makes Sartre's a phenomenological ontology is that consciousness' structure is the way that it appears. Philosopher Kenneth Williford suggests that Sartre's reasoning turns on a logic of full phenomenal transparency that might not withstand scrutiny. In other words, Sartre implicitly argues that if consciousness "seems" to possess a certain property, then it actually possesses that property. But, conversely, if consciousness does not seem to possess a certain property, Williford argues that it would be hasty to conclude from this "seeming" that consciousness does not actually possess that property. (For example, consciousness might not "seem", upon reflection, to be brain process, but it is not clear from this "seeming" that consciousness is not, in fact, a brain process.)[12]
`;
myEl._btnModalPositiveClicked();
expect(myEl.product.longDescription.length).to.equal(150);
});
});
suite("handling api response", function () {
test("should parse success response and fire correct event", function(done){
myEl.product = [];
var createProductEventCall = function(event){
expect(myEl.product).to.equal('fakeResponse');
window.removeEventListener("createProduct", createProductEventCall);
done();
}
window.addEventListener("createProduct", createProductEventCall);
var response = {detail:{__data__:{response:"fakeResponse"}}};
myEl._handleProductApiSuccess(response);
});
test("should parse fail response and fire correct event", function(done){
myEl.product = [];
var createProductEventCall = function(event){
expect(event.detail.response).to.equal('fakeError');
window.removeEventListener("alert-error-message", createProductEventCall);
done();
}
window.addEventListener("alert-error-message", createProductEventCall);
var response = {response:"fakeError"};
myEl._handleProductApiError(response);
})
});
});
</script>
</body>
</html>