fix: show drafts for contributors (#337)

Co-authored-by: yoko <[email protected]>

Author: Sembauke

Diff for: apps/backend/src/seed/index.js

@@ -155,7 +155,26 @@ async function createSeedPosts(strapi) {
       title: "Internal post",
       author: { connect: [userIds[1]] },
       tags: { connect: [internalTagId] },
-      body: "I'm an internal post and meant to be hidden",
+      body: "A post with internal tag.",
+      publishedAt: new Date(),
+    },
+  });
+
+  // Posts by contributors
+  await strapi.entityService.create("api::post.post", {
+    data: {
+      title: "Contributor's draft post",
+      author: { connect: [userIds[0]] }, // Contributor
+      tags: { connect: tagIds.slice(1, 3) },
+      body: "A post by contributor in draft state.",
+    },
+  });
+  await strapi.entityService.create("api::post.post", {
+    data: {
+      title: "Contributor's published post",
+      author: { connect: [userIds[0]] }, // Contributor
+      tags: { connect: tagIds.slice(1, 3) },
+      body: "A post by contributor in published state.",
       publishedAt: new Date(),
     },
   });

Diff for: apps/backend/tests/post/index.js

@@ -57,6 +57,7 @@ describe("post", () => {
       ).toBe(true);
     });
   });
+
   describe("GET /posts/:id", () => {
     it("should prevent contributors viewing other user's post", async () => {
       const post = await getPost("editors-draft-post");

Diff for: apps/frontend/src/pages/posts/index.js

@@ -129,10 +129,14 @@ export async function getServerSideProps(context) {
           },
         })
       : getUserPosts(session.user.jwt, {
+          publicationState: "preview",
           fields: ["id", "title", "slug", "publishedAt", "updatedAt"],
           populate: ["author", "tags"],
           filters: {
             author: session.user.id,
+            publishedAt: {
+              $notNull: false,
+            },
             ...queryHandler(context.query),
           },
           sort: sortHandler(context.query.sortBy),
@@ -524,9 +528,11 @@ export default function IndexPage({
                   new Date(),
                 );
                 const status = post.attributes.publishedAt ? (
-                  <Badge>Published</Badge>
+                  <Badge data-testid="published-badge">Published</Badge>
                 ) : (
-                  <Badge colorScheme="pink">Draft</Badge>
+                  <Badge data-testid="draft-badge" colorScheme="pink">
+                    Draft
+                  </Badge>
                 );
                 return (
                   <Tr
@@ -601,7 +607,10 @@ export default function IndexPage({
               />
             </Box>
             <Menu ml="auto">
-              <FilterButton text={resultsPerPage} />
+              <FilterButton
+                text={resultsPerPage}
+                data-testid="results-per-page"
+              />
               <MenuList>
                 <MenuOptionGroup
                   value={resultsPerPage}

Diff for: e2e/contributor/posts.spec.ts

@@ -0,0 +1,28 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("contributor", () => {
+  test("can only view draft posts", async ({ page }) => {
+    await page.goto("/posts");
+
+    // the filter "All posts" should be hidden
+    await expect(page.getByRole("button", { name: "All posts" })).toBeHidden();
+
+    // check that only draft posts are in the list
+    const publishedCount = await page
+      .locator("data-testid=published-badge")
+      .count();
+    expect(publishedCount).toBe(0);
+    const draftCount = await page.locator("data-testid=draft-badge").count();
+    expect(draftCount).toBeGreaterThanOrEqual(1);
+  });
+
+  test("can only view their own posts", async ({ page }) => {
+    await page.goto("/posts");
+
+    // check that other user's posts are not in the list
+    const ownPostsCount = await page.getByText("By contributor-user").count();
+    const otherPostsCouint = await page.getByText("By editor-user").count();
+    expect(ownPostsCount).toBeGreaterThanOrEqual(1);
+    expect(otherPostsCouint).toBe(0);
+  });
+});

Diff for: e2e/posts.spec.ts

@@ -4,7 +4,68 @@ test("has a button to create a new post", async ({ page }) => {
   await page.goto("/posts");
 
   await page.getByRole("button", { name: "New post" }).click();
-  
+
   await expect(page).toHaveURL(/.*\/posts\/\d+/);
   await expect(page.getByRole("link", { name: "Posts" })).toBeVisible();
 });
+
+test("an editor can view published and drafted posts in the list of posts", async ({
+  page,
+}) => {
+  await page.goto("/posts");
+
+  // The filter on posts page should be "All posts" by default
+  await expect(page.getByRole("button", { name: "All posts" })).toBeVisible();
+
+  // Show 50 posts to see both draft and published posts
+  await page.getByTestId("results-per-page").dispatchEvent("click");
+  await page.click("text=50");
+  // Wait for the table to load
+  await page.waitForSelector("table tbody tr:nth-child(6)");
+
+  // Check that both draft and published posts are in the list
+  const publishedCount = await page
+    .locator("data-testid=published-badge")
+    .count();
+  expect(publishedCount).toBeGreaterThanOrEqual(1);
+  const draftCount = await page.locator("data-testid=draft-badge").count();
+  expect(draftCount).toBeGreaterThanOrEqual(1);
+});
+
+test("an editor can filter by draft posts", async ({ page }) => {
+  await page.goto("/posts");
+
+  // Show 50 posts to see both draft and published posts
+  await page.getByTestId("results-per-page").dispatchEvent("click");
+  await page.click("text=50");
+
+  // Select the "Drafts posts" filter
+  await page.getByRole("button", { name: "All posts" }).dispatchEvent("click");
+  await page.click("text=Drafts posts");
+
+  // Wait for published posts to disappear
+  await expect(page.locator("data-testid=published-badge")).toHaveCount(0);
+  // Check that draft posts are in the list
+  const draftCount = await page.locator("data-testid=draft-badge").count();
+  expect(draftCount).toBeGreaterThanOrEqual(1);
+});
+
+test("an editor can filter by published posts", async ({ page }) => {
+  await page.goto("/posts");
+
+  // Show 50 posts to see both draft and published posts
+  await page.getByTestId("results-per-page").dispatchEvent("click");
+  await page.click("text=50");
+
+  // Select the "Published posts" filter
+  await page.getByRole("button", { name: "All posts" }).dispatchEvent("click");
+  await page.click("text=Published posts");
+
+  // Wait for draft posts to disappear
+  await expect(page.locator("data-testid=draft-badge")).toHaveCount(0);
+  // Check that published posts are in the list
+  const publishedCount = await page
+    .locator("data-testid=published-badge")
+    .count();
+  expect(publishedCount).toBeGreaterThanOrEqual(1);
+});

Diff for: playwright.config.ts

@@ -35,6 +35,7 @@ export default defineConfig({
     { name: "setup", testMatch: /.*\.setup\.ts/ },
     {
       name: "chromium",
+      testIgnore: "e2e/contributor/**",
       use: {
         ...devices["Desktop Chrome"],
         storageState: "playwright/.auth/editor.json",
@@ -44,6 +45,7 @@ export default defineConfig({
 
     {
       name: "firefox",
+      testIgnore: "e2e/contributor/**",
       use: {
         ...devices["Desktop Firefox"],
         storageState: "playwright/.auth/editor.json",
@@ -53,13 +55,44 @@ export default defineConfig({
 
     {
       name: "webkit",
+      testIgnore: "e2e/contributor/**",
       use: {
         ...devices["Desktop Safari"],
         storageState: "playwright/.auth/editor.json",
       },
       dependencies: ["setup"],
     },
 
+    {
+      name: "chromium-contributor",
+      testDir: "e2e/contributor",
+      use: {
+        ...devices["Desktop Chrome"],
+        storageState: "playwright/.auth/contributor.json",
+      },
+      dependencies: ["setup"],
+    },
+
+    {
+      name: "firefox-contributor",
+      testDir: "e2e/contributor",
+      use: {
+        ...devices["Desktop Firefox"],
+        storageState: "playwright/.auth/contributor.json",
+      },
+      dependencies: ["setup"],
+    },
+
+    {
+      name: "webkit-contributor",
+      testDir: "e2e/contributor",
+      use: {
+        ...devices["Desktop Safari"],
+        storageState: "playwright/.auth/contributor.json",
+      },
+      dependencies: ["setup"],
+    },
+
     /* Test against mobile viewports. */
     // {
     //   name: 'Mobile Chrome',