Merge pull request #9619 from overleaf/ab-react-dash-remove-tag

[web] Handle selecting/removing a tag in the inline tag list of the project table GitOrigin-RevId: c3f39006c690beebb8ca7c1f3595bd9e016cd60c
2026-11-14 22:23:42 +01:00 · 2022-09-27 08:04:10 +00:00
parent 9f4df9c0f4
commit 4013288971
4 changed files with 150 additions and 56 deletions
@@ -0,0 +1,73 @@
+import { expect } from 'chai'
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import fetchMock from 'fetch-mock'
+import {
+  resetProjectListContextFetch,
+  renderWithProjectListContext,
+} from '../../../helpers/render-with-context'
+import InlineTags from '../../../../../../../frontend/js/features/project-list/components/table/cells/inline-tags'
+import {
+  archivedProject,
+  copyableProject,
+} from '../../../fixtures/projects-data'
+
+describe('<InlineTags />', function () {
+  beforeEach(function () {
+    window.metaAttributesCache = new Map()
+    window.metaAttributesCache.set('ol-tags', [
+      {
+        _id: '789fff789fff',
+        name: 'My Test Tag',
+        project_ids: [copyableProject.id, archivedProject.id],
+      },
+      {
+        _id: '555eee555eee',
+        name: 'Tag 2',
+        project_ids: [copyableProject.id],
+      },
+      {
+        _id: '444ddd444ddd',
+        name: 'Tag 3',
+        project_ids: [archivedProject.id],
+      },
+    ])
+    this.projectId = copyableProject.id
+  })
+
+  afterEach(function () {
+    resetProjectListContextFetch()
+    window.metaAttributesCache.clear()
+  })
+
+  it('renders tags list for a project', function () {
+    renderWithProjectListContext(<InlineTags projectId={this.projectId} />)
+    screen.getByText('My Test Tag')
+    screen.getByText('Tag 2')
+    expect(screen.queryByText('Tag 3')).to.not.exist
+  })
+
+  it('handles removing a project from a tag', async function () {
+    fetchMock.delete(
+      `express:/tag/789fff789fff/project/${copyableProject.id}`,
+      {
+        status: 204,
+      },
+      { delay: 0 }
+    )
+
+    renderWithProjectListContext(<InlineTags projectId={this.projectId} />)
+    const removeButton = screen.getByRole('button', {
+      name: 'Remove tag My Test Tag',
+    })
+    await fireEvent.click(removeButton)
+    await waitFor(() =>
+      expect(
+        fetchMock.called(`/tag/789fff789fff/project/${copyableProject.id}`, {
+          method: 'DELETE',
+        })
+      )
+    )
+    expect(screen.queryByText('My Test Tag')).to.not.exist
+    screen.getByText('Tag 2')
+  })
+})