test: (Section) write section tests

white-label-loyalty · Jan 26, 2025 · b21a4ee · b21a4ee
1 parent bcf11e6
commit b21a4ee
Show file tree

Hide file tree

Showing 6 changed files with 211 additions and 11 deletions.
diff --git a/bin/create-component b/bin/create-component
@@ -103,6 +103,36 @@ Default.args = {
     storyContent
   );
 
+  // Create spec file
+  const specContent = `import React from 'react';
+import { render } from '@testing-library/react-native';
+import ${componentName} from './index';
+
+describe('${componentName}', () => {
+  it('renders correctly', () => {
+    const { getByTestId } = render(<${componentName} />);
+    // Add your test assertions here
+  });
+
+  it('handles props correctly', () => {
+    // Add tests for your component props
+  });
+
+  it('handles user interactions', () => {
+    // Add tests for user interactions
+  });
+
+  it('handles edge cases', () => {
+    // Add tests for edge cases
+  });
+});
+`;
+
+  fs.writeFileSync(
+    path.join(componentDir, `${componentName}.spec.tsx`),
+    specContent
+  );
+
   // Update index file
   const indexFile = path.join(componentsDir, folderName, 'index.ts');
   fs.mkdirSync(path.dirname(indexFile), { recursive: true });

diff --git a/lib/components/atoms/BaseBanner/index.tsx b/lib/components/atoms/BaseBanner/index.tsx
@@ -22,10 +22,11 @@ type BaseBannerProps = {
 
 const BaseBanner = ({ tile, children }: BaseBannerProps): JSX.Element => {
   const { theme } = useWllSdk();
-  const { ctaLink, ctaLinkTarget, title } =
+  const { ctaLink, ctaLinkTarget, title, ctaText } =
     tile.configuration as BannerTileConfig;
 
   const handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
+  const hasCTA = Boolean(ctaText);
 
   return (
     <BannerContext.Provider value={tile}>
@@ -38,11 +39,11 @@ const BaseBanner = ({ tile, children }: BaseBannerProps): JSX.Element => {
             opacity: pressed ? 0.7 : 1,
           },
         ]}
-        onPress={handlePress}
-        disabled={!ctaLink}
+        onPress={hasCTA ? undefined : handlePress}
+        disabled={!ctaLink || hasCTA}
         accessible={true}
-        role="button"
-        accessibilityLabel={`${title}${ctaLink ? ' - Click to open' : ''}`}
+        role={hasCTA ? "article" : "button"}
+        accessibilityLabel={`${title}${!hasCTA && ctaLink ? ' - Click to open' : ''}`}
       >
         {children}
       </Pressable>

diff --git a/lib/components/organisms/Section/Section.spec.tsx b/lib/components/organisms/Section/Section.spec.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { SectionType, TSection } from '../../../types/section';
+import { CTALinkTarget, TileHeight, TileType } from '../../../types/tile';
+import { render } from '../../__test__/test-utils';
+import Section from './index';
+
+const sectionMock: TSection = {
+  details: [],
+  defaultLocale: 'en',
+  name: 'Elite Member Benefits',
+  type: SectionType.Grid,
+  active: true,
+  id: 'a35399a7-580a-4493-afff-24ef4facf3f4',
+  createdAt: '2024-11-19T15:50:37.701Z',
+  updatedAt: '2024-12-06T11:18:16.842Z',
+  priority: 2,
+  tiles: [
+    {
+      tileHeight: TileHeight.Full,
+      active: true,
+      type: TileType.Content,
+      configuration: {
+        defaultLocale: 'en',
+        details: [],
+        ctaLinkTarget: CTALinkTarget.newWindow,
+        locale: 'en',
+        title: 'Welcome to Platinum Status',
+        body: 'Enjoy premium benefits including priority check-in, lounge access, and complimentary upgrades. Your elite journey begins here.',
+        artworkUrl:
+          'https://ucarecdn.com/b129c5c2-08fd-4962-83b1-5c35301148c1/',
+      },
+      id: '6d49d8c5-6fc4-4db6-900d-6dbe2fcf04c2',
+      priority: 7,
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    },
+  ],
+  title: 'Elite Member Benefits',
+  locale: 'en',
+  pointsSuffix: 'miles',
+};
+
+describe('<Section/>', () => {
+  it('matches snapshot', () => {
+    const { container } = render(<Section section={sectionMock} />);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/lib/components/organisms/Section/__snapshots__/Section.spec.tsx.snap b/lib/components/organisms/Section/__snapshots__/Section.spec.tsx.snap
@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Section/> matches snapshot 1`] = `
+<div>
+  <section
+    aria-label="Section: Elite Member Benefits"
+    class="css-view-175oi2r r-marginBottom-1c6w074 r-marginInline-f8sm7e r-maxWidth-q90dru r-width-13qz1uu"
+    role="region"
+  >
+    <div
+      class="css-view-175oi2r"
+    >
+      <div
+        class="css-view-175oi2r r-marginBottom-1ifxtd0"
+      >
+        <div
+          class="css-text-146c3p1 r-fontSize-1ui5ee8 r-marginBottom-5oul0u"
+          dir="auto"
+          style="font-weight: 700; color: rgb(0, 0, 0);"
+        >
+          Elite Member Benefits
+        </div>
+      </div>
+      <div
+        class="css-view-175oi2r r-flexDirection-18u37iz r-flexWrap-1w6e6rj r-width-13qz1uu"
+      >
+        <div
+          class="css-view-175oi2r"
+          style="width: calc(50% - 8px); margin-bottom: 16px; height: auto; margin-right: 16px;"
+        >
+          <div
+            class="css-view-175oi2r r-aspectRatio-1ujkv8a r-flex-13awgt0 r-flexDirection-eqz5dr"
+          >
+            <div
+              class="css-view-175oi2r r-aspectRatio-1ujkv8a r-flex-13awgt0"
+            >
+              <button
+                aria-disabled="true"
+                aria-label="Welcome to Platinum Status"
+                class="css-view-175oi2r r-pointerEvents-12vffkv r-aspectRatio-1ujkv8a r-borderRadius-y47klf r-height-1pi2tsx r-overflow-1udh08x r-position-bnwqim r-width-13qz1uu"
+                disabled=""
+                role="button"
+                style="background-color: rgb(248, 247, 252); opacity: 1; flex-direction: column; justify-content: flex-start; align-items: stretch;"
+                tabindex="-1"
+                type="button"
+              >
+                <button
+                  aria-disabled="true"
+                  aria-label="Welcome to Platinum Status"
+                  class="css-view-175oi2r r-pointerEvents-12vffkv r-aspectRatio-1ujkv8a r-borderRadius-y47klf r-height-1pi2tsx r-overflow-1udh08x r-position-bnwqim r-width-13qz1uu"
+                  disabled=""
+                  role="button"
+                  style="background-color: rgb(248, 247, 252); opacity: 1; flex-direction: column; justify-content: flex-start; align-items: stretch;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="css-view-175oi2r r-alignItems-1awozwy r-height-1pi2tsx r-justifyContent-1777fci r-position-bnwqim r-flexBasis-1t2qqvi r-objectFit-1t7uo4s r-width-13qz1uu"
+                    style="background-color: rgba(57, 46, 215, 0.2);"
+                  >
+                    <div
+                      class="css-view-175oi2r r-bottom-1p0dtai r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af"
+                      style="background-color: rgba(57, 46, 215, 0.2); opacity: 1;"
+                    />
+                    <div
+                      class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010 r-bottom-1p0dtai r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af"
+                      style="opacity: 0;"
+                    >
+                      <div
+                        class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
+                        style="background-image: url(https://ucarecdn.com/b129c5c2-08fd-4962-83b1-5c35301148c1/);"
+                      />
+                      <img
+                        alt=""
+                        class="css-accessibilityImage-9pa8cd"
+                        draggable="false"
+                        src="https://ucarecdn.com/b129c5c2-08fd-4962-83b1-5c35301148c1/"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="css-view-175oi2r r-display-6koalj"
+                    style="justify-content: center;"
+                  >
+                    <div
+                      class="css-view-175oi2r r-flex-13awgt0 r-justifyContent-1777fci r-paddingInline-3o4zer"
+                    >
+                      <div
+                        class="css-view-175oi2r r-alignItems-1awozwy r-flexDirection-18u37iz r-justifyContent-1wtj0ep r-marginBottom-5oul0u"
+                        style="margin-top: 12px;"
+                      >
+                        <div
+                          aria-label="Welcome to Platinum Status"
+                          class="css-text-146c3p1 r-maxWidth-dnmrzs r-overflow-1udh08x r-textOverflow-1udbk01 r-whiteSpace-3s2u2q r-wordWrap-1iln25a"
+                          dir="auto"
+                          style="color: rgb(0, 0, 0); font-size: 24px; font-weight: bold;"
+                        >
+                          Welcome to Platinum Status
+                        </div>
+                      </div>
+                      <div
+                        aria-label="Enjoy premium benefits including priority check-in, lounge access, and complimentary upgrades. Your elite journey begins here."
+                        class="css-text-146c3p1 r-WebkitBoxOrient-8akbws r-display-krxsd3 r-maxWidth-dnmrzs r-overflow-1udh08x r-textOverflow-1udbk01"
+                        dir="auto"
+                        style="color: rgb(51, 51, 51); font-size: 14px;"
+                      >
+                        Enjoy premium benefits including priority check-in, lounge access, and complimentary upgrades. Your elite journey begins here.
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</div>
+`;
diff --git a/lib/components/organisms/Section/index.tsx b/lib/components/organisms/Section/index.tsx
@@ -118,9 +118,9 @@ const Section = ({ section, sectionId }: SectionProps): JSX.Element | null => {
         <View
           style={commonStyles.emptyContainer}
           accessible
-          role="none"
-          accessibilityLabel="Loading section content"
-          accessibilityState={{ busy: true }}
+          role="status"
+          aria-label="Loading section content"
+          aria-busy={true}
         >
           <Skeleton />
         </View>
@@ -147,9 +147,9 @@ const Section = ({ section, sectionId }: SectionProps): JSX.Element | null => {
       <View
         style={styles.section}
         accessible
-        role="none"
-        accessibilityLabel={`Section: ${sectionData.title || 'Untitled section'}`}
-        accessibilityHint={sectionData.description || undefined}
+        role="region"
+        aria-label={`Section: ${sectionData.title || 'Untitled section'}`}
+        aria-description={sectionData.description || undefined}
       >
         {renderSectionContent()}
       </View>

diff --git a/lib/types/tile.ts b/lib/types/tile.ts
@@ -60,6 +60,7 @@ export class ContentTileConfig {
 
 export class RewardTileConfig {
   rewardId: string = '';
+  defaultLocale: string = 'en';
   showPrice: boolean = false;
   showArtwork?: boolean;
   showDetails?: boolean;