feat(auth): Migrate to ngrx signals store (#290)

* feat: Migrate to ngrx signals store

* feat(auth): Migrate to ngrx signals store

* feat(auth): Migrate to ngrx signals store

* chore: Ngrx latest version

* feat(auth): Migrate to ngrx signals store

* chore: Fix e2e tests (part 1)

* chore: Fix e2e tests (part 1)

* feat(auth): Migrate to ngrx signals store

apps/conduit-e2e/cypress.config.ts

@@ -0,0 +1,44 @@
+import { defineConfig } from 'cypress';
+import createBundler from '@bahmutov/cypress-esbuild-preprocessor';
+import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor';
+// @ts-ignore
+import { createEsbuildPlugin } from '@badeball/cypress-cucumber-preprocessor/esbuild';
+
+async function setupNodeEvents(
+  on: Cypress.PluginEvents,
+  config: Cypress.PluginConfigOptions,
+): Promise<Cypress.PluginConfigOptions> {
+  // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
+  await addCucumberPreprocessorPlugin(on, config);
+
+  on(
+    'file:preprocessor',
+    createBundler({
+      plugins: [createEsbuildPlugin(config)],
+    }),
+  );
+
+  // Make sure to return the config object as it might have been modified by the plugin.
+  return config;
+}
+
+export default defineConfig({
+  e2e: {
+    fileServerFolder: '.',
+    fixturesFolder: './src/fixtures',
+    video: true,
+    videosFolder: '../../dist/cypress/apps/conduit-e2e/videos',
+    screenshotsFolder: '../../dist/cypress/apps/conduit-e2e/screenshots',
+    chromeWebSecurity: false,
+    specPattern: '**/*.feature',
+    excludeSpecPattern: '**/*.ts',
+    defaultCommandTimeout: 10000,
+    pageLoadTimeout: 20000,
+    waitForAnimations: true,
+    execTimeout: 60000,
+    requestTimeout: 60000,
+    responseTimeout: 60000,
+    supportFile: './src/support/e2e.ts',
+    setupNodeEvents,
+  },
+});

apps/conduit-e2e/project.json

@@ -7,9 +7,10 @@
     "e2e": {
       "executor": "@nx/cypress:cypress",
       "options": {
-        "cypressConfig": "apps/conduit-e2e/cypress.json",
+        "cypressConfig": "apps/conduit-e2e/cypress.config.ts",
         "devServerTarget": "conduit:serve",
-        "tsConfig": "apps/conduit-e2e/tsconfig.e2e.json"
+        "tsConfig": "apps/conduit-e2e/tsconfig.e2e.json",
+        "testingType": "e2e"
       }
     },
     "configurations": {

apps/conduit-e2e/src/integration/article-list.feature → apps/conduit-e2e/src/e2e/article-list/article-list.feature

@@ -5,7 +5,7 @@ Feature: Article List
   so that I can click on them and navigate to a specific article.
 
   Background:
-    Given I am logged in to the system
+    Given I am logged in to the system so I can test the articles list page
     And I am on Home page
     And I select the Global feed
 

apps/conduit-e2e/src/integration/article-list/article-list.ts → apps/conduit-e2e/src/e2e/article-list/article-list.ts

@@ -1,4 +1,4 @@
-import { Given, When, And, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 import { generateRandomString } from '../../support/generate-random-string';
 
 let userId = '';
@@ -7,15 +7,15 @@ beforeEach(() => {
   userId = generateRandomString();
 });
 
-Given('I am logged in to the system', () => {
+Given('I am logged in to the system so I can test the articles list page', () => {
   cy.loginApi(userId);
 });
 
-And('I am on Home page', () => {
+When('I am on Home page', () => {
   cy.visit('/');
 });
 
-And('I select the Global feed', () => {
+When('I select the Global feed', () => {
   cy.getByE2eId('global-feed').click();
 });
 

apps/conduit-e2e/src/integration/login.feature → apps/conduit-e2e/src/e2e/login/login.feature

@@ -7,12 +7,12 @@ Feature: Login
     Background: 
         Given I am registered user
         And I open Login page
-        When I input a correct username
+        When I input a correct email
 
     Scenario: Valid login    
         And I input a correct password
         And I click Login button
-        Then my information is displayed in the header
+        Then my information is displayed in the header after a successful login
 
     Scenario: Invalid login
         And I input incorrect password

apps/conduit-e2e/src/integration/login/login.ts → apps/conduit-e2e/src/e2e/login/login.ts

@@ -1,4 +1,4 @@
-import { Given, When, And, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 import { generateRandomString } from '../../support/generate-random-string';
 
 let userId = '';
@@ -11,31 +11,27 @@ Given('I am registered user', () => {
   cy.registerUserApi(userId);
 });
 
-And('I open Login page', () => {
+When('I open Login page', () => {
   cy.visit('/login');
 });
 
-When('I input a correct username', () => {
-  cy.get("[placeholder='Username']").clear().type(`${userId}@example.com`);
+When('I input a correct email', () => {
+  cy.get("[placeholder='Email']").clear().type(`${userId}@example.com`);
 });
 
-And('I input a correct password', () => {
+When('I input a correct password', () => {
   cy.get("[placeholder='Password']").clear().type(userId).blur();
 });
 
-And('I click Login button', () => {
-  cy.getByE2eId('sign-in').click();
-});
-
-Then('my information is displayed in the header', () => {
-  cy.getByE2eId('logedin-user').should('contain', userId);
+Then('my information is displayed in the header after a successful login', () => {
+  cy.getByE2eId('loggedin-user').should('contain', userId);
 });
 
-And('I input incorrect password', () => {
+When('I input incorrect password', () => {
   cy.get("[placeholder='Password']").clear().type('111111111').blur();
 });
 
-And('I click Login button', () => {
+When('I click Login button', () => {
   cy.getByE2eId('sign-in').click();
 });
 

apps/conduit-e2e/src/integration/logout.feature → apps/conduit-e2e/src/e2e/logout/logout.feature

@@ -5,7 +5,7 @@ Feature: Logout
     so that no one else can use my account.
 
     Scenario: Successful logout
-        Given I am logged in to the system
-        And I open Settings page
+        Given I am logged in to the system so I can test the logout functionality
+        And I open Settings page where the logout button is located
         When I press on Logout button
         Then my credentials are not displayed in the header anymore

apps/conduit-e2e/src/integration/logout/logout.ts → apps/conduit-e2e/src/e2e/logout/logout.ts

@@ -1,4 +1,4 @@
-import { Given, When, Then, And } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 import { generateRandomString } from '../../support/generate-random-string';
 
 let userId = '';
@@ -7,11 +7,11 @@ beforeEach(() => {
   userId = generateRandomString();
 });
 
-Given('I am logged in to the system', () => {
+Given('I am logged in to the system so I can test the logout functionality', () => {
   cy.loginApi(userId);
 });
 
-And('I open Settings page', () => {
+When('I open Settings page where the logout button is located', () => {
   cy.visit('/settings');
 });
 
@@ -20,5 +20,5 @@ When('I press on Logout button', () => {
 });
 
 Then('my credentials are not displayed in the header anymore', () => {
-  cy.getByE2eId('logedin-user').should('not.exist');
+  cy.getByE2eId('loggedin-user').should('not.exist');
 });

apps/conduit-e2e/src/integration/new-article.feature → apps/conduit-e2e/src/e2e/new-article/new-article.feature

@@ -5,7 +5,7 @@ Feature: New article
     so that I can share it with the other users.
 
     Background:
-        Given I am logged in to the system 
+        Given I am logged in to the system  so I can test the new article functionality
         And I am on New Post page
         When I input the title of the article
         And I input the summary of the article

apps/conduit-e2e/src/integration/new-article/new-article.ts → apps/conduit-e2e/src/e2e/new-article/new-article.ts

@@ -1,4 +1,4 @@
-import { Given, When, And, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 import { generateRandomString } from '../../support/generate-random-string';
 
 let userId = '';
@@ -9,31 +9,31 @@ beforeEach(() => {
   articleTitle = generateRandomString();
 });
 
-Given('I am logged in to the system', () => {
+Given('I am logged in to the system  so I can test the new article functionality', () => {
   cy.loginApi(userId);
 });
 
-And('I am on New Post page', () => {
+When('I am on New Post page', () => {
   cy.visit('/editor');
 });
 
 When('I input the title of the article', () => {
   cy.get("[placeholder='Article Title']").clear().type(articleTitle);
 });
 
-And('I input the summary of the article', () => {
+When('I input the summary of the article', () => {
   cy.get('[placeholder="What\'s this article about?"]').clear().type('How to do automation testing');
 });
 
-And('I input the body of the article', () => {
+When('I input the body of the article', () => {
   cy.get("[placeholder='Write your article (in markdown)']").clear().type('Automation testing description');
 });
 
-And('I input tags of the article', () => {
+When('I input tags of the article', () => {
   cy.get("[placeholder='Enter Tags']").clear().type('testing').blur();
 });
 
-And('I click Publish button', () => {
+When('I click Publish button', () => {
   cy.contains('Publish Article').click();
 });
 
@@ -44,7 +44,7 @@ Then('a new article is published', () => {
 Then('the new article is displayed in My Articles section', () => {
   cy.getByE2eId('article-title').should('have.text', articleTitle); // wait for the article to be created, before continue with the rest of the steps
 
-  cy.getByE2eId('logedin-user').click();
+  cy.getByE2eId('loggedin-user').click();
   cy.getByE2eId('article-list-title').should('have.text', articleTitle);
 });
 

apps/conduit-e2e/src/integration/register/register.ts → apps/conduit-e2e/src/e2e/register/register.ts

@@ -1,4 +1,4 @@
-import { Given, When, And, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 import { generateRandomString } from '../../support/generate-random-string';
 
 let userId = '';
@@ -15,35 +15,31 @@ When('I input correct username', () => {
   cy.get("[placeholder='Username']").clear().type(userId);
 });
 
-And('I input correct email', () => {
+When('I input correct email', () => {
   cy.get("[placeholder='Email']").clear().type(`${userId}@example.com`);
 });
 
-And('I input correct password', () => {
+When('I input correct password', () => {
   cy.get("[placeholder='Password']").clear().type(userId).blur();
 });
 
-And('I click Sign up button', () => {
+When('I click Sign up button', () => {
   cy.getByE2eId('sign-up').click();
 });
 
 Then('my information is displayed in the header', () => {
-  cy.getByE2eId('logedin-user').should('contain', userId);
+  cy.getByE2eId('loggedin-user').should('contain', userId);
 });
 
 When('I input username that already exists', () => {
   cy.registerUserApi(userId);
   cy.get("[placeholder='Username']").clear().type(userId);
 });
 
-And('I input email that already exists', () => {
+When('I input email that already exists', () => {
   cy.get("[placeholder='Email']").clear().type(`${userId}@example.com`).blur();
 });
 
-And('I click Sign up button', () => {
-  cy.getByE2eId('sign-up').click();
-});
-
 Then(`an error message {string} is displayed`, (error: string) => {
   cy.getByE2eId('error').should('contain', error);
 });

apps/conduit-e2e/src/integration/settings.feature → apps/conduit-e2e/src/e2e/settings/settings.feature

@@ -4,7 +4,7 @@ Feature: Settings
     I want to be able to update my account settings.
 
     Background:
-        Given I am logged in to the system
+        Given I am logged in to the system so I can test the settings functionality
         And I open Settings page
         And I wait for current username to appear
 

apps/conduit-e2e/src/integration/settings/settings.ts → apps/conduit-e2e/src/e2e/settings/settings.ts

@@ -1,4 +1,4 @@
-import { Given, When, And, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 import { generateRandomString } from '../../support/generate-random-string';
 
 let userId = '';
@@ -11,27 +11,27 @@ beforeEach(() => {
   bio = generateRandomString();
 });
 
-Given('I am logged in to the system', () => {
+Given('I am logged in to the system so I can test the settings functionality', () => {
   cy.loginApi(userId);
 });
 
-And('I open Settings page', () => {
+When('I open Settings page', () => {
   cy.visit('/settings');
 });
 
-And('I wait for current username to appear', () => {
+When('I wait for current username to appear', () => {
   cy.get("[placeholder='Your Name']").should('have.value', userId);
 });
 
 When('I input new username', () => {
   cy.get("[placeholder='Your Name']").clear().type(newUserId);
 });
 
-And('I input new bio', () => {
+When('I input new bio', () => {
   cy.get("[placeholder='Short bio about you']").clear().type(bio);
 });
 
-And('I click Update Settings button', () => {
+When('I click Update Settings button', () => {
   cy.contains('button', 'Update Settings').click();
 });
 
@@ -40,11 +40,7 @@ Then('I am redirected to profile', () => {
 });
 
 Then('my new username is displayed in the header', () => {
-  cy.getByE2eId('logedin-user').should('contain', newUserId);
-});
-
-Then('I open Settings page', () => {
-  cy.visit('/settings');
+  cy.getByE2eId('loggedin-user').should('contain', newUserId);
 });
 
 Then('I see new username', () => {

apps/conduit-e2e/tsconfig.e2e.json

@@ -4,5 +4,5 @@
     "sourceMap": false,
     "outDir": "../../dist/out-tsc"
   },
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts", "cypress.config.ts"]
 }