feat(doc): fix message e2e tests

Signed-off-by: aurore.stagnol <[email protected]>

packages/components/src/message/src/components/osds-message/osds-message.e2e.ts

@@ -43,7 +43,7 @@ describe('e2e:osds-message', () => {
       expect(await el.getProperty('type')).toBe(ODS_MESSAGE_TYPE.success);
       expect(await el.getProperty('color')).toBe(ODS_THEME_COLOR_INTENT.success);
 
-      const icon = await (await page.find('osds-message >>> .message__wrapper')).find('osds-icon');
+      const icon = await (await page.find('osds-message >>> .message_wrapper')).find('osds-icon');
       expect(icon.getAttribute('name')).toBe(ODS_ICON_NAME.SUCCESS_CIRCLE);
     });
 
@@ -52,7 +52,7 @@ describe('e2e:osds-message', () => {
       expect(await el.getProperty('type')).toBe(ODS_MESSAGE_TYPE.info);
       expect(await el.getProperty('color')).toBe(ODS_THEME_COLOR_INTENT.info);
 
-      const icon = await (await page.find('osds-message >>> .message__wrapper')).find('osds-icon');
+      const icon = await (await page.find('osds-message >>> .message_wrapper')).find('osds-icon');
       expect(icon.getAttribute('name')).toBe(ODS_ICON_NAME.INFO_CIRCLE);
     });
 
@@ -61,7 +61,7 @@ describe('e2e:osds-message', () => {
       expect(await el.getProperty('type')).toBe(ODS_MESSAGE_TYPE.warning);
       expect(await el.getProperty('color')).toBe(ODS_THEME_COLOR_INTENT.warning);
 
-      const icon = await (await page.find('osds-message >>> .message__wrapper')).find('osds-icon');
+      const icon = await (await page.find('osds-message >>> .message_wrapper')).find('osds-icon');
       expect(icon.getAttribute('name')).toBe(ODS_ICON_NAME.WARNING_CIRCLE);
     });
 
@@ -70,7 +70,7 @@ describe('e2e:osds-message', () => {
       expect(await el.getProperty('type')).toBe(ODS_MESSAGE_TYPE.error);
       expect(await el.getProperty('color')).toBe(ODS_THEME_COLOR_INTENT.error);
 
-      const icon = await (await page.find('osds-message >>> .message__wrapper')).find('osds-icon');
+      const icon = await (await page.find('osds-message >>> .message_wrapper')).find('osds-icon');
       expect(icon.getAttribute('name')).toBe(ODS_ICON_NAME.ERROR_CIRCLE);
     });
   });
@@ -80,7 +80,7 @@ describe('e2e:osds-message', () => {
       await setup({ attributes: { removable: true } });
       expect(await el.getProperty('removable')).toBe(true);
 
-      const icon = await (await page.find('osds-message >>> .message__close-wrapper')).find('osds-icon');
+      const icon = await (await page.find('osds-message >>> .message_close-wrapper')).find('osds-icon');
       expect(icon.getAttribute('name')).toBe(ODS_ICON_NAME.CLOSE);
     });
   });

packages/storybook/stories/cdk/examples/basic/overlay.basic.stories.tsx

@@ -106,6 +106,7 @@ const Template = (args: any) => {
 
       #alignment {
         display: flex;
+        height: 100vh;
         flex-wrap: wrap;
       }
 

packages/storybook/stories/components/menu/3_demo.stories.ts

@@ -1,5 +1,9 @@
 import { defineCustomElement } from '@ovhcloud/ods-components/dist/components/osds-menu';
 import { html } from 'lit-html';
+import { extractArgTypes, extractStoryParams } from '../../../core/componentHTMLUtils';
+import { applyContentText, positionParams } from '../../../core/commonPositionStoryParams';
+import { styleMap } from 'lit-html/directives/style-map';
+
 
 defineCustomElement();
 
@@ -34,3 +38,41 @@ const TemplateDemo = () => html`
   </osds-menu>
 `;
 export const Demo = TemplateDemo.bind({});
+
+/* Position */
+const TemplatePosition = ({ ...args }) => {
+  return html`
+  <style>
+    #alignment {
+      display: flex;
+      height: 100vh;
+      flex-wrap: wrap;
+    }
+  </style>
+
+  <div id='alignment' style=${styleMap({ placeContent: args.changeAlignment })}>
+    <p>${args.applyContent ? applyContentText : ''}</p>
+    <osds-menu>
+      <osds-button slot='menu-title' color='primary' variant='stroked'>Action menu <osds-icon name='home' size='xs'></osds-icon></osds-button>
+      <osds-menu-group>
+        <osds-text>Group/Text 1</osds-text>
+      </osds-menu-group>
+      <osds-menu-item>
+        <osds-button color='primary' size='sm' variant='ghost' text-align='start' flex><span>Action 1</span></osds-button>
+      </osds-menu-item>
+      <osds-menu-item>
+        <osds-button color='primary' size='sm' variant='ghost' text-align='start' flex><span>Action 2</span></osds-button>
+      </osds-menu-item>
+    </osds-menu>
+    <p>${args.applyContent ? applyContentText : ''}</p>
+  </div>
+`;
+}
+
+export const Position = TemplatePosition.bind({});
+// @ts-ignore
+Position.args = {
+  ...extractStoryParams(positionParams),
+};
+// @ts-ignore
+Position.argTypes = extractArgTypes(positionParams);