fix: liveness demo handling

Author: bobbor

examples/next/pages/ui/components/in-app-messaging/demo/index.page.tsx

@@ -2,14 +2,10 @@ import React, { useState } from 'react';
 import { Amplify } from 'aws-amplify';
 import { initializeInAppMessaging } from 'aws-amplify/in-app-messaging';
 import {
-  Button,
-  CheckboxField,
   ColorMode,
   defaultDarkModeOverride,
   Divider,
   Heading,
-  Radio,
-  RadioGroupField,
   ThemeProvider,
   useTheme,
   View,
@@ -27,15 +23,18 @@ initializeInAppMessaging();
 
 function DemoCheckbox({ label, onChange, ...rest }) {
   return (
-    <CheckboxField
-      {...rest}
-      label={label}
-      name={label}
-      onChange={() => {
-        onChange((prev) => !prev);
-      }}
-      value=""
-    />
+    <label>
+      <input
+        disabled={rest.isDisabled}
+        name={label}
+        type="checkbox"
+        checked={rest.checked}
+        onChange={() => {
+          onChange((prev) => !prev);
+        }}
+      />
+      {label}
+    </label>
   );
 }
 
@@ -47,20 +46,24 @@ function DemoDivider() {
 
 function DemoRadioGroup({ data, legend, onChange, ...rest }) {
   return (
-    <RadioGroupField
-      {...rest}
-      legend={legend}
-      name={legend}
-      onChange={(e) => {
-        onChange(e.target.value);
-      }}
-    >
+    <fieldset>
+      <legend>{legend}</legend>
       {data.map((item) => (
-        <Radio key={`${legend}:${item}`} value={item}>
+        <label key={`${legend}:${item}`} style={{ display: 'block' }}>
+          <input
+            onChange={(e) => {
+              onChange(e.target.value);
+            }}
+            disabled={rest.isDisabled}
+            checked={rest.value === item}
+            type="radio"
+            name={legend}
+            value={item}
+          />{' '}
           {item}
-        </Radio>
+        </label>
       ))}
-    </RadioGroupField>
+    </fieldset>
   );
 }
 
@@ -186,16 +189,14 @@ function Content({ colorMode, setColorMode }) {
             <DemoDivider />
           </View>
         </div>
-        <Button margin="medium" onClick={displayDemoMessage}>
-          Display Demo Message
-        </Button>
+        <button onClick={displayDemoMessage}>Display Demo Message</button>
       </div>
     </View>
   );
 }
 
 export default function App() {
-  const [colorMode, setColorMode] = useState<ColorMode>('dark');
+  const [colorMode, setColorMode] = useState<ColorMode>('light');
   return (
     <ThemeProvider
       colorMode={colorMode}

examples/next/pages/ui/components/in-app-messaging/demo/utils.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import * as Analytics from '@aws-amplify/analytics';
 import { syncMessages } from 'aws-amplify/in-app-messaging';
 import {

packages/e2e/cypress/integration/common/in-app-messaging.ts

@@ -9,9 +9,10 @@ Then('I do not see the banner', () => {
 });
 
 Then('the banner has {int} buttons', (buttonCount: number) => {
+  const context = cy.findAllByRole('dialog');
   if (buttonCount > 0) {
-    cy.findByRole('group').children().should('have.length', buttonCount);
+    context.findByRole('group').children().should('have.length', buttonCount);
   } else {
-    cy.findByRole('group').should('not.exist');
+    context.findByRole('group').should('not.exist');
   }
 });

packages/e2e/cypress/integration/ui/components/in-app-messaging/demo/demo.steps.ts

@@ -1,26 +1,30 @@
 import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor';
 
 Given('{string} checkbox is checked', (checkboxName: string) => {
-  cy.findByText(checkboxName)
-    .next()
-    .should('have.attr', 'data-checked', 'true');
+  cy.findByRole('checkbox', { name: checkboxName }).should(
+    'have.prop',
+    'checked',
+    true
+  );
 });
 Given('{string} checkbox is unchecked', (checkboxName: string) => {
-  cy.findByText(checkboxName)
-    .next()
-    .should('have.attr', 'data-checked', 'false');
+  cy.findByRole('checkbox', { name: checkboxName }).should(
+    'have.prop',
+    'checked',
+    false
+  );
 });
 
 Given('{string} layout radio option is selected', (radioOption: string) => {
-  cy.findByText(radioOption).next().should('have.attr', 'checked');
+  cy.findByRole('radio', { name: radioOption }).should('have.attr', 'checked');
 });
 
 When('I click the {string} layout radio option', (radioOption: string) => {
-  cy.findByText(radioOption, { timeout: 5000 }).click();
+  cy.findByRole('radio', { name: radioOption, timeout: 5000 }).click();
 });
 
 When('I toggle {string} checkbox', (checkboxName: string) => {
-  cy.findByText(checkboxName, { timeout: 5000 }).click();
+  cy.findByRole('checkbox', { name: checkboxName, timeout: 5000 }).click();
 });
 
 When('I wait for pinpoint messages to sync', () => {