Skip to content

Latest commit

 

History

History
187 lines (118 loc) · 8.98 KB

embed.md

File metadata and controls

187 lines (118 loc) · 8.98 KB
Raw

Embed Block - Test Cases

TC001

Inline previews are rendered correctly for the top 5 most-used providers

Precondition

Perform these tests for each of the top 5 most-used providers below.

N.B Instagram only works on WP.com sites or self hosted sites with a Jetpack connection.

  1. YouTube
  2. Twitter
  3. Instagram
  4. WordPress
  5. Vimeo

Initial steps

  • Open the Inserter.
  • Add a specific provider from the list above.

Steps

  • Add a link to be previewed.

Expected Behavior

  • Verify that there are no style issues and the preview is rendered as expected.
TC002

Inline previews are rendered accordingly for each alignment option

Precondition

Initial steps

  • Add an Embed block.
  • Add a valid embed URL.

1. Default alignment

Expected Behavior

  • Observe that the preview content is centered and covers the entire block.
Screenshots

Resize mode ON

Native editor Web editor Tablet preview
align-empty-resize-native align-empty-resize-web align-empty-resize-preview

Resize mode OFF

Native editor Web editor Tablet preview
align-empty-no-resize-native align-empty-no-resize-web align-empty-no-resize-preview

2. Align left

Steps

  • Tap on the align options located in the toolbar.
  • Tap on "Align left".

Expected Behavior

  • Observe that the preview content is aligned left and only covers part of the block.
Screenshots

Resize mode ON

Native editor Web editor Tablet preview
align-left-resize-native align-left-resize-web align-left-resize-preview

Resize mode OFF

Native editor Web editor Tablet preview
align-left-no-resize-native align-left-no-resize-web align-left-no-resize-preview

3. Align center

Steps

  • Tap on the align options located in the toolbar.
  • Tap on "Align center".

Expected Behavior

  • Observe that the preview content is centered and covers the entire block.
Screenshots

Resize mode ON

Native editor Web editor Tablet preview
align-center-resize-native align-center-resize-web align-center-resize-preview

Resize mode OFF

Native editor Web editor Tablet preview
align-center-no-resize-native align-center-no-resize-web align-center-no-resize-preview

4. Align right

  • Tap on the align options located in the toolbar.
  • Tap on "Align right".

Expected Behavior

  • Observe that the preview content is aligned right and only covers part of the block.
Screenshots

Resize mode ON

Native editor Web editor Tablet preview
align-right-resize-native align-right-resize-web align-right-resize-preview

Resize mode OFF

Native editor Web editor Tablet preview
align-right-no-resize-native align-right-no-resize-web align-right-no-resize-preview

5. Wide width

Steps

  • Tap on the align options located in the toolbar.
  • Tap on "Wide width".

Expected Behavior

  • Observe that the block's width is wider than the rest of the content and that the preview content covers the entire block.

NOTE: Some embed content like Tweets won't cover the entire block because it's not designed for that purpose.

Screenshots

Resize mode ON

Native editor Web editor Tablet preview
wide-width-resize-native wide-width-resize-web wide-width-resize-preview

Resize mode OFF

Native editor Web editor Tablet preview
wide-width-no-resize-native wide-width-no-resize-web wide-width-no-resize-preview

6. Full width

Steps

  • Tap on the align options located in the toolbar.
  • Tap on "Full width".

Expected Behavior

  • Observe that the block's width covers the entire editor and that the preview content covers the entire block.
Screenshots

Resize mode ON

Native editor Web editor Tablet preview
full-width-resize-native full-width-resize-web full-width-resize-preview

Resize mode OFF

Native editor Web editor Tablet preview
full-width-no-resize-native full-width-no-resize-web full-width-no-resize-preview