Fixed Test cases

app/components/file-compare/file-overview/file-details/index.hbs

@@ -1,6 +1,10 @@
 {{!@glint-nocheck }}
 
-<AkStack @width='full' @justifyContent='space-between' class='px-2 py-1'>
+<AkStack
+  @width='full'
+  @justifyContent='space-between'
+  local-class='file-overview-details'
+>
   <AkStack>
     {{#unless @file.isActive}}
       <AkTooltip
@@ -34,15 +38,13 @@
   </AkStack>
 
   <AkStack @spacing='1'>
-    <div data-test-fileCompare-fileOverview-platformIcon>
-      {{#if @file.project.isIos}}
-        <AkSvg::IosIcon />
-      {{/if}}
+    {{#if @file.project.isIos}}
+      <AkSvg::IosIcon data-test-fileCompare-fileOverview-platformIcon />
+    {{/if}}
 
-      {{#if @file.project.isAndroid}}
-        <AkSvg::AndroidIcon />
-      {{/if}}
-    </div>
+    {{#if @file.project.isAndroid}}
+      <AkSvg::AndroidIcon data-test-fileCompare-fileOverview-platformIcon />
+    {{/if}}
 
     {{#if @file.submission.url}}
       <AkTooltip
@@ -75,7 +77,11 @@
 
 <AkDivider @color='dark' />
 
-<AkStack @width='full' @justifyContent='space-between' class='px-2 py-1'>
+<AkStack
+  @width='full'
+  @justifyContent='space-between'
+  local-class='file-overview-details'
+>
   <AkStack data-test-fileCompare-fileOverview-version>
     {{#if @file.version}}
       <AkTypography @variant='body1' @color='textSecondary'>

app/components/file-compare/file-overview/file-details/index.scss

@@ -53,3 +53,7 @@
   height: 16px;
   width: 16px;
 }
+
+.file-overview-details {
+  padding: 0.57em 1.285em;
+}

app/components/file-compare/file-overview/header/index.hbs

@@ -6,7 +6,6 @@
   @alignItems='center'
   @justifyContent='space-between'
   local-class='file-overview-header'
-  class='p-2'
   data-test-fileCompare-fileOverview-header
 >
   <AkStack @spacing='1' @alignItems='center'>

app/components/file-compare/file-overview/header/index.scss

@@ -1,6 +1,7 @@
 .file-overview-header {
   background-color: var(--file-compare-file-overview-background-grey);
   border-bottom: 1px solid var(--file-compare-file-overview-border-color-dark);
+  padding: 1em 1.285em;
 
   .file-icon {
     min-width: 44px;

app/components/file-compare/file-overview/header/index.ts

@@ -37,7 +37,7 @@ export default class FileCompareFileOverviewHeaderComponent extends Component<Fi
   }
 
   get packageName() {
-    return this.args.file?.get('project').get('packageName');
+    return this.args.file?.get('project')?.get('packageName');
   }
 
   @action handleFileSelect(event: Event) {

app/components/file-compare/file-overview/scan-statuses/index.hbs

@@ -1,7 +1,7 @@
 <AkStack
   @width='full'
   @justifyContent='space-between'
-  class='px-2 py-1'
+  local-class='file-overview-status'
   data-test-fileCompare-fileOverview-scanStatuses
 >
   <AkStack @spacing='1'>
@@ -66,6 +66,6 @@
     @arrow={{true}}
     @title='{{this.file.createdOnDateTime}}'
   >
-    <AkIcon @iconName='date-range' @color='textPrimary' />
+    <AkIcon @iconName='event' @color='textPrimary' />
   </AkTooltip>
 </AkStack>

app/components/file-compare/file-overview/scan-statuses/index.scss

@@ -4,3 +4,7 @@
   border-left: none;
   border-right: none;
 }
+
+.file-overview-status {
+  padding: 0.57em 1.285em;
+}

app/components/file-compare/file-overview/scan-statuses/index.ts

@@ -18,7 +18,7 @@ export default class FileCompareFileOverviewScanStatusesComponent extends Compon
   }
 
   get isManualScanDisabled() {
-    return !this.file?.get('project').get('isManualScanAvailable');
+    return !this.file?.get('project')?.get('isManualScanAvailable');
   }
 
   get scanStatuses() {

app/components/project-list/index.hbs

@@ -26,6 +26,7 @@
             @value={{this.query}}
             {{on 'input' this.onQueryChange}}
             local-class='search-package-name-input'
+            data-test-search-query-input
           >
             <:leftAdornment>
               <AkIcon @iconName='search' @color='textSecondary' />
@@ -63,7 +64,8 @@
             @beforeOptions={{true}}
             @beforeOptionLabel='Platform'
             {{style width='auto'}}
-            data-test-pagination-select
+            class='select-platform-class'
+            data-test-select-platform-container
             as |platformObject|
           >
             <AkStack @spacing='1' class='select-stack'>
@@ -106,7 +108,9 @@
             @tagName='div'
             @beforeOptions={{true}}
             @beforeOptionLabel='Team'
+            class='select-team-class'
             local-class='select-team-class'
+            data-test-select-team-container
             as |team|
           >
             <AkStack @spacing='1' class='select-stack'>
@@ -146,7 +150,8 @@
           @beforeOptions={{true}}
           @beforeOptionLabel='Sort By'
           {{style width='auto'}}
-          data-test-pagination-select
+          class='select-sort-class'
+          data-test-project-sort-property
           as |sortingKeyObject|
         >
           <AkStack @spacing='1' @alignItems='center' class='select-stack'>

tests/integration/components/project-list-test.js

@@ -141,10 +141,10 @@ module('Integration | Component | project list', function (hooks) {
       'Team list length is correct.'
     );
 
-    assert.dom(teamSelectOptions[0]).hasText('All');
+    assert.dom(teamSelectOptions[0]).containsText('All');
 
     teams.forEach((t, i) => {
-      assert.dom(teamSelectOptions[i + 1]).hasText(t.name);
+      assert.dom(teamSelectOptions[i + 1]).containsText(t.name);
     });
   });
 
@@ -220,14 +220,14 @@ module('Integration | Component | project list', function (hooks) {
   test.each(
     'it renders with correct sortBy selected',
     [
-      ['-last_file_created_on', 't:dateUpdated:() t:mostRecent:()'],
-      ['last_file_created_on', 't:dateUpdated:() t:leastRecent:()'],
-      ['-id', 't:dateCreated:() t:mostRecent:()'],
-      ['id', 't:dateCreated:() t:leastRecent:()'],
-      ['-package_name', 't:packageName:() (Z -> A)'],
-      ['package_name', 't:packageName:() (A -> Z)'],
+      ['t:dateUpdated:() t:mostRecent:()', 0],
+      ['t:dateUpdated:() t:leastRecent:()', 1],
+      ['t:dateCreated:() t:mostRecent:()', 2],
+      ['t:dateCreated:() t:leastRecent:()', 3],
+      ['t:packageName:() (Z -> A)', 4],
+      ['t:packageName:() (A -> Z)', 5],
     ],
-    async function (assert, [sortKey, sortLabel]) {
+    async function (assert, [sortLabel, index]) {
       const projects = this.server.createList('project', 4);
 
       this.server.get('/organizations/:id/projects', (schema) => {
@@ -251,16 +251,16 @@ module('Integration | Component | project list', function (hooks) {
 
       assert.strictEqual(projects.length, projectContainerList.length);
 
-      await select('[data-test-project-sort-property]', sortKey);
+      await clickTrigger('[data-test-project-sort-property]');
+      await new Promise((resolve) => setTimeout(resolve, 10000));
 
-      assert.dom('[data-test-project-sort-property]').hasValue(sortKey);
-
-      const sortOption = find(
-        `[data-test-project-sort-property-option=${sortKey}]`
+      await selectChoose(
+        '.select-sort-class',
+        '.ember-power-select-option',
+        index
       );
 
-      assert.true(sortOption.selected);
-      assert.dom(sortOption).hasText(sortLabel);
+      assert.dom('[data-test-project-sort-property]').containsText(sortLabel);
     }
   );
 
@@ -351,41 +351,58 @@ module('Integration | Component | project list', function (hooks) {
 
     await render(hbs`<ProjectList />`);
 
-    const platformOptions = findAll('[data-test-platform-filter-option]');
+    let projectContainerList = findAll(
+      '[data-test-project-overview-container]'
+    );
 
-    // Selecting a platform value equal to 0 from the plaform filter options
-    await select('[data-test-platform-filter]', platformOptions[1].value);
+    assert.strictEqual(
+      projectContainerList.length,
+      projects.length,
+      'Contains correct number of project overview cards.'
+    );
 
-    assert.strictEqual(this.platform, platformOptions[1].value);
+    await clickTrigger('[data-test-select-platform-container]');
 
-    let projectContainerList = findAll(
-      '[data-test-project-overview-container]'
+    await selectChoose(
+      '.select-platform-class',
+      '.ember-power-select-option',
+      1
     );
 
+    assert.strictEqual(this.platform, '0');
+
+    projectContainerList = findAll('[data-test-project-overview-container]');
+
     assert.strictEqual(
-      projects.filter((p) => p.platform === parseInt(platformOptions[1].value))
-        .length,
+      projects.filter((p) => p.platform === 0).length,
       projectContainerList.length,
       'Project list items all have platform values matching "0".'
     );
 
     // Selecting a platform value equal to 1 from the plaform filter options
-    await select('[data-test-platform-filter]', platformOptions[2].value);
+    await selectChoose(
+      '.select-platform-class',
+      '.ember-power-select-option',
+      2
+    );
 
-    assert.strictEqual(this.platform, platformOptions[2].value);
+    assert.strictEqual(this.platform, '1');
 
     projectContainerList = findAll('[data-test-project-overview-container]');
 
     assert.strictEqual(
-      projects.filter((p) => p.platform === parseInt(platformOptions[2].value))
-        .length,
+      projects.filter((p) => p.platform === 1).length,
       projectContainerList.length,
       'Project list items all have platform values matching "1".'
     );
 
     // Selecting a platform value equal to -1 from the plaform filter options
     // This should return the entire project list
-    await select('[data-test-platform-filter]', platformOptions[0].value);
+    await selectChoose(
+      '.select-platform-class',
+      '.ember-power-select-option',
+      0
+    );
 
     assert.strictEqual(typeof this.platform, 'undefined');