@nextsparkjs/theme-blog 0.1.0-beta.19 → 0.1.0-beta.20

package/tests/cypress/src/PostsList.js

@@ -0,0 +1,350 @@
+/**
+ * PostsList - Blog Theme Posts List Page POM
+ *
+ * Handles posts listing with filters, views, and CRUD actions.
+ * Supports both table and grid view modes.
+ *
+ * Test cases: BLOG_POST_READ_001-005, BLOG_POST_DELETE_001-003
+ */
+export class PostsList {
+  static selectors = {
+    // Container
+    container: '[data-cy="posts-list-container"]',
+    title: '[data-cy="posts-list-title"]',
+
+    // Stats/Filters
+    statAll: '[data-cy="posts-stat-all"]',
+    statPublished: '[data-cy="posts-stat-published"]',
+    statDraft: '[data-cy="posts-stat-draft"]',
+    statScheduled: '[data-cy="posts-stat-scheduled"]',
+
+    // Toolbar
+    toolbar: '[data-cy="posts-toolbar"]',
+    searchInput: '[data-cy="posts-search-input"]',
+    sortSelect: '[data-cy="posts-sort-select"]',
+
+    // View Toggles
+    viewTable: '[data-cy="posts-view-table"]',
+    viewGrid: '[data-cy="posts-view-grid"]',
+
+    // Bulk Actions
+    bulkActions: '[data-cy="posts-bulk-actions"]',
+    bulkPublish: '[data-cy="posts-bulk-publish"]',
+    bulkDelete: '[data-cy="posts-bulk-delete"]',
+
+    // Table View
+    tableContainer: '[data-cy="posts-table-container"]',
+    table: '[data-cy="posts-table"]',
+
+    // Grid View
+    gridContainer: '[data-cy="posts-grid-container"]',
+
+    // Create Button
+    createButton: '[data-cy="posts-create-button"]',
+
+    // States
+    loading: '[data-cy="posts-loading"]',
+    empty: '[data-cy="posts-empty"]',
+    emptyCreate: '[data-cy="posts-empty-create"]',
+
+    // Delete Dialog
+    deleteDialog: '[data-cy="posts-delete-dialog"]',
+    deleteConfirm: '[data-cy="posts-delete-confirm"]',
+    deleteCancel: '[data-cy="posts-delete-cancel"]',
+  }
+
+  /**
+   * Get dynamic selectors for a specific post by ID
+   */
+  static getPostSelectors(id) {
+    return {
+      // Table row
+      row: `[data-cy="posts-row-${id}"]`,
+      title: `[data-cy="posts-title-${id}"]`,
+      status: `[data-cy="posts-status-${id}"]`,
+      actions: `[data-cy="posts-actions-${id}"]`,
+      edit: `[data-cy="posts-edit-${id}"]`,
+      viewLive: `[data-cy="posts-view-live-${id}"]`,
+      publish: `[data-cy="posts-publish-${id}"]`,
+      unpublish: `[data-cy="posts-unpublish-${id}"]`,
+      delete: `[data-cy="posts-delete-${id}"]`,
+
+      // Grid card
+      card: `[data-cy="posts-card-${id}"]`,
+      cardTitle: `[data-cy="posts-card-title-${id}"]`,
+    }
+  }
+
+  /**
+   * Validate that the posts list page is visible and loaded
+   */
+  validateListVisible() {
+    cy.get(PostsList.selectors.container).should('be.visible')
+    cy.get(PostsList.selectors.title).should('be.visible')
+    cy.url().should('include', '/dashboard/posts')
+    return this
+  }
+
+  /**
+   * Validate loading state
+   */
+  validateLoading() {
+    cy.get(PostsList.selectors.loading).should('be.visible')
+    return this
+  }
+
+  /**
+   * Wait for loading to complete
+   */
+  waitForLoadingComplete() {
+    cy.get(PostsList.selectors.loading).should('not.exist')
+    return this
+  }
+
+  /**
+   * Validate empty state is shown
+   */
+  validateEmptyState() {
+    cy.get(PostsList.selectors.empty).should('be.visible')
+    return this
+  }
+
+  /**
+   * Filter posts by status using stat buttons
+   * @param {string} status - 'all' | 'published' | 'draft' | 'scheduled'
+   */
+  filterByStatus(status) {
+    const statusMap = {
+      all: PostsList.selectors.statAll,
+      published: PostsList.selectors.statPublished,
+      draft: PostsList.selectors.statDraft,
+      scheduled: PostsList.selectors.statScheduled,
+    }
+    cy.get(statusMap[status]).click()
+    return this
+  }
+
+  /**
+   * Search posts by term
+   * @param {string} term - Search term
+   */
+  search(term) {
+    cy.get(PostsList.selectors.searchInput)
+      .clear()
+      .type(term)
+    return this
+  }
+
+  /**
+   * Clear search input
+   */
+  clearSearch() {
+    cy.get(PostsList.selectors.searchInput).clear()
+    return this
+  }
+
+  /**
+   * Set view mode
+   * @param {string} mode - 'table' | 'grid'
+   */
+  setViewMode(mode) {
+    if (mode === 'table') {
+      cy.get(PostsList.selectors.viewTable).click()
+    } else {
+      cy.get(PostsList.selectors.viewGrid).click()
+    }
+    return this
+  }
+
+  /**
+   * Validate current view mode
+   * @param {string} mode - 'table' | 'grid'
+   */
+  validateViewMode(mode) {
+    if (mode === 'table') {
+      cy.get(PostsList.selectors.tableContainer).should('be.visible')
+    } else {
+      cy.get(PostsList.selectors.gridContainer).should('be.visible')
+    }
+    return this
+  }
+
+  /**
+   * Sort posts by selecting option
+   * @param {string} option - Sort option value
+   */
+  sortBy(option) {
+    cy.get(PostsList.selectors.sortSelect).click()
+    cy.get(`[data-value="${option}"]`).click()
+    return this
+  }
+
+  /**
+   * Click create new post button
+   */
+  clickCreate() {
+    cy.get(PostsList.selectors.createButton).click()
+    return this
+  }
+
+  /**
+   * Get post row element (table view)
+   * @param {string} id - Post ID
+   */
+  getPostRow(id) {
+    return cy.get(PostsList.getPostSelectors(id).row)
+  }
+
+  /**
+   * Get post card element (grid view)
+   * @param {string} id - Post ID
+   */
+  getPostCard(id) {
+    return cy.get(PostsList.getPostSelectors(id).card)
+  }
+
+  /**
+   * Click on post title to navigate to edit
+   * @param {string} id - Post ID
+   */
+  clickPostTitle(id) {
+    cy.get(PostsList.getPostSelectors(id).title).click()
+    return this
+  }
+
+  /**
+   * Open actions menu for a post
+   * @param {string} id - Post ID
+   */
+  openPostActions(id) {
+    cy.get(PostsList.getPostSelectors(id).actions).click()
+    return this
+  }
+
+  /**
+   * Click edit action for a post
+   * @param {string} id - Post ID
+   */
+  clickEdit(id) {
+    this.openPostActions(id)
+    cy.get(PostsList.getPostSelectors(id).edit).click()
+    return this
+  }
+
+  /**
+   * Click publish action for a post
+   * @param {string} id - Post ID
+   */
+  clickPublish(id) {
+    this.openPostActions(id)
+    cy.get(PostsList.getPostSelectors(id).publish).click()
+    return this
+  }
+
+  /**
+   * Click unpublish action for a post
+   * @param {string} id - Post ID
+   */
+  clickUnpublish(id) {
+    this.openPostActions(id)
+    cy.get(PostsList.getPostSelectors(id).unpublish).click()
+    return this
+  }
+
+  /**
+   * Click delete action for a post (opens confirmation dialog)
+   * @param {string} id - Post ID
+   */
+  clickDelete(id) {
+    this.openPostActions(id)
+    cy.get(PostsList.getPostSelectors(id).delete).click()
+    return this
+  }
+
+  /**
+   * Confirm post deletion in dialog
+   */
+  confirmDelete() {
+    cy.get(PostsList.selectors.deleteDialog).should('be.visible')
+    cy.get(PostsList.selectors.deleteConfirm).click()
+    return this
+  }
+
+  /**
+   * Cancel post deletion in dialog
+   */
+  cancelDelete() {
+    cy.get(PostsList.selectors.deleteDialog).should('be.visible')
+    cy.get(PostsList.selectors.deleteCancel).click()
+    return this
+  }
+
+  /**
+   * Validate delete dialog is visible
+   */
+  validateDeleteDialogVisible() {
+    cy.get(PostsList.selectors.deleteDialog).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate a post exists in the list
+   * @param {string} id - Post ID
+   */
+  validatePostExists(id) {
+    cy.get(PostsList.getPostSelectors(id).row).should('exist')
+    return this
+  }
+
+  /**
+   * Validate a post does not exist in the list
+   * @param {string} id - Post ID
+   */
+  validatePostNotExists(id) {
+    cy.get(PostsList.getPostSelectors(id).row).should('not.exist')
+    return this
+  }
+
+  /**
+   * Validate post status badge using data-cy-status attribute
+   * @param {string} id - Post ID
+   * @param {string} status - Expected status code ('draft' | 'published')
+   */
+  validatePostStatus(id, status) {
+    cy.get(PostsList.getPostSelectors(id).status)
+      .should('be.visible')
+      .and('have.attr', 'data-cy-status', status)
+    return this
+  }
+
+  /**
+   * Validate post count in list
+   * @param {number} count - Expected number of posts
+   */
+  validatePostCount(count) {
+    if (count === 0) {
+      this.validateEmptyState()
+    } else {
+      cy.get('[data-cy^="posts-row-"]').should('have.length', count)
+    }
+    return this
+  }
+
+  /**
+   * Validate stat count
+   * @param {string} status - Stat type ('all' | 'published' | 'draft' | 'scheduled')
+   * @param {number} count - Expected count
+   */
+  validateStatCount(status, count) {
+    const statusMap = {
+      all: PostsList.selectors.statAll,
+      published: PostsList.selectors.statPublished,
+      draft: PostsList.selectors.statDraft,
+      scheduled: PostsList.selectors.statScheduled,
+    }
+    cy.get(statusMap[status]).should('contain.text', count.toString())
+    return this
+  }
+}
+
+export default PostsList

package/tests/cypress/src/WysiwygEditor.js

@@ -0,0 +1,373 @@
+/**
+ * WysiwygEditor - Blog Theme Rich Text Editor POM
+ *
+ * Handles content editing with formatting toolbar.
+ * Based on native contentEditable with document.execCommand.
+ *
+ * Test cases: BLOG_EDITOR_001-006
+ */
+export class WysiwygEditor {
+  static selectors = {
+    // Container
+    container: '[data-cy="wysiwyg-container"]',
+
+    // Toolbar
+    toolbar: '[data-cy="wysiwyg-toolbar"]',
+
+    // Undo/Redo
+    undo: '[data-cy="wysiwyg-undo"]',
+    redo: '[data-cy="wysiwyg-redo"]',
+
+    // Text Formatting
+    bold: '[data-cy="wysiwyg-bold"]',
+    italic: '[data-cy="wysiwyg-italic"]',
+    underline: '[data-cy="wysiwyg-underline"]',
+    strikeThrough: '[data-cy="wysiwyg-strikeThrough"]',
+
+    // Headings
+    h1: '[data-cy="wysiwyg-formatBlock-h1"]',
+    h2: '[data-cy="wysiwyg-formatBlock-h2"]',
+    h3: '[data-cy="wysiwyg-formatBlock-h3"]',
+
+    // Lists
+    bulletList: '[data-cy="wysiwyg-insertUnorderedList"]',
+    orderedList: '[data-cy="wysiwyg-insertOrderedList"]',
+
+    // Blocks
+    blockquote: '[data-cy="wysiwyg-formatBlock-blockquote"]',
+    codeBlock: '[data-cy="wysiwyg-formatBlock-pre"]',
+
+    // Media/Links
+    link: '[data-cy="wysiwyg-createLink"]',
+    image: '[data-cy="wysiwyg-insertImage"]',
+    horizontalRule: '[data-cy="wysiwyg-insertHorizontalRule"]',
+
+    // Preview
+    previewToggle: '[data-cy="wysiwyg-preview-toggle"]',
+    preview: '[data-cy="wysiwyg-preview"]',
+
+    // Editor
+    editorWrapper: '[data-cy="wysiwyg-editor-wrapper"]',
+    content: '[data-cy="wysiwyg-content"]',
+    placeholder: '[data-cy="wysiwyg-placeholder"]',
+
+    // Status Bar
+    statusbar: '[data-cy="wysiwyg-statusbar"]',
+    shortcuts: '[data-cy="wysiwyg-shortcuts"]',
+    wordcount: '[data-cy="wysiwyg-wordcount"]',
+  }
+
+  /**
+   * Validate editor is visible
+   */
+  validateVisible() {
+    cy.get(WysiwygEditor.selectors.container).should('be.visible')
+    cy.get(WysiwygEditor.selectors.toolbar).should('be.visible')
+    return this
+  }
+
+  /**
+   * Focus the editor content area
+   */
+  focus() {
+    cy.get(WysiwygEditor.selectors.content).focus()
+    return this
+  }
+
+  /**
+   * Type content into the editor
+   * @param {string} text - Text to type
+   */
+  typeContent(text) {
+    cy.get(WysiwygEditor.selectors.content)
+      .focus()
+      .type(text)
+    return this
+  }
+
+  /**
+   * Clear all content
+   */
+  clearContent() {
+    cy.get(WysiwygEditor.selectors.content)
+      .focus()
+      .clear()
+    return this
+  }
+
+  /**
+   * Get content HTML
+   */
+  getContent() {
+    return cy.get(WysiwygEditor.selectors.content).invoke('html')
+  }
+
+  /**
+   * Validate content contains text
+   * @param {string} text - Expected text
+   */
+  validateContentContains(text) {
+    cy.get(WysiwygEditor.selectors.content).should('contain.text', text)
+    return this
+  }
+
+  /**
+   * Select all content
+   */
+  selectAll() {
+    cy.get(WysiwygEditor.selectors.content)
+      .focus()
+      .type('{selectall}')
+    return this
+  }
+
+  /**
+   * Toggle bold formatting
+   */
+  toggleBold() {
+    cy.get(WysiwygEditor.selectors.bold).click()
+    return this
+  }
+
+  /**
+   * Toggle italic formatting
+   */
+  toggleItalic() {
+    cy.get(WysiwygEditor.selectors.italic).click()
+    return this
+  }
+
+  /**
+   * Toggle underline formatting
+   */
+  toggleUnderline() {
+    cy.get(WysiwygEditor.selectors.underline).click()
+    return this
+  }
+
+  /**
+   * Toggle strikethrough formatting
+   */
+  toggleStrikethrough() {
+    cy.get(WysiwygEditor.selectors.strikeThrough).click()
+    return this
+  }
+
+  /**
+   * Insert heading
+   * @param {number} level - Heading level (1, 2, or 3)
+   */
+  insertHeading(level) {
+    const headingMap = {
+      1: WysiwygEditor.selectors.h1,
+      2: WysiwygEditor.selectors.h2,
+      3: WysiwygEditor.selectors.h3,
+    }
+    cy.get(headingMap[level]).click()
+    return this
+  }
+
+  /**
+   * Insert bullet list
+   */
+  insertBulletList() {
+    cy.get(WysiwygEditor.selectors.bulletList).click()
+    return this
+  }
+
+  /**
+   * Insert ordered list
+   */
+  insertOrderedList() {
+    cy.get(WysiwygEditor.selectors.orderedList).click()
+    return this
+  }
+
+  /**
+   * Insert blockquote
+   */
+  insertBlockquote() {
+    cy.get(WysiwygEditor.selectors.blockquote).click()
+    return this
+  }
+
+  /**
+   * Insert code block
+   */
+  insertCodeBlock() {
+    cy.get(WysiwygEditor.selectors.codeBlock).click()
+    return this
+  }
+
+  /**
+   * Insert horizontal rule
+   */
+  insertHorizontalRule() {
+    cy.get(WysiwygEditor.selectors.horizontalRule).click()
+    return this
+  }
+
+  /**
+   * Insert link (will trigger browser prompt)
+   * Note: In tests, you may need to stub window.prompt
+   * @param {string} url - Link URL
+   */
+  insertLink(url) {
+    cy.window().then(win => {
+      cy.stub(win, 'prompt').returns(url)
+    })
+    cy.get(WysiwygEditor.selectors.link).click()
+    return this
+  }
+
+  /**
+   * Insert image (will trigger browser prompt)
+   * Note: In tests, you may need to stub window.prompt
+   * @param {string} url - Image URL
+   */
+  insertImage(url) {
+    cy.window().then(win => {
+      cy.stub(win, 'prompt').returns(url)
+    })
+    cy.get(WysiwygEditor.selectors.image).click()
+    return this
+  }
+
+  /**
+   * Click undo button
+   */
+  undo() {
+    cy.get(WysiwygEditor.selectors.undo).click()
+    return this
+  }
+
+  /**
+   * Click redo button
+   */
+  redo() {
+    cy.get(WysiwygEditor.selectors.redo).click()
+    return this
+  }
+
+  /**
+   * Use keyboard shortcut for undo
+   */
+  undoKeyboard() {
+    cy.get(WysiwygEditor.selectors.content)
+      .focus()
+      .type('{ctrl+z}')
+    return this
+  }
+
+  /**
+   * Use keyboard shortcut for redo
+   */
+  redoKeyboard() {
+    cy.get(WysiwygEditor.selectors.content)
+      .focus()
+      .type('{ctrl+shift+z}')
+    return this
+  }
+
+  /**
+   * Toggle preview mode
+   */
+  togglePreview() {
+    cy.get(WysiwygEditor.selectors.previewToggle).click()
+    return this
+  }
+
+  /**
+   * Validate preview mode is active
+   */
+  validatePreviewMode() {
+    cy.get(WysiwygEditor.selectors.preview).should('be.visible')
+    cy.get(WysiwygEditor.selectors.content).should('not.exist')
+    return this
+  }
+
+  /**
+   * Validate edit mode is active
+   */
+  validateEditMode() {
+    cy.get(WysiwygEditor.selectors.content).should('be.visible')
+    cy.get(WysiwygEditor.selectors.preview).should('not.exist')
+    return this
+  }
+
+  /**
+   * Validate placeholder is visible
+   * @param {string} text - Expected placeholder text (optional)
+   */
+  validatePlaceholder(text) {
+    cy.get(WysiwygEditor.selectors.placeholder).should('be.visible')
+    if (text) {
+      cy.get(WysiwygEditor.selectors.placeholder).should('contain.text', text)
+    }
+    return this
+  }
+
+  /**
+   * Validate placeholder is hidden (content exists)
+   */
+  validatePlaceholderHidden() {
+    cy.get(WysiwygEditor.selectors.placeholder).should('not.exist')
+    return this
+  }
+
+  /**
+   * Validate word count
+   * @param {number} count - Expected word count
+   */
+  validateWordCount(count) {
+    cy.get(WysiwygEditor.selectors.wordcount)
+      .should('contain.text', `${count} words`)
+    return this
+  }
+
+  /**
+   * Validate content contains specific HTML element
+   * @param {string} tag - HTML tag name (e.g., 'h1', 'ul', 'blockquote')
+   */
+  validateContentHasElement(tag) {
+    cy.get(WysiwygEditor.selectors.content)
+      .find(tag)
+      .should('exist')
+    return this
+  }
+
+  /**
+   * Validate bold text is present
+   */
+  validateHasBoldText() {
+    cy.get(WysiwygEditor.selectors.content)
+      .find('b, strong')
+      .should('exist')
+    return this
+  }
+
+  /**
+   * Validate italic text is present
+   */
+  validateHasItalicText() {
+    cy.get(WysiwygEditor.selectors.content)
+      .find('i, em')
+      .should('exist')
+    return this
+  }
+
+  /**
+   * Validate link is present
+   * @param {string} url - Expected URL (optional)
+   */
+  validateHasLink(url) {
+    const link = cy.get(WysiwygEditor.selectors.content).find('a')
+    link.should('exist')
+    if (url) {
+      link.should('have.attr', 'href', url)
+    }
+    return this
+  }
+}
+
+export default WysiwygEditor