Skip to content

Commit

Permalink
feat: adds notifications functionality for howto useful votes and com…
Browse files Browse the repository at this point in the history
…ments

Co-authored-by: patrycjapraczyk <praczyk.patrycja@gmail.com>
  • Loading branch information
thisislawatts and ppraczyk committed Feb 8, 2022
1 parent 3750c08 commit 8091d1b
Show file tree
Hide file tree
Showing 19 changed files with 899 additions and 22 deletions.
57 changes: 47 additions & 10 deletions packages/cypress/src/fixtures/seed/howtos.json
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@
"contentType": "image/jpeg"
}
],
"text": "As you can see we currently in V0.4. Lot's of work to do and things to fix! Start coding and add your pull requests to Github, on Tuesday we review code :) \n*",
"text": "As you can see we currently in V0.4. Lot's of work to do and things to fix! Start coding and add your pull requests to Github, on Tuesday we review code :) \n*",
"_animationKey": "uniquewrzq8q",
"title": "Have fun 🤙"
}
Expand All @@ -132,7 +132,6 @@
"_modified": "2019-09-16T17:54:19.978Z",
"_created": "2019-07-08T07:24:24.456Z"
},

"I6qwynw8c9AqnpYupZnp": {
"difficulty_level": "Medium",
"files": [],
Expand Down Expand Up @@ -191,11 +190,11 @@
"timeCreated": "2019-06-26T14:57:59.549Z"
}
],
"text": "In order to make a jacket from plastic foils, you will first need to gather your tools and materials. These are:\n\nMaterials\n- plastic foils (see step 3), enough to make four large sheets (70cm x 170cm)\n- natural fabric such as cotton for the lining\n- a heat resistant sheet material such as teflon fabric as a base for ironing/pressing\n- baking paper which will also be used for ironing/pressing\n- optionally: fastening of some sort for the raincoat (buttons, zip etc)\n\nTools\n- iron or thermo press\n- sewing machine, thread and scissors\n\nSafety recommendations\n- respirator mask to prevent the inhalation of plastic fumes!",
"text": "In order to make a jacket from plastic foils, you will first need to gather your tools and materials. These are:\n\nMaterials\n- plastic foils (see step 3), enough to make four large sheets (70cm x 170cm)\n- natural fabric such as cotton for the lining\n- a heat resistant sheet material such as teflon fabric as a base for ironing/pressing\n- baking paper which will also be used for ironing/pressing\n- optionally: fastening of some sort for the raincoat (buttons, zip etc)\n\nTools\n- iron or thermo press\n- sewing machine, thread and scissors\n\nSafety recommendations\n- respirator mask to prevent the inhalation of plastic fumes!",
"_animationKey": "unique1"
},
{
"text": "You will need to work out the required measurements for the jacket. The template below will provide you with a plan for taking and recording these measurements. \n(A) length of the arm\n(B) length from shoulder to shoulder\n(C) length from shoulder to the neck centre\n(D) body width\n(E) desired length of the raincoat",
"text": "You will need to work out the required measurements for the jacket. The template below will provide you with a plan for taking and recording these measurements. \n(A) length of the arm\n(B) length from shoulder to shoulder\n(C) length from shoulder to the neck centre\n(D) body width\n(E) desired length of the raincoat",
"_animationKey": "unique2",
"title": "Choose your measurements ",
"images": [
Expand Down Expand Up @@ -1479,7 +1478,7 @@
"_animationKey": "unique3"
},
{
"title": "Mark the mould ",
"title": "Mark the mould ",
"images": [
{
"type": "image/jpeg",
Expand Down Expand Up @@ -2039,7 +2038,7 @@
"_animationKey": "unique3"
},
{
"text": "Now we use pigment to add colour to the transparent polystyrene. You can find it online (search for 'pigment for polystyrene'), but do check out if you can find it in a local shop. Using pigment has the advantage that it keeps the translucency of your material. If you only have access to coloured PS plastic, you will probably not get the same effect (unless the plastic is also translucent), so this will need some testing.\n
Start by cutting one pellet of pigment into smaller pieces. The pigment we use (___) has a really strong affect so you only need a small amount to mix with.",
"text": "Now we use pigment to add colour to the transparent polystyrene. You can find it online (search for 'pigment for polystyrene'), but do check out if you can find it in a local shop. Using pigment has the advantage that it keeps the translucency of your material. If you only have access to coloured PS plastic, you will probably not get the same effect (unless the plastic is also translucent), so this will need some testing.\nStart by cutting one pellet of pigment into smaller pieces. The pigment we use (___) has a really strong affect so you only need a small amount to mix with.",
"_animationKey": "unique91268a",
"title": "Prepare your colour",
"images": [
Expand Down Expand Up @@ -2170,7 +2169,7 @@
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fv2_howtos%2F2XnZ8QCPx4QAfmy0w8Sc%2Fhowto-beams-glass-8-3.jpg?alt=media&token=446e2a5e-583d-4fb2-aef8-539a76cc0c00"
}
],
"text": "Now we use the re-shredded excess material from the previous process which makes the colour more cloudy. In this example we used the following mixture:\nMixture: 70% clear PS, 30% shredded PS-pigment-mix\n\nStart by putting your clear PS into the extruder followed by the PS-pigment-mix. You can experiment with adding more colour by putting pigment back into this mixture to create dynamic colour tones and patterns.\n\nP.S. Keep collecting your left over material to melt it again, this is the stuff that will make your material glass-like.",
"text": "Now we use the re-shredded excess material from the previous process which makes the colour more cloudy. In this example we used the following mixture:\nMixture: 70% clear PS, 30% shredded PS-pigment-mix\n\nStart by putting your clear PS into the extruder followed by the PS-pigment-mix. You can experiment with adding more colour by putting pigment back into this mixture to create dynamic colour tones and patterns.\n\nP.S. Keep collecting your left over material to melt it again, this is the stuff that will make your material glass-like.",
"_animationKey": "uniquehj42fe"
},
{
Expand All @@ -2197,7 +2196,7 @@
"type": "image/jpeg"
}
],
"text": "Et voilá , this is how you create beams and materials with magical colours, transparencies and patterns. As the mixing process is hard to control, achieving exactly the same outcome is unrealistic. But the beauty of melting plastic this way is that each piece will be unique! The transparency of PS offers itself perfectly for lighting, like shown in our how-to \"Make a lamp from PS\"

.\n\nBut the further possibilities of this material can be taken into many other directions.\nHave fun exploring!",
"text": "Et voilá , this is how you create beams and materials with magical colours, transparencies and patterns. As the mixing process is hard to control, achieving exactly the same outcome is unrealistic. But the beauty of melting plastic this way is that each piece will be unique! The transparency of PS offers itself perfectly for lighting, like shown in our how-to \"Make a lamp from PS\".\n\nBut the further possibilities of this material can be taken into many other directions.\nHave fun exploring!",
"_animationKey": "uniquemjlfze"
}
],
Expand Down Expand Up @@ -2468,7 +2467,6 @@
"_animationKey": "uniquec9kbu"
}
],

"_modified": "2019-09-30T18:27:57.570Z",
"_created": "2019-10-01T20:49:43.452Z",
"slug": "make-an-interlocking-brick",
Expand Down Expand Up @@ -2509,5 +2507,44 @@
"contentType": "application/octet-stream"
}
]
},
"zVVjXc34gKhUNIcgLEXg": {
"_created": "2022-01-06T14:50:38.830Z",
"_createdBy": "event_reader",
"deleted": false,
"_id": "zVVjXc34gKhUNIcgLEXg",
"_modified": "2022-01-06T14:50:38.830Z",
"comments": [],
"cover_image": {
"contentType": "image/jpeg",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/precious-plastics-v4-dev.appspot.com/o/uploads%2Fhowtos%2FzVVjXc34gKhUNIcgLEXg%2F244427120_1013223122865247_1166144840734038200_n.jpg?alt=media&token=48af308c-6743-4ea9-bb14-bcdb0342e28a",
"fullPath": "uploads/howtos/zVVjXc34gKhUNIcgLEXg/244427120_1013223122865247_1166144840734038200_n.jpg",
"name": "244427120_1013223122865247_1166144840734038200_n.jpg",
"size": 44971,
"timeCreated": "2022-01-06T14:50:38.415Z",
"type": "image/jpeg",
"updated": "2022-01-06T14:50:38.415Z"
},
"creatorCountry": "",
"description": "Test1",
"difficulty_level": "Medium",
"files": [],
"moderation": "accepted",
"slug": "testing-testing",
"steps": [
{
"_animationKey": "unique1",
"text": "Test",
"title": "Test",
"videoUrl": "https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley"
}
],
"tags": [
{
"uruGBJvokGat2aCvZW0J": true
}
],
"time": "< 1 hour",
"title": "Testing-testing"
}
}
}
26 changes: 25 additions & 1 deletion packages/cypress/src/fixtures/seed/users.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,28 @@
{
"notification_howto_author": {
"verified": false,
"_modified": "2022-01-07T12:07:05.988Z",
"_authID": "5UXRly49EOXtIXmKjPfSU5UpeI66",
"_created": "2022-01-09T12:07:05.988Z",
"displayName": "notification_howto_author",
"_id": "notification_howto_author",
"_deleted": false,
"userName": "notification_howto_author",
"moderation": "awaiting-moderation",
"notifications": []
},
"notification_triggerer": {
"verified": false,
"_modified": "2022-01-07T12:07:05.988Z",
"_authID": "5UXRly49EOXtIXmKjPfSU5UpeI55",
"_created": "2022-01-09T12:07:05.988Z",
"displayName": "notification_triggerer",
"_id": "notification_triggerer",
"_deleted": false,
"userName": "notification_triggerer",
"moderation": "awaiting-moderation",
"notifications": []
},
"event_creator": {
"verified": false,
"_modified": "2020-01-07T12:07:05.988Z",
Expand Down Expand Up @@ -179,4 +203,4 @@
"isExpert": null,
"collectedPlasticTypes": null
}
}
}
127 changes: 127 additions & 0 deletions packages/cypress/src/integration/notifications.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
import { DbCollectionName } from '../utils/test-utils'


describe('[Notifications]', () => {

it('[are not generated when the howTo author is triggering notification]', () => {
cy.visit('how-to')
cy.login('event_reader@test.com', 'test1234');
cy.visit('/how-to/testing-testing')
cy.wait(2000)
cy.get('[data-cy="vote-useful"]')
.contains('Useful')
.click()
cy.wait(2000)
cy.step('Verify the notification has not been added')
cy.queryDocuments(
'users',
'userName',
'==',
'event_reader'
).then(docs => {
expect(docs.length).to.be.greaterThan(0)
expect(docs[0]["notifications"]).to.be.undefined
})
});

it('[are generated by clicking on useful]', () => {
cy.visit('how-to')
cy.login('howto_reader@test.com', 'test1234');
cy.wait(2000)
cy.visit('/how-to/testing-testing')
cy.wait(2000)
cy.get('[data-cy="vote-useful"]')
.contains('Useful')
.click()
cy.wait(7000)
cy.step('Verify the notification has been added')
cy.queryDocuments(
'users',
'userName',
'==',
'event_reader'
).then(docs => {
expect(docs.length).to.be.greaterThan(0)
const user = docs[1]
let notifications = user["notifications"]
expect(notifications.length).to.equal(1)
expect(notifications[0]["type"]).to.equal("howto_useful")
expect(notifications[0]["relevantUrl"]).to.equal("/how-to/testing-testing")
expect(notifications[0]["read"]).to.equal(false)
expect(notifications[0]["triggeredBy"]["displayName"]).to.equal("howto_reader")
})
})

it('[are generated by adding comments]', () => {
cy.visit('how-to')
cy.login('howto_reader@test.com', 'test1234');
cy.visit('/how-to/testing-testing')
cy.wait(2000)
cy.get('[data-cy="comments-form"]')
.type('some sample comment')
cy.wait(2000)
cy.get('[data-cy="comment-submit"]')
.click()
cy.wait(7000)
cy.step('Verify the notification has been added')
cy.queryDocuments(
'users',
'userName',
'==',
'event_reader'
).then(docs => {
expect(docs.length).to.be.greaterThan(0)
const user = docs[1]
let notifications = user["notifications"]
expect(notifications.length).to.equal(1)
expect(notifications[0]["type"]).to.equal("new_comment")
expect(notifications[0]["relevantUrl"]).to.equal("/how-to/testing-testing")
expect(notifications[0]["read"]).to.equal(false)
expect(notifications[0]["triggeredBy"]["displayName"]).to.equal("howto_reader")
})
})

it('[appear in notifications modal]', () => {
cy.visit('how-to')
cy.login('event_reader@test.com', 'test1234');
cy.visit('/how-to/testing-testing')
cy.wait(5000)
cy.get('[data-cy="notifications-desktop"] [data-cy="open-notifications"]').click()
cy.wait(2000)
const notifications = cy.get('[data-cy="notification"]')
expect(notifications).to.exist
})

it('[are marked read when clicking on clear button]', () => {
cy.visit('how-to')
cy.login('event_reader@test.com', 'test1234');
cy.visit('/how-to/testing-testing')
cy.wait(5000)
cy.get('[data-cy="notifications-desktop"] [data-cy="open-notifications"]').click()
cy.wait(2000)
cy.get('[data-cy="clear-notifications"]')
.click()
cy.wait(2000)
cy.step('Verify the notification have been marked read')
cy.queryDocuments(
'users',
'userName',
'==',
'event_reader'
).then(docs => {
expect(docs.length).to.be.greaterThan(0)
const user = docs[1];
const notifications = user["notifications"]
expect(notifications.length).to.be.greaterThan(0)
notifications.forEach(n => {
expect(n["read"]).to.be.true
});
})
cy.wait(5000)
const noNotificationsText = "Nada, no new notification"
cy.get('[data-cy="notifications-desktop"]').should(
"have.text",
noNotificationsText
);
})
})
32 changes: 32 additions & 0 deletions src/assets/icons/icon-comment.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions src/assets/icons/icon-notification.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 25 additions & 0 deletions src/assets/icons/icon-useful.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 8091d1b

Please sign in to comment.