Fix reading list item count issue #14469 (#14471)

* Add cypress to reproduce the issue `Reading list is not reactive`

https://github.com/forem/forem/issues/14469

* Bug fixes: The reading list item count (in the title) isn't reactive

https://github.com/forem/forem/issues/14469

* Fix the cypress test cases

- to test reading list item count

* stylistic changeo

-  extract `itemsTotal` from `this.state`
This commit is contained in:
Richard Hao 2021-08-12 22:14:27 +08:00 committed by GitHub
parent 074493ff7b
commit 228a16f90c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 73 additions and 1 deletions

View file

@ -106,7 +106,7 @@ export class ReadingList extends Component {
toggleArchiveStatus = (event, item) => {
event.preventDefault();
const { statusView, items } = this.state;
const { statusView, items, itemsTotal } = this.state;
request(`/reading_list_items/${item.id}`, {
method: 'PUT',
body: { current_status: statusView },
@ -117,6 +117,7 @@ export class ReadingList extends Component {
this.setState({
archiving: true,
items: newItems,
itemsTotal: itemsTotal - 1,
});
// hide the snackbar in a few moments

View file

@ -58,6 +58,42 @@ describe('Reading List Archive', () => {
cy.get('@main').findByText('Test Article 3');
});
it('should be disappeared after click on archive', () => {
cy.intercept(
Cypress.config().baseUrl +
'search/reactions?page=0&per_page=80&status%5B%5D=valid&status%5B%5D=confirmed',
{ fixture: 'search/readingList.json' },
).as('readingList');
cy.intercept(
{ method: 'put', url: '/reading_list_items/**' },
{ body: { current_status: 'valid,confirmed' } },
).as('archiveItem');
cy.visit('/readinglist');
cy.wait('@readingList');
cy.findByRole('main').as('main');
cy.get('@main').findByText('Reading list (3)');
cy.get('@main').findByText('Test Article 1');
cy.get('@main').findByText('Test Article 2');
cy.get('@main').findByText('Test Article 3');
cy.get('@main')
.contains('Test Article 1')
.parents('article')
.findByLabelText(/^Archive item$/i)
.click();
cy.wait('@archiveItem');
cy.get('@main').findByText('Reading list (2)');
cy.get('@main').findByText('Test Article 1').should('not.exist');
cy.get('@main').findByText('Test Article 2');
cy.get('@main').findByText('Test Article 3');
});
describe('small screens', () => {
beforeEach(() => {
cy.intercept(

View file

@ -57,6 +57,41 @@ describe('Reading List Archive', () => {
cy.get('@main').findByText('Test Article 3');
});
it('should be disappeared after click on Unarchive', () => {
cy.intercept(
Cypress.config().baseUrl +
'search/reactions?page=0&per_page=80&status%5B%5D=archived',
{ fixture: 'search/readingList.json' },
).as('readingList');
cy.intercept(
{ method: 'put', url: '/reading_list_items/**' },
{ body: { current_status: 'archived' } },
).as('unarchiveItem');
cy.visit('/readinglist/archive');
cy.wait('@readingList');
cy.findByRole('main').as('main');
cy.get('@main').findByText('Test Article 1');
cy.get('@main').findByText('Test Article 2');
cy.get('@main').findByText('Test Article 3');
cy.get('@main')
.contains('Test Article 1')
.parents('article')
.findByLabelText(/^Archive item$/i)
.click();
cy.wait('@unarchiveItem');
cy.get('@main').findByText('Archive (2)');
cy.get('@main').findByText('Test Article 1').should('not.exist');
cy.get('@main').findByText('Test Article 2');
cy.get('@main').findByText('Test Article 3');
});
describe('small screens', () => {
beforeEach(() => {
cy.intercept(