Merge pull request #189 from smartive-education/feature/twin-unit-tes…

…ting Feature/twin unit testing
ost-cas-fee-adv-22-23 · Jun 26, 2023 · 6d82744 · 6d82744
2 parents a6cb577 + a55753b
commit 6d82744
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/__tests__/components/Like.test.tsx b/__tests__/components/Like.test.tsx
@@ -37,7 +37,7 @@ describe('Like component', () => {
 
     expect(screen.getByText('123 Likes')).toBeInTheDocument();
 
-    const svgFilled = container.querySelector('[class*=LikeButton__StyledHeartFilled]') as HTMLInputElement;
+    const svgFilled = container.querySelector('[class*=LikeButton__StyledHeartFilled]');
     expect(svgFilled).toBeInTheDocument();
 
     fireEvent.click(getByText('123 Likes'));
@@ -46,7 +46,7 @@ describe('Like component', () => {
 
     expect(screen.getByText('122 Likes')).toBeInTheDocument();
 
-    const svgOutlined = container.querySelector('[class*=LikeButton__StyledHeartOutlined]') as HTMLInputElement;
+    const svgOutlined = container.querySelector('[class*=LikeButton__StyledHeartOutlined]');
     expect(svgOutlined).toBeInTheDocument();
   });
 
@@ -65,14 +65,14 @@ describe('Like component', () => {
 
     expect(screen.getByText('321 Likes')).toBeInTheDocument();
 
-    const svgOutlined = container.querySelector('[class*=LikeButton__StyledHeartOutlined]') as HTMLInputElement;
+    const svgOutlined = container.querySelector('[class*=LikeButton__StyledHeartOutlined]');
     expect(svgOutlined).toBeInTheDocument();
 
     fireEvent.click(getByText('321 Likes'));
 
     expect(screen.getByText('322 Likes')).toBeInTheDocument();
 
-    const svgFilled2 = container.querySelector('[class*=LikeButton__StyledHeartFilled]') as HTMLInputElement;
+    const svgFilled2 = container.querySelector('[class*=LikeButton__StyledHeartFilled]');
     expect(svgFilled2).toBeInTheDocument();
 
     expect(like).toHaveBeenCalled();

diff --git a/__tests__/twin/Test.test.tsx b/__tests__/twin/Test.test.tsx
@@ -3,8 +3,8 @@ import Test from './Test';
 
 describe('Testing twin and styled components', () => {
   it('finds a predefined sentence', () => {
-    const { container } = render(<Test text="i like styled components" />);
-    const text = screen.getByText(/i like styled components/i);
+    render(<Test text="i like styled components" />);
+    const text = screen.getByText(/i like styled components/);
     expect(text).toHaveTextContent('i like styled components');
   });
 
@@ -19,4 +19,17 @@ describe('Testing twin and styled components', () => {
     const div = container.getElementsByTagName('div');
     expect(div.length).toEqual(2);
   });
+
+  it('finds specific classnames that get rendered with twin and styled components', () => {
+    const { container } = render(<Test text="i like styled components" />);
+
+    const StyledImportComponent = container.querySelector('[class*=Test__StyledImportComponent]');
+    expect(StyledImportComponent).toBeInTheDocument();
+
+    const TwImportComponent = container.querySelector('[class*=Test__TwImportComponent]');
+    expect(TwImportComponent).toBeInTheDocument();
+
+    const StyledDiv = container.querySelector('[class*=Test___StyledDiv]');
+    expect(StyledDiv).toBeInTheDocument();
+  });
 });
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -18,7 +18,7 @@ export default function Page({
   fallbackUsers: QwackerUserResponse;
   fallbackUserLoggedIn: User;
 }) {
-  console.log(`Testing workflows 2 :-)`);
+  console.log(`Testing workflows 3 :-)`);
   return (
     <>
       <NextSeo title={`${Content.seo.home.title}`} description={`${Content.seo.home.description}`} />