Merge pull request #1512 from appknox/PD-1621-storeknox-discovery-pag…

…es-testing

storeknox discovery pages testing

app/components/ak-svg/storeknox-playstore-logo.hbs

@@ -4,6 +4,7 @@
   viewBox='0 0 20 20'
   fill='none'
   xmlns='http://www.w3.org/2000/svg'
+  ...attributes
 >
   <path
     d='M3.28277 14.2383C2.41746 14.2387 1.71434 13.5347 1.71418 12.6695L1.71387 7.86653C1.71355 7.00216 2.41652 6.29825 3.28074 6.2981C3.7009 6.29778 4.09434 6.46075 4.3909 6.757C4.68746 7.05325 4.85059 7.44732 4.8509 7.86622L4.85043 12.6693C4.85152 13.0879 4.68887 13.4817 4.39246 13.7778C4.09684 14.0747 3.7023 14.2381 3.28277 14.2383ZM3.28152 6.7195C2.64824 6.71919 2.13496 7.23372 2.1348 7.86653L2.13559 12.669C2.13574 13.304 2.64996 13.8165 3.28262 13.8172C3.91652 13.8164 4.42996 13.3039 4.42934 12.6692V7.86591C4.42902 7.23325 3.91512 6.71919 3.28152 6.7195Z'

app/components/ak-svg/storeknox-search-apps.hbs

@@ -4,6 +4,7 @@
   viewBox='0 0 282 232'
   fill='none'
   xmlns='http://www.w3.org/2000/svg'
+  ...attributes
 >
   <g filter='url(#filter0_d_1285_11312)'>
     <path

app/components/storeknox/discover/index.hbs

@@ -3,13 +3,17 @@
   @spacing='0.5'
   local-class='header-storeknox-discover-page'
 >
-  <AkTypography @variant='subtitle1'>
+  <AkTypography
+    @variant='subtitle1'
+    data-test-storeknoxDiscover-header-discoverHeaderText
+  >
     {{t 'storeknox.discoverHeader'}}
   </AkTypography>
 
   <AkTypography
     @variant='body2'
     local-class='description-storeknox-discover-page'
+    data-test-storeknoxDiscover-header-discoverDescriptionText
   >
     {{t 'storeknox.discoverDescription'}}
   </AkTypography>
@@ -23,6 +27,7 @@
       @currentWhen={{item.activeRoutes}}
       @hasBadge={{item.hasBadge}}
       @badgeCount={{item.badgeCount}}
+      data-test-storeknox-discovery-tabs='{{item.id}}-tab'
     >
       {{item.label}}
     </Akt.tabItem>

app/components/storeknox/discover/index.ts

@@ -17,7 +17,7 @@ export default class StoreknoxDiscoverComponent extends Component {
   constructor(owner: unknown, args: object) {
     super(owner, args);
 
-    if (!this.me.org?.is_admin) {
+    if (!this.me.org?.is_owner) {
       this.showWelcomeModal = false;
     }
   }
@@ -29,19 +29,11 @@ export default class StoreknoxDiscoverComponent extends Component {
         route: 'authenticated.storeknox.discover.result',
         label: this.intl.t('storeknox.discoveryResults'),
       },
-      this.me.org?.is_admin
-        ? {
-            id: 'pending-review',
-            route: 'authenticated.storeknox.discover.review',
-            label: this.intl.t('storeknox.pendingReview'),
-            hasBadge: true,
-            badgeCount: this.skPendingReview.totalCount,
-          }
-        : {
-            id: 'requested-apps',
-            route: 'authenticated.storeknox.discover.requested',
-            label: this.intl.t('storeknox.requestedApps'),
-          },
+      !this.me.org?.is_owner && {
+        id: 'requested-apps',
+        route: 'authenticated.storeknox.discover.requested',
+        label: this.intl.t('storeknox.requestedApps'),
+      },
     ].filter(Boolean);
   }
 

app/components/storeknox/discover/requested-apps/index.hbs

@@ -3,17 +3,29 @@
     @direction='column'
     @alignItems='center'
     local-class='empty-container'
+    data-test-storeknoxDiscover-requestedAppsTable-tableEmpty
   >
-    <AkSvg::ProjectListEmpty />
+    <AkSvg::ProjectListEmpty
+      data-test-storeknoxDiscover-requestedAppsTable-tableEmptyIllustration
+    />
 
-    <AkTypography @variant='h5' @gutterBottom={{true}} local-class='header'>
+    <AkTypography
+      @variant='h5'
+      @gutterBottom={{true}}
+      local-class='header'
+      data-test-storeknoxDiscover-requestedAppsTable-tableEmptyHeaderText
+    >
       {{t 'storeknox.noRequestedAppsFound'}}
     </AkTypography>
 
-    <AkTypography local-class='body-text'>
+    <AkTypography
+      local-class='body-text'
+      data-test-storeknoxDiscover-requestedAppsTable-tableEmptyHeaderDescription
+    >
       {{t 'storeknox.noRequestedAppsFoundDescription' htmlSafe=true}}
     </AkTypography>
   </AkStack>
+
 {{else}}
   <AkPaginationProvider
     @results={{this.requestedAppsData}}
@@ -41,7 +53,11 @@
         </h.row>
       </tb.head>
       <tb.body @rows={{pgc.currentPageResults}} as |b|>
-        <b.row as |r|>
+        <b.row
+          data-test-storeknoxDiscover-requestedAppsTable-row
+          data-test-storeknoxDiscover-requestedAppsTable-rowId='{{b.rowValue.id}}'
+          as |r|
+        >
           <r.cell>
             {{#let (component r.columnValue.cellComponent) as |Component|}}
               <Component

app/components/storeknox/discover/requested-apps/index.ts

@@ -74,7 +74,7 @@ export default class StoreknoxDiscoverRequestedAppsComponent extends Component<S
       }
 
       try {
-        this.skRequestedAppData = (await this.store.query('skRequestedApp', {
+        this.skRequestedAppData = (await this.store.query('sk-requested-app', {
           limit,
           offset,
         })) as SkRequestedAppResponse;

app/components/storeknox/discover/requested-apps/status/index.hbs

@@ -3,19 +3,29 @@
     @label={{t 'storeknox.waitingForApproval'}}
     @variant='semi-filled'
     @color='success'
+    data-test-storeknoxDiscover-requestedAppsTable-row-waitingForApprovalChip
   >
     <:icon>
-      <AkIcon @iconName='schedule-send' />
+      <AkIcon
+        @iconName='schedule-send'
+        data-test-storeknoxDiscover-requestedAppsTable-row-waitingForApprovalChipIcon
+      />
     </:icon>
   </AkChip>
 {{else}}
-  <AkStack @justifyContent='center' @direction='column'>
+  <AkStack
+    @justifyContent='center'
+    @direction='column'
+    data-test-storeknoxDiscover-requestedAppsTable-row-approvalOrRejectedInfoContainer
+  >
     <AkTypography @color={{this.statusDetails.color}}>
       {{this.statusDetails.text}}
     </AkTypography>
 
     <AkStack @alignItems='center' @spacing='0.5'>
-      <AkTypography>
+      <AkTypography
+        data-test-storeknoxDiscover-requestedAppsTable-row-approvalOrRejectedUserInfo
+      >
         {{t 'by'}}
         {{this.statusDetails.by}}
       </AkTypography>
@@ -25,14 +35,21 @@
           <AkStack @spacing='0.5' @alignItems='center'>
             <AkIcon @iconName='check-circle' @size='small' />
 
-            <AkTypography @color='inherit'>
+            <AkTypography
+              @color='inherit'
+              data-test-storeknoxDiscover-requestedAppsTable-row-approvalOrRejectedDate
+            >
               {{this.statusDetails.date}}
             </AkTypography>
           </AkStack>
         </:tooltipContent>
 
         <:default>
-          <AkIcon @iconName='info' local-class='info-icon' />
+          <AkIcon
+            @iconName='info'
+            local-class='info-icon'
+            data-test-storeknoxDiscover-requestedAppsTable-row-approvalOrRejectedDateTooltipIcon
+          />
         </:default>
       </AkTooltip>
     </AkStack>

app/components/storeknox/discover/results/empty/index.hbs

@@ -1,12 +1,26 @@
-<AkStack @direction='column' @alignItems='center' local-class='empty-container'>
+<AkStack
+  @direction='column'
+  @alignItems='center'
+  local-class='empty-container'
+  data-test-storeknoxDiscover-resultsEmptyContainer
+>
+  <AkSvg::StoreknoxSearchApps
+    data-test-storeknoxDiscover-resultsEmptyIllustration
+  />
 
-  <AkSvg::StoreknoxSearchApps />
-
-  <AkTypography @variant='h5' @gutterBottom={{true}} local-class='header'>
+  <AkTypography
+    @variant='h5'
+    @gutterBottom={{true}}
+    local-class='header'
+    data-test-storeknoxDiscover-resultsEmptyHeaderText
+  >
     {{t 'storeknox.searchForApps'}}
   </AkTypography>
 
-  <AkTypography local-class='body-text'>
+  <AkTypography
+    local-class='body-text'
+    data-test-storeknoxDiscover-resultsEmptyDescriptionText
+  >
     {{t 'storeknox.searchForAppsDescription'}}
   </AkTypography>
 </AkStack>

app/components/storeknox/discover/results/index.hbs

@@ -4,28 +4,48 @@
       <AkTextField
         @placeholder={{t 'storeknox.searchQuery'}}
         @value={{this.searchQuery}}
+        data-test-storeknoxDiscover-results-searchQueryInput
       >
         <:rightAdornment>
           {{#if this.searchQuery}}
-            <AkIconButton @size='small' {{on 'click' this.clearSearch}}>
+            <AkIconButton
+              @size='small'
+              {{on 'click' this.clearSearch}}
+              data-test-storeknoxDiscover-results-searchClearIcon
+            >
               <AkIcon @iconName='close' />
             </AkIconButton>
           {{else}}
-            <AkIcon @iconName='search' @color='textSecondary' />
+            <AkIcon
+              @iconName='search'
+              @color='textSecondary'
+              data-test-storeknoxDiscover-results-searchIcon
+            />
           {{/if}}
         </:rightAdornment>
       </AkTextField>
     </div>
 
-    <AkButton @type='submit' @disabled={{not this.searchQuery}}>
+    <AkButton
+      @type='submit'
+      @disabled={{not this.searchQuery}}
+      data-test-storeknoxDiscover-results-searchTrigger
+    >
       {{t 'storeknox.discoverHeader'}}
     </AkButton>
   </AkStack>
 </form>
 
-<AkStack @alignItems='center' local-class='disclaimer-section'>
+<AkStack
+  @alignItems='center'
+  local-class='disclaimer-section'
+  data-test-storeknoxDiscover-results-disclaimerInfoSection
+>
   <AkStack local-class='warning-icon' class='p-1'>
-    <AkIcon @iconName='warning' />
+    <AkIcon
+      @iconName='warning'
+      data-test-storeknoxDiscover-results-disclaimerInfoWarningIcon
+    />
   </AkStack>
 
   <AkTypography @fontWeight='medium' class='ml-2'>
@@ -42,6 +62,7 @@
     @typographyFontWeight='bold'
     class='ml-1'
     {{on 'click' this.viewMore}}
+    data-test-storeknoxDiscover-results-viewMoreDisclaimerInfo
   >
     {{t 'viewMore'}}
   </AkButton>
@@ -54,7 +75,6 @@
     @goToPage={{this.goToPage}}
     @onItemPerPageChange={{this.onItemPerPageChange}}
     @skDiscoveryResultData={{this.skDiscoveryResultData}}
-    @selectedResults={{this.selectedResults}}
   />
 {{else}}
   <Storeknox::Discover::Results::Empty />
@@ -68,9 +88,15 @@
       class='pr-1'
       as |ab|
     >
-      <AkStack @alignItems='center'>
+      <AkStack
+        @alignItems='center'
+        data-test-storeknoxDiscover-results-disclaimerModalHeaderContainer
+      >
         <AkStack local-class='warning-icon' class='p-1'>
-          <AkIcon @iconName='warning' />
+          <AkIcon
+            @iconName='warning'
+            data-test-storeknoxDiscover-results-disclaimerModalWarningIcon
+          />
         </AkStack>
 
         <AkTypography
@@ -87,19 +113,26 @@
         class={{ab.classes.defaultIconBtn}}
         {{on 'click' this.closeDisclaimerModal}}
         @size='small'
+        data-test-storeknoxDiscover-results-disclaimerModalCloseBtn
       >
-        <AkIcon @iconName='close' />
+        <AkIcon
+          @iconName='close'
+          data-test-storeknoxDiscover-results-disclaimerModalCloseBtnIcon
+        />
       </AkIconButton>
     </AkAppbar>
 
     <AkStack @direction='column' @alignItems='center' class='p-3'>
-      <AkTypography @variant='h5'>
+      <AkTypography
+        @variant='h5'
+        data-test-storeknoxDiscover-results-disclaimerModalHeaderText
+      >
         {{t 'storeknox.disclaimerHeader'}}
       </AkTypography>
 
       <AkDivider @color='dark' class='my-2' />
 
-      <AkTypography>
+      <AkTypography data-test-storeknoxDiscover-results-disclaimerModalBodyText>
         {{t 'storeknox.disclaimerBody' htmlSafe=true}}
       </AkTypography>
     </AkStack>

app/components/storeknox/discover/results/index.ts

@@ -1,19 +1,17 @@
-import Component from '@glimmer/component';
+// eslint-disable-next-line ember/use-ember-data-rfc-395-imports
+import type { DS } from 'ember-data';
+import { task } from 'ember-concurrency';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
 import type RouterService from '@ember/routing/router-service';
 import type Store from '@ember-data/store';
 import type IntlService from 'ember-intl/services/intl';
-// eslint-disable-next-line ember/use-ember-data-rfc-395-imports
-import type { DS } from 'ember-data';
-import { task } from 'ember-concurrency';
 
+import parseError from 'irene/utils/parse-error';
 import type { StoreknoxDiscoveryResultQueryParam } from 'irene/routes/authenticated/storeknox/discover/result';
 import type SkDiscoverySearchResultModel from 'irene/models/sk-discovery-result';
-import parseError from 'irene/utils/parse-error';
-import type MeService from 'irene/services/me';
-import type SkPendingReviewService from 'irene/services/sk-pending-review';
 
 export type SkDiscoveryResultResponse =
   DS.AdapterPopulatedRecordArray<SkDiscoverySearchResultModel> & {
@@ -34,11 +32,10 @@ interface LimitOffset {
 export default class StoreknoxDiscoverResultsComponent extends Component<StoreknoxDiscoverResultsSignature> {
   @service declare store: Store;
   @service declare router: RouterService;
-  @service('notifications') declare notify: NotificationService;
   @service declare intl: IntlService;
+
+  @service('notifications') declare notify: NotificationService;
   @service('browser/window') declare window: Window;
-  @service declare me: MeService;
-  @service declare skPendingReview: SkPendingReviewService;
 
   @tracked searchQuery = '';
   @tracked showDiscoveryResults = false;
@@ -62,10 +59,6 @@ export default class StoreknoxDiscoverResultsComponent extends Component<Storekn
 
       this.searchQuery = app_query;
     }
-
-    if (this.me.org?.is_admin) {
-      this.skPendingReview.fetchPendingReviewApps.perform(10, 0, false);
-    }
   }
 
   @action