@papillonarts/library 0.36.0 → 0.37.0

package/build/array/__tests__/__snapshots__/Array.test.ts.snap

@@ -2,9 +2,58 @@
 
 exports[`<Array /> Render must match features() 1`] = `
 <div>
+  &lt;h1&gt;Array&lt;/h1&gt;
+&lt;blockquote&gt;
+&lt;p&gt;Array all functions&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;pre&gt;&lt;code&gt;# Functions
+  
+
+  <p>
+    &gt; getCurrentIndex(), getIndexItems(), getIndexItemsWithSelected(), getRandomItemFromArray()
+  </p>
+  
+
   <p>
-    mock-file
+    &gt; getSelectedItem(), getSelectedItemText(), getItemsDefaultSelected()
+
+    &lt;/code&gt;
+    &lt;/pre&gt;
   </p>
+  
+
+  &lt;h2&gt;getCurrentIndex()&lt;/h2&gt;
+&lt;blockquote&gt;
+&lt;p&gt;Array getCurrentIndex() function&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;h2&gt;getIndexItems()&lt;/h2&gt;
+&lt;blockquote&gt;
+&lt;p&gt;Array getIndexItems() function&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;h2&gt;getIndexItemsWithSelected()&lt;/h2&gt;
+&lt;blockquote&gt;
+&lt;p&gt;Array getIndexItemsWithSelected() function&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;h2&gt;getRandomItemFromArray()&lt;/h2&gt;
+&lt;blockquote&gt;
+&lt;p&gt;Array getRandomItemFromArray() function&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;h2&gt;getSelectedItem()&lt;/h2&gt;
+&lt;blockquote&gt;
+&lt;p&gt;Array getSelectedItem() function&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;h2&gt;getSelectedItemText()&lt;/h2&gt;
+&lt;blockquote&gt;
+&lt;p&gt;Array getSelectedItemText() function&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;h2&gt;getItemsDefaultSelected()&lt;/h2&gt;
+&lt;blockquote&gt;
+&lt;p&gt;Array getItemsDefaultSelected() function&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;h2&gt;getItemsRandomSelected()&lt;/h2&gt;
+&lt;blockquote&gt;
+&lt;p&gt;Array getItemsRandomSelected() function&lt;/p&gt;
+&lt;/blockquote&gt;
 </div>
 `;
 
@@ -20,18 +69,6 @@ exports[`<Array /> Render must match getCurrentIndex() 1`] = `
       <span>
         
 
-      </span>
-      <span>
-          
-      </span>
-      <span
-        style="color: rgb(101, 115, 126);"
-      >
-        // Papillon Arts Library
-      </span>
-      <span>
-        
-
       </span>
       <span>
           
@@ -1779,7 +1816,7 @@ exports[`<Array /> Render must match getIndexItemsWithSelected() 1`] = `
 </div>
 `;
 
-exports[`<Array /> Render must match getRandomItemFromArray() 1`] = `
+exports[`<Array /> Render must match getItemsDefaultSelected() 1`] = `
 <div>
   <pre
     style="display: block; overflow-x: auto; background: rgb(43, 48, 59); color: rgb(192, 197, 206); padding: 0.5em;"
@@ -1818,7 +1855,7 @@ exports[`<Array /> Render must match getRandomItemFromArray() 1`] = `
         class="hljs-function"
         style="color: rgb(143, 161, 179);"
       >
-        getRandomItemFromArray
+        getItemsDefaultSelected
       </span>
       <span
         class="hljs-function"
@@ -1834,160 +1871,229 @@ exports[`<Array /> Render must match getRandomItemFromArray() 1`] = `
       <span
         class="hljs-function"
       >
-        &gt;(
+         
       </span>
       <span
         class="hljs-function"
-        style="color: rgb(208, 135, 112);"
+        style="color: rgb(143, 161, 179);"
       >
-        array: T[]
+        extends
       </span>
       <span
         class="hljs-function"
       >
-        ): 
+         
       </span>
       <span
         class="hljs-function"
         style="color: rgb(143, 161, 179);"
       >
-        T
+        IIdentifiedSelectable
       </span>
       <span
         class="hljs-function"
       >
-         
+        &gt;(
       </span>
-      <span>
+      <span
+        class="hljs-function"
+        style="color: rgb(208, 135, 112);"
+      >
         {
 
       </span>
-      <span>
-            
+      <span
+        class="hljs-function"
+        style="color: rgb(208, 135, 112);"
+      >
+            defaultItems = 
       </span>
       <span
-        style="color: rgb(180, 142, 173);"
+        class="hljs-function"
+        style="color: rgb(208, 135, 112);"
       >
-        return
+        null
       </span>
-      <span>
-         array?.[
+      <span
+        class="hljs-function"
+        style="color: rgb(208, 135, 112);"
+      >
+        ,
+
       </span>
       <span
+        class="hljs-function"
         style="color: rgb(208, 135, 112);"
       >
-        Math
+            items = 
       </span>
-      <span>
-        .floor(
+      <span
+        class="hljs-function"
+        style="color: rgb(208, 135, 112);"
+      >
+        null
       </span>
       <span
+        class="hljs-function"
         style="color: rgb(208, 135, 112);"
       >
-        Math
+        ,
+
       </span>
-      <span>
-        .random() * array?.length)]
+      <span
+        class="hljs-function"
+        style="color: rgb(208, 135, 112);"
+      >
+          }: {
 
       </span>
-        }
+      <span
+        class="hljs-function"
+        style="color: rgb(208, 135, 112);"
+      >
+            defaultItems?: T[]
 
-      
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(208, 135, 112);"
+      >
+            items?: T[]
 
-      <span>
-          describe(
       </span>
       <span
-        style="color: rgb(163, 190, 140);"
+        class="hljs-function"
+        style="color: rgb(208, 135, 112);"
       >
-        'getRandomItemFromArray()'
+          }
       </span>
-      <span>
-        , 
+      <span
+        class="hljs-function"
+      >
+        ): 
       </span>
       <span
         class="hljs-function"
+        style="color: rgb(143, 161, 179);"
       >
-        () =&gt;
+        T
+      </span>
+      <span
+        class="hljs-function"
+      >
+        [] 
       </span>
       <span>
-         {
+        {
 
       </span>
       <span>
-            beforeEach(
+            
       </span>
       <span
-        class="hljs-function"
+        style="color: rgb(180, 142, 173);"
       >
-        () =&gt;
+        let
       </span>
       <span>
-         {
+         result
 
       </span>
+      
+
       <span>
-              jest.spyOn(
+            
       </span>
       <span
-        style="color: rgb(208, 135, 112);"
+        style="color: rgb(180, 142, 173);"
       >
-        Math
+        if
       </span>
       <span>
-        , 
+         (defaultItems && items) {
+
+      </span>
+            result = [
+
+      <span>
+                
       </span>
       <span
-        style="color: rgb(163, 190, 140);"
+        style="color: rgb(101, 115, 126);"
       >
-        'random'
+        // eslint-disable-next-line no-unsafe-optional-chaining
       </span>
       <span>
-        ).mockImplementation(jest.fn(
+        
+
+      </span>
+      <span>
+                ...defaultItems?.map(
       </span>
       <span
         class="hljs-function"
       >
-        () =&gt;
-      </span>
-      <span>
-         
+        (
       </span>
       <span
+        class="hljs-function"
         style="color: rgb(208, 135, 112);"
       >
-        3
+        { id, name, ...rest }
+      </span>
+      <span
+        class="hljs-function"
+      >
+        ) =&gt;
       </span>
       <span>
-        ))
+         ({
 
       </span>
+                id,
+
       <span>
-              jest.spyOn(
+                  
       </span>
       <span
-        style="color: rgb(208, 135, 112);"
+        class="hljs-attr"
       >
-        Math
+        href
       </span>
       <span>
-        , 
+        : 
       </span>
       <span
         style="color: rgb(163, 190, 140);"
       >
-        'floor'
+        '#url'
       </span>
       <span>
-        ).mockImplementation(jest.fn(
+        ,
+
+      </span>
+      <span>
+                  
       </span>
       <span
-        class="hljs-function"
+        class="hljs-attr"
       >
-        () =&gt;
+        text
       </span>
       <span>
-         
+        : name,
+
+      </span>
+      <span>
+                  
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        isSelected
+      </span>
+      <span>
+        : name === defaultItems[
       </span>
       <span
         style="color: rgb(208, 135, 112);"
@@ -1995,62 +2101,57 @@ exports[`<Array /> Render must match getRandomItemFromArray() 1`] = `
         0
       </span>
       <span>
-        ))
+        ].name,
 
       </span>
-          })
+                ...rest,
 
-      
+              })),
 
       <span>
-            afterEach(
+                
       </span>
       <span
-        class="hljs-function"
+        style="color: rgb(101, 115, 126);"
       >
-        () =&gt;
+        // eslint-disable-next-line no-unsafe-optional-chaining
       </span>
       <span>
-         jest.clearAllMocks())
+        
 
       </span>
-      
-
       <span>
-            test(
+                ...items?.map(
       </span>
       <span
-        style="color: rgb(163, 190, 140);"
+        class="hljs-function"
       >
-        'must return random item from array when array has items'
+        (
       </span>
-      <span>
-        , 
+      <span
+        class="hljs-function"
+        style="color: rgb(208, 135, 112);"
+      >
+        { id, name, ...rest }
       </span>
       <span
         class="hljs-function"
       >
-        () =&gt;
+        ) =&gt;
       </span>
       <span>
-         {
+         ({
 
       </span>
+                id,
+
       <span>
-              
-      </span>
-      <span
-        style="color: rgb(180, 142, 173);"
-      >
-        const
-      </span>
-      <span>
-         array = [{ 
+                  
       </span>
       <span
         class="hljs-attr"
       >
-        fantasticKey1
+        href
       </span>
       <span>
         : 
@@ -2058,67 +2159,1179 @@ exports[`<Array /> Render must match getRandomItemFromArray() 1`] = `
       <span
         style="color: rgb(163, 190, 140);"
       >
-        'fantastic-value-1'
+        '#url'
       </span>
       <span>
-         }, { 
+        ,
+
+      </span>
+      <span>
+                  
       </span>
       <span
         class="hljs-attr"
       >
-        fantasticKey2
+        text
       </span>
       <span>
-        : 
-      </span>
-      <span
-        style="color: rgb(163, 190, 140);"
-      >
-        'fantastic-value-2'
+        : name,
+
       </span>
       <span>
-         }, { 
+                  
       </span>
       <span
         class="hljs-attr"
       >
-        fantasticKey3
+        isSelected
       </span>
       <span>
-        : 
+        : name === items[
       </span>
       <span
-        style="color: rgb(163, 190, 140);"
+        style="color: rgb(208, 135, 112);"
       >
-        'fantastic-value-3'
+        0
       </span>
       <span>
-         }]
+        ].name,
 
       </span>
+                ...rest,
+
+              })),
+
+            ]
+
+          }
+
       
 
       <span>
-              expect(getRandomItemFromArray(array)).toEqual(array[
+            
       </span>
       <span
-        style="color: rgb(208, 135, 112);"
+        style="color: rgb(180, 142, 173);"
       >
-        0
+        if
       </span>
       <span>
-        ])
+         (defaultItems && !items) {
 
       </span>
-          })
-
-      
-
       <span>
-            test(
+              result = 
       </span>
       <span
-        style="color: rgb(163, 190, 140);"
+        style="color: rgb(208, 135, 112);"
+      >
+        null
+      </span>
+      <span>
+        
+
+      </span>
+          }
+
+      
+
+      <span>
+            
+      </span>
+      <span
+        style="color: rgb(180, 142, 173);"
+      >
+        if
+      </span>
+      <span>
+         (!defaultItems && items) {
+
+      </span>
+      <span>
+              result = items?.map(
+      </span>
+      <span
+        class="hljs-function"
+      >
+        (
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(208, 135, 112);"
+      >
+        { id, name, ...rest }
+      </span>
+      <span
+        class="hljs-function"
+      >
+        ) =&gt;
+      </span>
+      <span>
+         ({
+
+      </span>
+              id,
+
+      <span>
+                
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        href
+      </span>
+      <span>
+        : 
+      </span>
+      <span
+        style="color: rgb(163, 190, 140);"
+      >
+        '#url'
+      </span>
+      <span>
+        ,
+
+      </span>
+      <span>
+                
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        text
+      </span>
+      <span>
+        : name,
+
+      </span>
+      <span>
+                
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        isSelected
+      </span>
+      <span>
+        : name === items[
+      </span>
+      <span
+        style="color: rgb(208, 135, 112);"
+      >
+        0
+      </span>
+      <span>
+        ].name,
+
+      </span>
+              ...rest,
+
+            }))
+
+          }
+
+      
+
+      <span>
+            
+      </span>
+      <span
+        style="color: rgb(180, 142, 173);"
+      >
+        if
+      </span>
+      <span>
+         (!defaultItems && !items) {
+
+      </span>
+      <span>
+              result = 
+      </span>
+      <span
+        style="color: rgb(208, 135, 112);"
+      >
+        null
+      </span>
+      <span>
+        
+
+      </span>
+          }
+
+      
+
+      <span>
+            
+      </span>
+      <span
+        style="color: rgb(180, 142, 173);"
+      >
+        return
+      </span>
+      <span>
+         result
+
+      </span>
+        }
+
+    </code>
+  </pre>
+</div>
+`;
+
+exports[`<Array /> Render must match getItemsRandomSelected() 1`] = `
+<div>
+  <pre
+    style="display: block; overflow-x: auto; background: rgb(43, 48, 59); color: rgb(192, 197, 206); padding: 0.5em;"
+  >
+    <code
+      class="language-typescript"
+      style="white-space: pre;"
+    >
+      <span>
+        
+
+      </span>
+      <span>
+          
+      </span>
+      <span
+        style="color: rgb(180, 142, 173);"
+      >
+        export
+      </span>
+      <span>
+         
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(180, 142, 173);"
+      >
+        function
+      </span>
+      <span
+        class="hljs-function"
+      >
+         
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(143, 161, 179);"
+      >
+        getItemsRandomSelected
+      </span>
+      <span
+        class="hljs-function"
+      >
+        &lt;
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(143, 161, 179);"
+      >
+        T
+      </span>
+      <span
+        class="hljs-function"
+      >
+         
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(143, 161, 179);"
+      >
+        extends
+      </span>
+      <span
+        class="hljs-function"
+      >
+         
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(143, 161, 179);"
+      >
+        IIdentifiedSelectable
+      </span>
+      <span
+        class="hljs-function"
+      >
+        &gt;(
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(208, 135, 112);"
+      >
+        { items }: { items: T[] }
+      </span>
+      <span
+        class="hljs-function"
+      >
+        ): 
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(143, 161, 179);"
+      >
+        T
+      </span>
+      <span
+        class="hljs-function"
+      >
+        [] 
+      </span>
+      <span>
+        {
+
+      </span>
+      <span>
+            
+      </span>
+      <span
+        style="color: rgb(180, 142, 173);"
+      >
+        const
+      </span>
+      <span>
+         randomItem: 
+      </span>
+      <span
+        style="color: rgb(208, 135, 112);"
+      >
+        string
+      </span>
+      <span>
+         = getRandomItemFromArray&lt;
+      </span>
+      <span
+        style="color: rgb(208, 135, 112);"
+      >
+        string
+      </span>
+      <span>
+        &gt;(items?.map(
+      </span>
+      <span
+        class="hljs-function"
+      >
+        (
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(208, 135, 112);"
+      >
+        { name }
+      </span>
+      <span
+        class="hljs-function"
+      >
+        ) =&gt;
+      </span>
+      <span>
+         name))
+
+      </span>
+      
+
+      <span>
+            
+      </span>
+      <span
+        style="color: rgb(180, 142, 173);"
+      >
+        let
+      </span>
+      <span>
+         result
+
+      </span>
+      
+
+      <span>
+            
+      </span>
+      <span
+        style="color: rgb(180, 142, 173);"
+      >
+        if
+      </span>
+      <span>
+         (items) {
+
+      </span>
+      <span>
+              result = items.map(
+      </span>
+      <span
+        class="hljs-function"
+      >
+        (
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(208, 135, 112);"
+      >
+        { id, name, ...rest }
+      </span>
+      <span
+        class="hljs-function"
+      >
+        ) =&gt;
+      </span>
+      <span>
+         ({
+
+      </span>
+              id,
+
+      <span>
+                
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        href
+      </span>
+      <span>
+        : 
+      </span>
+      <span
+        style="color: rgb(163, 190, 140);"
+      >
+        '#url'
+      </span>
+      <span>
+        ,
+
+      </span>
+      <span>
+                
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        text
+      </span>
+      <span>
+        : name,
+
+      </span>
+      <span>
+                
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        isSelected
+      </span>
+      <span>
+        : name === randomItem,
+
+      </span>
+              ...rest,
+
+            }))
+
+          }
+
+      
+
+      <span>
+            
+      </span>
+      <span
+        style="color: rgb(180, 142, 173);"
+      >
+        return
+      </span>
+      <span>
+         result
+
+      </span>
+        }
+
+    </code>
+  </pre>
+</div>
+`;
+
+exports[`<Array /> Render must match getRandomItemFromArray() 1`] = `
+<div>
+  <pre
+    style="display: block; overflow-x: auto; background: rgb(43, 48, 59); color: rgb(192, 197, 206); padding: 0.5em;"
+  >
+    <code
+      class="language-typescript"
+      style="white-space: pre;"
+    >
+      <span>
+        
+
+      </span>
+      <span>
+          
+      </span>
+      <span
+        style="color: rgb(180, 142, 173);"
+      >
+        export
+      </span>
+      <span>
+         
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(180, 142, 173);"
+      >
+        function
+      </span>
+      <span
+        class="hljs-function"
+      >
+         
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(143, 161, 179);"
+      >
+        getRandomItemFromArray
+      </span>
+      <span
+        class="hljs-function"
+      >
+        &lt;
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(143, 161, 179);"
+      >
+        T
+      </span>
+      <span
+        class="hljs-function"
+      >
+        &gt;(
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(208, 135, 112);"
+      >
+        array: T[]
+      </span>
+      <span
+        class="hljs-function"
+      >
+        ): 
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(143, 161, 179);"
+      >
+        T
+      </span>
+      <span
+        class="hljs-function"
+      >
+         
+      </span>
+      <span>
+        {
+
+      </span>
+      <span>
+            
+      </span>
+      <span
+        style="color: rgb(180, 142, 173);"
+      >
+        return
+      </span>
+      <span>
+         array?.[
+      </span>
+      <span
+        style="color: rgb(208, 135, 112);"
+      >
+        Math
+      </span>
+      <span>
+        .floor(
+      </span>
+      <span
+        style="color: rgb(208, 135, 112);"
+      >
+        Math
+      </span>
+      <span>
+        .random() * array?.length)]
+
+      </span>
+        }
+
+      
+
+      <span>
+          describe(
+      </span>
+      <span
+        style="color: rgb(163, 190, 140);"
+      >
+        'getRandomItemFromArray()'
+      </span>
+      <span>
+        , 
+      </span>
+      <span
+        class="hljs-function"
+      >
+        () =&gt;
+      </span>
+      <span>
+         {
+
+      </span>
+      <span>
+            beforeEach(
+      </span>
+      <span
+        class="hljs-function"
+      >
+        () =&gt;
+      </span>
+      <span>
+         {
+
+      </span>
+      <span>
+              jest.spyOn(
+      </span>
+      <span
+        style="color: rgb(208, 135, 112);"
+      >
+        Math
+      </span>
+      <span>
+        , 
+      </span>
+      <span
+        style="color: rgb(163, 190, 140);"
+      >
+        'random'
+      </span>
+      <span>
+        ).mockImplementation(jest.fn(
+      </span>
+      <span
+        class="hljs-function"
+      >
+        () =&gt;
+      </span>
+      <span>
+         
+      </span>
+      <span
+        style="color: rgb(208, 135, 112);"
+      >
+        3
+      </span>
+      <span>
+        ))
+
+      </span>
+      <span>
+              jest.spyOn(
+      </span>
+      <span
+        style="color: rgb(208, 135, 112);"
+      >
+        Math
+      </span>
+      <span>
+        , 
+      </span>
+      <span
+        style="color: rgb(163, 190, 140);"
+      >
+        'floor'
+      </span>
+      <span>
+        ).mockImplementation(jest.fn(
+      </span>
+      <span
+        class="hljs-function"
+      >
+        () =&gt;
+      </span>
+      <span>
+         
+      </span>
+      <span
+        style="color: rgb(208, 135, 112);"
+      >
+        0
+      </span>
+      <span>
+        ))
+
+      </span>
+          })
+
+      
+
+      <span>
+            afterEach(
+      </span>
+      <span
+        class="hljs-function"
+      >
+        () =&gt;
+      </span>
+      <span>
+         jest.clearAllMocks())
+
+      </span>
+      
+
+      <span>
+            test(
+      </span>
+      <span
+        style="color: rgb(163, 190, 140);"
+      >
+        'must return random item from array when array has items'
+      </span>
+      <span>
+        , 
+      </span>
+      <span
+        class="hljs-function"
+      >
+        () =&gt;
+      </span>
+      <span>
+         {
+
+      </span>
+      <span>
+              
+      </span>
+      <span
+        style="color: rgb(180, 142, 173);"
+      >
+        const
+      </span>
+      <span>
+         array = [{ 
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        fantasticKey1
+      </span>
+      <span>
+        : 
+      </span>
+      <span
+        style="color: rgb(163, 190, 140);"
+      >
+        'fantastic-value-1'
+      </span>
+      <span>
+         }, { 
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        fantasticKey2
+      </span>
+      <span>
+        : 
+      </span>
+      <span
+        style="color: rgb(163, 190, 140);"
+      >
+        'fantastic-value-2'
+      </span>
+      <span>
+         }, { 
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        fantasticKey3
+      </span>
+      <span>
+        : 
+      </span>
+      <span
+        style="color: rgb(163, 190, 140);"
+      >
+        'fantastic-value-3'
+      </span>
+      <span>
+         }]
+
+      </span>
+      
+
+      <span>
+              expect(getRandomItemFromArray(array)).toEqual(array[
+      </span>
+      <span
+        style="color: rgb(208, 135, 112);"
+      >
+        0
+      </span>
+      <span>
+        ])
+
+      </span>
+          })
+
+      
+
+      <span>
+            test(
+      </span>
+      <span
+        style="color: rgb(163, 190, 140);"
+      >
+        'must return undefined when array has no items'
+      </span>
+      <span>
+        , 
+      </span>
+      <span
+        class="hljs-function"
+      >
+        () =&gt;
+      </span>
+      <span>
+         {
+
+      </span>
+      <span>
+              
+      </span>
+      <span
+        style="color: rgb(180, 142, 173);"
+      >
+        const
+      </span>
+      <span>
+         array = []
+
+      </span>
+      
+
+            expect(getRandomItemFromArray(array)).toBeUndefined()
+
+          })
+
+        })
+
+    </code>
+  </pre>
+</div>
+`;
+
+exports[`<Array /> Render must match getSelectedItem() 1`] = `
+<div>
+  <pre
+    style="display: block; overflow-x: auto; background: rgb(43, 48, 59); color: rgb(192, 197, 206); padding: 0.5em;"
+  >
+    <code
+      class="language-typescript"
+      style="white-space: pre;"
+    >
+      <span>
+        
+
+      </span>
+      <span>
+          
+      </span>
+      <span
+        style="color: rgb(180, 142, 173);"
+      >
+        export
+      </span>
+      <span>
+         
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(180, 142, 173);"
+      >
+        function
+      </span>
+      <span
+        class="hljs-function"
+      >
+         
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(143, 161, 179);"
+      >
+        getSelectedItem
+      </span>
+      <span
+        class="hljs-function"
+      >
+        &lt;
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(143, 161, 179);"
+      >
+        T
+      </span>
+      <span
+        class="hljs-function"
+      >
+         
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(143, 161, 179);"
+      >
+        extends
+      </span>
+      <span
+        class="hljs-function"
+      >
+         
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(143, 161, 179);"
+      >
+        ISelectable
+      </span>
+      <span
+        class="hljs-function"
+      >
+        &gt;(
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(208, 135, 112);"
+      >
+        { items }: { items: T[] }
+      </span>
+      <span
+        class="hljs-function"
+      >
+        ): 
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(143, 161, 179);"
+      >
+        T
+      </span>
+      <span
+        class="hljs-function"
+      >
+         
+      </span>
+      <span>
+        {
+
+      </span>
+      <span>
+            
+      </span>
+      <span
+        style="color: rgb(180, 142, 173);"
+      >
+        return
+      </span>
+      <span>
+         items?.find(
+      </span>
+      <span
+        class="hljs-function"
+      >
+        (
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(208, 135, 112);"
+      >
+        { isSelected }
+      </span>
+      <span
+        class="hljs-function"
+      >
+        ) =&gt;
+      </span>
+      <span>
+         isSelected === 
+      </span>
+      <span
+        style="color: rgb(208, 135, 112);"
+      >
+        true
+      </span>
+      <span>
+        )
+
+      </span>
+        }
+
+      
+
+      <span>
+          describe(
+      </span>
+      <span
+        style="color: rgb(163, 190, 140);"
+      >
+        'getSelectedItem()'
+      </span>
+      <span>
+        , 
+      </span>
+      <span
+        class="hljs-function"
+      >
+        () =&gt;
+      </span>
+      <span>
+         {
+
+      </span>
+      <span>
+            
+      </span>
+      <span
+        style="color: rgb(180, 142, 173);"
+      >
+        const
+      </span>
+      <span>
+         items = [
+
+      </span>
+      <span>
+              { 
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        fantasticKey1
+      </span>
+      <span>
+        : 
+      </span>
+      <span
+        style="color: rgb(163, 190, 140);"
+      >
+        'fantastic-value-1'
+      </span>
+      <span>
+        , 
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        isSelected
+      </span>
+      <span>
+        : 
+      </span>
+      <span
+        style="color: rgb(208, 135, 112);"
+      >
+        true
+      </span>
+      <span>
+         },
+
+      </span>
+      <span>
+              { 
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        fantasticKey2
+      </span>
+      <span>
+        : 
+      </span>
+      <span
+        style="color: rgb(163, 190, 140);"
+      >
+        'fantastic-value-2'
+      </span>
+      <span>
+        , 
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        isSelected
+      </span>
+      <span>
+        : 
+      </span>
+      <span
+        style="color: rgb(208, 135, 112);"
+      >
+        false
+      </span>
+      <span>
+         },
+
+      </span>
+      <span>
+              { 
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        fantasticKey3
+      </span>
+      <span>
+        : 
+      </span>
+      <span
+        style="color: rgb(163, 190, 140);"
+      >
+        'fantastic-value-3'
+      </span>
+      <span>
+        , 
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        isSelected
+      </span>
+      <span>
+        : 
+      </span>
+      <span
+        style="color: rgb(208, 135, 112);"
+      >
+        false
+      </span>
+      <span>
+         },
+
+      </span>
+          ]
+
+      
+
+      <span>
+            test(
+      </span>
+      <span
+        style="color: rgb(163, 190, 140);"
       >
         'must return undefined when array has no items'
       </span>
@@ -2135,7 +3348,152 @@ exports[`<Array /> Render must match getRandomItemFromArray() 1`] = `
 
       </span>
       <span>
-              
+              expect(getSelectedItem({ items })).toBe(items[
+      </span>
+      <span
+        style="color: rgb(208, 135, 112);"
+      >
+        0
+      </span>
+      <span>
+        ])
+
+      </span>
+          })
+
+        })
+
+    </code>
+  </pre>
+</div>
+`;
+
+exports[`<Array /> Render must match getSelectedItemText() 1`] = `
+<div>
+  <pre
+    style="display: block; overflow-x: auto; background: rgb(43, 48, 59); color: rgb(192, 197, 206); padding: 0.5em;"
+  >
+    <code
+      class="language-typescript"
+      style="white-space: pre;"
+    >
+      <span>
+        
+
+      </span>
+      <span>
+          
+      </span>
+      <span
+        style="color: rgb(180, 142, 173);"
+      >
+        export
+      </span>
+      <span>
+         
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(180, 142, 173);"
+      >
+        function
+      </span>
+      <span
+        class="hljs-function"
+      >
+         
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(143, 161, 179);"
+      >
+        getSelectedItemText
+      </span>
+      <span
+        class="hljs-function"
+      >
+        (
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(208, 135, 112);"
+      >
+        { items }
+      </span>
+      <span
+        class="hljs-function"
+      >
+        ) 
+      </span>
+      <span>
+        {
+
+      </span>
+      <span>
+            
+      </span>
+      <span
+        style="color: rgb(180, 142, 173);"
+      >
+        return
+      </span>
+      <span>
+         items?.find(
+      </span>
+      <span
+        class="hljs-function"
+      >
+        (
+      </span>
+      <span
+        class="hljs-function"
+        style="color: rgb(208, 135, 112);"
+      >
+        { isSelected }
+      </span>
+      <span
+        class="hljs-function"
+      >
+        ) =&gt;
+      </span>
+      <span>
+         isSelected === 
+      </span>
+      <span
+        style="color: rgb(208, 135, 112);"
+      >
+        true
+      </span>
+      <span>
+        )?.text
+
+      </span>
+        }
+
+      
+
+      <span>
+          describe(
+      </span>
+      <span
+        style="color: rgb(163, 190, 140);"
+      >
+        'getSelectedItemText()'
+      </span>
+      <span>
+        , 
+      </span>
+      <span
+        class="hljs-function"
+      >
+        () =&gt;
+      </span>
+      <span>
+         {
+
+      </span>
+      <span>
+            
       </span>
       <span
         style="color: rgb(180, 142, 173);"
@@ -2143,13 +3501,153 @@ exports[`<Array /> Render must match getRandomItemFromArray() 1`] = `
         const
       </span>
       <span>
-         array = []
+         items = [
+
+      </span>
+      <span>
+              { 
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        text
+      </span>
+      <span>
+        : 
+      </span>
+      <span
+        style="color: rgb(163, 190, 140);"
+      >
+        'fantastic-text-1'
+      </span>
+      <span>
+        , 
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        isSelected
+      </span>
+      <span>
+        : 
+      </span>
+      <span
+        style="color: rgb(208, 135, 112);"
+      >
+        true
+      </span>
+      <span>
+         },
+
+      </span>
+      <span>
+              { 
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        text
+      </span>
+      <span>
+        : 
+      </span>
+      <span
+        style="color: rgb(163, 190, 140);"
+      >
+        'fantastic-text-2'
+      </span>
+      <span>
+        , 
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        isSelected
+      </span>
+      <span>
+        : 
+      </span>
+      <span
+        style="color: rgb(208, 135, 112);"
+      >
+        false
+      </span>
+      <span>
+         },
+
+      </span>
+      <span>
+              { 
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        text
+      </span>
+      <span>
+        : 
+      </span>
+      <span
+        style="color: rgb(163, 190, 140);"
+      >
+        'fantastic-text-3'
+      </span>
+      <span>
+        , 
+      </span>
+      <span
+        class="hljs-attr"
+      >
+        isSelected
+      </span>
+      <span>
+        : 
+      </span>
+      <span
+        style="color: rgb(208, 135, 112);"
+      >
+        false
+      </span>
+      <span>
+         },
 
       </span>
+          ]
+
       
 
-            expect(getRandomItemFromArray(array)).toBeUndefined()
+      <span>
+            test(
+      </span>
+      <span
+        style="color: rgb(163, 190, 140);"
+      >
+        'must return undefined when array has no items'
+      </span>
+      <span>
+        , 
+      </span>
+      <span
+        class="hljs-function"
+      >
+        () =&gt;
+      </span>
+      <span>
+         {
+
+      </span>
+      <span>
+              expect(getSelectedItemText({ items })).toBe(items[
+      </span>
+      <span
+        style="color: rgb(208, 135, 112);"
+      >
+        0
+      </span>
+      <span>
+        ].text)
 
+      </span>
           })
 
         })