Add ID to entropy selector and invalid option for E2E testing (#3172)

I've made some minor changes to `test-snaps` related to the SIP-30
entropy selector.

- Each selector now has a unique ID. Previously the same ID was shared
by multiple components, which is semantically incorrect HTML, and also
makes it more difficult to E2E test.
- I've added an "invalid" option to the selector, to test that we
properly throw errors for entropy sources that don't exist.

Author: Mrtenz

packages/test-snaps/src/features/snaps/bip32/BIP32.tsx

@@ -7,6 +7,7 @@ import { useEntropySelector } from '../get-entropy/hooks';
 
 export const BIP32: FunctionComponent = () => {
   const { selector, source } = useEntropySelector({
+    id: 'bip32',
     snapId: BIP_32_SNAP_ID,
     port: BIP_32_PORT,
   });

packages/test-snaps/src/features/snaps/bip44/BIP44.tsx

@@ -12,6 +12,7 @@ import { useEntropySelector } from '../get-entropy/hooks';
 export const BIP44: FunctionComponent = () => {
   const [invokeSnap, { isLoading, data, error }] = useInvokeMutation();
   const { selector, source } = useEntropySelector({
+    id: 'bip44',
     snapId: BIP_44_SNAP_ID,
     port: BIP_44_PORT,
   });
@@ -62,7 +63,7 @@ export const BIP44: FunctionComponent = () => {
         </span>
       </Result>
 
-      <SignMessage />
+      <SignMessage source={source} />
     </Snap>
   );
 };

packages/test-snaps/src/features/snaps/bip44/components/SignMessage.tsx

@@ -8,7 +8,13 @@ import { Result } from '../../../../components';
 import { getSnapId } from '../../../../utils';
 import { BIP_44_PORT, BIP_44_SNAP_ID } from '../constants';
 
-export const SignMessage: FunctionComponent = () => {
+export type SignMessageProps = {
+  source: string | undefined;
+};
+
+export const SignMessage: FunctionComponent<SignMessageProps> = ({
+  source,
+}) => {
   const [message, setMessage] = useState('');
   const [invokeSnap, { isLoading, data, error }] = useInvokeMutation();
 
@@ -24,6 +30,7 @@ export const SignMessage: FunctionComponent = () => {
       method: 'signMessage',
       params: {
         message,
+        ...(source !== undefined && { source }),
       },
     }).catch(logError);
   };

packages/test-snaps/src/features/snaps/get-entropy/GetEntropy.tsx

@@ -11,6 +11,7 @@ import { Snap } from '../../../components';
 
 export const GetEntropy: FunctionComponent = () => {
   const { selector, source } = useEntropySelector({
+    id: 'get-entropy',
     raw: true,
     snapId: GET_ENTROPY_SNAP_ID,
     port: GET_ENTROPY_PORT,

packages/test-snaps/src/features/snaps/get-entropy/components/EntropySelector.tsx

@@ -5,7 +5,8 @@ import { Result } from '../../../../components';
 
 export type EntropySourcesProps = {
   sources: EntropySource[];
-  raw: boolean;
+  id: string;
+  raw?: boolean | undefined;
   onChange: (source: string | undefined) => void;
 };
 
@@ -27,6 +28,7 @@ function getSourceName(source: EntropySource) {
 
 export const EntropySelector: FunctionComponent<EntropySourcesProps> = ({
   sources,
+  id,
   raw,
   onChange,
 }) => {
@@ -43,7 +45,7 @@ export const EntropySelector: FunctionComponent<EntropySourcesProps> = ({
     <>
       <h3 className="h6">Entropy source</h3>
       <select
-        id="select-chain"
+        id={`${id}-entropy-selector`}
         className="form-select mb-3"
         onChange={handleChange}
       >
@@ -53,10 +55,11 @@ export const EntropySelector: FunctionComponent<EntropySourcesProps> = ({
             {getSourceName(source)}
           </option>
         ))}
+        <option value="invalid">Invalid</option>
       </select>
       {raw && (
         <Result className="mb-3">
-          <pre id="entropySourcesResult" style={{ margin: 0 }}>
+          <pre id={`${id}-raw-entropy-sources`} style={{ margin: 0 }}>
             {JSON.stringify(sources, null, 2)}
           </pre>
         </Result>

packages/test-snaps/src/features/snaps/get-entropy/hooks/useEntropySelector.tsx

@@ -6,10 +6,15 @@ import { getSnapId, useInstalled } from '../../../../utils';
 import { EntropySelector } from '../components';
 
 export type UseEntropySelectorOptions = {
+  /**
+   * The prefix to add to the HTML ID for E2E testing purposes.
+   */
+  id: string;
+
   /**
    * Whether to show the raw list of entropy sources.
    */
-  raw?: boolean;
+  raw?: boolean | undefined;
 
   /**
    * The snap ID to use for the entropy sources.
@@ -28,12 +33,15 @@ export type UseEntropySelectorOptions = {
  * @param options - The options to use.
  * @param options.snapId - The snap ID to use for the entropy sources.
  * @param options.port - The port to use for the entropy sources.
+ * @param options.id - The prefix to add to the HTML ID for E2E testing
+ * purposes.
  * @param options.raw - Whether to show the raw list of entropy sources.
  * @returns The entropy source and selector.
  */
 export const useEntropySelector = ({
   snapId: publicSnapId,
   port,
+  id,
   raw = false,
 }: UseEntropySelectorOptions) => {
   const [source, setSource] = useState<string | undefined>(undefined);
@@ -54,6 +62,8 @@ export const useEntropySelector = ({
   return {
     source,
     sources: data,
-    selector: <EntropySelector sources={data} raw={raw} onChange={setSource} />,
+    selector: (
+      <EntropySelector id={id} sources={data} raw={raw} onChange={setSource} />
+    ),
   };
 };