@gitlab/ui 80.13.1 → 80.13.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [80.13.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.13.1...v80.13.2) (2024-05-24)
+
+
+### Bug Fixes
+
+* **GlExperimentBadge:** Update language of experiment badges ([82a3335](https://gitlab.com/gitlab-org/gitlab-ui/commit/82a33353c122ac6f269856f4c7f1efe0b8b58f50))
+
 ## [80.13.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.13.0...v80.13.1) (2024-05-24)
 
 

package/dist/components/experimental/experiment_badge/experiment_badge.js

@@ -9,15 +9,15 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 const i18n = {
   experiment: {
     BADGE: 'Experiment',
-    POPOVER_TITLE: "What's an Experiment?",
-    POPOVER_CONTENT: "An %{linkStart}Experiment%{linkEnd} is a feature that's in the process of being developed. It's not production-ready. We encourage users to try Experimental features and provide feedback. An Experiment: %{bullets}",
-    POPOVER_BULLETS: ['May be unstable', 'Has no support and might not be documented', 'Can be removed at any time']
+    POPOVER_TITLE: "What's an experiment?",
+    POPOVER_CONTENT: 'An %{linkStart}experiment%{linkEnd} is not yet production-ready, but is released for initial testing and feedback during development.\nExperiments: %{bullets}',
+    POPOVER_BULLETS: ['Might be unstable or cause data loss.', 'Are not supported and might not be documented.', 'Could be changed or removed at any time.', 'Are subject to the GitLab Testing Agreement.']
   },
   beta: {
     BADGE: 'Beta',
-    POPOVER_TITLE: "What's a Beta?",
-    POPOVER_CONTENT: "A %{linkStart}Beta%{linkEnd} feature is not production-ready, but is unlikely to change drastically before it's released. We encourage users to try Beta features and provide feedback.\nA Beta feature: %{bullets}",
-    POPOVER_BULLETS: ['May be unstable', 'Should not cause data loss', 'Is supported by a commercially reasonable effort', 'Is complete or near completion']
+    POPOVER_TITLE: "What's a beta?",
+    POPOVER_CONTENT: "A %{linkStart}beta%{linkEnd} feature is not yet production-ready, but is ready for testing and unlikely to change significantly before it's released.\nBeta features: %{bullets}",
+    POPOVER_BULLETS: ['Have a low risk of data loss, but might still be unstable.', 'Are supported on a commercially-reasonable effort basis.', 'Have a near complete user experience.', 'Are subject to the GitLab Testing Agreement.']
   }
 };
 var script = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "80.13.1",
+  "version": "80.13.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -18,7 +18,10 @@
     "src",
     "dist",
     "translations.json",
-    "tailwind.defaults.js"
+    "tailwind.defaults.js",
+    "!*.stories.js",
+    "!*.snap",
+    "!*.spec.{js,scss}"
   ],
   "scripts": {
     "build": "NODE_ENV=production rollup -c",
@@ -31,16 +34,18 @@
     "clean": "rm -r dist storybook src/scss/utilities.scss",
     "cy:a11y": "cypress run --browser chrome --env grepTags=@a11y",
     "cy:edge": "cypress run --browser edge --env grepTags=-@a11y+-@storybook",
-    "cy:run": "cypress run --browser firefox --env grepTags=-@a11y",
+    "cy:run": "cypress run --browser firefox --env grepTags=-@a11y+-@storybook",
     "start": "yarn storybook",
-    "storybook": "yarn storybook-prep && storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
-    "storybook-vue3": "yarn storybook-prep && VUE_VERSION=3 storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
-    "storybook-prep": "run-s copy-fonts build-tokens generate-utilities",
-    "storybook-static": "yarn storybook-prep && storybook build -c .storybook -o storybook",
+    "storybook": "yarn storybook:prepare && storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
+    "storybook-vue3": "yarn storybook:prepare && VUE_VERSION=3 storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
+    "storybook:prepare": "run-s copy-fonts build-tokens generate-utilities",
+    "storybook:build:prod": "yarn storybook:prepare && storybook build -c .storybook -o storybook",
+    "storybook:build:test": "yarn storybook:prepare && IS_VISUAL_TEST=true NODE_ENV=test storybook build --test -c .storybook -o storybook",
+    "storybook:run": "npx http-server -bgs -p 9001 ./storybook",
     "pretest:unit": "yarn build-tokens",
     "test": "run-s test:unit test:visual",
     "test:integration": "yarn run test:integration:server 'yarn cy:run && yarn cy:edge && yarn cy:a11y'",
-    "test:integration:server": "NODE_ENV=test server-test http://${STORYBOOK_HOST:-localhost}:9001/iframe.html",
+    "test:integration:server": "NODE_ENV=test start-test storybook:run http-get://${STORYBOOK_HOST:-localhost}:9001/iframe.html",
     "test:unit": "NODE_ENV=test jest",
     "test:unit:watch": "yarn test:unit --watch",
     "test:unit:debug": "NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
@@ -48,11 +53,10 @@
     "test:unit-vue3:watch": "VUE_VERSION=3 yarn test:unit --watch",
     "test:unit-vue3:debug": "VUE_VERSION=3 NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
     "test:visual": "./bin/run-visual-tests.sh 'test-storybook --browsers firefox --verbose --url http://localhost:9001'",
-    "test:visual:minimal": "node ./bin/run_minimal_visual_tests.js",
     "test:visual:update": "./bin/run-visual-tests.sh 'test-storybook -u --browsers firefox --verbose --url http://localhost:9001'",
-    "test:visual:internal": "NODE_ENV=test IS_VISUAL_TEST=true start-test http-get://${STORYBOOK_HOST:-localhost}:9001/iframe.html",
-    "prettier": "prettier --check '**/*.{js,vue}'",
-    "prettier:fix": "prettier --write '**/*.{js,vue}'",
+    "test:visual:internal": "NODE_ENV=test IS_VISUAL_TEST=true start-test storybook:run http-get://${STORYBOOK_HOST:-localhost}:9001/iframe.html",
+    "prettier": "prettier --check '**/*.{js,ts,vue}'",
+    "prettier:fix": "prettier --write '**/*.{js,ts,vue}'",
     "eslint": "eslint --max-warnings 0 --ext .js,.vue .",
     "preeslint": "yarn generate-utilities",
     "eslint:fix": "yarn eslint --fix",

package/src/components/experimental/experiment_badge/experiment_badge.vue

@@ -9,25 +9,26 @@ import { badgeTypes, badgeTypeValidator } from './constants';
 export const i18n = {
   experiment: {
     BADGE: 'Experiment',
-    POPOVER_TITLE: "What's an Experiment?",
+    POPOVER_TITLE: "What's an experiment?",
     POPOVER_CONTENT:
-      "An %{linkStart}Experiment%{linkEnd} is a feature that's in the process of being developed. It's not production-ready. We encourage users to try Experimental features and provide feedback. An Experiment: %{bullets}",
+      'An %{linkStart}experiment%{linkEnd} is not yet production-ready, but is released for initial testing and feedback during development.\nExperiments: %{bullets}',
     POPOVER_BULLETS: [
-      'May be unstable',
-      'Has no support and might not be documented',
-      'Can be removed at any time',
+      'Might be unstable or cause data loss.',
+      'Are not supported and might not be documented.',
+      'Could be changed or removed at any time.',
+      'Are subject to the GitLab Testing Agreement.',
     ],
   },
   beta: {
     BADGE: 'Beta',
-    POPOVER_TITLE: "What's a Beta?",
+    POPOVER_TITLE: "What's a beta?",
     POPOVER_CONTENT:
-      "A %{linkStart}Beta%{linkEnd} feature is not production-ready, but is unlikely to change drastically before it's released. We encourage users to try Beta features and provide feedback.\nA Beta feature: %{bullets}",
+      "A %{linkStart}beta%{linkEnd} feature is not yet production-ready, but is ready for testing and unlikely to change significantly before it's released.\nBeta features: %{bullets}",
     POPOVER_BULLETS: [
-      'May be unstable',
-      'Should not cause data loss',
-      'Is supported by a commercially reasonable effort',
-      'Is complete or near completion',
+      'Have a low risk of data loss, but might still be unstable.',
+      'Are supported on a commercially-reasonable effort basis.',
+      'Have a near complete user experience.',
+      'Are subject to the GitLab Testing Agreement.',
     ],
   },
 };

package/src/components/base/accordion/accordion.spec.js

@@ -1,58 +0,0 @@
-import { mount } from '@vue/test-utils';
-import Vue from 'vue';
-import GlAccordion from './accordion.vue';
-import GlAccordionItem from './accordion_item.vue';
-
-describe('GlAccordion', () => {
-  let wrapper;
-
-  const createComponent = ({ headerLevel = 3, autoCollapse = false } = {}) => {
-    wrapper = mount(
-      Vue.extend({
-        components: { GlAccordion, GlAccordionItem },
-        data() {
-          return { headerLevel, autoCollapse };
-        },
-        // eslint-disable-next-line @gitlab/no-runtime-template-compiler
-        template: `
-          <gl-accordion :header-level="headerLevel" :auto-collapse="autoCollapse">
-            <gl-accordion-item title="Item 1">
-              Foo
-            </gl-accordion-item>
-            <gl-accordion-item title="Item 2">
-              Bar
-            </gl-accordion-item>
-            <gl-accordion-item title="Item 3">
-              Bin
-            </gl-accordion-item>
-          </gl-accordion>`,
-      })
-    );
-  };
-
-  const findAccordionItems = () => wrapper.findAllComponents(GlAccordionItem);
-
-  it('does not populate the accordion prop by default', () => {
-    createComponent();
-    const accordionSetId = findAccordionItems().at(0).vm.accordion;
-
-    // accordion should not be set
-    expect(accordionSetId).toBeUndefined();
-  });
-
-  it('populates the accordion prop when autoCollapse is true', () => {
-    createComponent({ autoCollapse: true });
-    const accordionSetId = findAccordionItems().at(0).vm.accordion;
-
-    // accordion should be set
-    expect(accordionSetId).not.toBeUndefined();
-
-    // accordion should be the same across glAccordionItem children
-    expect(findAccordionItems().at(1).vm.accordion).toEqual(accordionSetId);
-  });
-
-  it('passes a default headerLevel to children', () => {
-    createComponent({ headerLevel: 4 });
-    expect(wrapper.findAll('h4')).toHaveLength(findAccordionItems().length);
-  });
-});

package/src/components/base/accordion/accordion.stories.js

@@ -1,59 +0,0 @@
-import readme from './accordion.md';
-import GlAccordion from './accordion.vue';
-import GlAccordionItem from './accordion_item.vue';
-
-const template = `
-    <gl-accordion :auto-collapse="autoCollapse" :header-level="headerLevel">
-      <gl-accordion-item title="Item 1" :header-level="headerLevel">
-        Each accordion can be expanded or collapsed independently of others.
-      </gl-accordion-item>
-
-      <gl-accordion-item title="Item 2" :header-level="headerLevel" :visible="true">
-        If you want to have an accordion item to be initially visible, please see
-        <code>Initially Expanded</code> example for the <code>GLAccordionItem</code>.
-      </gl-accordion-item>
-
-      <gl-accordion-item title="Item 3" :header-level="headerLevel" :visible="autoCollapse">
-        If you want the other accordion items to collapse when one is open, please see
-        <code>Auto Collapse</code> example.
-      </gl-accordion-item>
-    </gl-accordion>
-    `;
-
-const defaultValue = (prop) => GlAccordion.props[prop].default;
-
-const generateProps = ({ autoCollapse = defaultValue('autoCollapse'), headerLevel = 3 } = {}) => ({
-  autoCollapse,
-  headerLevel,
-});
-
-const Template = (args) => ({
-  components: {
-    GlAccordion,
-    GlAccordionItem,
-  },
-  props: Object.keys(args),
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export default {
-  title: 'base/accordion',
-  component: GlAccordion,
-  parameters: {
-    bootstrapComponent: 'b-collapse',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    headerLevel: {
-      options: [1, 2, 3, 4, 5, 6],
-      control: 'select',
-    },
-  },
-};

package/src/components/base/accordion/accordion_item.spec.js

@@ -1,131 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { BCollapse } from 'bootstrap-vue';
-import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
-import { waitForAnimationFrame } from '../../../utils/test_utils';
-import GlButton from '../button/button.vue';
-import GlAccordionItem from './accordion_item.vue';
-
-describe('GlAccordionItem', () => {
-  let wrapper;
-  const defaultTitle = 'Item 1';
-  const titleVisible = 'Item 1 visible';
-  const defaultSlot = 'Hello';
-
-  const createComponent = (props = {}, { defaultHeaderLevel = 3, accordionSetId = false } = {}) => {
-    wrapper = mount(GlAccordionItem, {
-      directives: {
-        GlCollapseToggle: GlCollapseToggleDirective,
-      },
-      provide: {
-        defaultHeaderLevel: () => defaultHeaderLevel,
-        accordionSetId: () => accordionSetId,
-      },
-      propsData: {
-        title: defaultTitle,
-        ...props,
-      },
-      slots: {
-        default: defaultSlot,
-      },
-    });
-  };
-
-  const findButton = () => wrapper.findComponent(GlButton);
-  const findCollapse = () => wrapper.findComponent(BCollapse);
-  const findHeader = () => wrapper.find('.gl-accordion-item-header');
-
-  it('renders button text', () => {
-    createComponent();
-
-    expect(findButton().find('span').text()).toBe(defaultTitle);
-  });
-
-  it('renders alternative button text when the content is visible and the titleVisible property is set', async () => {
-    createComponent({ titleVisible });
-
-    expect(findButton().find('span').text()).toBe(defaultTitle);
-
-    await waitForAnimationFrame();
-    await findButton().trigger('click');
-
-    expect(findButton().find('span').text()).toBe(titleVisible);
-  });
-
-  it('renders the appropriate header element', () => {
-    createComponent({}, { defaultHeaderLevel: 3 });
-
-    expect(wrapper.find('h3.gl-accordion-item-header').exists()).toBe(true);
-    expect(wrapper.find('h4.gl-accordion-item-header').exists()).toBe(false);
-  });
-
-  it('renders the appropriate header element when overridden', () => {
-    createComponent({ headerLevel: 4 }, { defaultHeaderLevel: 3 });
-
-    expect(wrapper.find('h3.gl-accordion-item-header').exists()).toBe(false);
-    expect(wrapper.find('h4.gl-accordion-item-header').exists()).toBe(true);
-  });
-
-  it.each(['custom-header-class', ['custom-header-class'], { 'custom-header-class': true }])(
-    'applies custom classes to the header',
-    (customClassProp) => {
-      createComponent({ headerClass: customClassProp }, { defaultHeaderLevel: 3 });
-
-      expect(findHeader().classes()).toContain('custom-header-class');
-    }
-  );
-
-  it('renders slot text', () => {
-    createComponent();
-
-    expect(findCollapse().text()).toBe(defaultSlot);
-  });
-
-  it('is not expanded by default', () => {
-    createComponent();
-
-    expect(findButton().props('icon')).toBe('chevron-right');
-    expect(findCollapse().props('visible')).toBe(false);
-  });
-
-  it('is expanded on button click', async () => {
-    createComponent();
-
-    await waitForAnimationFrame();
-    await findButton().trigger('click');
-
-    expect(findButton().props('icon')).toBe('chevron-down');
-    expect(findCollapse().props('visible')).toBe(true);
-  });
-
-  it('passes accordion identifier to BCollapse', () => {
-    const accordionId = 'my-accordion';
-
-    createComponent({}, { accordionSetId: accordionId });
-
-    expect(findCollapse().props('accordion')).toBe(accordionId);
-  });
-
-  it('expands initially when visible prop is passed', async () => {
-    createComponent({ visible: true });
-
-    await wrapper.vm.$nextTick();
-
-    expect(findButton().props('icon')).toBe('chevron-down');
-    expect(findCollapse().props('visible')).toBe(true);
-  });
-
-  it('emits the initial visible state', () => {
-    createComponent({ visible: true });
-
-    expect(wrapper.emitted('input')).toEqual([[true]]);
-  });
-
-  it('emits the visible state when toggled', async () => {
-    createComponent({ visible: true });
-
-    await waitForAnimationFrame();
-    await findButton().trigger('click');
-
-    expect(wrapper.emitted('input')).toEqual([[true], [false]]);
-  });
-});

package/src/components/base/accordion/accordion_item.stories.js

@@ -1,57 +0,0 @@
-import readme from './accordion_item.md';
-import GlAccordionItem from './accordion_item.vue';
-
-const template = `
-    <gl-accordion-item :title="title" :titleVisible="titleVisible" :visible="visible" :header-level="headerLevel">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, maiores.
-    </gl-accordion-item>
-    `;
-
-const defaultValue = (prop) => GlAccordionItem.props[prop].default;
-
-const generateProps = ({
-  visible = defaultValue('visible'),
-  headerLevel = 3,
-  title = 'Accordion Item Title',
-  titleVisible = undefined,
-} = {}) => ({
-  visible,
-  headerLevel,
-  title,
-  titleVisible,
-});
-
-const Template = (args) => ({
-  components: {
-    GlAccordionItem,
-  },
-  props: Object.keys(args),
-  template,
-  provide: {
-    defaultHeaderLevel: () => defaultValue('headerLevel'),
-    accordionSetId: () => '1',
-  },
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps({ visible: true, titleVisible: 'Accordion Item Title Expanded' });
-
-export default {
-  title: 'base/accordion/accordion-item',
-  component: GlAccordionItem,
-  bootstrapComponent: 'b-collapse',
-  tags: ['skip-visual-test'],
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    headerLevel: {
-      options: [1, 2, 3, 4, 5, 6],
-      control: 'select',
-    },
-  },
-};

package/src/components/base/alert/alert.spec.js

@@ -1,229 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { alertVariantOptions, buttonCategoryOptions } from '../../../utils/constants';
-import GlAlert from './alert.vue';
-
-const DummyComponent = {
-  template: '<p>dummy</p>',
-};
-
-const primaryButtonText = 'foo';
-const primaryButtonLink = '#foo';
-const secondaryButtonText = 'bar';
-const secondaryButtonLink = '#bar';
-
-describe('Alert component', () => {
-  let wrapper;
-
-  const createComponent = (options) => {
-    wrapper = shallowMount(GlAlert, {
-      ...options,
-    });
-  };
-
-  const findIcon = () => wrapper.find('.gl-alert-icon');
-  const findDismissButton = () => wrapper.findComponent({ ref: 'dismiss' });
-  const findTitle = () => wrapper.find('.gl-alert-title');
-  const findBodyContainer = () => wrapper.find('.gl-alert-body');
-  const findActionsContainer = () => wrapper.find('.gl-alert-actions');
-  const findActionButtons = () => wrapper.findAll('.gl-alert-action');
-
-  describe('by default', () => {
-    beforeEach(() => {
-      createComponent({ slots: { default: DummyComponent } });
-    });
-
-    it('renders a variant icon', () => {
-      expect(findIcon().exists()).toBe(true);
-    });
-
-    it('renders a dismiss button', () => {
-      expect(findDismissButton().exists()).toBe(true);
-    });
-
-    it('clicking on dismiss button emits a dismiss event', () => {
-      findDismissButton().vm.$emit('click');
-
-      expect(wrapper.emitted('dismiss')).toHaveLength(1);
-    });
-
-    it('does not render a title', () => {
-      expect(findTitle().exists()).toBe(false);
-    });
-
-    it('does not render any actions', () => {
-      expect(findActionsContainer().exists()).toBe(false);
-    });
-
-    it('renders default slot content', () => {
-      expect(findBodyContainer().findComponent(DummyComponent).exists()).toBe(true);
-    });
-  });
-
-  it('does not render a variant icon when showIcon = false', () => {
-    createComponent({ propsData: { showIcon: false } });
-
-    expect(findIcon().exists()).toBe(false);
-  });
-
-  it('does not render a dismiss button when dismissible = false', () => {
-    createComponent({ propsData: { dismissible: false } });
-
-    expect(findDismissButton().exists()).toBe(false);
-  });
-
-  it('renders the provided title with heading level 2', () => {
-    const title = 'foo';
-    createComponent({ propsData: { title } });
-
-    const titleWrapper = findTitle();
-    expect(titleWrapper.exists()).toBe(true);
-    expect(titleWrapper.text()).toContain(title);
-    // the title needs to be in a level 2 heading for accessibility reasons
-    expect(titleWrapper.element.tagName).toEqual('H2');
-  });
-
-  describe('given primaryButtonText', () => {
-    beforeEach(() => {
-      createComponent({ propsData: { primaryButtonText } });
-    });
-
-    it('renders a primary button', () => {
-      expect(findActionsContainer().exists()).toBe(true);
-
-      const buttons = findActionButtons();
-      expect(buttons).toHaveLength(1);
-
-      const button = buttons.at(0);
-      expect(button.text()).toContain(primaryButtonText);
-
-      const props = button.props();
-      expect('href' in props).toBe(false);
-      expect(props.category).toEqual(buttonCategoryOptions.primary);
-    });
-
-    it('emits a primaryAction event when primary button is clicked', () => {
-      findActionButtons().at(0).vm.$emit('click');
-
-      expect(wrapper.emitted('primaryAction')).toHaveLength(1);
-    });
-  });
-
-  describe('given primaryButtonText and primaryButtonLink', () => {
-    beforeEach(() => {
-      createComponent({ propsData: { primaryButtonText, primaryButtonLink } });
-    });
-
-    it('renders a primary button with an href given primaryButtonLink', () => {
-      const button = findActionButtons().at(0);
-      expect(button.attributes('href')).toEqual(primaryButtonLink);
-    });
-  });
-
-  describe('given secondaryButtonText', () => {
-    beforeEach(() => {
-      createComponent({ propsData: { secondaryButtonText } });
-    });
-
-    it('renders a secondary button', () => {
-      expect(findActionsContainer().exists()).toBe(true);
-
-      const buttons = findActionButtons();
-      expect(buttons).toHaveLength(1);
-
-      const button = buttons.at(0);
-      expect(button.text()).toContain(secondaryButtonText);
-
-      const props = button.props();
-      expect('href' in props).toBe(false);
-      expect(props.category).toEqual(buttonCategoryOptions.secondary);
-    });
-
-    it('emits a secondaryAction event when secondary button is clicked', () => {
-      findActionButtons().at(0).vm.$emit('click');
-
-      expect(wrapper.emitted('secondaryAction')).toHaveLength(1);
-    });
-  });
-
-  describe('given secondaryButtonText and secondaryButtonLink', () => {
-    beforeEach(() => {
-      createComponent({ propsData: { secondaryButtonText, secondaryButtonLink } });
-    });
-
-    it('renders a secondary button with an href given secondaryButtonLink', () => {
-      const button = findActionButtons().at(0);
-      expect(button.attributes('href')).toEqual(secondaryButtonLink);
-    });
-  });
-
-  it('renders actions slot content', () => {
-    createComponent({ slots: { actions: DummyComponent } });
-
-    const actionsContainer = findActionsContainer();
-    expect(actionsContainer.exists()).toBe(true);
-    expect(actionsContainer.findComponent(DummyComponent).exists()).toBe(true);
-  });
-
-  describe('top-level classes', () => {
-    describe.each`
-      prop             | cssClass                      | presentIf
-      ${'sticky'}      | ${'gl-alert-sticky'}          | ${true}
-      ${'dismissible'} | ${'gl-alert-not-dismissible'} | ${false}
-    `('$cssClass', ({ prop, cssClass, presentIf }) => {
-      it(`adds class ${cssClass} when ${prop} is ${presentIf}`, () => {
-        createComponent({
-          propsData: {
-            [prop]: presentIf,
-          },
-        });
-
-        expect(wrapper.classes()).toContain(cssClass);
-      });
-
-      it(`does not add class ${cssClass} when ${prop} is ${!presentIf}`, () => {
-        createComponent({
-          propsData: {
-            [prop]: !presentIf,
-          },
-        });
-
-        expect(wrapper.classes()).not.toContain(cssClass);
-      });
-    });
-
-    it('adds the `gl-alert-has-title` class if there is a title', () => {
-      createComponent({
-        propsData: {
-          title: 'title',
-        },
-      });
-
-      expect(wrapper.classes()).toContain('gl-alert-has-title');
-    });
-
-    it('does not add the `gl-alert-has-title` class if there is no title', () => {
-      createComponent();
-
-      expect(wrapper.classes()).not.toContain('gl-alert-has-title');
-    });
-  });
-
-  describe('role and aria-live', () => {
-    it.each`
-      variant                        | role        | assertiveness
-      ${alertVariantOptions.danger}  | ${'alert'}  | ${'assertive'}
-      ${alertVariantOptions.warning} | ${'alert'}  | ${'assertive'}
-      ${alertVariantOptions.info}    | ${'status'} | ${'polite'}
-      ${alertVariantOptions.success} | ${'alert'}  | ${'polite'}
-      ${alertVariantOptions.tip}     | ${'status'} | ${'polite'}
-    `(
-      '$variant variant has role "$role" and aria-live "$assertiveness"',
-      ({ variant, role, assertiveness }) => {
-        createComponent({ propsData: { variant } });
-
-        expect(wrapper.find(`[role="${role}"`).exists()).toBe(true);
-        expect(wrapper.find(`[aria-live="${assertiveness}"`).exists()).toBe(true);
-      }
-    );
-  });
-});