1 files changed, 120 insertions, 0 deletions
diff --git a/polygerrit-ui/app/elements/shared/gr-vote-chip/gr-vote-chip_test.ts b/polygerrit-ui/app/elements/shared/gr-vote-chip/gr-vote-chip_test.ts
new file mode 100644
index 0000000000..72ff8d78b4
--- /dev/null
+++ b/polygerrit-ui/app/elements/shared/gr-vote-chip/gr-vote-chip_test.ts
@@ -0,0 +1,120 @@
+/**
+ * @license
+ * Copyright (C) 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import '../../../test/common-test-setup-karma';
+import {fixture} from '@open-wc/testing-helpers';
+import {html} from 'lit';
+import {getAppContext} from '../../../services/app-context';
+import './gr-vote-chip';
+import {GrVoteChip} from './gr-vote-chip';
+import {
+  createAccountWithIdNameAndEmail,
+  createApproval,
+  createDetailedLabelInfo,
+  createQuickLabelInfo,
+} from '../../../test/test-data-generators';
+import {ApprovalInfo} from '../../../api/rest-api';
+
+suite('gr-vote-chip tests', () => {
+  setup(() => {
+    sinon.stub(getAppContext().flagsService, 'isEnabled').returns(true);
+  });
+
+  suite('with QuickLabelInfo', () => {
+    let element: GrVoteChip;
+
+    setup(async () => {
+      const labelInfo = {
+        ...createQuickLabelInfo(),
+        approved: createAccountWithIdNameAndEmail(),
+      };
+      element = await fixture<GrVoteChip>(
+        html`<gr-vote-chip .label=${labelInfo}></gr-vote-chip>`
+      );
+    });
+
+    test('renders', () => {
+      expect(element).shadowDom.to.equal(/* HTML */ ` <gr-tooltip-content
+        class="container"
+        has-tooltip=""
+        title=""
+      >
+        <div class="max vote-chip">👍</div>
+      </gr-tooltip-content>`);
+    });
+  });
+
+  suite('with DetailedLabelInfo', () => {
+    let element: GrVoteChip;
+    const labelInfo = createDetailedLabelInfo();
+    const vote: ApprovalInfo = {
+      ...createApproval(),
+      value: 2,
+    };
+
+    setup(async () => {
+      element = await fixture<GrVoteChip>(
+        html`<gr-vote-chip .label=${labelInfo} .vote=${vote}></gr-vote-chip>`
+      );
+    });
+
+    test('renders', () => {
+      expect(element).shadowDom.to.equal(/* HTML */ ` <gr-tooltip-content
+        class="container"
+        has-tooltip=""
+        title=""
+      >
+        <div class="positive vote-chip">+2</div>
+      </gr-tooltip-content>`);
+    });
+
+    test('renders negative vote', async () => {
+      const vote: ApprovalInfo = {
+        ...createApproval,
+        value: -1,
+      };
+      element = await fixture<GrVoteChip>(
+        html`<gr-vote-chip .label=${labelInfo} .vote=${vote}></gr-vote-chip>`
+      );
+      expect(element).shadowDom.to.equal(/* HTML */ ` <gr-tooltip-content
+        class="container"
+        has-tooltip=""
+        title="Wrong Style or Formatting"
+      >
+        <div class="min vote-chip">-1</div>
+      </gr-tooltip-content>`);
+    });
+
+    test('renders for more than 1 vote', async () => {
+      element = await fixture<GrVoteChip>(
+        html`<gr-vote-chip
+          .label=${labelInfo}
+          .vote=${vote}
+          more
+        ></gr-vote-chip>`
+      );
+      expect(element).shadowDom.to.equal(/* HTML */ ` <gr-tooltip-content
+        class="container more"
+        has-tooltip=""
+        title=""
+      >
+        <div class="positive vote-chip">+2</div>
+        <div class="chip-angle positive">+2</div>
+      </gr-tooltip-content>`);
+    });
+  });
+});