Post.Images.feature

This commit is contained in:
Ulf Gebhardt 2021-04-11 00:21:32 +02:00
parent 828dc361eb
commit c44cefa2f9
No known key found for this signature in database
GPG Key ID: 81308EFE29ABFEBD
14 changed files with 99 additions and 114 deletions

View File

@ -8,7 +8,6 @@ Feature: Persistent Links
| Slug | yes | yes | yes | @-Mentions, SEO-friendly URL |
| Name | yes | no | no | Search, self-description |
Background:
Given I have an user account
And I am logged in

View File

@ -1,47 +1,51 @@
Feature: Upload Teaser Image
Feature: Upload/Delete images on posts
As a user
I would like to be able to add a teaser image to my Post
I would like to be able to add/delete an image to/from my Post
So that I can personalize my posts
Background:
Given I have a user account
Given I am logged in
Given we have the following posts in our database:
Given I have an user account
And I am logged in
And the following "posts" are in the database:
| authorId | id | title | content |
| id-of-peter-pan | p1 | Post to be updated | successfully updated |
And I navigate to page "landing"
Scenario: Create a Post with a Teaser Image
When I click on the big plus icon in the bottom right corner to create post
When I click on "create post button"
Then I should be able to "add" a teaser image
And confirm crop
And I add all required fields
And I click on "Save"
Then I get redirected to ".../new-post"
And I click on "save button"
Then I am on page ".../new-post"
And the post was saved successfully with the "new" teaser image
Scenario: Update a Post to add an image
Given I am on the 'post/edit/p1' page
Given I navigate to page "post/edit/p1"
And I should be able to "change" a teaser image
And confirm crop
And I click on "Save"
And I click on "save button"
Then I see a toaster with "Saved!"
And I get redirected to ".../post-to-be-updated"
And I am on page ".../post-to-be-updated"
Then the post was saved successfully with the "updated" teaser image
Scenario: Add image, then add a different image
When I click on the big plus icon in the bottom right corner to create post
When I click on "create post button"
Then I should be able to "add" a teaser image
And confirm crop
And I should be able to "change" a teaser image
And confirm crop
And the first image should not be displayed anymore
Scenario: Add image, then delete it
When I click on the big plus icon in the bottom right corner to create post
When I click on "create post button"
Then I should be able to "add" a teaser image
And I should be able to remove it
And I should be able to remove the image
And I add all required fields
And I click on "Save"
Then I get redirected to ".../new-post"
And I click on "save button"
Then I am on page ".../new-post"
And the "new" post was saved successfully without a teaser image
Scenario: Delete existing image
Given I navigate to page "post/edit/p1"
And my post has a teaser image
Then I should be able to remove the image
And I click on "save button"
Then I am on page ".../post-to-be-updated"
And the "updated" post was saved successfully without a teaser image

View File

@ -0,0 +1,8 @@
import { Then } from "cypress-cucumber-preprocessor/steps";
Then("I add all required fields", () => {
cy.get('input[name="title"]')
.type('new post')
.get(".editor .ProseMirror")
.type('new post content')
})

View File

@ -0,0 +1,5 @@
import { Then } from "cypress-cucumber-preprocessor/steps";
Then("I see a toaster with {string}", (title) => {
cy.get(".iziToast-message").should("contain", title);
})

View File

@ -0,0 +1,6 @@
import { Then } from "cypress-cucumber-preprocessor/steps";
Then('I should be able to remove the image', () => {
cy.get('.delete-image-button' /* .dz-message > .base-button .crop-cancel*/)
.click()
})

View File

@ -0,0 +1,12 @@
import { Then } from "cypress-cucumber-preprocessor/steps";
Then("I should be able to {string} a teaser image", condition => {
cy.reload()
const teaserImageUpload = (condition === 'change') ? "humanconnection.png" : "onourjourney.png";
cy.fixture(teaserImageUpload).as('postTeaserImage').then(function() {
cy.get("#postdropzone").upload(
{ fileContent: this.postTeaserImage, fileName: teaserImageUpload, mimeType: "image/png" },
{ subjectType: "drag-n-drop", force: true }
);
})
})

View File

@ -0,0 +1,7 @@
import { When } from "cypress-cucumber-preprocessor/steps";
When('my post has a teaser image', () => {
cy.get('.contribution-form .image')
.should('exist')
.and('have.attr', 'src')
})

View File

@ -0,0 +1,9 @@
import { Then } from "cypress-cucumber-preprocessor/steps";
Then("the first image should not be displayed anymore", () => {
cy.get(".hero-image")
.children()
.get('.hero-image > .image')
.should('have.length', 1)
.and('have.attr', 'src')
})

View File

@ -0,0 +1,11 @@
import { Then } from "cypress-cucumber-preprocessor/steps";
Then("the post was saved successfully with the {string} teaser image", condition => {
cy.get(".base-card > .title")
.should("contain", condition === 'updated' ? 'to be updated' : 'new post')
.get(".content")
.should("contain", condition === 'updated' ? 'successfully updated' : 'new post content')
.get('.post-page img')
.should("have.attr", "src")
.and("contains", condition === 'updated' ? 'humanconnection' : 'onourjourney')
})

View File

@ -0,0 +1,12 @@
import { Then } from "cypress-cucumber-preprocessor/steps";
Then('the {string} post was saved successfully without a teaser image', condition => {
cy.get(".base-card > .title")
.should("contain", condition === 'updated' ? 'to be updated' : 'new post')
.get(".content")
.should("contain", condition === 'updated' ? 'successfully updated' : 'new post content')
.get('.post-page')
.should('exist')
.get('.hero-image > .image')
.should('not.exist')
})

View File

@ -35,82 +35,13 @@ And("the post with title {string} has a ribbon for pinned posts", (title) => {
.should("contain", "Announcement")
})
Then("I see a toaster with {string}", (title) => {
cy.get(".iziToast-message").should("contain", title);
})
Then("I should be able to {string} a teaser image", condition => {
cy.reload()
const teaserImageUpload = (condition === 'change') ? "humanconnection.png" : "onourjourney.png";
cy.fixture(teaserImageUpload).as('postTeaserImage').then(function() {
cy.get("#postdropzone").upload(
{ fileContent: this.postTeaserImage, fileName: teaserImageUpload, mimeType: "image/png" },
{ subjectType: "drag-n-drop", force: true }
);
})
})
Then('confirm crop', () => {
/* Then('confirm crop', () => {
cy.get('.crop-confirm')
.click()
})
}) */
Then("I add all required fields", () => {
cy.get('input[name="title"]')
.type('new post')
.get(".editor .ProseMirror")
.type('new post content')
.get(".categories-select .base-button")
.first()
.click()
.get('.base-card > .select-field input')
.click()
.get('.ds-select-option')
.eq(languages.findIndex(l => l.code === 'en'))
.click()
})
Then("the post was saved successfully with the {string} teaser image", condition => {
cy.get(".base-card > .title")
.should("contain", condition === 'updated' ? 'to be updated' : 'new post')
.get(".content")
.should("contain", condition === 'updated' ? 'successfully updated' : 'new post content')
.get('.post-page img')
.should("have.attr", "src")
.and("contains", condition === 'updated' ? 'humanconnection' : 'onourjourney')
})
Then("the first image should not be displayed anymore", () => {
cy.get(".hero-image")
.children()
.get('.hero-image > .image')
.should('have.length', 1)
.and('have.attr', 'src')
})
Then('the {string} post was saved successfully without a teaser image', condition => {
cy.get(".base-card > .title")
.should("contain", condition === 'updated' ? 'to be updated' : 'new post')
.get(".content")
.should("contain", condition === 'updated' ? 'successfully updated' : 'new post content')
.get('.post-page')
.should('exist')
.get('.hero-image > .image')
.should('not.exist')
})
Then('I should be able to remove it', () => {
cy.get('.crop-cancel')
.click()
})
When('my post has a teaser image', () => {
cy.get('.contribution-form .image')
.should('exist')
.and('have.attr', 'src')
})
Then('I should be able to remove the image', () => {
/*Then('I should be able to remove the image', () => {
cy.get('.dz-message > .base-button')
.click()
})
})*/

View File

@ -1,19 +0,0 @@
Feature: Delete Teaser Image
As a user
I would like to be able to remove an image I have previously added to my Post
So that I have control over the content of my Post
Background:
Given I have a user account
Given I am logged in
Given we have the following posts in our database:
| authorId | id | title | content |
| id-of-peter-pan | p1 | Post to be updated | successfully updated |
Scenario: Delete existing image
Given I am on the 'post/edit/p1' page
And my post has a teaser image
Then I should be able to remove the image
And I click on "Save"
Then I get redirected to ".../post-to-be-updated"
And the "updated" post was saved successfully without a teaser image