@lumx/react 3.0.3 → 3.0.4-alpha.1

package/src/components/user-block/__snapshots__/UserBlock.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<UserBlock> Snapshots and structure should render story 'Clickable' 1`] = `
-Array [
+[
   <div
     className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
   >
@@ -13,7 +13,7 @@ Array [
       size="m"
       theme="light"
       thumbnailProps={
-        Object {
+        {
           "tabIndex": -1,
         }
       }
@@ -55,14 +55,14 @@ Array [
       className="lumx-user-block__avatar"
       image="/demo-assets/avatar1.jpg"
       linkProps={
-        Object {
+        {
           "href": "https://example.com",
         }
       }
       size="m"
       theme="light"
       thumbnailProps={
-        Object {
+        {
           "tabIndex": -1,
         }
       }
@@ -107,7 +107,7 @@ Array [
       size="m"
       theme="light"
       thumbnailProps={
-        Object {
+        {
           "tabIndex": -1,
         }
       }
@@ -157,7 +157,7 @@ exports[`<UserBlock> Snapshots and structure should render story 'Default' 1`] =
     size="m"
     theme="light"
     thumbnailProps={
-      Object {
+      {
         "tabIndex": -1,
       }
     }
@@ -191,7 +191,7 @@ exports[`<UserBlock> Snapshots and structure should render story 'Default' 1`] =
 `;
 
 exports[`<UserBlock> Snapshots and structure should render story 'Sizes' 1`] = `
-Array [
+[
   <div
     className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-s lumx-user-block--theme-light"
     onMouseEnter={[Function]}
@@ -204,7 +204,7 @@ Array [
       size="s"
       theme="light"
       thumbnailProps={
-        Object {
+        {
           "tabIndex": -1,
         }
       }
@@ -231,7 +231,7 @@ Array [
       size="m"
       theme="light"
       thumbnailProps={
-        Object {
+        {
           "tabIndex": -1,
         }
       }
@@ -274,7 +274,7 @@ Array [
       size="l"
       theme="light"
       thumbnailProps={
-        Object {
+        {
           "tabIndex": -1,
         }
       }
@@ -328,7 +328,7 @@ exports[`<UserBlock> Snapshots and structure should render story 'WithBadge' 1`]
     size="m"
     theme="light"
     thumbnailProps={
-      Object {
+      {
         "tabIndex": -1,
       }
     }

package/src/stories/generated/Dropdown/Demos.stories.tsx

@@ -4,4 +4,5 @@
 export default { title: 'LumX components/dropdown/Dropdown Demos' };
 
 export { App as Default } from './default';
+export { App as Selects } from './selects';
 export { App as Target } from './target';

package/src/testing/utils/commonTestsSuiteRTL.ts

@@ -0,0 +1,55 @@
+import isEmpty from 'lodash/isEmpty';
+
+import { GenericProps } from '@lumx/react/utils/type';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
+
+interface CommonSetup {
+    props: GenericProps;
+    container: HTMLElement;
+}
+
+interface Options<S extends CommonSetup> {
+    baseClassName: string;
+    forwardClassName?: keyof S;
+    forwardAttributes?: keyof S;
+}
+
+type SetupFunction<S extends CommonSetup> = (props?: GenericProps) => S;
+
+/**
+ * Common tests on components
+ * - Check base class name and class name forwarding
+ * - Check props forwarding
+ */
+export function commonTestsSuiteRTL<S extends CommonSetup>(setup: SetupFunction<S>, options: Options<S>): void {
+    if (isEmpty(options)) {
+        return;
+    }
+    const { baseClassName, forwardClassName, forwardAttributes } = options;
+    describe('Common tests suite', () => {
+        it('should render with base class name', () => {
+            const { container } = setup();
+            expect(queryByClassName(container, baseClassName)).toBeInTheDocument();
+        });
+
+        if (forwardClassName) {
+            it('should forward any CSS class', () => {
+                const modifiedProps = {
+                    className: 'component component--is-tested',
+                };
+                const wrappers = setup(modifiedProps);
+                expect(wrappers[forwardClassName]).toHaveClass(modifiedProps.className);
+            });
+        }
+
+        if (forwardAttributes) {
+            it('should forward any other prop', () => {
+                const modifiedProps = {
+                    winter: 'is coming',
+                };
+                const wrappers = setup(modifiedProps);
+                expect(wrappers[forwardAttributes]).toHaveAttribute('winter', modifiedProps.winter);
+            });
+        }
+    });
+}

package/src/testing/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './commonTestsSuite';
+export * from './commonTestsSuiteRTL';
 
 export * from './itShouldRenderStories';

package/src/testing/utils/queries.ts

@@ -0,0 +1,19 @@
+import { buildQueries } from '@testing-library/react';
+
+export const queryAllByClassName = (container: HTMLElement, className: string) =>
+    Array.from(container.getElementsByClassName(className) as HTMLCollectionOf<HTMLElement>);
+
+export const [queryByClassName, getAllByClassName, getByClassName, findAllByClassName, findByClassName] = buildQueries(
+    queryAllByClassName,
+    (_, className) => `Multiple \`.${className}\` found`,
+    (_, className) => `No \`.${className}\` found`,
+);
+
+export const queryAllByTagName = (container: HTMLElement, tagName: string) =>
+    Array.from(container.getElementsByTagName(tagName) as HTMLCollectionOf<HTMLElement>);
+
+export const [queryByTagName, getAllByTagName, getByTagName, findAllByTagName, findByTagName] = buildQueries(
+    queryAllByTagName,
+    (_, tagName) => `Multiple \`${tagName}\` found`,
+    (_, tagName) => `No \`${tagName}\` found`,
+);

package/src/utils/focus/getFocusableElements.test.ts

@@ -17,7 +17,7 @@ describe(getFocusableElements.name, () => {
         const element = htmlToElement(`<div><button /></div>`);
         const focusable = getFocusableElements(element);
         expect(focusable).toMatchInlineSnapshot(`
-            Array [
+            [
               <button />,
             ]
         `);
@@ -28,7 +28,7 @@ describe(getFocusableElements.name, () => {
             const element = htmlToElement(`<div><input /></div>`);
             const focusable = getFocusableElements(element);
             expect(focusable).toMatchInlineSnapshot(`
-                Array [
+                [
                   <input />,
                 ]
             `);
@@ -38,7 +38,7 @@ describe(getFocusableElements.name, () => {
             const element = htmlToElement(`<div><a href="#" /></div>`);
             const focusable = getFocusableElements(element);
             expect(focusable).toMatchInlineSnapshot(`
-                Array [
+                [
                   <a
                     href="#"
                   />,
@@ -50,7 +50,7 @@ describe(getFocusableElements.name, () => {
             const element = htmlToElement(`<div><textarea /></div>`);
             const focusable = getFocusableElements(element);
             expect(focusable).toMatchInlineSnapshot(`
-                Array [
+                [
                   <textarea>
                     &lt;/div&gt;
                   </textarea>,
@@ -62,7 +62,7 @@ describe(getFocusableElements.name, () => {
             const element = htmlToElement(`<div><span tabindex="0" /></div>`);
             const focusable = getFocusableElements(element);
             expect(focusable).toMatchInlineSnapshot(`
-                Array [
+                [
                   <span
                     tabindex="0"
                   />,
@@ -74,7 +74,7 @@ describe(getFocusableElements.name, () => {
             const element = htmlToElement(`<div><button disabled="false" /><button /></div>`);
             const focusable = getFocusableElements(element);
             expect(focusable).toMatchInlineSnapshot(`
-                Array [
+                [
                   <button
                     disabled="false"
                   />,
@@ -87,7 +87,7 @@ describe(getFocusableElements.name, () => {
             const element = htmlToElement(`<div><button aria-disabled="false" /><button /></div>`);
             const focusable = getFocusableElements(element);
             expect(focusable).toMatchInlineSnapshot(`
-                Array [
+                [
                   <button
                     aria-disabled="false"
                   />,
@@ -102,7 +102,7 @@ describe(getFocusableElements.name, () => {
             const element = htmlToElement(`<div><button disabled /><button /></div>`);
             const focusable = getFocusableElements(element);
             expect(focusable).toMatchInlineSnapshot(`
-                Array [
+                [
                   <button />,
                 ]
             `);
@@ -112,7 +112,7 @@ describe(getFocusableElements.name, () => {
             const element = htmlToElement(`<div><button aria-disabled /><button /></div>`);
             const focusable = getFocusableElements(element);
             expect(focusable).toMatchInlineSnapshot(`
-                Array [
+                [
                   <button />,
                 ]
             `);
@@ -122,7 +122,7 @@ describe(getFocusableElements.name, () => {
             const element = htmlToElement(`<div><button tabindex="-1" /><button /></div>`);
             const focusable = getFocusableElements(element);
             expect(focusable).toMatchInlineSnapshot(`
-                Array [
+                [
                   <button />,
                 ]
             `);
@@ -132,7 +132,7 @@ describe(getFocusableElements.name, () => {
             const element = htmlToElement(`<div><input type="hidden" /><button /></div>`);
             const focusable = getFocusableElements(element);
             expect(focusable).toMatchInlineSnapshot(`
-                Array [
+                [
                   <button />,
                 ]
             `);
@@ -142,7 +142,7 @@ describe(getFocusableElements.name, () => {
             const element = htmlToElement(`<div><input hidden /><button /></div>`);
             const focusable = getFocusableElements(element);
             expect(focusable).toMatchInlineSnapshot(`
-                Array [
+                [
                   <button />,
                 ]
             `);