fix e2e tests

Magda98 · Oct 20, 2024 · f94c262 · f94c262
1 parent f8beeea
commit f94c262
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 38 deletions.
diff --git a/e2e/home.spec.ts b/e2e/home.spec.ts
@@ -17,6 +17,6 @@ test('play playlist track', async ({ basePage }) => {
 
   const track = basePage.page
     .getByRole('main')
-    .getByRole('button', { name: 'HERO HERO HERO KizoBletka 2:' });
+    .getByRole('button', { name: 'CZEMU NIE ŚPISZ?' });
   await track.click();
 });
diff --git a/e2e/setup.ts b/e2e/setup.ts
@@ -7,7 +7,8 @@ export const test = base.extend<{ basePage: BasePage }>({
     const basePage = new BasePage(page);
     await page.goto('/');
     await page.evaluate((authData) => {
-      localStorage.setItem('authData', authData);
+      localStorage.setItem('authData', JSON.stringify(authData));
+      localStorage.setItem('token', authData.access_token);
     }, AUTH_DATA);
     await page.reload();
     await use(basePage);

diff --git a/playwright.config.ts b/playwright.config.ts
@@ -34,7 +34,7 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'ng serve',
+    command: 'npm start',
     url: 'http://localhost:4200',
   },
 });
diff --git a/src/app/shared/components/track/track.component.html b/src/app/shared/components/track/track.component.html
@@ -1,36 +1,37 @@
-<div appButton class="track">
-@if(!isLoading()){
-    <div class="song-info">
-      <img [alt]="track()?.name" class="track-img" width="90" height="90" [ngSrc]="track()?.album?.images?.[1]?.url ?? ''">
-      <div class="album-artist">
-        <h2 class="name">{{track()?.name}}</h2>
-        <span class="album-name">
-          {{track()?.album?.name}}
-        </span>
-        <div class="track-artist">
-          @for(artist of track()?.artists; track artist.id){
-          <span class="artist">{{artist.name}}</span>
-          }
-        </div>
+<button appButton class="track">
+  @if(!isLoading()){
+  <div class="song-info">
+    <img [alt]="track()?.name" class="track-img" width="90" height="90"
+      [ngSrc]="track()?.album?.images?.[1]?.url ?? ''">
+    <div class="album-artist">
+      <h2 class="name">{{track()?.name}}</h2>
+      <span class="album-name">
+        {{track()?.album?.name}}
+      </span>
+      <div class="track-artist">
+        @for(artist of track()?.artists; track artist.id){
+        <span class="artist">{{artist.name}}</span>
+        }
       </div>
     </div>
-    <span class="time">{{track()?.duration_ms ?? 0 | duration}}
-    </span>
-}
-@if(isLoading()){
-    <div class="song-info">
+  </div>
+  <span class="time">{{track()?.duration_ms ?? 0 | duration}}
+  </span>
+  }
+  @if(isLoading()){
+  <div class="song-info">
+    <ngx-skeleton-loader animation="progress-dark" count="1"
+      [theme]="{ height: '90px', width: '90px', 'background-color': '#2c2f31' }"></ngx-skeleton-loader>
+    <div class="album-artist">
       <ngx-skeleton-loader animation="progress-dark" count="1"
-        [theme]="{ height: '90px', width: '90px', 'background-color': '#2c2f31' }"></ngx-skeleton-loader>
-      <div class="album-artist">
-        <ngx-skeleton-loader animation="progress-dark" count="1"
-          [theme]="{ height: '32px', width: '160px', 'background-color': '#2c2f31' }"></ngx-skeleton-loader>
-        <ngx-skeleton-loader class="artist-skeleton" animation="progress-dark" count="2"
-          [theme]="{ height: '16px', width: '150px', 'background-color': '#2c2f31' }"></ngx-skeleton-loader>
-      </div>
+        [theme]="{ height: '32px', width: '160px', 'background-color': '#2c2f31' }"></ngx-skeleton-loader>
+      <ngx-skeleton-loader class="artist-skeleton" animation="progress-dark" count="2"
+        [theme]="{ height: '16px', width: '150px', 'background-color': '#2c2f31' }"></ngx-skeleton-loader>
     </div>
-    <span class="time">
-      <ngx-skeleton-loader animation="progress-dark" count="1"
-        [theme]="{ height: '16px', width: '30px', 'background-color': '#2c2f31' }"></ngx-skeleton-loader>
-    </span>
-}
-</div>
+  </div>
+  <span class="time">
+    <ngx-skeleton-loader animation="progress-dark" count="1"
+      [theme]="{ height: '16px', width: '30px', 'background-color': '#2c2f31' }"></ngx-skeleton-loader>
+  </span>
+  }
+</button>
diff --git a/src/app/shared/components/track/track.component.scss b/src/app/shared/components/track/track.component.scss
@@ -6,6 +6,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  width: 100%;
   padding: 8px;
   border-radius: 10px;
   cursor: pointer;
@@ -16,7 +17,7 @@
   transition: background-color 0.3s;
 
   &:hover {
-    background-color: rgba(0,0,0,0.2)
+    background-color: rgba(0, 0, 0, 0.2)
   }
 
   .track-img {
@@ -36,12 +37,12 @@
     gap: 16px;
   }
 
-  .album-artist{
+  .album-artist {
     display: flex;
     flex-direction: column;
   }
 
-  .artist-skeleton{
+  .artist-skeleton {
     display: flex;
     flex-direction: column;
     gap: 8px;

diff --git a/src/app/shared/directives/button/button.directive.ts b/src/app/shared/directives/button/button.directive.ts
@@ -13,6 +13,9 @@ export type ButtonMode = 'text' | 'opacity';
 @Directive({
   selector: '[appButton]',
   standalone: true,
+  host: {
+    role: 'button',
+  },
 })
 export class ButtonDirective implements OnInit {
   mode = input<ButtonMode>();