Merge pull request #2359 from dandi/2271-cookies-disabled-banner

Check to see if cookies are enabled for banner message

Author: naglepuff

e2e/tests/cookies.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from "@playwright/test";
 import { clientUrl } from "../utils.ts";
 
 const COOKIE_CONSENT_MESSAGE = 'We use cookies to ensure you get the best experience on DANDI.';
-// const COOKIE_DISABLED_MESSAGE = 'We noticed you\'re blocking cookies - note that certain aspects of the site may not work.';
+const COOKIE_DISABLED_MESSAGE = 'We noticed you\'re blocking cookies - note that certain aspects of the site may not work.';
 
 test.describe("Cookie banner behavior", async () => {
   test("cookie banner when cookies are enabled", async ({ page }) => {
@@ -11,19 +11,15 @@ test.describe("Cookie banner behavior", async () => {
     await page.getByText("Got it!").click();
     await expect(page.getByText(COOKIE_CONSENT_MESSAGE)).toHaveCount(0);
   });
-  // See: https://github.com/dandi/dandi-archive/issues/2271
-  //
-  // test("cookie banner when cookies are disabled", async ({ page }) => {
-    // Patch navigator.cookieEnabled. This is the condition used to determine which
-    // cookie banner message to show the end user.
+  test("cookie banner when cookies are disabled", async ({ page }) => {
     // https://github.com/microsoft/playwright/issues/30115#issuecomment-2020821987
-    // await page.addInitScript(() => {
-    //   Object.defineProperty(navigator.__proto__, "cookieEnabled", { get: () => false });
-    // });
-    // await page.goto(clientUrl);
+    await page.addInitScript(() => {
+      Object.defineProperty(navigator.__proto__, "cookieEnabled", { get: () => false });
+    });
+    await page.goto(clientUrl);
 
-    // await expect(page.getByText(COOKIE_DISABLED_MESSAGE)).toHaveCount(1);
-    // await page.getByText("Got it!").click();
-    // await expect(page.getByText(COOKIE_CONSENT_MESSAGE)).toHaveCount(0);
-  // });
+    await expect(page.getByText(COOKIE_DISABLED_MESSAGE)).toHaveCount(1);
+    await page.getByText("Got it!").click();
+    await expect(page.getByText(COOKIE_CONSENT_MESSAGE)).toHaveCount(0);
+  });
 });

web/src/components/CookieBanner.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
+import {
+  cookiesEnabled as cookiesEnabledFunc
+} from '@/rest';
 
 const COOKIE_NAME = 'dandi-cookie-consent';
 
@@ -18,6 +21,8 @@ const dandiCookie = computed({
 
 const open = ref(dandiCookie.value !== 'true');
 
+const cookiesEnabled = computed(cookiesEnabledFunc);
+
 function setCookie() {
   dandiCookie.value = 'true';
   open.value = false;
@@ -43,7 +48,8 @@ function setCookie() {
       max-width="60%"
       style="left: 50%; transform: translateX(-50%); z-index: 1;"
     >
-      <span>We use cookies to ensure you get the best experience on DANDI.</span>
+      <span v-if="cookiesEnabled">We use cookies to ensure you get the best experience on DANDI.</span>
+      <span v-else>We noticed you're blocking cookies - note that certain aspects of the site may not work.</span>
       <v-btn
         class="bg-error"
         elevation="0"