Migration2

.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+npm-debug.log
+Dockerfile
+.dockerignore

.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true 

.github/workflows/main.yml

@@ -0,0 +1,45 @@
+name: Migration Branch Workflow
+
+on:
+  push:
+    branches:
+      - migration
+  pull_request:
+    branches:
+      - migration
+
+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

dockerfile

@@ -0,0 +1,20 @@
+# Use the official Node.js image from the Docker Hub and specify the version
+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 (or yarn.lock) files
+COPY package*.json ./
+
+# Install the project dependencies
+RUN yarn install
+
+# 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 ["yarn", "start"]

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() });
+// RTL setup 
+import '@testing-library/jest-dom';
+import { configure as configureRTL } from '@testing-library/react';
+
+configure({ adapter: new EnzymeAdapter() });
+
+configureRTL({ testIdAttribute: 'data-test-target' });

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>
+`;

src/tests/react-testing-library.test.tsx

@@ -1,34 +1,114 @@
 import React from 'react';
+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';
+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 as a doc fragment
+        const {asFragment} = render(<App />);
+
+        // check the snapshot
+        expect(asFragment()).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
+        render(<App/>);
+
+        // find the component 
+        const childElement = screen.getByTestId("button-element");
+
+        // 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.getByTestId("toggle-element");
+
+        // simulate input
+        fireEvent.click(input);
+
+        // 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', () => {
-        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);
     });
 });