1 files changed, 36 insertions, 0 deletions
diff --git a/spec/frontend/content_editor/components/wrappers/label_spec.js b/spec/frontend/content_editor/components/wrappers/label_spec.js
new file mode 100644
index 00000000000..9e58669b0ea
--- /dev/null
+++ b/spec/frontend/content_editor/components/wrappers/label_spec.js
@@ -0,0 +1,36 @@
+import { GlLabel } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import LabelWrapper from '~/content_editor/components/wrappers/label.vue';
+
+describe('content/components/wrappers/label', () => {
+  let wrapper;
+
+  const createWrapper = async (node = {}) => {
+    wrapper = shallowMountExtended(LabelWrapper, {
+      propsData: { node },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it("renders a GlLabel with the node's text and color", () => {
+    createWrapper({ attrs: { color: '#ff0000', text: 'foo bar', originalText: '~"foo bar"' } });
+
+    const glLabel = wrapper.findComponent(GlLabel);
+
+    expect(glLabel.props()).toMatchObject(
+      expect.objectContaining({
+        title: 'foo bar',
+        backgroundColor: '#ff0000',
+      }),
+    );
+  });
+
+  it('renders a scoped label if there is a "::" in the label', () => {
+    createWrapper({ attrs: { color: '#ff0000', text: 'foo::bar', originalText: '~"foo::bar"' } });
+
+    expect(wrapper.findComponent(GlLabel).props().scoped).toBe(true);
+  });
+});