Add storybook smoke test (#4265)

* Add storybook smoke test * Fix stories * Fix VAudioTrack and VByLine story setup Signed-off-by: Olga Bulat <[email protected]> --------- Signed-off-by: Olga Bulat <[email protected]>
WordPress · May 8, 2024 · 3c4eddc · 3c4eddc
1 parent 059d5fd
commit 3c4eddc
Show file tree

Hide file tree

Showing 24 changed files with 265 additions and 173 deletions.
diff --git a/frontend/src/components/VAudioTrack/meta/VAudioTrack.stories.mdx b/frontend/src/components/VAudioTrack/meta/VAudioTrack.stories.mdx
@@ -7,6 +7,7 @@ import {
 } from "@storybook/addon-docs"
 import { computed } from "vue"
 import { audioLayouts, audioSizes } from "~/constants/audio"
+import { useProviderStore } from "~/stores/provider"
 
 import VAudioTrack from "~/components/VAudioTrack/VAudioTrack.vue"
 
@@ -20,24 +21,26 @@ import wavWaveform from "./wav-waveform.json"
   component={VAudioTrack}
   argTypes={{
     format: {
-      defaultValue: "mp3",
       options: ["mp3", "ogg", "flac", "wav"],
       control: "select",
     },
     layout: {
-      defaultValue: "full",
       options: audioLayouts,
       control: "select",
     },
     size: {
-      defaultValue: "m",
       options: audioSizes,
       control: "select",
     },
     audio: {
       control: false,
     },
   }}
+  args={{
+    format: "mp3",
+    layout: "full",
+    size: "m",
+  }}
 />
 
 export const commonAttrs = () => ({
@@ -47,6 +50,9 @@ export const commonAttrs = () => ({
   category: "music",
   thumbnail:
     "https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Croce-Mozart-Detail.jpg/370px-Croce-Mozart-Detail.jpg",
+  frontendMediaType: "audio",
+  source: "wikimedia_audio",
+  sourceName: "Wikimedia",
 })
 
 export const formatExamples = {
@@ -80,10 +86,19 @@ export const formatExamples = {
   },
 }
 
+export const providerStorePatch = {
+  providers: {
+    audio: [{ source_name: "wikimedia_audio", display_name: "Wikimedia" }],
+  },
+  sourceNames: { audio: ["Wikimedia"] },
+}
+
 export const Template = (args) => ({
   template: `<VAudioTrack v-bind="args" :audio="audioObj"/>`,
   components: { VAudioTrack },
   setup() {
+    const providerStore = useProviderStore()
+    providerStore.$patch(providerStorePatch)
     const audioObj = computed(() => ({
       ...commonAttrs(),
       ...formatExamples[args.format],
@@ -109,37 +124,8 @@ The component can be rendered in a multiple different layouts, by specifying a
 
 ### Full (default)
 
-#### Size M (default)
-
 <Canvas>
-  <Story
-    name="Full (medium)"
-    args={
-      {
-        // layout: 'full', (default)
-        // size: 'm', (default)
-      }
-    }
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-#### Size S (mobile)
-
-<Canvas>
-  <Story
-    name="Full (small)"
-    args={{
-      // layout: 'full', (default)
-      size: "s",
-    }}
-    parameters={{
-      viewport: { defaultViewport: "sm" },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
+  <Story name="Full">{Template.bind({})}</Story>
 </Canvas>
 
 ### Row
@@ -191,7 +177,7 @@ The component can be rendered in a multiple different layouts, by specifying a
 
 ### Box
 
-#### Sizes L and M (default)
+#### Size L
 
 There is no M size in box layout.
 
@@ -205,15 +191,6 @@ There is no M size in box layout.
   >
     {Template.bind({})}
   </Story>
-  <Story
-    name="Box (medium)"
-    args={{
-      layout: "box",
-      size: "l",
-    }}
-  >
-    {Template.bind({})}
-  </Story>
 </Canvas>
 
 #### Size S (mobile)
@@ -277,6 +254,8 @@ export const Multiple = () => ({
   `,
   components: { VAudioTrack },
   setup() {
+    const providerStore = useProviderStore()
+    providerStore.$patch(providerStorePatch)
     const audioObj = (audio) => ({ ...commonAttrs(), ...audio })
     return { formatExamples, audioObj }
   },

diff --git a/frontend/src/components/VAudioTrack/meta/VWaveform.stories.mdx b/frontend/src/components/VAudioTrack/meta/VWaveform.stories.mdx
@@ -16,6 +16,9 @@ import VWaveform from "~/components/VAudioTrack/VWaveform.vue"
       action: "seeked",
     },
   }}
+  args={{
+    audioId: "audioId",
+  }}
 />
 
 export const Template = (args) => ({
@@ -28,9 +31,9 @@ export const Template = (args) => ({
 
 # Waveform
 
-<Description of={Waveform} />
+<Description of={VWaveform} />
 
-<ArgsTable of={Waveform} />
+<ArgsTable of={VWaveform} />
 
 ## Sampling
 
@@ -105,7 +108,7 @@ The waveform always takes the height and width of its container.
 - **Height:** the bars will elongate proportionally to scale vertically
 - **Width:** the number of samples will be adjusted to scale horizontally
 
-Thus the `barWidth` and `barGap` will be maintained even in the case of
+Thus, the `barWidth` and `barGap` will be maintained even in the case of
 horizontal scaling.
 
 ## Usable area
@@ -160,7 +163,6 @@ will animate up to their actual height when the prop is unset.
     name="Message"
     args={{
       message: "Hello, World!",
-      audioId: 123,
     }}
   >
     {Template.bind({})}

diff --git a/frontend/src/components/VBanner/meta/VNotificationBanner.stories.mdx b/frontend/src/components/VBanner/meta/VNotificationBanner.stories.mdx
@@ -16,6 +16,10 @@ import VNotificationBanner from "~/components/VBanner/VNotificationBanner.vue"
       action: "close",
     },
   }}
+  args={{
+    id: "banner",
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec justo eget felis facilisis fermentum.",
+  }}
 />
 
 export const Template = (args) => ({
@@ -36,7 +40,6 @@ export const Template = (args) => ({
   <Story
     name="Default"
     args={{
-      text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec justo eget felis facilisis fermentum.",
       nature: "success",
       variant: "regular",
     }}
@@ -49,7 +52,6 @@ export const Template = (args) => ({
   <Story
     name="Dark"
     args={{
-      text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec justo eget felis facilisis fermentum.",
       nature: "info",
       variant: "dark",
     }}

diff --git a/frontend/src/components/VCollectionHeader/meta/VCollectionHeader.stories.mdx b/frontend/src/components/VCollectionHeader/meta/VCollectionHeader.stories.mdx
@@ -5,10 +5,10 @@ import {
   Meta,
   Story,
 } from "@storybook/addon-docs"
+import { useMediaStore } from "~/stores/media"
 import { useProviderStore } from "~/stores/provider"
 
 import VCollectionHeader from "~/components/VCollectionHeader/VCollectionHeader.vue"
-import { useMediaStore } from "@/stores/media"
 
 <Meta title="Components/VCollectionHeader" component={VCollectionHeader} />
 

diff --git a/frontend/src/components/VContentLink/meta/VContentLink.stories.mdx b/frontend/src/components/VContentLink/meta/VContentLink.stories.mdx
@@ -8,8 +8,6 @@ import {
 
 import VContentLink from "~/components/VContentLink/VContentLink.vue"
 
-<Meta title="Components/VContentLink" components={VContentLink} argTypes={{}} />
-
 export const contentLinkArgTypes = {
   mediaType: { options: ["audio", "image"], control: { type: "radio" } },
   searchTerm: { control: { type: "string" } },
@@ -18,6 +16,13 @@ export const contentLinkArgTypes = {
   layout: { options: ["stacked", "horizontal"], control: { type: "radio" } },
 }
 
+<Meta
+  title="Components/VContentLink"
+  components={VContentLink}
+  argTypes={contentLinkArgTypes}
+  args={{ searchTerm: "cat" }}
+/>
+
 export const VContentLinkStory = (args) => ({
   template: `<VContentLink v-bind="args" />`,
   components: { VContentLink },
@@ -77,6 +82,7 @@ export const TwoVContentLinkStory = (args) => ({
       mediaType: "image",
       resultsCount: 5708,
       isSelected: false,
+      searchTerm: "cat",
     }}
     argTypes={contentLinkArgTypes}
   >

diff --git a/frontend/src/components/VExternalSearch/meta/VExternalSourceList.stories.mdx b/frontend/src/components/VExternalSearch/meta/VExternalSourceList.stories.mdx
@@ -5,15 +5,28 @@ import {
   Meta,
   Story,
 } from "@storybook/addon-docs"
+import { useFeatureFlagStore } from "~/stores/feature-flag"
+import { useSearchStore } from "~/stores/search"
 
 import VExternalSourceList from "~/components/VExternalSearch/VExternalSourceList.vue"
 
-<Meta title="Components/VExternalSourceList" component={VExternalSourceList} />
+<Meta
+  title="Components/VExternalSourceList"
+  component={VExternalSourceList}
+  args={{
+    searchTerm: "cat",
+    "search-term": "cat",
+  }}
+/>
 
 export const Template = (args) => ({
   template: `<VExternalSourceList v-bind="args"/>`,
   components: { VExternalSourceList },
   setup() {
+    const featureFlagStore = useFeatureFlagStore()
+    featureFlagStore.toggleFeature("additional_search_types", "on")
+    const searchStore = useSearchStore()
+    searchStore.setSearchType(args.searchType)
     return { args }
   },
 })
@@ -27,55 +40,23 @@ export const Template = (args) => ({
 ## Images
 
 <Canvas>
-  <Story
-    name="Images"
-    args={{
-      type: "image",
-      query: { q: "cat" },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
+  <Story name="Images">{Template.bind({})}</Story>
 </Canvas>
 
 ## Audio
 
 <Canvas>
-  <Story
-    name="Audio"
-    args={{
-      type: "audio",
-      query: { q: "cat" },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
+  <Story name="Audio">{Template.bind({})}</Story>
 </Canvas>
 
 ## Video
 
 <Canvas>
-  <Story
-    name="Video"
-    args={{
-      type: "video",
-      query: { q: "cat" },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
+  <Story name="Video">{Template.bind({})}</Story>
 </Canvas>
 
 ## 3D models
 
 <Canvas>
-  <Story
-    name="3D models"
-    args={{
-      type: "model-3d",
-      query: { q: "cat" },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
+  <Story name="3D models">{Template.bind({})}</Story>
 </Canvas>
diff --git a/frontend/src/components/VFilters/meta/VLicenseExplanation.stories.mdx b/frontend/src/components/VFilters/meta/VLicenseExplanation.stories.mdx
@@ -15,11 +15,13 @@ import { ALL_LICENSES } from "~/constants/license"
   components={VLicenseExplanation}
   argTypes={{
     license: {
-      defaultValue: ALL_LICENSES[0],
       options: ALL_LICENSES,
       control: "select",
     },
   }}
+  args={{
+    license: ALL_LICENSES[0],
+  }}
 />
 
 export const Template = (args) => ({

diff --git a/frontend/src/components/VHeader/VHeaderDesktop.vue b/frontend/src/components/VHeader/VHeaderDesktop.vue
@@ -8,7 +8,6 @@
       ref="searchBarRef"
       v-model.trim="searchTerm"
       class="me-4 flex-grow"
-      size="medium"
       @submit="handleSearch"
     >
       <VSearchBarButton

diff --git a/frontend/src/components/VHeader/VSearchBar/VSearchBar.vue b/frontend/src/components/VHeader/VSearchBar/VSearchBar.vue
@@ -97,7 +97,7 @@ export default defineComponent({
     },
     size: {
       type: String as PropType<keyof typeof FIELD_SIZES>,
-      required: true,
+      default: "medium",
     },
     placeholder: {
       type: String,

diff --git a/frontend/src/components/VHeader/VSearchBar/meta/VSearchBar.stories.mdx b/frontend/src/components/VHeader/VSearchBar/meta/VSearchBar.stories.mdx
@@ -61,7 +61,7 @@ representing the search query.
 export const vModelTemplate = (args) => ({
   template: `
     <div>
-      <VSearchBar v-model="text" size="standalone" v-on="args">
+      <VSearchBar v-model="text" v-on="args">
         <span class="info text-xs font-semibold text-dark-charcoal-70 mx-4 whitespace-nowrap group-hover:text-dark-charcoal group-focus:text-dark-charcoal">
           {{ text.length }} chars
         </span>
@@ -93,7 +93,6 @@ easy `<input>` attributes like placeholders or HTML validations.
     name="With placeholder"
     args={{
       placeholder: "Search query",
-      size: "large",
     }}
   >
     {Template.bind({})}