diff --git a/src/components/CvTextInput/CvTextInput.stories.js b/src/components/CvTextInput/CvTextInput.stories.js index f8a26fa7c..02d8a2343 100644 --- a/src/components/CvTextInput/CvTextInput.stories.js +++ b/src/components/CvTextInput/CvTextInput.stories.js @@ -3,7 +3,7 @@ import { storyParametersObject, } from '../../global/storybook-utils'; -import CvTextInput from '.'; +import { CvTextInput, CvTextInputSkeleton } from '.'; import { ref } from 'vue'; export default { @@ -243,3 +243,26 @@ Password.parameters = storyParametersObject( template, Password.args ); + +const templateSkeleton = ``; +const TemplateSkeleton = args => { + return { + components: { CvTextInputSkeleton }, + setup: () => ({ args }), + template: templateSkeleton, + }; +}; + +export const Skeleton = TemplateSkeleton.bind({}); + +Skeleton.parameters = { + controls: { + include: ['hideLabel'], + }, +}; + +Skeleton.parameters = storyParametersObject( + Skeleton.parameters, + templateSkeleton, + Skeleton.args +); diff --git a/src/components/CvTextInput/CvTextInputSkeleton.vue b/src/components/CvTextInput/CvTextInputSkeleton.vue new file mode 100644 index 000000000..a29ae8bd2 --- /dev/null +++ b/src/components/CvTextInput/CvTextInputSkeleton.vue @@ -0,0 +1,17 @@ + + + diff --git a/src/components/CvTextInput/__tests__/CvTextInput.spec.js b/src/components/CvTextInput/__tests__/CvTextInput.spec.js index f84649e37..2037146b7 100644 --- a/src/components/CvTextInput/__tests__/CvTextInput.spec.js +++ b/src/components/CvTextInput/__tests__/CvTextInput.spec.js @@ -1,6 +1,6 @@ import { render } from '@testing-library/vue'; import userEvent from '@testing-library/user-event'; -import CvTextInput from '..'; +import { CvTextInput, CvTextInputSkeleton } from '..'; describe('CvTextInput', () => { it("renders label when 'label' prop is passed", () => { @@ -459,3 +459,45 @@ describe('CvTextInput', () => { }); }); }); + +describe('CvTextInputSkeleton', () => { + it("renders label when 'hideLabel' prop is omitted", async () => { + const skeleton = render(CvTextInputSkeleton); + const label = skeleton.container.querySelector( + 'span.bx--label.bx--skeleton' + ); + expect(label).toBeTruthy(); + }); + it("renders label when 'hideLabel' prop is false", async () => { + const skeleton = render(CvTextInputSkeleton, { + props: { hideLabel: false }, + }); + const label = skeleton.container.querySelector( + 'span.bx--label.bx--skeleton' + ); + expect(label).toBeTruthy(); + }); + it("does not render label when 'hideLabel' prop is true", async () => { + const skeleton = render(CvTextInputSkeleton, { + props: { hideLabel: true }, + }); + const label = skeleton.container.querySelector( + 'span.bx--label.bx--skeleton' + ); + expect(label).toBeFalsy(); + }); + it('renders div with correct class', async () => { + const skeleton = render(CvTextInputSkeleton); + const div = skeleton.container.querySelector( + 'div.bx--text-input.bx--skeleton' + ); + expect(div).toBeTruthy(); + }); + it('is accessible', async () => { + const main = document.createElement('main'); + const skeleton = render(CvTextInputSkeleton, { + container: document.body.appendChild(main), + }); + await expect(skeleton.container).toBeAccessible('cv-text-input-skeleton'); + }, 10000); +}); diff --git a/src/components/CvTextInput/index.js b/src/components/CvTextInput/index.js index 1a7ec58e3..2cc846e10 100644 --- a/src/components/CvTextInput/index.js +++ b/src/components/CvTextInput/index.js @@ -1,4 +1,5 @@ import CvTextInput from './CvTextInput.vue'; +import CvTextInputSkeleton from './CvTextInputSkeleton.vue'; -export { CvTextInput }; +export { CvTextInput, CvTextInputSkeleton }; export default CvTextInput;