feat(modal): simplify vue test & fix alphabetical order of Modal in S…

…torybook
ovh · Jul 29, 2024 · 032ae9f · 032ae9f
1 parent 05cf1bb
commit 032ae9f
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 23 deletions.
diff --git a/packages/ods/vue/tests/_app/src/components/ods-modal.vue b/packages/ods/vue/tests/_app/src/components/ods-modal.vue
@@ -1,7 +1,6 @@
 <template>
   <div>
-    <OdsButton label="Open Modal" @click="showModal = true"></OdsButton>
-    <OdsModal :isOpen="showModal" @odsModalClose="showModal = false">
+    <OdsModal :isOpen="true">
       <OdsText preset="heading-3">Lorem ipsum</OdsText>
       <OdsText preset="span">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur, nunc nec ultricies ultricies, nunc nunc ultricies
@@ -12,21 +11,13 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-import { OdsButton, OdsModal, OdsText } from '@ovhcloud/ods-components/vue';
+import { OdsModal, OdsText } from '@ovhcloud/ods-components/vue';
 
 export default defineComponent({
   name: 'Modal',
   components: {
-    OdsButton,
     OdsModal,
     OdsText
   },
-  setup() {
-    const showModal = ref(false);
-
-    return {
-      showModal
-    };
-  }
 });
 </script>
diff --git a/packages/ods/vue/tests/e2e/ods-modal.e2e.ts b/packages/ods/vue/tests/e2e/ods-modal.e2e.ts
@@ -13,18 +13,9 @@ describe('ods-modal vue', () => {
     await goToComponentPage(page, 'ods-modal');
   });
 
-  it('renders the modal on button click', async() => {
+  it('render the component correctly', async () => {
     const modal = await page.$('ods-modal');
-    let boundingBox = await modal?.boundingBox();
-
-    expect(boundingBox?.height).toBe(undefined);
-    expect(boundingBox?.width).toBe(undefined);
-
-    const button = await page.$('ods-button');
-
-    await button?.click();
-
-    boundingBox = await modal?.boundingBox();
+    const boundingBox = await modal?.boundingBox();
 
     expect(boundingBox?.height).toBeGreaterThan(0);
     expect(boundingBox?.width).toBeGreaterThan(0);

diff --git a/packages/storybook/stories/components/modal/modal.stories.ts b/packages/storybook/stories/components/modal/modal.stories.ts
@@ -10,7 +10,7 @@ import { withResetRoot } from '../../hook';
 defineCustomElement();
 
 const meta: Meta = {
-  title: 'ODS Components/User Feedback/Modal',
+  title: 'ODS Components/User feedback/Modal',
   component: 'ods-modal',
   decorators: [withResetRoot],
 };