fix cypress tests

cypress/integration/common/post.js

@@ -27,7 +27,7 @@ Then("my comment should be successfully created", () => {
 });
 
 Then("I should see my comment", () => {
-  cy.get("div.comment p")
+  cy.get("article.comment-card p")
     .should("contain", "Human Connection rocks")
     .get(".user-avatar img")
     .should("have.attr", "src")
@@ -37,12 +37,12 @@ Then("I should see my comment", () => {
 });
 
 Then("I should see the entirety of my comment", () => {
-  cy.get("div.comment")
+  cy.get("article.comment-card")
   .should("not.contain", "show more")
 });
 
 Then("I should see an abreviated version of my comment", () => {
-  cy.get("div.comment")
+  cy.get("article.comment-card")
   .should("contain", "show more")
 });
 
@@ -57,7 +57,7 @@ Then("it should create a mention in the CommentForm", () => {
 })
 
 When("I open the content menu of post {string}", (title)=> {
-  cy.contains('.post-card', title)
+  cy.contains('.post-teaser', title)
   .find('.content-menu .base-button')
   .click()
 })
@@ -74,9 +74,10 @@ Then("there is no button to pin a post", () => {
 })
 
 And("the post with title {string} has a ribbon for pinned posts", (title) => {
-  cy.get("article.post-card").contains(title)
+  cy.get(".post-teaser").contains(title)
   .parent()
-  .find("div.ribbon.ribbon--pinned")
+  .parent()
+  .find(".ribbon.--pinned")
   .should("contain", "Announcement")
 })
 

cypress/integration/common/profile.js

@@ -29,7 +29,7 @@ When("I visit another user's profile page", () => {
 });
 
 Then("I cannot upload a picture", () => {
-  cy.get(".ds-card-content")
+  cy.get(".base-card")
     .children()
     .should("not.have.id", "customdropzone")
     .should("have.class", "user-avatar");

cypress/integration/common/report.js

@@ -43,7 +43,7 @@ Given('I am logged in with a {string} role', role => {
 })
 
 When('I click on "Report Post" from the content menu of the post', () => {
-  cy.contains('.ds-card', davidIrvingPostTitle)
+  cy.contains('.base-card', davidIrvingPostTitle)
     .find('.content-menu .base-button')
     .click({force: true})
 
@@ -53,7 +53,7 @@ When('I click on "Report Post" from the content menu of the post', () => {
 })
 
 When('I click on "Report User" from the content menu in the user info box', () => {
-  cy.contains('.ds-card', davidIrvingPostTitle)
+  cy.contains('.base-card', davidIrvingPostTitle)
     .get('.user-content-menu .base-button')
     .click({ force: true })
 
@@ -70,7 +70,7 @@ When('I click on the author', () => {
 
 When('I report the author', () => {
   cy.get('.page-name-profile-id-slug').then(() => {
-    invokeReportOnElement('.ds-card').then(() => {
+    invokeReportOnElement('.base-card').then(() => {
       cy.get('button')
         .contains('Send')
         .click()

cypress/integration/common/search.js

@@ -1,6 +1,6 @@
 import { When, Then } from "cypress-cucumber-preprocessor/steps";
 When("I search for {string}", value => {
-  cy.get(".searchable-input .ds-select-search")
+  cy.get(".searchable-input .ds-select input")
     .focus()
     .type(value);
 });
@@ -25,7 +25,7 @@ Then("the search should contain the annoying user", () => {
     expect($li).to.have.length(1);
   })
   cy.get(".ds-select-dropdown .user-teaser .slug").should("contain", '@spammy-spammer');
-  cy.get(".searchable-input .ds-select-search")
+  cy.get(".searchable-input .ds-select input")
     .focus()
     .type("{esc}");
 })
@@ -44,21 +44,21 @@ Then("I should see the following users in the select dropdown:", table => {
 });
 
 When("I type {string} and press Enter", value => {
-  cy.get(".searchable-input .ds-select-search")
+  cy.get(".searchable-input .ds-select input")
     .focus()
     .type(value)
     .type("{enter}", { force: true });
 });
 
 When("I type {string} and press escape", value => {
-  cy.get(".searchable-input .ds-select-search")
+  cy.get(".searchable-input .ds-select input")
     .focus()
     .type(value)
     .type("{esc}");
 });
 
 Then("the search field should clear", () => {
-  cy.get(".searchable-input .ds-select-search").should("have.text", "");
+  cy.get(".searchable-input .ds-select input").should("have.text", "");
 });
 
 When("I select a post entry", () => {

cypress/integration/common/settings.js

@@ -80,7 +80,7 @@ Then('I should be on the {string} page', page => {
     .should(loc => {
       expect(loc.pathname).to.eq(page)
     })
-    .get('h3')
+    .get('h2')
     .should('contain', 'Social media')
 })
 
@@ -112,7 +112,7 @@ Given('I have added a social media link', () => {
 })
 
 Then('they should be able to see my social media links', () => {
-  cy.get('.ds-card-content')
+  cy.get('.base-card')
     .contains('Where else can I find Peter Pan?')
     .get('a[href="https://freeradical.zone/peter-pan"]')
     .should('have.length', 1)

cypress/integration/common/steps.js

@@ -43,7 +43,7 @@ Given("I am logged in", () => {
 Given("the {string} user searches for {string}", (_, postTitle) => {
   cy.logout()
     .login({ email: annoyingParams.email, password: '1234' })
-    .get(".searchable-input .ds-select-search")
+    .get(".searchable-input .ds-select input")
     .focus()
     .type(postTitle);
 });
@@ -270,14 +270,14 @@ Then("I select a category", () => {
 });
 
 When("I choose {string} as the language for the post", (languageCode) => {
-  cy.get('.ds-flex-item > .ds-form-item .ds-select ')
+  cy.get('.contribution-form .ds-select ')
     .click().get('.ds-select-option')
     .eq(languages.findIndex(l => l.code === languageCode)).click()
 })
 
 Then("the post shows up on the landing page at position {int}", index => {
   cy.openPage("landing");
-  const selector = `.post-card:nth-child(${index}) > .ds-card-content`;
+  const selector = `.post-teaser:nth-child(${index}) > .base-card`;
   cy.get(selector).should("contain", lastPost.title);
   cy.get(selector).should("contain", lastPost.content);
 });
@@ -287,16 +287,16 @@ Then("I get redirected to {string}", route => {
 });
 
 Then("the post was saved successfully", () => {
-  cy.get(".ds-card-content > .ds-heading").should("contain", lastPost.title);
+  cy.get(".base-card > .title").should("contain", lastPost.title);
   cy.get(".content").should("contain", lastPost.content);
 });
 
 Then(/^I should see only ([0-9]+) posts? on the landing page/, postCount => {
-  cy.get(".post-card").should("have.length", postCount);
+  cy.get(".post-teaser").should("have.length", postCount);
 });
 
 Then("the first post on the landing page has the title:", title => {
-  cy.get(".post-card:first").should("contain", title);
+  cy.get(".post-teaser:first").should("contain", title);
 });
 
 Then(
@@ -383,7 +383,7 @@ When("I log in with the following credentials:", table => {
 
 When("open the notification menu and click on the first item", () => {
   cy.get(".notifications-menu").invoke('show').click(); // "invoke('show')" because of the delay for show the menu
-  cy.get(".notification-mention-post")
+  cy.get(".notification .link")
     .first()
     .click({
       force: true
@@ -420,7 +420,7 @@ When("mention {string} in the text", mention => {
 Then("the notification gets marked as read", () => {
   cy.get(".notifications-menu-popover .notification")
     .first()
-    .should("have.class", "read");
+    .should("have.class", "--read");
 });
 
 Then("there are no notifications in the top menu", () => {
@@ -508,14 +508,14 @@ Given('{string} wrote a post {string}', (_, title) => {
 });
 
 Then("the list of posts of this user is empty", () => {
-  cy.get(".ds-card-content").not(".post-link");
+  cy.get(".base-card").not(".post-link");
   cy.get(".main-container").find(".ds-space.hc-empty");
 });
 
 Then("I get removed from his follower collection", () => {
-  cy.get(".ds-card-content").not(".post-link");
+  cy.get(".base-card").not(".post-link");
   cy.get(".main-container").contains(
-    ".ds-card-content",
+    ".base-card",
     "is not followed by anyone"
   );
 });
@@ -578,9 +578,9 @@ Then("I see only one post with the title {string}", title => {
 });
 
 Then("they should not see the comment from", () => {
-  cy.get(".ds-card-footer").children().should('not.have.class', 'comment-form')
+  cy.get(".base-card").children().should('not.have.class', 'comment-form')
 })
 
 Then("they should see a text explaining commenting is not possible", () => {
   cy.get('.ds-placeholder').should('contain', "Commenting is not possible at this time on this post.")
-})
+})

webapp/pages/post/_id/_slug/index.vue

@@ -40,7 +40,7 @@
         </client-only>
       </section>
       <ds-space margin-bottom="small" />
-      <ds-heading tag="h3" no-margin class="hyphenate-text">{{ post.title }}</ds-heading>
+      <h2 class="title hyphenate-text">{{ post.title }}</h2>
       <ds-space margin-bottom="small" />
       <content-viewer class="content hyphenate-text" :content="post.content" />
       <!-- eslint-enable vue/no-v-html -->

webapp/pages/settings/index.vue

@@ -31,11 +31,9 @@
           :label="$t('settings.data.labelBio')"
           :placeholder="$t('settings.data.labelBio')"
         />
-        <template slot="footer">
-          <base-button icon="check" :disabled="errors" type="submit" :loading="loadingData" filled>
-            {{ $t('actions.save') }}
-          </base-button>
-        </template>
+        <base-button icon="check" :disabled="errors" type="submit" :loading="loadingData" filled>
+          {{ $t('actions.save') }}
+        </base-button>
       </base-card>
     </template>
   </ds-form>