Merge pull request #2616 from codecrafters-io/CC-1602

Refactor header authentication and upgrade button logic to show to even unauthed users

app/components/header/index.hbs

@@ -45,31 +45,24 @@
           <OutdatedClientBadge class="mr-4" />
         {{/if}}
 
-        {{#if this.authenticator.isAuthenticated}}
-          <FeedbackButton @source="header" class="mr-4" as |dd|>
-            <div
-              role="button"
-              class="rounded border
-                {{if dd.isOpen 'border-gray-500 dark:border-gray-500' 'border-gray-200 dark:border-white/10'}}
-                text-gray-600 dark:text-gray-400 hover:border-gray-500 dark:hover:border-gray-500 px-2 py-1 text-xs"
-              data-test-feedback-button
-            >
-              Feedback
-            </div>
-          </FeedbackButton>
+        <FeedbackButton @source="header" class="mr-4" as |dd|>
+          <div
+            role="button"
+            class="rounded border
+              {{if dd.isOpen 'border-gray-500 dark:border-gray-500' 'border-gray-200 dark:border-white/10'}}
+              text-gray-600 dark:text-gray-400 hover:border-gray-500 dark:hover:border-gray-500 px-2 py-1 text-xs"
+            data-test-feedback-button
+          >
+            Feedback
+          </div>
+        </FeedbackButton>
 
-          <BillingStatusBadge @size="small" class="mr-3" />
+        <BillingStatusBadge @size="small" class="mr-3" />
 
+        {{#if this.authenticator.isAuthenticated}}
           <Header::AccountDropdown />
         {{else}}
-          <div class="flex items-center ml-6">
-            <PrimaryLinkButton @size="extra-small" @route="pay" class="mr-4" data-test-upgrade-button>
-              <span class="flex items-center gap-x-1">
-                <span>Upgrade</span>
-                {{svg-jar "lock-open" class="w-4"}}
-              </span>
-            </PrimaryLinkButton>
-
+          <div class="flex items-center">
             {{! @glint-expect-error not ts-ified yet }}
             <Header::SignInWithGithubButton />
           </div>

tests/acceptance/header-test.js

@@ -5,12 +5,36 @@ import { currentURL } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupAnimationTest } from 'ember-animated/test-support';
 import { setupApplicationTest } from 'codecrafters-frontend/tests/helpers';
-import { signInAsSubscriber } from 'codecrafters-frontend/tests/support/authentication-helpers';
+import { signIn, signInAsSubscriber } from 'codecrafters-frontend/tests/support/authentication-helpers';
 
 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) {
+    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.strictEqual(currentURL(), '/pay', 'expect to be redirected to pay page');
+  });
+
+  test('header should show upgrade button if user does not have an active subscription', async function (assert) {
+    testScenario(this.server);
+    signIn(this.owner, this.server);
+
+    await catalogPage.visit();
+
+    assert.true(catalogPage.header.upgradeButton.isVisible, 'expect billing status  badge to be visible');
+    await catalogPage.header.upgradeButton.click();
+
+    assert.strictEqual(currentURL(), '/pay', 'expect to be redirected to pay page');
+  });
+
   test('header should show member badge if user has an active subscription', async function (assert) {
     testScenario(this.server);
     signInAsSubscriber(this.owner, this.server);

tests/acceptance/submit-site-feedback-test.js

@@ -8,10 +8,20 @@ import { signIn } from 'codecrafters-frontend/tests/support/authentication-helpe
 module('Acceptance | submit-site-feedback', function (hooks) {
   setupApplicationTest(hooks);
 
-  test('can submit site feedback', async function (assert) {
+  test('can submit site feedback if user is authenticated', async function (assert) {
     testScenario(this.server);
     signIn(this.owner, this.server);
 
+    await submitFeedback(assert, this.server, 'authenticated feedback');
+  });
+
+  test('can submit site feedback if user is not authenticated', async function (assert) {
+    testScenario(this.server);
+
+    await submitFeedback(assert, this.server, 'anonymous feedback');
+  });
+
+  async function submitFeedback(assert, server, feedbackMessage) {
     const feedbackDropdown = catalogPage.header.feedbackDropdown;
 
     await catalogPage.visit();
@@ -30,16 +40,17 @@ module('Acceptance | submit-site-feedback', function (hooks) {
     await feedbackDropdown.clickOnSendButton();
     assert.ok(feedbackDropdown.sendButtonIsVisible, 'Send button is still visible');
 
-    await feedbackDropdown.fillInExplanation('This is a test');
+    await feedbackDropdown.fillInExplanation(feedbackMessage);
 
     await feedbackDropdown.clickOnSendButton();
     assert.notOk(feedbackDropdown.sendButtonIsVisible, 'Send button is not visible');
     assert.ok(feedbackDropdown.isOpen, 'Feedback dropdown is still open (has completed message)');
 
-    const feedbackSubmission = this.server.schema.siteFeedbackSubmissions.first();
+    const feedbackSubmission = server.schema.siteFeedbackSubmissions.first();
     assert.strictEqual(feedbackSubmission.source, 'header');
     assert.strictEqual(JSON.stringify(feedbackSubmission.sourceMetadata), '{}');
+    assert.strictEqual(feedbackSubmission.explanation, feedbackMessage);
 
     await percySnapshot('Feedback widget - after submission');
-  });
+  }
 });

tests/pages/components/header.js

@@ -22,6 +22,10 @@ export default {
 
   scope: '[data-test-header]',
 
+  signInButton: {
+    scope: '[data-test-sign-in-with-github-button]',
+  },
+
   upgradeButton: BillingStatusBadge.upgradeButton,
 
   vipBadge: BillingStatusBadge.vipBadge,