Combine all separate FacebookPreview components to have a working preview about javascript HOT 3 OPEN

QA feedback:

The following use cases should be tested:
— Title —

1. Create new post with title “Test post”,
   check Facebook title preview is set to “Test post”,
   publish post,
   check meta settings og:title is set to “Test post”
2. Create new post with title “Test post”,
   add Facebook title “Facebook test title” within your post,
   save post,
   check meta settings og:title is set to “Facebook test title”
3. Go to SEO - Search Appearance for Posts - Content types,
   set SEO Title to "%%title%% %%sep%% %%sitename%% test”,
   create new post with title “Test post”,
   check Facebook title preview is set to “Test post - Local WordPress Dev test”,
   publish post,
   check meta settings og:title is set to “Test post - Local WordPress Dev test”

Repeat the steps above for Page, Category and Tag.
Perform all these tests in Premium plugin as well.

— Description —

1. Create new post with the content which starts with “This is the beginning”,
   and Meta description is left empty in Content optimization tab - "Edit Snippet" of the post,
   and Facebook description is left empty,
   publish the post,
   check meta settings og:description is set to "This is the beginning”
2. Given Meta description is left empty in Content optimization tab - "Edit Snippet" of post,
   and content of post is empty,
   and Facebook description is left empty,
   check meta settings do not include "og:description"
3. Create new post with Meta description “Description”,
   and Facebook description is left empty,
   publish the post,
   check Facebook description preview is set to “Description”,
   check meta settings og:description is set to "Description”
4. Create new post with Meta description “Description”,
   and Facebook description is filled with “Facebook description”,
   publish the post,
   check meta settings og:description is set to “Facebook description”
5. Go to SEO - Search Appearance for Posts - Content types,
   set Meta description to “Default test”,
   create new post with title “Test post”,
   check Facebook title preview is set to “Default test”,
   publish post,
   check meta settings og:description is set to “Default test”

Repeat the steps above for Page, Category and Tag

Perform all these tests in Premium plugin as well.

— Image —

1. Given Image URL is empty in "SEO" - "Social" Facebook page,
   and Facebook image is empty in Social - Facebook page of post,
   and no image is presented within post
   upload image to Image URL in "SEO" - "Social" Facebook page
   publish post,
   check meta settings of post contain:
   meta property="og:image" content=<link_to_pic>
   meta property="og:image:width" content="<pic_width>"
   meta property="og:image:height" content="<pic_height>"
2. Given Image URL is empty in "SEO" - "Social" Facebook page,
   and Facebook image is empty in Social - Facebook page of post,
   and no image is presented within post,
   upload image to Facebook image in Social - Facebook page of post,
   publish post,
   check meta settings of post contain:
   meta property="og:image" content=<link_to_pic>
   meta property="og:image:width" content="<pic_width>"
   meta property="og:image:height" content="<pic_height>"
3. Given Image URL is empty in "SEO" - "Social" Facebook page,
   and Facebook image is empty in Social - Facebook page of post,
   and no image is presented within post,
   upload image to the content of post,
   publish post,
   check meta settings of post contain:
   meta property="og:image" content=<link_to_pic>
   meta property="og:image:width" content="<pic_width>"
   meta property="og:image:height" content="<pic_height>"
4. Given Image URL is set to <path_to_my_image1> in "SEO" - "Social" Facebook page,
   and Homepage is set to Static,
   and Facebook image is empty in Social - Facebook page of post,
   no image is presented within Homepage,
   upload an image <path_to_my_image2> in Social - Facebook page of Homepage,
   update post,
   check meta settings of my Homepage contain:
   meta property="og:image" content=<path_to_my_image2>
   meta property="og:image:width" content="<width_of_my_image2>
   meta property="og:image:height" content="<height_of_my_image2>
5. Given Facebook image in Social - Facebook page of post is uploaded,
   protect post with password,
   check meta settings of post do not contain contain:
   meta property="og:image" content=<link_to_pic>
   meta property="og:image:width" content=<pic_width>
   meta property="og:image:height" content=<pic_height>
6. Given Image URL is empty in "SEO" - "Social" Facebook page,
   and Facebook image is empty in Social - Facebook page of post,
   and no image is presented within post,
   and no image is presented in Featured Image of post,
   upload image in Featured Image of post,
   update post,
   check meta settings of post contain:
   meta property="og:image" content=<path_to_my_image>
   meta property="og:image:width" content=<pic_width>
   meta property="og:image:height" content=<pic_height>
7. Given Frontpage Image URL is empty in "SEO" - "Social" Facebook page,
   upload image to Frontpage settings in "SEO" - "Social" Facebook page,
   and click "Save changes”,
   check meta settings of Frontpage contain:
   meta property="og:image" content=<path_to_my_image>
   meta property="og:image:width" content=<pic_width>
   meta property="og:image:height" content=<pic_height>

Repeat tests 1-3 and 5-6 for Pages.
Repeat tests 1-2 for Categories.
Repeat tests 1-2 for Tags.

Perform all these tests in Premium plugin as well.
Make additional checks for image within Premium preview in Premium plugin (and Free if it is included).

— Author name —
Check that Author name is parsed correctly in Facebook Preview.
Perform all these tests in Premium plugin as well.

— Site name —
Check that Site name is parsed correctly in Facebook Preview.
Perform all these tests in Premium plugin as well.

— Upgrade routine —

1. Install last released plugin version,
   fill in the whole information for Social preview for post,
   publish post,
   upgrade to new plugin version,
   check Facebook title, description, image etc are still filled in correctly

Repeat the steps above for Page, Category and Tag
Perform all these tests in Premium plugin as well.

from javascript.

QA feedback:
there is one issue for Category, probably it can be fixed within this epic - Yoast/wordpress-seo#10839

from javascript.

A couple of extra things to note for the Facebook Description:

• Any HTML should get stripped.
• A fallback description should be used when the description is empty. Currently, we use the fallback: Modify your Facebook description by editing it right here. Of course, this should also be translated properly.

from javascript.