diff --git a/src/components/CvCheckbox/CvCheckbox.stories.js b/src/components/CvCheckbox/CvCheckbox.stories.js index 95778f133..17f637138 100644 --- a/src/components/CvCheckbox/CvCheckbox.stories.js +++ b/src/components/CvCheckbox/CvCheckbox.stories.js @@ -4,7 +4,7 @@ import { storyParametersObject, } from '../../global/storybook-utils'; -import { CvCheckbox } from '.'; +import { CvCheckbox, CvCheckboxSkeleton } from '.'; import { action } from '@storybook/addon-actions'; import { props as propsCvCheck } from '../../use/cvCheck'; import { ref } from 'vue'; @@ -109,3 +109,15 @@ vModel.parameters = storyParametersObject( templateVModel, vModel.args ); + +const templateSkeleton = ``; + +const TemplateSkeleton = args => { + return { + components: { CvCheckboxSkeleton }, + setup: () => {}, + template: templateSkeleton, + }; +}; + +export const Skeleton = TemplateSkeleton.bind({}); diff --git a/src/components/CvCheckbox/CvCheckboxSkeleton.vue b/src/components/CvCheckbox/CvCheckboxSkeleton.vue new file mode 100644 index 000000000..a2182d205 --- /dev/null +++ b/src/components/CvCheckbox/CvCheckboxSkeleton.vue @@ -0,0 +1,16 @@ + + + diff --git a/src/components/CvCheckbox/__tests__/CvCheckboxSkeleton.spec.js b/src/components/CvCheckbox/__tests__/CvCheckboxSkeleton.spec.js new file mode 100644 index 000000000..7337d1ba6 --- /dev/null +++ b/src/components/CvCheckbox/__tests__/CvCheckboxSkeleton.spec.js @@ -0,0 +1,27 @@ +import { shallowMount } from '@vue/test-utils'; +import { carbonPrefix } from '../../../global/settings'; +import CvCheckboxSkeleton from '../CvCheckboxSkeleton.vue'; + +describe('CvCheckboxSkeleton', () => { + it('renders checkbox skeleton', async () => { + const wrapper = shallowMount(CvCheckboxSkeleton); + + expect(wrapper.html()).toMatchSnapshot(); + }); + + it('renders checkbox skeleton with required visual elements', () => { + const wrapper = shallowMount(CvCheckboxSkeleton); + + const skeletonWrapper = wrapper.find('.cv-checkbox'); + const skeletonLabel = skeletonWrapper.find( + `.${carbonPrefix}--checkbox-label` + ); + const skeletonText = skeletonWrapper.find( + `.${carbonPrefix}--checkbox-label-text` + ); + const expectedSkeletonClass = `${carbonPrefix}--skeleton`; + + expect(skeletonLabel.classes()).toContain(expectedSkeletonClass); + expect(skeletonText.classes()).toContain(expectedSkeletonClass); + }); +}); diff --git a/src/components/CvCheckbox/__tests__/__snapshots__/CvCheckboxSkeleton.spec.js.snap b/src/components/CvCheckbox/__tests__/__snapshots__/CvCheckboxSkeleton.spec.js.snap new file mode 100644 index 000000000..362e1fc7f --- /dev/null +++ b/src/components/CvCheckbox/__tests__/__snapshots__/CvCheckboxSkeleton.spec.js.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CvCheckboxSkeleton renders checkbox skeleton 1`] = `
`; diff --git a/src/components/CvCheckbox/index.js b/src/components/CvCheckbox/index.js index 9403e8234..6f26118fa 100644 --- a/src/components/CvCheckbox/index.js +++ b/src/components/CvCheckbox/index.js @@ -1,3 +1,4 @@ import CvCheckbox from './CvCheckbox.vue'; -export { CvCheckbox }; +import CvCheckboxSkeleton from './CvCheckboxSkeleton.vue'; +export { CvCheckbox, CvCheckboxSkeleton }; export default CvCheckbox;