@gitlab/ui 80.13.1 → 80.14.0

package/src/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.spec.js

@@ -1,46 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE } from '../../mock_data';
-import GlDuoChatMessage from '../duo_chat_message/duo_chat_message.vue';
-import GlDuoChatConversation from './duo_chat_conversation.vue';
-
-describe('GlDuoChatConversation', () => {
-  let wrapper;
-
-  const findChatMessages = () => wrapper.findAllComponents(GlDuoChatMessage);
-  const findDelimiter = () => wrapper.find('[data-testid="conversation-delimiter"]');
-  const createComponent = ({ propsData = {} } = {}) => {
-    wrapper = shallowMount(GlDuoChatConversation, {
-      propsData,
-    });
-  };
-
-  describe('rendering', () => {
-    const messages = [MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE];
-
-    describe('default state', () => {
-      beforeEach(() => {
-        createComponent();
-      });
-
-      it('does not render messages by default', () => {
-        expect(findChatMessages().length).toBe(0);
-      });
-
-      it('does render the delimiter', () => {
-        expect(findDelimiter().exists()).toBe(true);
-      });
-    });
-
-    it('renders messages when messages are passed', () => {
-      createComponent({
-        propsData: { messages },
-      });
-      expect(findChatMessages().length).toBe(2);
-    });
-
-    it('does not render delimiter when showDelimiter = false', () => {
-      createComponent({ propsData: { messages, showDelimiter: false } });
-      expect(findDelimiter().exists()).toBe(false);
-    });
-  });
-});

package/src/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.stories.js

@@ -1,62 +0,0 @@
-import {
-  MOCK_USER_PROMPT_MESSAGE,
-  MOCK_RESPONSE_MESSAGE,
-  renderGFM,
-  renderMarkdown,
-} from '../../mock_data';
-import GlDuoChatConversation from './duo_chat_conversation.vue';
-import readme from './duo_chat_conversation.md';
-
-const defaultValue = (prop) => GlDuoChatConversation.props[prop].default;
-
-const generateProps = ({ messages = [], showDelimiter = defaultValue('showDelimiter') } = {}) => ({
-  messages,
-  showDelimiter,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: { GlDuoChatConversation },
-  props: Object.keys(argTypes),
-  provide: {
-    renderGFM,
-    renderMarkdown,
-  },
-  template: `
-    <gl-duo-chat-conversation :messages="messages" :show-delimiter="showDelimiter" />
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps({
-  messages: [MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE],
-});
-
-export const MultipleConversations = (args, { argTypes }) => ({
-  components: { GlDuoChatConversation },
-  props: Object.keys(argTypes),
-  provide: {
-    renderGFM,
-    renderMarkdown,
-  },
-  template: `
-    <div>
-      <gl-duo-chat-conversation :messages="messages" :show-delimiter="false" />
-      <gl-duo-chat-conversation :messages="messages" :show-delimiter="true" />
-    </div>
-  `,
-});
-MultipleConversations.args = generateProps({
-  messages: [MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE],
-});
-
-export default {
-  title: 'experimental/duo/chat/duo-chat-conversation',
-  component: GlDuoChatConversation,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

package/src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.spec.js

@@ -1,70 +0,0 @@
-import { nextTick } from 'vue';
-import { mount } from '@vue/test-utils';
-import { LOADING_TRANSITION_DURATION } from '../../constants';
-import GlDuoChatLoader from './duo_chat_loader.vue';
-
-jest.useFakeTimers();
-
-describe('GlDuoChatLoader', () => {
-  let wrapper;
-
-  const createComponent = ({ propsData = {} } = {}) => {
-    wrapper = mount(GlDuoChatLoader, {
-      propsData,
-    });
-  };
-
-  const transition = async () => {
-    jest.advanceTimersByTime(LOADING_TRANSITION_DURATION);
-    await nextTick();
-  };
-
-  const findTransitionText = () => wrapper.find('[data-testid="current-transition"]').text();
-  const findToolText = () => wrapper.find('[data-testid="tool"]');
-
-  describe('rendering', () => {
-    const defaultTool = GlDuoChatLoader.props.toolName.default;
-
-    it('displays a default tool', async () => {
-      createComponent();
-      await nextTick();
-
-      expect(findToolText().text()).toBe(defaultTool);
-    });
-
-    it('shows the `toolName` when it is passed', async () => {
-      createComponent({
-        propsData: {
-          toolName: 'foo',
-        },
-      });
-      await nextTick();
-
-      expect(findToolText().text()).toBe('foo');
-      expect(findToolText().text()).not.toBe(defaultTool);
-    });
-
-    it('cycles through transition texts', async () => {
-      createComponent();
-      await nextTick();
-
-      expect(findTransitionText()).toEqual('finding');
-
-      await transition();
-
-      expect(findTransitionText()).toEqual('working on');
-
-      await transition();
-
-      expect(findTransitionText()).toEqual('generating');
-
-      await transition();
-
-      expect(findTransitionText()).toEqual('producing');
-
-      await transition();
-
-      expect(findTransitionText()).toEqual('finding');
-    });
-  });
-});

package/src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.stories.js

@@ -1,31 +0,0 @@
-import GlDuoChatLoader from './duo_chat_loader.vue';
-import readme from './duo_chat_loader.md';
-
-const defaultValue = (prop) => GlDuoChatLoader.props[prop].default;
-
-const generateProps = ({ toolName = defaultValue('toolName') } = {}) => ({
-  toolName,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: { GlDuoChatLoader },
-  props: Object.keys(argTypes),
-  template: `
-    <gl-duo-chat-loader :tool-name="toolName" />
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export default {
-  title: 'experimental/duo/chat/duo_chat_loader',
-  component: GlDuoChatLoader,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

package/src/components/experimental/duo/chat/components/duo_chat_message/copy_code_element.spec.js

@@ -1,64 +0,0 @@
-import { CopyCodeElement } from './copy_code_element';
-
-describe('copy-code element', () => {
-  customElements.define('copy-code', CopyCodeElement);
-  const code = 'function sum(a, b) {\n  return a + b;\n}';
-  const findCustomElement = () => document.querySelector('copy-code');
-  const findButton = () => document.querySelector('copy-code button');
-  const findButtonIcon = () => document.querySelector('copy-code button svg use');
-
-  beforeEach(() => {
-    document.body.innerHTML = `<div><pre><code>${code}</code></pre><copy-code></copy-code></div>`;
-  });
-
-  it('should create a button', () => {
-    expect(customElements.get('copy-code')).toBeDefined();
-  });
-
-  it('does not setup shadowDom on the custom element', () => {
-    expect(findCustomElement().shadowRoot).toBeNull();
-  });
-
-  it('adds a button to the DOM as a direct child', () => {
-    expect(findButton()).toBeDefined();
-  });
-
-  it('adds the correct icon to the button', () => {
-    expect(findButtonIcon().getAttribute('href')).toContain('#copy-to-clipboard');
-  });
-
-  describe('interaction', () => {
-    let copiedText = '';
-
-    beforeEach(() => {
-      Object.defineProperty(HTMLElement.prototype, 'innerText', {
-        get() {
-          return this.textContent.trim();
-        },
-        configurable: true,
-      });
-
-      global.navigator.clipboard = {
-        writeText: jest.fn().mockImplementation((text) => {
-          copiedText = text;
-          return Promise.resolve();
-        }),
-        readText: jest.fn().mockImplementation(() => Promise.resolve(copiedText)),
-      };
-    });
-
-    afterEach(() => {
-      // In JSDOM, `innerText` doesn't exist on the prototype.
-      // However, we can not set it to `undefined` as the property description should be an object
-      Object.defineProperty(HTMLElement.prototype, 'innerText', {});
-
-      jest.resetAllMocks();
-    });
-
-    it('copies the content of the parentNode to the clipboard when the button is clicked', async () => {
-      findButton().click();
-      const text = await navigator.clipboard.readText();
-      expect(text).toBe(code);
-    });
-  });
-});