SlideShare a Scribd company logo
Bridging the gap between frontend
applications
Component Testing:
Zachary J. Hamm / 2024-06-21
QA or the Highway – Columbus, OH
Zachary
Hamm
Staff Software Engineer
Automation architecture, frontend development, and
SDLC process improvement
Focused in:
Songwriting and practicing guitar; athletics; retro
+ multiplayer gaming; arts + history; many other
subjects
Things I enjoy:
About me
Previously: Validic; Nationwide
Insurance; Huntington National Bank
Today you can
Review what
web components
are
01.
Discover
component-level
testing
02.
Determine
when and
what to test
03.
Build a web-
app test
strategy
04.
Purpose
Where we were before
Building websites with HTML, CSS, and
pure JavaScript
Previous web pattern designs
3 column
layout
Uses HTML
elements
directly
CSS and layout
built only for
desktop screens
Embedded
JavaScript,
JQuery, AJAX,
Flash for
functionality
Load
everything
at once
Displays
simple
content, like
text or
compressed
pictures
Where we are now
Creating with components
Building with components
Components
allow
reusability
and
structuring
Frameworks
extend base
languages
including
JavaScript, Ruby,
or Python
Content is
much more
complex and
intensive
Dynamic
rendering
and loading
Custom theming, grid
layouts and
responsive webviews
for mobile and other
screen sizes
State can be
individually
managed inside
of components
“A web page is a simple document
displayable by a browser….(it) can embed a
variety of different types of resources
such as: style information…scripts…(and)
media” (Mozilla)
Firstly, what is a web page?
- HTML elements,
- Interactive functions, including requests,
- Styling and presentation,
- Photos, videos, and other media types
What are components? - An overview
This includes
What are components? - An overview
“Web components are a set of web platform
APIs that allow you to create new custom,
reusable, encapsulated HTML tags to use in
web pages and web apps.” (webcomponents.org)
Then, what are components?
They can also include
- HTML elements,
- Interactive functions, including requests,
- Styling and presentation,
- Photos, videos, and other media types
What are components? - Creating hierarchy
Data fetched in
request hooks per
component, like
these product prices
Components can be
reused, like this
footer
Components can be
deeply nested in
other components
Forms control data
validation and
submission
Styling, like active
colors, can be updated
based on state
Performing
automated testing
against web
applications
Benefits
Integrated: it asserts against a
testable version of the application
in a “real” environment
Data moving through the application
aligns closely with a production
environment
Allows for external systems to be
connected and utilized
Automation frameworks do not need to
configure the state environment, but
be configured to work within it
Drawbacks
Test flakiness is harder to predict
since it relies on uncontrollable
environments and external systems
Data management, setup, and cleanup
is complex to manage
Testing against interactions and
validations instead of data flow
requires large overhead in test
preparation
Requires deep knowledge of all
systems connected in an environment
to write accurate tests
Slower to execute
End-to-end testing - A comparison
Enter:
Component testing
Dom Testing Library
(React, Svelte,
Angular, and more)
WebDriverIO
Vue Test Utils
Playwright
Component-level test frameworks
1. A basic HTML file is created in which the component can be rendered
2. A customizable mount command is built to render a component with data
3. The dev server is launched locally, typically by the test framework
4. A spec test file is opened or executed
5. Tests begin by rendering a customized component using the mount
6. The test can now interact with and validate against the component
How are components able to be tested?
Performing component testing
Example 1:
Simple component tests
Example 1 - Simple component tests
Example 2:
Complexity with mocks and
intercepts
Example 2 - Complexity with mocks and intercepts (1)
Example 2 - Complexity with mocks and intercepts (2)
Drawbacks
Requires deep knowledge of the component
library as well
Setup is more complex around configuring
the “mount” command
Validating request hooks and
subscriptions requires registering
intercepts and other mocks
Using mocked data requires it to be
consistent with the service from which it
is provided
Benefits
Isolated: asserts against individual
HTML components rendered in a local dev
server
Validates individual pieces, like
styling, functionality, validation, and
individual state management
Data can be fully managed and controlled,
including hooks and requests
Can be executed immediately against new
changes to a system
Very fast
Component Testing - A comparison
What should be
tested at a
component level?
HTML
Rendering
- HTML element existence
- Conditional element rendering + responsiveness
- Text, labels, messages, and other contents
What should be tested at a component level?
it(`has a field for "First name"`, function () {
cy.get('[data-testid="sign-up"]')
.find("form.MuiBox-root")
.find(".MuiFormControl-root")
.find("input#name")
.should("exist");
//Test label
cy.get('[data-testid="sign-up"]')
.find('input#name')
.parents(".MuiFormControl-root")
.find("label")
.should("have.text", "First name");
});
What should be tested at a component level?
describe('Checkout Sidebar', function(){
it("adds the shipping cost to the total cost on the last step", function () {
cy.intercept("**/products/*", {
fixture: "products/checkout_info/custom-plan-products.json",
});
cy.mount(<Checkout />);
cy.get(`[data-testid='total-price']`).should("have.text", "$144.99");
cy.contains("button", "Next").click();
cy.contains("button", "Next").click();
cy.contains("button", "Place order").should("be.visible");
//Shipping is $9.99, so it should be added to the total
cy.get(`[data-testid='total-price']`).should("have.text", "$153.98");
});
})
Functionality
& events
- Interactions: click, hover, keystrokes,
etc.
- Pre/post event listener updates
What should be tested at a component level?
describe('Input form', function(){
it("requires a valid email address", function () {
//...
});
it("requires all fields to be filled", function () {
cy.get("input#name").clear();
cy.get("input#email").clear();
cy.get("input#password").clear();
cy.contains("button", "Sign up").click();
cy.get(".Mui-error").should("have.length.of", 3);
});
})
Data
validation
- Allowable values, list options, and
data entry
- States: Success, error, required,
disabled, etc.
What should be tested at a component level?
describe('Checkout Sidebar', function () {
it("loads product details in the sidebar", function () {
//Arrange: This test uses a custom intercept to load products from a Cypress fixture
const fixtureFileName = "/products/checkout_info/custom-plan-products.json";
cy.intercept("**/products/*", {fixture: fixtureFileName});
cy.mount(<Checkout/>);
//Assert: total price is displayed and each product is rendered
cy.get(`[data-testid='checkout-info-section']`)
.find(`[data-testid='total-price']`)
.should("exist");
cy.fixture("/products/checkout_info/custom-plan-products.json").then((fixture) => {
fixture.map((product: Products.CheckoutInfo) =>
cy.assertCheckoutSidebarProduct(product)
);
});
});
});
State
management
and hooks
- Request handling in hooks
- Data processing using mocks
- Cookies and storage events
describe('Sign up', function () {
it("renders with the theme on light mode on load", function () {
cy.mount(<SignUp/>)
//Do testing on CSS here
});
it("can be toggled between light and dark modes", function () {
cy.mount(<SignUp/>)
cy.get('button[aria-label="Theme toggle button"]').click();
//Do testing on CSS here
});
});
What should be tested at a component level?
Styling and
theming
- CSS identifiers and classes
- Colors, modifiers, SVG paths
- Visual testing and responsiveness
Styling and
theming
- CSS identifiers and classes
- Colors, modifiers, SVG paths
- Visual testing + responsiveness
State
management
and hooks
- Request handling in hooks
- Data processing using mocks
- Using cookies and storage events
Data
validation
- Allowable values, list options, and data
entry
- States: Success, error, required, disabled,
etc.
Functionality
& events
- Interactions: click, hover, keystrokes,
etc.
- Pre/post event listener updates
What should be tested at a component level?
HTML
Rendering
- HTML element existence
- Conditional element rendering +
responsiveness
- Text, labels, messages, and other contents
Customizing the mount command
cy.mount()
This example uses Cypress.io.
Stores &
models
Plugins
CSS, themes,
styles, &
fonts
Intercepts,
routers, &
stubs
Global
components
Page object hierarchy
“Component object” “Page object”
Usable inside
class AddressForm {
elements = {
container: () =>
cy.get('form#address'),
firstNameField: () =>
this.elements
.container()
.find('input#first-name'),
lastNameField: () =>
this.elements
.container()
.find('input#last-name'),
addressLine1: () =>
this.elements
.container()
.find('input#address-1'),
//...
}
}
class CheckoutPage {
components = {
AddressForm: (handlerFn) =>
cy.root()
.within(handlerFn(new AddressForm()))
}
fillInAddress(data) {
this
.components
.AddressForm(component => {
component
.elements
.firstNameField
.type(data.firstName);
//...
})
}
}
Putting it
all together:
A comprehensive test plan
Putting it all together - A comprehensive test plan
- Validate functions, services, and
components in place
- Requires extra configuration, but is
atomic and controllable
Unit & component testing
Integration (page-
level) testing
End-to-end testing
- Validate the web application by itself,
controlling and intercepting data where
possible
- Check state management between pages
- Validate the application and its
connections
- Data originates from actual sources and
ends in actual targets
- Difficult to manage, but mimics
production
???
Well, kinda.
Group question:
“Can a page also be a component?”
Putting it all together - Is a page a component?
Does it render all necessary components?
Are there conditional cases for when
components should render?
By intercepting and mocking data, are
the data placed in the components
correctly?
Does it have links that can be asserted
upon?
Is it responsive based on desktop and
mobile views?
Test a page as a
component by asking:
Does this work in the context of the
application correctly?
Does it satisfy the overall business
need or feature requirements?
Can data from another page or source be
used and submitted on this page
correctly?
Does local storage work for cookies,
authentication sessions, and cache?
Is it secure?
Test a page as end-
to-end by asking:
Live demo!
https://github.com/hammzj/component-test-presentation-demo
Summary
Separates reusable pieces
of a webpage into
individual components
Contain their own data,
functionality, styling,
and state
Web components
Like “unit testing”
mounted pieces of a web
page
Component-level
testing
Application
test strategy
Highly customizable and
fast
Occurs closer to
development, usually as
test-driven development
Aligns test objects
closely with HTML code
Can be built to contain
other components
Unit testing exists
for functions and
services
Component-level
testing for web
component
functionality
Integration-level
testing for isolated
application state
management
End-to-end testing for
data management into
external systems
Thanks!
References
- Mozilla, What is the difference between web page, website, web server, and search engine?
- WebComponents.org, Introduction
- Testing Library, dom-testing-library
- Vue Test Utils
- Cypress.io, Cypress Component Testing
- WebDriverIO
- Playwright, Components (experimental)
- ViewComponent.org, Testing Rails Applications
- Web Design Museum.org, early websites
- Amazon.com, website picture references are respective of Amazon
- Wikipedia, (for logos)
- Google, Fonts Icons
- PPTMON.com, Theme
- Zachary Hamm, Presentation demo on Github
Statement
All names, organizations, and locations are fictional and do not
represent real people. All relations are coincidental and not done with
intent.

More Related Content

Similar to QA or the Highway - Component Testing: Bridging the gap between frontend application (by Z. Hamm)

IE8 Dev Overview_pp2003
IE8 Dev Overview_pp2003IE8 Dev Overview_pp2003
IE8 Dev Overview_pp2003
Wes Yanaga
 
Shuvam dutta
Shuvam duttaShuvam dutta
Shuvam dutta
Shuvam Dutta
 
Session on Selenium Powertools by Unmesh Gundecha
Session on Selenium Powertools by Unmesh GundechaSession on Selenium Powertools by Unmesh Gundecha
Session on Selenium Powertools by Unmesh Gundecha
Agile Testing Alliance
 
Top100summit 谷歌-scott-improve your automated web application testing
Top100summit  谷歌-scott-improve your automated web application testingTop100summit  谷歌-scott-improve your automated web application testing
Top100summit 谷歌-scott-improve your automated web application testing
drewz lin
 
Shuvam Dutta | Performance analyst
Shuvam Dutta | Performance analystShuvam Dutta | Performance analyst
Shuvam Dutta | Performance analyst
Shuvam Dutta
 
Whats New In 2010 (Msdn & Visual Studio)
Whats New In 2010 (Msdn & Visual Studio)Whats New In 2010 (Msdn & Visual Studio)
Whats New In 2010 (Msdn & Visual Studio)
Steve Lange
 
Automated Testing Of Web Applications Using XML
Automated  Testing Of  Web  Applications Using  XMLAutomated  Testing Of  Web  Applications Using  XML
Automated Testing Of Web Applications Using XML
diongillard
 
Felix Ramos_Automation Programmer Analyst_QA
Felix Ramos_Automation Programmer Analyst_QAFelix Ramos_Automation Programmer Analyst_QA
Felix Ramos_Automation Programmer Analyst_QA
Felix Ramos
 
Selenium
SeleniumSelenium
Selenium
Sun Technlogies
 
2016_George Baker
2016_George Baker2016_George Baker
2016_George Baker
George Baker
 
Automation, Selenium Webdriver and Page Objects
Automation, Selenium Webdriver and Page ObjectsAutomation, Selenium Webdriver and Page Objects
Automation, Selenium Webdriver and Page Objects
Andrew Boyer
 
Robert polak matrix skills-web developer 2018-3
Robert polak   matrix skills-web developer 2018-3Robert polak   matrix skills-web developer 2018-3
Robert polak matrix skills-web developer 2018-3
Robert Polak
 
Automation - web testing with selenium
Automation - web testing with seleniumAutomation - web testing with selenium
Automation - web testing with selenium
Tzirla Rozental
 
Web Services Automated Testing via SoapUI Tool
Web Services Automated Testing via SoapUI ToolWeb Services Automated Testing via SoapUI Tool
Web Services Automated Testing via SoapUI Tool
Sperasoft
 
Behavior Driven Development
Behavior Driven DevelopmentBehavior Driven Development
Behavior Driven Development
MonocularVision
 
Webdriver.io
Webdriver.io Webdriver.io
Webdriver.io
LinkMe Srl
 
Ajax Testing Approach
Ajax Testing ApproachAjax Testing Approach
Ajax Testing Approach
HarshJ
 
Ajax Testing Approach
Ajax Testing ApproachAjax Testing Approach
Ajax Testing Approach
HarshaVJoshi
 
Selenium Testing Training in Bangalore
Selenium Testing Training in BangaloreSelenium Testing Training in Bangalore
Selenium Testing Training in Bangalore
rajkamal560066
 
Mastering Test Automation: How To Use Selenium Successfully
Mastering Test Automation: How To Use Selenium SuccessfullyMastering Test Automation: How To Use Selenium Successfully
Mastering Test Automation: How To Use Selenium Successfully
SpringPeople
 

Similar to QA or the Highway - Component Testing: Bridging the gap between frontend application (by Z. Hamm) (20)

IE8 Dev Overview_pp2003
IE8 Dev Overview_pp2003IE8 Dev Overview_pp2003
IE8 Dev Overview_pp2003
 
Shuvam dutta
Shuvam duttaShuvam dutta
Shuvam dutta
 
Session on Selenium Powertools by Unmesh Gundecha
Session on Selenium Powertools by Unmesh GundechaSession on Selenium Powertools by Unmesh Gundecha
Session on Selenium Powertools by Unmesh Gundecha
 
Top100summit 谷歌-scott-improve your automated web application testing
Top100summit  谷歌-scott-improve your automated web application testingTop100summit  谷歌-scott-improve your automated web application testing
Top100summit 谷歌-scott-improve your automated web application testing
 
Shuvam Dutta | Performance analyst
Shuvam Dutta | Performance analystShuvam Dutta | Performance analyst
Shuvam Dutta | Performance analyst
 
Whats New In 2010 (Msdn & Visual Studio)
Whats New In 2010 (Msdn & Visual Studio)Whats New In 2010 (Msdn & Visual Studio)
Whats New In 2010 (Msdn & Visual Studio)
 
Automated Testing Of Web Applications Using XML
Automated  Testing Of  Web  Applications Using  XMLAutomated  Testing Of  Web  Applications Using  XML
Automated Testing Of Web Applications Using XML
 
Felix Ramos_Automation Programmer Analyst_QA
Felix Ramos_Automation Programmer Analyst_QAFelix Ramos_Automation Programmer Analyst_QA
Felix Ramos_Automation Programmer Analyst_QA
 
Selenium
SeleniumSelenium
Selenium
 
2016_George Baker
2016_George Baker2016_George Baker
2016_George Baker
 
Automation, Selenium Webdriver and Page Objects
Automation, Selenium Webdriver and Page ObjectsAutomation, Selenium Webdriver and Page Objects
Automation, Selenium Webdriver and Page Objects
 
Robert polak matrix skills-web developer 2018-3
Robert polak   matrix skills-web developer 2018-3Robert polak   matrix skills-web developer 2018-3
Robert polak matrix skills-web developer 2018-3
 
Automation - web testing with selenium
Automation - web testing with seleniumAutomation - web testing with selenium
Automation - web testing with selenium
 
Web Services Automated Testing via SoapUI Tool
Web Services Automated Testing via SoapUI ToolWeb Services Automated Testing via SoapUI Tool
Web Services Automated Testing via SoapUI Tool
 
Behavior Driven Development
Behavior Driven DevelopmentBehavior Driven Development
Behavior Driven Development
 
Webdriver.io
Webdriver.io Webdriver.io
Webdriver.io
 
Ajax Testing Approach
Ajax Testing ApproachAjax Testing Approach
Ajax Testing Approach
 
Ajax Testing Approach
Ajax Testing ApproachAjax Testing Approach
Ajax Testing Approach
 
Selenium Testing Training in Bangalore
Selenium Testing Training in BangaloreSelenium Testing Training in Bangalore
Selenium Testing Training in Bangalore
 
Mastering Test Automation: How To Use Selenium Successfully
Mastering Test Automation: How To Use Selenium SuccessfullyMastering Test Automation: How To Use Selenium Successfully
Mastering Test Automation: How To Use Selenium Successfully
 

Recently uploaded

find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
bhumivarma35300
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
Edge AI and Vision Alliance
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
How to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdfHow to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdf
ChristopherTHyatt
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
kumarjarun2010
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
Google Developer Group - Harare
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
moinahousna
 
WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
HackersList
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
Priyanka Aash
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
digitalxplive
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Zilliz
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Muhammad Ali
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 

Recently uploaded (20)

find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
How to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdfHow to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdf
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
 
WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
 

QA or the Highway - Component Testing: Bridging the gap between frontend application (by Z. Hamm)

  • 1. Bridging the gap between frontend applications Component Testing: Zachary J. Hamm / 2024-06-21 QA or the Highway – Columbus, OH
  • 2. Zachary Hamm Staff Software Engineer Automation architecture, frontend development, and SDLC process improvement Focused in: Songwriting and practicing guitar; athletics; retro + multiplayer gaming; arts + history; many other subjects Things I enjoy: About me Previously: Validic; Nationwide Insurance; Huntington National Bank
  • 3. Today you can Review what web components are 01. Discover component-level testing 02. Determine when and what to test 03. Build a web- app test strategy 04. Purpose
  • 4. Where we were before Building websites with HTML, CSS, and pure JavaScript
  • 5. Previous web pattern designs 3 column layout Uses HTML elements directly CSS and layout built only for desktop screens Embedded JavaScript, JQuery, AJAX, Flash for functionality Load everything at once Displays simple content, like text or compressed pictures
  • 6. Where we are now Creating with components
  • 7. Building with components Components allow reusability and structuring Frameworks extend base languages including JavaScript, Ruby, or Python Content is much more complex and intensive Dynamic rendering and loading Custom theming, grid layouts and responsive webviews for mobile and other screen sizes State can be individually managed inside of components
  • 8. “A web page is a simple document displayable by a browser….(it) can embed a variety of different types of resources such as: style information…scripts…(and) media” (Mozilla) Firstly, what is a web page? - HTML elements, - Interactive functions, including requests, - Styling and presentation, - Photos, videos, and other media types What are components? - An overview This includes
  • 9. What are components? - An overview “Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.” (webcomponents.org) Then, what are components? They can also include - HTML elements, - Interactive functions, including requests, - Styling and presentation, - Photos, videos, and other media types
  • 10. What are components? - Creating hierarchy Data fetched in request hooks per component, like these product prices Components can be reused, like this footer Components can be deeply nested in other components Forms control data validation and submission Styling, like active colors, can be updated based on state
  • 12. Benefits Integrated: it asserts against a testable version of the application in a “real” environment Data moving through the application aligns closely with a production environment Allows for external systems to be connected and utilized Automation frameworks do not need to configure the state environment, but be configured to work within it Drawbacks Test flakiness is harder to predict since it relies on uncontrollable environments and external systems Data management, setup, and cleanup is complex to manage Testing against interactions and validations instead of data flow requires large overhead in test preparation Requires deep knowledge of all systems connected in an environment to write accurate tests Slower to execute End-to-end testing - A comparison
  • 14. Dom Testing Library (React, Svelte, Angular, and more) WebDriverIO Vue Test Utils Playwright Component-level test frameworks
  • 15. 1. A basic HTML file is created in which the component can be rendered 2. A customizable mount command is built to render a component with data 3. The dev server is launched locally, typically by the test framework 4. A spec test file is opened or executed 5. Tests begin by rendering a customized component using the mount 6. The test can now interact with and validate against the component How are components able to be tested? Performing component testing
  • 17. Example 1 - Simple component tests
  • 18. Example 2: Complexity with mocks and intercepts
  • 19. Example 2 - Complexity with mocks and intercepts (1)
  • 20. Example 2 - Complexity with mocks and intercepts (2)
  • 21. Drawbacks Requires deep knowledge of the component library as well Setup is more complex around configuring the “mount” command Validating request hooks and subscriptions requires registering intercepts and other mocks Using mocked data requires it to be consistent with the service from which it is provided Benefits Isolated: asserts against individual HTML components rendered in a local dev server Validates individual pieces, like styling, functionality, validation, and individual state management Data can be fully managed and controlled, including hooks and requests Can be executed immediately against new changes to a system Very fast Component Testing - A comparison
  • 22. What should be tested at a component level?
  • 23. HTML Rendering - HTML element existence - Conditional element rendering + responsiveness - Text, labels, messages, and other contents What should be tested at a component level? it(`has a field for "First name"`, function () { cy.get('[data-testid="sign-up"]') .find("form.MuiBox-root") .find(".MuiFormControl-root") .find("input#name") .should("exist"); //Test label cy.get('[data-testid="sign-up"]') .find('input#name') .parents(".MuiFormControl-root") .find("label") .should("have.text", "First name"); });
  • 24. What should be tested at a component level? describe('Checkout Sidebar', function(){ it("adds the shipping cost to the total cost on the last step", function () { cy.intercept("**/products/*", { fixture: "products/checkout_info/custom-plan-products.json", }); cy.mount(<Checkout />); cy.get(`[data-testid='total-price']`).should("have.text", "$144.99"); cy.contains("button", "Next").click(); cy.contains("button", "Next").click(); cy.contains("button", "Place order").should("be.visible"); //Shipping is $9.99, so it should be added to the total cy.get(`[data-testid='total-price']`).should("have.text", "$153.98"); }); }) Functionality & events - Interactions: click, hover, keystrokes, etc. - Pre/post event listener updates
  • 25. What should be tested at a component level? describe('Input form', function(){ it("requires a valid email address", function () { //... }); it("requires all fields to be filled", function () { cy.get("input#name").clear(); cy.get("input#email").clear(); cy.get("input#password").clear(); cy.contains("button", "Sign up").click(); cy.get(".Mui-error").should("have.length.of", 3); }); }) Data validation - Allowable values, list options, and data entry - States: Success, error, required, disabled, etc.
  • 26. What should be tested at a component level? describe('Checkout Sidebar', function () { it("loads product details in the sidebar", function () { //Arrange: This test uses a custom intercept to load products from a Cypress fixture const fixtureFileName = "/products/checkout_info/custom-plan-products.json"; cy.intercept("**/products/*", {fixture: fixtureFileName}); cy.mount(<Checkout/>); //Assert: total price is displayed and each product is rendered cy.get(`[data-testid='checkout-info-section']`) .find(`[data-testid='total-price']`) .should("exist"); cy.fixture("/products/checkout_info/custom-plan-products.json").then((fixture) => { fixture.map((product: Products.CheckoutInfo) => cy.assertCheckoutSidebarProduct(product) ); }); }); }); State management and hooks - Request handling in hooks - Data processing using mocks - Cookies and storage events
  • 27. describe('Sign up', function () { it("renders with the theme on light mode on load", function () { cy.mount(<SignUp/>) //Do testing on CSS here }); it("can be toggled between light and dark modes", function () { cy.mount(<SignUp/>) cy.get('button[aria-label="Theme toggle button"]').click(); //Do testing on CSS here }); }); What should be tested at a component level? Styling and theming - CSS identifiers and classes - Colors, modifiers, SVG paths - Visual testing and responsiveness
  • 28. Styling and theming - CSS identifiers and classes - Colors, modifiers, SVG paths - Visual testing + responsiveness State management and hooks - Request handling in hooks - Data processing using mocks - Using cookies and storage events Data validation - Allowable values, list options, and data entry - States: Success, error, required, disabled, etc. Functionality & events - Interactions: click, hover, keystrokes, etc. - Pre/post event listener updates What should be tested at a component level? HTML Rendering - HTML element existence - Conditional element rendering + responsiveness - Text, labels, messages, and other contents
  • 29. Customizing the mount command cy.mount() This example uses Cypress.io. Stores & models Plugins CSS, themes, styles, & fonts Intercepts, routers, & stubs Global components
  • 30. Page object hierarchy “Component object” “Page object” Usable inside class AddressForm { elements = { container: () => cy.get('form#address'), firstNameField: () => this.elements .container() .find('input#first-name'), lastNameField: () => this.elements .container() .find('input#last-name'), addressLine1: () => this.elements .container() .find('input#address-1'), //... } } class CheckoutPage { components = { AddressForm: (handlerFn) => cy.root() .within(handlerFn(new AddressForm())) } fillInAddress(data) { this .components .AddressForm(component => { component .elements .firstNameField .type(data.firstName); //... }) } }
  • 31. Putting it all together: A comprehensive test plan
  • 32. Putting it all together - A comprehensive test plan - Validate functions, services, and components in place - Requires extra configuration, but is atomic and controllable Unit & component testing Integration (page- level) testing End-to-end testing - Validate the web application by itself, controlling and intercepting data where possible - Check state management between pages - Validate the application and its connections - Data originates from actual sources and ends in actual targets - Difficult to manage, but mimics production
  • 33. ??? Well, kinda. Group question: “Can a page also be a component?”
  • 34. Putting it all together - Is a page a component? Does it render all necessary components? Are there conditional cases for when components should render? By intercepting and mocking data, are the data placed in the components correctly? Does it have links that can be asserted upon? Is it responsive based on desktop and mobile views? Test a page as a component by asking: Does this work in the context of the application correctly? Does it satisfy the overall business need or feature requirements? Can data from another page or source be used and submitted on this page correctly? Does local storage work for cookies, authentication sessions, and cache? Is it secure? Test a page as end- to-end by asking:
  • 36. Summary Separates reusable pieces of a webpage into individual components Contain their own data, functionality, styling, and state Web components Like “unit testing” mounted pieces of a web page Component-level testing Application test strategy Highly customizable and fast Occurs closer to development, usually as test-driven development Aligns test objects closely with HTML code Can be built to contain other components Unit testing exists for functions and services Component-level testing for web component functionality Integration-level testing for isolated application state management End-to-end testing for data management into external systems
  • 38. References - Mozilla, What is the difference between web page, website, web server, and search engine? - WebComponents.org, Introduction - Testing Library, dom-testing-library - Vue Test Utils - Cypress.io, Cypress Component Testing - WebDriverIO - Playwright, Components (experimental) - ViewComponent.org, Testing Rails Applications - Web Design Museum.org, early websites - Amazon.com, website picture references are respective of Amazon - Wikipedia, (for logos) - Google, Fonts Icons - PPTMON.com, Theme - Zachary Hamm, Presentation demo on Github
  • 39. Statement All names, organizations, and locations are fictional and do not represent real people. All relations are coincidental and not done with intent.