Merge pull request #2699 from codecrafters-io/pk-branch-3

feat(header): add dynamic links for user authentication

Author: rohitpaulk

app/components/header/index.hbs

@@ -57,9 +57,8 @@
           </div>
         </FeedbackButton>
 
-        <BillingStatusBadge @size="small" class="mr-3" />
-
         {{#if this.authenticator.isAuthenticated}}
+          <BillingStatusBadge @size="small" class="mr-3" />
           <Header::AccountDropdown />
         {{else}}
           <div class="flex items-center">

app/components/header/index.ts

@@ -39,6 +39,21 @@ export default class HeaderComponent extends Component<Signature> {
   }
 
   get links(): { text: string; route: string; type: 'route' | 'link' }[] {
+    if (this.currentUser) {
+      return this.linksForAuthenticatedUser;
+    } else {
+      return this.linksForAnonymousUser;
+    }
+  }
+
+  get linksForAnonymousUser(): { text: string; route: string; type: 'route' | 'link' }[] {
+    return [
+      { text: 'Catalog', route: 'catalog', type: 'route' },
+      { text: 'Pricing', route: 'pay', type: 'route' },
+    ];
+  }
+
+  get linksForAuthenticatedUser(): { text: string; route: string; type: 'route' | 'link' }[] {
     const links: { text: string; route: string; type: 'route' | 'link' }[] = [
       { text: 'Catalog', route: 'catalog', type: 'route' },
       { text: 'Badges', route: 'badges', type: 'route' },

tests/acceptance/header-test.js

@@ -11,15 +11,15 @@ module('Acceptance | header-test', function (hooks) {
   setupApplicationTest(hooks);
   setupAnimationTest(hooks);
 
-  test('header should show sign-in & upgrade button if user is unauthenticated', async function (assert) {
+  test('header should show sign-in & pricing link if user is unauthenticated', async function (assert) {
     testScenario(this.server);
 
     await catalogPage.visit();
 
     assert.true(catalogPage.header.signInButton.isVisible, 'expect sign-in button to be visible');
-    assert.true(catalogPage.header.upgradeButton.isVisible, 'expect billing status  badge to be visible');
-    await catalogPage.header.upgradeButton.click();
+    assert.true(catalogPage.header.hasLink('Pricing'), 'expect pricing link to be visible');
 
+    await catalogPage.header.clickOnHeaderLink('Pricing');
     assert.strictEqual(currentURL(), '/pay', 'expect to be redirected to pay page');
   });
 

tests/pages/components/header.js

@@ -1,4 +1,4 @@
-import { clickOnText, clickable, fillable, isVisible } from 'ember-cli-page-object';
+import { clickOnText, collection, clickable, fillable, isVisible } from 'ember-cli-page-object';
 import BillingStatusBadge from 'codecrafters-frontend/tests/pages/components/billing-status-badge';
 
 export default {
@@ -16,8 +16,12 @@ export default {
     toggle: clickable('[data-test-feedback-button]', { resetScope: true }),
   },
 
-  freeWeeksLeftButton: BillingStatusBadge.freeWeeksLeftButton,
+  hasLink: function (linkText) {
+    return !!this.links.toArray().find((link) => link.text === linkText);
+  },
 
+  freeWeeksLeftButton: BillingStatusBadge.freeWeeksLeftButton,
+  links: collection('[data-test-header-link]'),
   memberBadge: BillingStatusBadge.memberBadge,
 
   scope: '[data-test-header]',