Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

input_pill: Remove random IDs. 

Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg 2022-07-10 19:34:15 -07:00 committed by Tim Abbott
parent fc6b4ff6aa
commit d3f2203459
4 changed files with 11 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend_tests/node_tests/input_pill.js
View File

@ -22,12 +22,11 @@ set_global("getSelection", () => ({
const input_pill = zrequire("input_pill"); const input_pill = zrequire("input_pill");
function pill_html(value, data_id, img_src, status_emoji_info) { function pill_html(value, img_src, status_emoji_info) {
const has_image = img_src !== undefined; const has_image = img_src !== undefined;
const has_status = status_emoji_info !== undefined; const has_status = status_emoji_info !== undefined;
const opts = { const opts = {
id: data_id,
display_value: value, display_value: value,
has_image, has_image,
has_status, has_status,
@ -44,26 +43,12 @@ function pill_html(value, data_id, img_src, status_emoji_info) {
return require("../../static/templates/input_pill.hbs")(opts); return require("../../static/templates/input_pill.hbs")(opts);
} }
function override_random_id({override_rewire}) { run_test("basics", ({mock_template}) => {
let id_seq = 0;
override_rewire(input_pill, "random_id", () => {
id_seq += 1;
return "some_id" + id_seq;
});
}
run_test("random_id", () => {
// just get coverage on a simple one-liner:
input_pill.random_id();
});
run_test("basics", ({override_rewire, mock_template}) => {
mock_template("input_pill.hbs", true, (data, html) => { mock_template("input_pill.hbs", true, (data, html) => {
assert.equal(data.display_value, "JavaScript"); assert.equal(data.display_value, "JavaScript");
return html; return html;
}); });
override_random_id({override_rewire});
const config = {}; const config = {};
blueslip.expect("error", "Pill needs container."); blueslip.expect("error", "Pill needs container.");
@ -99,7 +84,7 @@ run_test("basics", ({override_rewire, mock_template}) => {
}; };
let inserted_before; let inserted_before;
const expected_html = pill_html("JavaScript", "some_id1", example_img_link, status_emoji_info); const expected_html = pill_html("JavaScript", example_img_link, status_emoji_info);
$pill_input.before = ($elem) => { $pill_input.before = ($elem) => {
inserted_before = true; inserted_before = true;
@ -158,14 +143,13 @@ function set_up() {
}; };
} }
run_test("copy from pill", ({override_rewire, mock_template}) => { run_test("copy from pill", ({mock_template}) => {
mock_template("input_pill.hbs", true, (data, html) => { mock_template("input_pill.hbs", true, (data, html) => {
assert.ok(["BLUE", "RED"].includes(data.display_value)); assert.ok(["BLUE", "RED"].includes(data.display_value));
$(html)[0] = `<pill-stub ${data.display_value}>`; $(html)[0] = `<pill-stub ${data.display_value}>`;
return html; return html;
}); });
override_random_id({override_rewire});
const info = set_up(); const info = set_up();
const config = info.config; const config = info.config;
const $container = info.$container; const $container = info.$container;
@ -178,7 +162,7 @@ run_test("copy from pill", ({override_rewire, mock_template}) => {
let copied_text; let copied_text;
const $pill_stub = { const $pill_stub = {
[0]: "<pill-stub RED>" [0]: "<pill-stub RED>",
}; };
const e = { const e = {
@ -402,7 +386,7 @@ run_test("Enter key with text", ({mock_template}) => {
assert.deepEqual(widget.items(), [items.blue, items.red, items.yellow]); assert.deepEqual(widget.items(), [items.blue, items.red, items.yellow]);
}); });
run_test("insert_remove", ({override_rewire, mock_template}) => { run_test("insert_remove", ({mock_template}) => {
mock_template("input_pill.hbs", true, (data, html) => { mock_template("input_pill.hbs", true, (data, html) => {
assert.equal(typeof data.display_value, "string"); assert.equal(typeof data.display_value, "string");
assert.ok(html.startsWith, "<div class='pill'"); assert.ok(html.startsWith, "<div class='pill'");
@ -410,7 +394,6 @@ run_test("insert_remove", ({override_rewire, mock_template}) => {
return html; return html;
}); });
override_random_id({override_rewire});
const info = set_up(); const info = set_up();
const config = info.config; const config = info.config;
@ -442,9 +425,9 @@ run_test("insert_remove", ({override_rewire, mock_template}) => {
assert.ok(!removed); assert.ok(!removed);
assert.deepEqual(inserted_html, [ assert.deepEqual(inserted_html, [
pill_html("BLUE", "some_id1", example_img_link), pill_html("BLUE", example_img_link),
pill_html("RED", "some_id2"), pill_html("RED"),
pill_html("YELLOW", "some_id3"), pill_html("YELLOW"),
]); ]);
assert.deepEqual(widget.items(), [items.blue, items.red, items.yellow]); assert.deepEqual(widget.items(), [items.blue, items.red, items.yellow]);
@ -510,7 +493,7 @@ run_test("insert_remove", ({override_rewire, mock_template}) => {
assert.ok(next_pill_focused); assert.ok(next_pill_focused);
}); });
run_test("exit button on pill", ({override_rewire, mock_template}) => { run_test("exit button on pill", ({mock_template}) => {
mock_template("input_pill.hbs", true, (data, html) => { mock_template("input_pill.hbs", true, (data, html) => {
assert.equal(typeof data.display_value, "string"); assert.equal(typeof data.display_value, "string");
assert.ok(html.startsWith, "<div class='pill'"); assert.ok(html.startsWith, "<div class='pill'");
@ -518,7 +501,6 @@ run_test("exit button on pill", ({override_rewire, mock_template}) => {
return html; return html;
}); });
override_random_id({override_rewire});
const info = set_up(); const info = set_up();
const config = info.config; const config = info.config;

1
frontend_tests/node_tests/pill_typeahead.js
View File

@ -107,7 +107,6 @@ for (const sub of subs) {
run_test("set_up", ({mock_template}) => { run_test("set_up", ({mock_template}) => {
mock_template("input_pill.hbs", true, (data, html) => { mock_template("input_pill.hbs", true, (data, html) => {
assert.equal(typeof data.id, "string");
assert.equal(typeof data.display_value, "string"); assert.equal(typeof data.display_value, "string");
assert.equal(typeof data.has_image, "boolean"); assert.equal(typeof data.has_image, "boolean");
return html; return html;

7
static/js/input_pill.js
View File

@ -9,9 +9,6 @@ import * as compose from "./compose";
import * as ui_util from "./ui_util"; import * as ui_util from "./ui_util";
// See https://zulip.readthedocs.io/en/latest/subsystems/input-pills.html // See https://zulip.readthedocs.io/en/latest/subsystems/input-pills.html
export function random_id() {
return Math.random().toString(16);
}
export function create(opts) { export function create(opts) {
if (!opts.$container) { if (!opts.$container) {
@ -81,8 +78,6 @@ export function create(opts) {
// This is generally called by typeahead logic, where we have all // This is generally called by typeahead logic, where we have all
// the data we need (as opposed to, say, just a user-typed email). // the data we need (as opposed to, say, just a user-typed email).
appendValidatedData(item) { appendValidatedData(item) {
const id = random_id();
if (!item.display_value) { if (!item.display_value) {
blueslip.error("no display_value returned"); blueslip.error("no display_value returned");
return; return;
@ -94,7 +89,6 @@ export function create(opts) {
} }
const payload = { const payload = {
id,
item, item,
}; };
@ -103,7 +97,6 @@ export function create(opts) {
const has_image = item.img_src !== undefined; const has_image = item.img_src !== undefined;
const opts = { const opts = {
id: payload.id,
display_value: item.display_value, display_value: item.display_value,
has_image, has_image,
deactivated: item.deactivated, deactivated: item.deactivated,

2
static/templates/input_pill.hbs
View File

@ -1,4 +1,4 @@
<div class='pill {{#if deactivated}} deactivated-pill {{/if}}' data-id='{{ id }}' tabindex=0> <div class='pill {{#if deactivated}} deactivated-pill {{/if}}' tabindex=0>
{{#if has_image}} {{#if has_image}}
<img class="pill-image" src="{{img_src}}" /> <img class="pill-image" src="{{img_src}}" />
{{/if}} {{/if}}