From 43cc966698b08c118978adef0767e7ea27283842 Mon Sep 17 00:00:00 2001
From: Shohzod Irgas <shohzod_irgas@epam.com>
Date: Wed, 27 Nov 2024 18:33:36 +0300
Subject: [PATCH 1/9] migrated all the tests to rtl.

---
 .dockerignore                            |  4 +
 dockerfile                               | 20 +++++
 src/tests/react-testing-library.test.tsx | 94 ++++++++++++++++++++++--
 3 files changed, 111 insertions(+), 7 deletions(-)
 create mode 100644 .dockerignore
 create mode 100644 dockerfile

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..c0dc144
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,4 @@
+node_modules
+npm-debug.log
+Dockerfile
+.dockerignore
\ No newline at end of file
diff --git a/dockerfile b/dockerfile
new file mode 100644
index 0000000..3cd203d
--- /dev/null
+++ b/dockerfile
@@ -0,0 +1,20 @@
+# Use the official Node.js image from the Docker Hub and specify the version
+FROM node:16.10.1
+
+# Create and set the working directory inside the container
+WORKDIR /usr/src/app
+
+# Copy the package.json and package-lock.json files
+COPY package*.json ./
+
+# Install the project dependencies
+RUN yarn
+
+# Copy the rest of the project files
+COPY . .
+
+# Expose the port the app runs on (change this if your app uses a different port)
+EXPOSE 3000
+
+# Command to run the application
+CMD ["npm", "start"]
\ No newline at end of file
diff --git a/src/tests/react-testing-library.test.tsx b/src/tests/react-testing-library.test.tsx
index 1627974..d1bac2e 100644
--- a/src/tests/react-testing-library.test.tsx
+++ b/src/tests/react-testing-library.test.tsx
@@ -1,34 +1,114 @@
 import React from 'react';
+import { fireEvent, logRoles } from '@testing-library/dom';
 import { render, screen } from '@testing-library/react';
 import { App } from '../components/app';
+import { Toggle, ToggleProps } from '../components/toggle/toggle';
+import { Button, ButtonProps } from '../components/button/button';
 
 describe('React Testing Library do:', () => {
 
     test('create snapshot of mounted component', () => {
-        throw new Error('Not migrated yet');
+        // render app
+        render(<App />);
+
+        // check the snapshot
+        expect(screen).toMatchSnapshot;
     });
 
     test('find child by component', () => {
-        throw new Error('Not migrated yet');
+        // render App
+        render(<App />);
+        
+
+        // find the component
+        const childElement = screen.getByText(/click/i);
+
+        // check if it exists
+        expect(childElement).toBeInTheDocument();
     });
 
     test('find child by attribute', () => {
-        throw new Error('Not migrated yet');
+        // render App
+        const {container} = render(<App/>);
+
+        // find the component 
+        const childElement = container.querySelector('[data-test-target="button-element"]'); // had to use query selector because getByTestId doesn't work since that function requires a data attribute named data-testid.
+
+        // check if it exists
+        expect(childElement).toBeInTheDocument();
     });
 
     test('find child by class name', () => {
-        throw new Error('Not migrated yet');
+        // render component
+        const props: ToggleProps = {
+            initialState: true,
+            title: 'Dummy toggle title',
+            onChange: () => null,
+        };
+        const {container} = render(<Toggle {...props} />);
+        
+
+        // find the component
+        const input = container.querySelector('.toggle-style');
+
+        // check if it exists
+        expect(input).toBeInTheDocument();
     });
 
     test('get child attribute', () => {
-        throw new Error('Not migrated yet');
+        // render app
+        render(<App/>);
+
+        // find the component and it's attribute
+        const input = screen.getByLabelText(/toggle/i);
+
+        // simulate input
+        fireEvent.click(input);
+
+        // check the attribute value (since the initial state of the checkbox is checked, im asserting wether or not it is unchecked.)
+        expect(input).not.toBeChecked();
     });
 
     test('set component property', () => {
-        throw new Error('Not migrated yet');
+        // create a dummy button
+        const props: ButtonProps = {
+            title: "Dummy button title",
+            isDisabled: false,
+            onClick: jest.fn(),
+        }
+
+        // render and disable the button
+        const {rerender} = render(<Button {...props}/>);
+        rerender(<Button {...props} isDisabled={true} />)
+
+        // find the button
+        const button = screen.getByText(/dummy/i);
+
+        // simulate a click
+        fireEvent.click(button);
+        
+        // check if the button is clickable
+        expect(props.onClick).toBeCalledTimes(0);
     });
 
     test('callback test', () => {
-        throw new Error('Not migrated yet');
+        // create a dummy button
+        const props: ButtonProps = {
+            title: "Dummy button props",
+            isDisabled: false,
+            onClick: jest.fn(),
+        }
+
+        // render the button
+        render(<Button {...props}/>);
+
+        // find the button
+        const button = screen.getByText(/dummy/i);
+
+        // simulate a click
+        fireEvent.click(button);
+
+        // check if the button is clicked
+        expect(props.onClick).toBeCalledTimes(1);
     });
 });

From 5364887ecb7f8f450885196b89c2ba74f1670c0c Mon Sep 17 00:00:00 2001
From: Shohzod Irgas <shohzod_irgas@epam.com>
Date: Wed, 27 Nov 2024 19:01:33 +0300
Subject: [PATCH 2/9] migrations for pull request.

---
 dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dockerfile b/dockerfile
index 3cd203d..0f773e1 100644
--- a/dockerfile
+++ b/dockerfile
@@ -1,5 +1,5 @@
 # Use the official Node.js image from the Docker Hub and specify the version
-FROM node:16.10.1
+FROM node:16.20.1
 
 # Create and set the working directory inside the container
 WORKDIR /usr/src/app

From 00fa76806e7c060df5059091c0a79c6f94286a89 Mon Sep 17 00:00:00 2001
From: Shohzod Irgas <shohzod_irgas@epam.com>
Date: Wed, 27 Nov 2024 19:23:24 +0300
Subject: [PATCH 3/9] containerization implemented.

---
 dockerfile                               | 6 +++---
 src/tests/react-testing-library.test.tsx | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/dockerfile b/dockerfile
index 0f773e1..afa2c68 100644
--- a/dockerfile
+++ b/dockerfile
@@ -4,11 +4,11 @@ FROM node:16.20.1
 # Create and set the working directory inside the container
 WORKDIR /usr/src/app
 
-# Copy the package.json and package-lock.json files
+# Copy the package.json and package-lock.json (or yarn.lock) files
 COPY package*.json ./
 
 # Install the project dependencies
-RUN yarn
+RUN yarn install
 
 # Copy the rest of the project files
 COPY . .
@@ -17,4 +17,4 @@ COPY . .
 EXPOSE 3000
 
 # Command to run the application
-CMD ["npm", "start"]
\ No newline at end of file
+CMD ["yarn", "start"]
\ No newline at end of file
diff --git a/src/tests/react-testing-library.test.tsx b/src/tests/react-testing-library.test.tsx
index d1bac2e..808425d 100644
--- a/src/tests/react-testing-library.test.tsx
+++ b/src/tests/react-testing-library.test.tsx
@@ -65,8 +65,8 @@ describe('React Testing Library do:', () => {
         // simulate input
         fireEvent.click(input);
 
-        // check the attribute value (since the initial state of the checkbox is checked, im asserting wether or not it is unchecked.)
-        expect(input).not.toBeChecked();
+        // check the attribute value 
+        expect(input).not.toBeChecked(); // since the initial state of the checkbox is checked, im asserting wether or not it is unchecked.
     });
 
     test('set component property', () => {

From d1037ed6a6f643cee721014bc0a7b16310187a1a Mon Sep 17 00:00:00 2001
From: Shohzod Irgas <shohzod_irgas@epam.com>
Date: Wed, 27 Nov 2024 19:33:34 +0300
Subject: [PATCH 4/9] implemented the yml file for ci pipeline.

---
 main.yml | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 main.yml

diff --git a/main.yml b/main.yml
new file mode 100644
index 0000000..e69de29

From 260feacd2fbbe83eb706e71f49941ac77e75d1e4 Mon Sep 17 00:00:00 2001
From: Shohzod Irgas <shohzod_irgas@epam.com>
Date: Wed, 27 Nov 2024 19:37:44 +0300
Subject: [PATCH 5/9] created the yml file for ci pipeline.

---
 main.yml => github/workflows/main.yml | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename main.yml => github/workflows/main.yml (100%)

diff --git a/main.yml b/github/workflows/main.yml
similarity index 100%
rename from main.yml
rename to github/workflows/main.yml

From 608fe488f93c45e3ad413b56294b453a8bd1adfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Shohzod=20=C4=B0rga=C5=9F?=
 <131816386+SahzodDev@users.noreply.github.com>
Date: Wed, 27 Nov 2024 19:39:09 +0300
Subject: [PATCH 6/9] Update main.yml

---
 github/workflows/main.yml | 45 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/github/workflows/main.yml b/github/workflows/main.yml
index e69de29..f858c26 100644
--- a/github/workflows/main.yml
+++ b/github/workflows/main.yml
@@ -0,0 +1,45 @@
+name: Feature Branch Workflow
+
+on:
+  push:
+    branches:
+      - feature-branch
+  pull_request:
+    branches:
+      - feature-branch
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v2
+      with:
+        node-version: '16'
+
+    - name: Install dependencies
+      run: yarn install
+
+    - name: Run unit tests
+      run: yarn test
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v1
+
+    - name: Log in to Docker Hub
+      uses: docker/login-action@v1
+      with:
+        username: ${{ secrets.DOCKER_USERNAME }}
+        password: ${{ secrets.DOCKER_PASSWORD }}
+
+    - name: Build and push Docker image
+      if: success() # Only run this step if the tests pass
+      uses: docker/build-push-action@v2
+      with:
+        context: .
+        push: true
+        tags: ${{ secrets.DOCKER_USERNAME }}/migration-enzyme-to-rtl:latest

From 5d0639672b40495e671164c234c695e6f960cffe Mon Sep 17 00:00:00 2001
From: Shohzod Irgas <shohzod_irgas@epam.com>
Date: Wed, 27 Nov 2024 19:40:23 +0300
Subject: [PATCH 7/9] commit message

---
 {github => .github}/workflows/main.yml | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename {github => .github}/workflows/main.yml (100%)

diff --git a/github/workflows/main.yml b/.github/workflows/main.yml
similarity index 100%
rename from github/workflows/main.yml
rename to .github/workflows/main.yml

From 179eedeb80a034a32724fb0f58c2640d968ebe40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Shohzod=20=C4=B0rga=C5=9F?=
 <131816386+SahzodDev@users.noreply.github.com>
Date: Wed, 27 Nov 2024 19:42:02 +0300
Subject: [PATCH 8/9] Update main.yml

---
 .github/workflows/main.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index f858c26..3c6de5c 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -1,12 +1,12 @@
-name: Feature Branch Workflow
+name: Migration Branch Workflow
 
 on:
   push:
     branches:
-      - feature-branch
+      - migration
   pull_request:
     branches:
-      - feature-branch
+      - migration
 
 jobs:
   build:

From ca619f4fe767edae26eb0ff62e21194158259b79 Mon Sep 17 00:00:00 2001
From: Shohzod Irgas <shohzod_irgas@epam.com>
Date: Fri, 29 Nov 2024 15:00:25 +0300
Subject: [PATCH 9/9] Created snapshot and  added custom for getByTestId

---
 .env                                          |  1 +
 src/setupTests.ts                             |  8 +++++-
 .../react-testing-library.test.tsx.snap       | 28 +++++++++++++++++++
 src/tests/react-testing-library.test.tsx      | 14 +++++-----
 4 files changed, 43 insertions(+), 8 deletions(-)
 create mode 100644 .env
 create mode 100644 src/tests/__snapshots__/react-testing-library.test.tsx.snap

diff --git a/.env b/.env
new file mode 100644
index 0000000..31337e1
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true 
\ No newline at end of file
diff --git a/src/setupTests.ts b/src/setupTests.ts
index 7885441..14c6094 100644
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -7,4 +7,10 @@ import '@testing-library/jest-dom';
 import { configure } from 'enzyme';
 import EnzymeAdapter from '@wojtekmaj/enzyme-adapter-react-17';
 
-configure({ adapter: new EnzymeAdapter() });
\ No newline at end of file
+// RTL setup 
+import '@testing-library/jest-dom';
+import { configure as configureRTL } from '@testing-library/react';
+
+configure({ adapter: new EnzymeAdapter() });
+
+configureRTL({ testIdAttribute: 'data-test-target' });
\ No newline at end of file
diff --git a/src/tests/__snapshots__/react-testing-library.test.tsx.snap b/src/tests/__snapshots__/react-testing-library.test.tsx.snap
new file mode 100644
index 0000000..d6934d2
--- /dev/null
+++ b/src/tests/__snapshots__/react-testing-library.test.tsx.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`React Testing Library do: create snapshot of mounted component 1`] = `
+<DocumentFragment>
+  <div
+    class="App"
+  >
+    <div
+      class="button-style"
+      data-test-target="button-element"
+    >
+      Click me!
+    </div>
+    <label
+      class="toggle-style"
+      for="toggle-id"
+    >
+      <input
+        checked=""
+        data-test-target="toggle-element"
+        id="toggle-id"
+        type="checkbox"
+      />
+      Toggle me!
+    </label>
+  </div>
+</DocumentFragment>
+`;
diff --git a/src/tests/react-testing-library.test.tsx b/src/tests/react-testing-library.test.tsx
index 808425d..41209d7 100644
--- a/src/tests/react-testing-library.test.tsx
+++ b/src/tests/react-testing-library.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { fireEvent, logRoles } from '@testing-library/dom';
+import { fireEvent, logRoles } from '@testing-library/react';
 import { render, screen } from '@testing-library/react';
 import { App } from '../components/app';
 import { Toggle, ToggleProps } from '../components/toggle/toggle';
@@ -8,11 +8,11 @@ import { Button, ButtonProps } from '../components/button/button';
 describe('React Testing Library do:', () => {
 
     test('create snapshot of mounted component', () => {
-        // render app
-        render(<App />);
+        // render app as a doc fragment
+        const {asFragment} = render(<App />);
 
         // check the snapshot
-        expect(screen).toMatchSnapshot;
+        expect(asFragment()).toMatchSnapshot(); 
     });
 
     test('find child by component', () => {
@@ -29,10 +29,10 @@ describe('React Testing Library do:', () => {
 
     test('find child by attribute', () => {
         // render App
-        const {container} = render(<App/>);
+        render(<App/>);
 
         // find the component 
-        const childElement = container.querySelector('[data-test-target="button-element"]'); // had to use query selector because getByTestId doesn't work since that function requires a data attribute named data-testid.
+        const childElement = screen.getByTestId("button-element");
 
         // check if it exists
         expect(childElement).toBeInTheDocument();
@@ -60,7 +60,7 @@ describe('React Testing Library do:', () => {
         render(<App/>);
 
         // find the component and it's attribute
-        const input = screen.getByLabelText(/toggle/i);
+        const input = screen.getByTestId("toggle-element");
 
         // simulate input
         fireEvent.click(input);