Add xfail test stubs for wireframe features (#105)

* Add 52 xfail test stubs covering all wireframe features (#104)

Structured as Gherkin-ready features/scenarios for future pytest-bdd
migration. Each test is marked xfail("Not yet tested") and organized by
page: homepage, about, research, vocabularies, tutorials, navbar
dropdowns, footer/links, and responsive layout.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Promote 49 passing tests from xfail to real regression guards

Ran all 52 stubs against live site: 41 already passed (now active),
8 dropdown tests fixed (hover→click for Bootstrap 5), leaving only
3 genuine xfails for remaining wireframe work:
- Homepage showcase needs 4 images
- Vocabulary detail needs concept hierarchy
- Vocabulary detail needs concept definitions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: rdhyee

tests/test_about_features.py

@@ -0,0 +1,66 @@
+"""
+Feature: About Page
+  As a visitor learning about iSamples
+  I want to navigate to specific sections via anchors
+  And see team photos and PI information
+  So that I understand who is behind the project
+
+  Wireframe ref: Figma frame [33:919] About
+"""
+from conftest import SITE_URL
+
+
+class TestAboutAnchors:
+    """Scenario: Section anchors scroll to correct content."""
+
+    def test_team_anchor_scrolls_to_team(self, page):
+        """Given I navigate to about.html#team, Then the Team section is visible."""
+        page.goto(f"{SITE_URL}/about.html#team", wait_until="domcontentloaded")
+        heading = page.locator("h2:has-text('Team')")
+        assert heading.count() > 0
+        assert heading.first.is_visible()
+
+    def test_photo_gallery_anchor(self, page):
+        """Given I navigate to about.html#photo-gallery, Then the Photo Gallery is visible."""
+        page.goto(f"{SITE_URL}/about.html#photo-gallery", wait_until="domcontentloaded")
+        heading = page.locator("h2:has-text('Photo Gallery')")
+        assert heading.count() > 0
+        assert heading.first.is_visible()
+
+    def test_background_anchor(self, page):
+        """Given I navigate to about.html#background-history, Then Background section is visible."""
+        page.goto(f"{SITE_URL}/about.html#background-history", wait_until="domcontentloaded")
+        heading = page.locator("h2:has-text('Background')")
+        assert heading.count() > 0
+
+
+class TestAboutPILinks:
+    """Scenario: PI names link to ORCID profiles."""
+
+    def test_pi_names_have_orcid_links(self, page):
+        """Given I am on the about page, Then each PI name links to an ORCID profile."""
+        page.goto(f"{SITE_URL}/about.html", wait_until="domcontentloaded")
+        orcid_links = page.locator("a[href*='orcid.org']")
+        assert orcid_links.count() >= 4, f"Expected 4 ORCID links, found {orcid_links.count()}"
+
+
+class TestAboutGallery:
+    """Scenario: Photo gallery displays workshop and facility images."""
+
+    def test_gallery_has_images(self, page):
+        """Given I am on the about page, Then the photo gallery has at least 6 images."""
+        page.goto(f"{SITE_URL}/about.html#photo-gallery", wait_until="domcontentloaded")
+        gallery_section = page.locator("#photo-gallery ~ div img, #photo-gallery ~ .columns img")
+        # Fallback: count all images near the gallery heading
+        if gallery_section.count() == 0:
+            gallery_section = page.locator("img[src*='gallery'], img[src*='workshop'], img[src*='tucson'], img[src*='smithsonian']")
+        assert gallery_section.count() >= 3, f"Expected gallery images, found {gallery_section.count()}"
+
+
+class TestAboutContributors:
+    """Scenario: Contributors section lists project participants."""
+
+    def test_contributors_section_expandable(self, page):
+        """Given I am on the about page, Then I can expand the Contributors section."""
+        page.goto(f"{SITE_URL}/about.html", wait_until="domcontentloaded")
+        assert page.get_by_text("Contributors").count() > 0

tests/test_footer_links.py

@@ -0,0 +1,59 @@
+"""
+Feature: Footer and External Links
+  As a visitor on any page
+  I want to see consistent footer information and working external links
+  So that I can find funding info, legal notices, and related resources
+
+  Wireframe ref: Figma frame [33:425] (footer visible on all frames)
+"""
+from conftest import SITE_URL
+
+
+class TestFooterContent:
+    """Scenario: Footer displays NSF funding acknowledgement."""
+
+    def test_footer_has_nsf_grant_numbers(self, page):
+        """Given I am on any page, Then I see NSF grant numbers in the footer."""
+        page.goto(SITE_URL, wait_until="domcontentloaded")
+        footer = page.locator("footer, .page-footer")
+        assert footer.get_by_text("2004839").count() > 0
+
+    def test_footer_has_copyright(self, page):
+        """And the footer contains a copyright notice."""
+        page.goto(SITE_URL, wait_until="domcontentloaded")
+        footer = page.locator("footer, .page-footer")
+        assert footer.get_by_text("Copyright").count() > 0
+
+    def test_footer_has_disclaimer(self, page):
+        """And the footer includes the NSF disclaimer."""
+        page.goto(SITE_URL, wait_until="domcontentloaded")
+        footer = page.locator("footer, .page-footer")
+        assert footer.get_by_text("not necessarily reflect").count() > 0
+
+
+class TestExternalLinks:
+    """Scenario: Navbar external links point to correct destinations."""
+
+    def test_github_icon_links_to_isamplesorg(self, page):
+        """Given I am on any page, Then the GitHub icon links to isamplesorg."""
+        page.goto(SITE_URL, wait_until="domcontentloaded")
+        gh_link = page.locator("a[href*='github.com/isamplesorg']").first
+        assert gh_link is not None
+        href = gh_link.get_attribute("href")
+        assert "github.com/isamplesorg" in href
+
+    def test_slack_icon_links_to_workspace(self, page):
+        """And the Slack icon links to the iSamples workspace."""
+        page.goto(SITE_URL, wait_until="domcontentloaded")
+        slack_link = page.locator("a[href*='isamples.slack.com']")
+        assert slack_link.count() > 0
+
+
+class TestMetadataModelLink:
+    """Scenario: Metadata Model external link opens correctly."""
+
+    def test_metadata_model_link_exists(self, page):
+        """Given I navigate to Architecture, Then Metadata Model links to external site."""
+        page.goto(f"{SITE_URL}/design/index.html", wait_until="domcontentloaded")
+        link = page.locator("a[href*='isamplesorg.github.io/metadata']")
+        assert link.count() > 0

tests/test_homepage_features.py

@@ -0,0 +1,62 @@
+"""
+Feature: Homepage
+  As a visitor to iSamples.org
+  I want to see an engaging overview of the project
+  So that I understand what iSamples offers and can start exploring
+
+  Wireframe ref: Figma frame [33:425] Home
+"""
+import pytest
+from conftest import SITE_URL
+
+
+class TestHomepageShowcase:
+    """Scenario: Showcase gallery displays real sample images."""
+
+    @pytest.mark.xfail(reason="Not yet tested: #104 P0 — showcase gallery")
+    def test_showcase_has_four_images(self, page):
+        """Given I am on the homepage, Then I should see 4 showcase images."""
+        page.goto(SITE_URL, wait_until="domcontentloaded")
+        images = page.locator(".quarto-figure img, .lightbox img")
+        assert images.count() >= 4
+
+    def test_showcase_images_have_alt_text(self, page):
+        """And each showcase image should have alt text."""
+        page.goto(SITE_URL, wait_until="domcontentloaded")
+        images = page.locator(".quarto-figure img, .lightbox img")
+        for i in range(images.count()):
+            alt = images.nth(i).get_attribute("alt")
+            assert alt and len(alt) > 0, f"Image {i} missing alt text"
+
+
+class TestHomepageCallouts:
+    """Scenario: Collapsible callouts explain the project."""
+
+    def test_has_what_is_isamples_callout(self, page):
+        """Given I am on the homepage, Then I should see a 'What is iSamples?' callout."""
+        page.goto(SITE_URL, wait_until="domcontentloaded")
+        assert page.get_by_text("What is iSamples").count() > 0
+
+    def test_has_how_can_i_access_callout(self, page):
+        """And I should see a 'How can I access it?' callout."""
+        page.goto(SITE_URL, wait_until="domcontentloaded")
+        assert page.get_by_text("How can I access").count() > 0
+
+    def test_has_why_browser_based_callout(self, page):
+        """And I should see a 'Why browser-based?' callout."""
+        page.goto(SITE_URL, wait_until="domcontentloaded")
+        assert page.get_by_text("Why browser-based").count() > 0
+
+
+class TestHomepageHero:
+    """Scenario: Hero section draws visitors in."""
+
+    def test_hero_shows_sample_count(self, page):
+        """Given I am on the homepage, Then I should see '6.7 million' in the stats."""
+        page.goto(SITE_URL, wait_until="domcontentloaded")
+        assert page.get_by_text("6.7 million").count() > 0
+
+    def test_hero_shows_repository_count(self, page):
+        """And I should see '4 repositories'."""
+        page.goto(SITE_URL, wait_until="domcontentloaded")
+        assert page.get_by_text("4 repositories").count() > 0

tests/test_navbar_dropdowns.py

@@ -0,0 +1,84 @@
+"""
+Feature: Navbar Dropdown Menus
+  As a visitor navigating iSamples
+  I want dropdown menus on the navbar to reveal sub-pages
+  So that I can quickly reach any section without using the sidebar
+
+  Wireframe ref: Figma frame [33:425] Home (6-item navbar)
+  Implementation: PR #103
+"""
+from conftest import SITE_URL
+
+
+def _open_dropdown(page, label, exact=False):
+    """Click a Bootstrap 5 navbar dropdown toggle to reveal its menu."""
+    # Structure: li.nav-item.dropdown > a.dropdown-toggle > span.menu-text
+    dropdown_li = page.locator(f".navbar li.dropdown:has(a:has-text('{label}'))")
+    dropdown_li.locator("a.dropdown-toggle").click()
+    menu = dropdown_li.locator("ul.dropdown-menu")
+    menu.wait_for(state="visible", timeout=3000)
+    return menu
+
+
+class TestHowToUseDropdown:
+    """Scenario: How to Use dropdown shows 5 sub-items."""
+
+    def test_how_to_use_dropdown_has_overview(self, page):
+        """Given I click How to Use, Then I see Overview."""
+        page.goto(SITE_URL, wait_until="domcontentloaded")
+        menu = _open_dropdown(page, "How to Use")
+        assert menu.get_by_text("Overview").count() > 0
+
+    def test_how_to_use_dropdown_has_deep_dive(self, page):
+        """And I see Deep-Dive Analysis."""
+        page.goto(SITE_URL, wait_until="domcontentloaded")
+        menu = _open_dropdown(page, "How to Use")
+        assert menu.get_by_text("Deep-Dive Analysis").count() > 0
+
+
+class TestAboutDropdown:
+    """Scenario: About dropdown shows 4 sub-items."""
+
+    def test_about_dropdown_has_objectives(self, page):
+        """Given I click About, Then I see Objectives."""
+        page.goto(SITE_URL, wait_until="domcontentloaded")
+        menu = _open_dropdown(page, "About", exact=True)
+        assert menu.get_by_text("Objectives").count() > 0
+
+    def test_about_dropdown_has_pis(self, page):
+        """And I see PIs and Contributors."""
+        page.goto(SITE_URL, wait_until="domcontentloaded")
+        menu = _open_dropdown(page, "About", exact=True)
+        assert menu.get_by_text("PIs and Contributors").count() > 0
+
+
+class TestArchitectureDropdown:
+    """Scenario: Architecture & Vocabularies dropdown shows sub-items."""
+
+    def test_architecture_dropdown_has_requirements(self, page):
+        """Given I click Architecture, Then I see Requirements."""
+        page.goto(SITE_URL, wait_until="domcontentloaded")
+        menu = _open_dropdown(page, "Architecture")
+        assert menu.get_by_text("Requirements").count() > 0
+
+    def test_architecture_dropdown_has_vocabularies(self, page):
+        """And I see Vocabularies."""
+        page.goto(SITE_URL, wait_until="domcontentloaded")
+        menu = _open_dropdown(page, "Architecture")
+        assert menu.get_by_text("Vocabularies").count() > 0
+
+
+class TestResearchDropdown:
+    """Scenario: Research & Resources dropdown shows sub-items."""
+
+    def test_research_dropdown_has_publications(self, page):
+        """Given I click Research, Then I see Publications & Conferences."""
+        page.goto(SITE_URL, wait_until="domcontentloaded")
+        menu = _open_dropdown(page, "Research")
+        assert menu.get_by_text("Publications").count() > 0
+
+    def test_research_dropdown_has_zenodo(self, page):
+        """And I see Zenodo Community."""
+        page.goto(SITE_URL, wait_until="domcontentloaded")
+        menu = _open_dropdown(page, "Research")
+        assert menu.get_by_text("Zenodo").count() > 0

tests/test_research_resources.py

@@ -0,0 +1,71 @@
+"""
+Feature: Research & Resources Page
+  As a researcher interested in iSamples outputs
+  I want to find publications, datasets, and source code in one place
+  So that I can cite the project and build on its work
+
+  Wireframe ref: Figma frame [130:1156] Research & Resources
+"""
+from conftest import SITE_URL
+
+
+PUBS_URL = f"{SITE_URL}/pubs.html"
+
+
+class TestResearchPageSections:
+    """Scenario: All research sections appear on the unified page."""
+
+    def test_has_publications_section(self, page):
+        """Given I am on the research page, Then I see a Publications section."""
+        page.goto(PUBS_URL, wait_until="domcontentloaded")
+        assert page.locator("h2:has-text('Publications')").count() > 0
+
+    def test_has_zenodo_section(self, page):
+        """And I see a Zenodo Community section."""
+        page.goto(PUBS_URL, wait_until="domcontentloaded")
+        assert page.locator("h2:has-text('Zenodo')").count() > 0
+
+    def test_has_github_section(self, page):
+        """And I see a GitHub Repositories section."""
+        page.goto(PUBS_URL, wait_until="domcontentloaded")
+        assert page.locator("h2:has-text('GitHub')").count() > 0
+
+    def test_github_table_has_repos(self, page):
+        """And the GitHub section lists repository links."""
+        page.goto(PUBS_URL, wait_until="domcontentloaded")
+        repo_links = page.locator("a[href*='github.com/isamplesorg']")
+        assert repo_links.count() >= 3
+
+
+class TestResearchMediaEmbeds:
+    """Scenario: Conference presentations are watchable and downloadable."""
+
+    def test_youtube_embed_is_responsive(self, page):
+        """Given I am on the research page, Then the YouTube embed has width/height."""
+        page.goto(PUBS_URL, wait_until="domcontentloaded")
+        iframe = page.locator("iframe[src*='youtube']")
+        assert iframe.count() > 0
+        box = iframe.first.bounding_box()
+        assert box and box["width"] > 200
+
+    def test_pdf_embed_loads(self, page):
+        """And the PDF slides embed is present."""
+        page.goto(PUBS_URL, wait_until="domcontentloaded")
+        pdf = page.locator("embed[type='application/pdf']")
+        assert pdf.count() > 0
+
+    def test_pdf_download_link(self, page):
+        """And a download link for the PDF slides exists."""
+        page.goto(PUBS_URL, wait_until="domcontentloaded")
+        download = page.locator("a[href*='.pdf']:has-text('Download')")
+        assert download.count() > 0
+
+
+class TestResearchBibliography:
+    """Scenario: Publications section renders bibliography entries."""
+
+    def test_bibliography_has_entries(self, page):
+        """Given I am on the research page, Then I see at least one citation."""
+        page.goto(PUBS_URL, wait_until="domcontentloaded")
+        refs = page.locator("#refs .csl-entry, .references .csl-entry")
+        assert refs.count() > 0